jquery属性选择器

jQuery 属性选择器详解

jQuery 属性选择器允许根据元素的属性或属性值来选择元素。这些选择器非常灵活，可用于精确匹配或模糊匹配元素的属性。

基本属性选择器

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

[attribute=value]
选择指定属性等于特定值的元素。
示例：$("[href='https://example.com']") 选择 href 属性值为 https://example.com 的元素。

模糊匹配属性选择器

[attribute!=value]
选择指定属性不等于特定值的元素。
示例：$("[href!='https://example.com']") 选择 href 属性值不为 https://example.com 的元素。

[attribute^=value]
选择指定属性以特定值开头的元素。
示例：$("[href^='https']") 选择 href 属性以 https 开头的元素。

[attribute$=value]
选择指定属性以特定值结尾的元素。
示例：$("[href$='.pdf']") 选择 href 属性以 .pdf 结尾的元素。

[attribute*=value]
选择指定属性包含特定值的元素。
示例：$("[href*='example']") 选择 href 属性中包含 example 的元素。

复合属性选择器

[attribute1][attribute2]
选择同时满足多个属性条件的元素。
示例：$("[href][target='_blank']") 选择同时具有 href 属性且 target 为 _blank 的元素。

表单相关属性选择器

:input
选择所有 <input>, <textarea>, <select> 和 <button> 元素。
示例：$(":input")。

[type=value]
选择 type 属性为特定值的表单元素。
示例：$("[type='text']") 选择所有文本输入框。

代码示例

// 选择所有带有 title 属性的元素
$("[title]").css("border", "1px solid red");

// 选择所有 href 属性以 https 开头的链接
$("a[href^='https']").addClass("secure-link");

// 选择所有 type 为 checkbox 且 checked 属性为 true 的元素
$("input[type='checkbox'][checked]").prop("disabled", true);

注意事项

1. 属性选择器对大小写敏感，需确保匹配的值与实际属性值一致。
2. 对于动态生成的元素，需确保在 DOM 加载完成后使用选择器。
3. 复杂的属性选择器可能影响性能，建议结合其他选择器优化查询。

这些选择器可以灵活组合，满足各种 DOM 元素选择需求。