jquery属性选择器

jQuery 属性选择器概述

jQuery 属性选择器允许通过 HTML 元素的属性或属性值进行筛选和操作。这些选择器基于 CSS 属性选择器的语法扩展，支持更灵活的匹配方式。

常用属性选择器语法

1. [attribute]
   选择所有具有指定属性的元素，无论属性值是什么。
   示例：$("[href]") 选中所有包含 href 属性的元素。

2. [attribute=value]
   选择属性值完全匹配指定值的元素。
   示例：$("[type='text']") 选中所有 type 属性为 text 的元素。

3. [attribute!=value]
   选择属性值不等于指定值的元素（jQuery 扩展语法）。
   示例：$("[type!='submit']") 排除 type 为 submit 的元素。

4. [attribute^=value]
   选择属性值以指定字符串开头的元素。
   示例：$("[href^='https']") 选中 href 以 https 开头的链接。

5. [attribute$=value]
   选择属性值以指定字符串结尾的元素。
   示例：$("[src$='.png']") 选中 src 以 .png 结尾的图片。

   

6. *`[attribute=value] 选择属性值包含指定字符串的元素。 示例：$("[class*='btn']")选中class包含btn` 的元素。

7. [attribute~=value]
   选择属性值包含指定单词（以空格分隔）的元素。
   示例：$("[class~='active']") 选中 class 包含独立单词 active 的元素。

8. [attribute|=value]
   选择属性值以指定字符串开头或以该字符串后跟连字符（-）开头的元素。
   示例：$("[lang|='en']") 匹配 lang 为 en 或 en-US 的元素。

   

组合使用示例

属性选择器可以与其他选择器组合，实现更精确的匹配：

// 选中所有包含 title 属性且 class 为 tooltip 的元素
$("[title].tooltip");

// 选中 type 为 checkbox 且 name 以 user 开头的 input 元素
$("input[type='checkbox'][name^='user']");

注意事项

• 性能优化：属性选择器通常比基本选择器（如 ID 或类选择器）慢，建议尽量缩小搜索范围。例如，优先使用 $("div[class='box']") 而非 $("[class='box']")。
• 动态属性：若属性是通过 JavaScript 动态添加的，需确保在 DOM 完全加载后操作（如使用 $(document).ready()）。
• 转义特殊字符：若属性值包含 [ ] , " ' 等字符，需用双反斜杠转义。例如：$("[name='foo\\[bar\\]']")。

实际应用场景

1. 表单操作
   快速定位特定类型的表单元素：

   // 禁用所有必填字段
   $("[required]").prop("disabled", true);

2. 动态样式控制
   根据属性值修改样式：

   // 为外部链接添加图标
   $("a[href^='http']:not([href*='mysite.com'])").addClass("external-link");

3. 数据属性处理
   利用 data-* 属性存储信息并选择：

   // 选中所有包含 data-user-id 属性的元素
   $("[data-user-id]").on("click", function() {
       const userId = $(this).data("userId");
       console.log(userId);
   });

通过灵活组合属性选择器，可以高效地实现复杂的 DOM 查询和操作。