jQuery-常用功能

by zhuzhenPosted on

脚本结构

(function ($,wp) {
    // DOM 加载完成后执行的代码
    $(function () {
        // 监听事件
        $('.quantity > .quantity-ctrl.add').click(function () {
            console.log("点击增加");
        });
    });
})(jQuery,wp)

这个结构主要有以下作用：

1：确保代码在安全的闭包环境中运行，防止变量泄漏。2：可以安全地使用 $ 来代替 jQuery。3：保证代码在 DOM 完全加载后才执行，避免出现操作未加载元素的错误。

其中：wp 是 WordPress 核心 JavaScript API 对象。借助传递这个参数，可以在函数内部访问 WordPress 的各种功能，像 AJAX、媒体上传等。

1：实际触发事件的 DOM 元素

e.target：指向实际触发事件的 DOM 元素（即用户点击或操作的元素）。

function (e) {
  console.log('事件类型:', e.type); // "woocommerce_update_variation_values"
  console.log('触发元素:', e.target);

打印如下图

网页如下图

2：找到<select>标签

select#pa_size 元素

var selectElement = jQuery(e.target).find('select#pa_size');

3：提取 option 的值

var optionValues = [];
selectElement.find('option').each(
    function () {
        if(jQuery(this).val()){
            optionValues.push(jQuery(this).val());
        }
    }
);

4：获取所有 ID 包含 “pa_size” 的 input 的值，并遍历元素

5：添加或删除class

6：查找最近上级div元素

jQuery(e.target).find('input[id*="pa_size"]').each(function() {
    var inputValue = jQuery(this).val();
    if(inputValue){
        inputValues.push(inputValue);
        if(optionValues.includes(inputValue)){
            jQuery(this).prop('disabled', false); // 匹配成功：启用选项
            jQuery(this).closest('div').removeClass('disabled');
        }else {
            jQuery(this).prop('disabled', true); // 匹配失败：禁用选项
            jQuery(this).closest('div').addClass('disabled');// 查找最近的上级 div 元素
        }
    }
});

7：设置DOM 元素本身的固有属性

prop() 主要针对的是 DOM 元素本身的固有属性 ，像 disabled、checked（用于复选框、单选框 ）、selected（用于下拉框选项 ）等

jQuery(this).prop('disabled', false); // 启用选项
jQuery(this).prop('disabled', true); //  禁用选项

8：.val() 是表单专用：获取 / 设置表单元素的值

主要用于获取表单元素（如 input、select、textarea）的 用户输入值 或 选中值。

<input type="text" id="username" value="John">
<select id="fruit">
  <option value="apple">苹果</option>
  <option value="banana" selected>香蕉</option>
</select>
<textarea id="message">你好</textarea>
$('#username').val(); // 返回: "John"（文本框当前值）
$('#fruit').val();    // 返回: "banana"（选中项的 value 属性）
$('#message').val();  // 返回: "你好"（文本域内容）

9：.text() 是文本专用：获取 / 设置普通元素的纯文本内容

用于获取任意元素（如 div、span、p）及其 所有子元素 的 纯文本内容（不包含 HTML 标签）。且会递归获取所有子元素的文本，并将其拼接为一个字符串。

<div id="greeting">
  <p>欢迎 <span>John</span>!</p>
</div>
$('#greeting').text(); // 返回: "欢迎 John!"（包含所有子元素的文本）

10：获取 HTML 结构：用 .html()

<input type="text" id="email" value="test@example.com">
<div id="description">产品 <b>特性</b></div>
$('#email').val();        // 返回: "test@example.com"
$('#description').text(); // 返回: "产品 特性"（纯文本）
$('#description').html(); // 返回: "产品 <b>特性</b>"（含 HTML）

11：$(‘.upload-color-gallery’) 和 $(parent).find(‘.upload-color-gallery’) 区别

全局选择 $(‘.class’)：需要遍历整个 DOM 树，深度越大性能越低。

限定范围 $(parent).find(‘.class’)：只需遍历 parent 的后代，性能更优。

如果页面中只有一个 upload-color-gallery 元素，且不在特定容器内：

<div class="upload-color-gallery">...</div>
// 直接选择，无需限定父元素
$('.upload-color-gallery').show();

当需要 限定选择范围 时，必须使用 find() 或类似方法（如 children()）：

如果页面存在多个 upload-color-gallery，但只需要操作某个容器内的：

<div id="main-product">
  <div class="upload-color-gallery">主产品图库</div>
</div>
<div id="related-products">
  <div class="upload-color-gallery">相关产品图库</div>
</div>
// 只选择 #main-product 内的图库
$('#main-product').find('.upload-color-gallery').hide();

12：.append() 和 .html()区别

.append(content)：在匹配元素的内部末尾添加内容。

// HTML: <div class="container"></div>
$('.container').append('<p>First</p>');
$('.container').append('<p>Second</p>');

// 结果:
// <div class="container">
//   <p>First</p>
//   <p>Second</p>
// </div>

.html(content)：覆盖原有内容：调用时会清空目标元素的现有内容。

// HTML: <div class="container"><p>Old</p></div>
$('.container').html('<p>New</p>');

// 结果:
// <div class="container">
//   <p>New</p>
// </div>

13：.replaceWith()

内容完全替换掉选中的元素，包括选择元素本身。

14：.prepend()

将指定的内容插入到目标元素内部的起始位置。

$("div.container").prepend("<p>这是新添加的段落</p>");
<div class="container">
  <div>原有的子元素</div>
</div>

执行后的结果

<div class="container">
  <p>这是新添加的段落</p>
  <div>原有的子元素</div>
</div>

15：.index()

返回该元素在同级元素中的索引位置（从 0 开始）

<div class="woocommerce-product-gallery">
  <div class="woocommerce-product-gallery__image"> <!-- 索引 0 -->
    <img src="image1.jpg">
  </div>
  <div class="woocommerce-product-gallery__image"> <!-- 索引 1 -->
    <img src="image2.jpg">
  </div>
  <div class="woocommerce-product-gallery__image"> <!-- 索引 2 -->
    <img src="image3.jpg">
  </div>
</div>

当用户点击第二张图片（image2.jpg）时，$(clicked).index() 返回 1。

16：:input 选择器

:input 选择器会匹配所有表单元素，包括 <input>、<select>、<textarea> 和 <button>

<button type="submit" class="button" name="update_cart" value="Update cart" disabled="">Update cart</button>

$(‘:input[name=”update_cart”]’) 来选择这个按钮，而 [name=”update_cart”] 则是一个属性选择器，用于筛选出 name 属性为 “update_cart” 的元素。

16：获取元素的内联样式（inline style） 字符串

<div class="box" style="width: 100px;"></div>
<style>.box { height: 50px; }</style>
console.log($('.box').attr('style')); // 输出："width: 100px;"（仅内联样式）
console.log($('.box').css('width'));  // 输出："100px"（内联样式）
console.log($('.box').css('height')); // 输出："50px"（计算后样式，来自CSS类）

$(this).attr(‘style’) → 用于获取内联样式的完整字符串。

$(this).css(‘属性名’) → 用于获取计算后的单个样式值（推荐用于获取具体样式）。