jquery选择器之属性过滤选择器详解


jQuery中的属性过滤选择器允许你根据元素的属性及其值来选取元素。这些选择器在处理具有特定属性或属性值的DOM元素时非常有用。以下是一些常用的属性过滤选择器的详解:

1. **`[attribute]`**

- 选择具有指定属性的元素。

- 示例:`$('div[title]')` 选取所有具有`title`属性的`div`元素。

2. **`[attribute=value]`**

- 选择具有指定属性且属性值等于特定值的元素。

- 示例:`$('input[type="text"]')` 选取所有`type`属性值为`text`的`input`元素。

3. **`[attribute!=value]`**

- 选择具有指定属性但属性值不等于特定值的元素。

- 示例:`$('input[type!="checkbox"]')` 选取所有`type`属性值不是`checkbox`的`input`元素。

4. **`[attribute^=value]`**

- 选择具有指定属性且属性值以特定值开头的元素。

- 示例:`$('a[href^="https"]')` 选取所有`href`属性值以`https`开头的`a`元素。

5. **`[attribute$=value]`**

- 选择具有指定属性且属性值以特定值结尾的元素。

- 示例:`$('img[src$=".png"]')` 选取所有`src`属性值以`.png`结尾的`img`元素。

6. **`[attribute*=value]`**

- 选择具有指定属性且属性值中包含特定值的元素。

- 示例:`$('div[class*="test"]')` 选取所有`class`属性值中包含`test`的`div`元素。

7. **`[attribute|=value]`**

- 选择具有指定属性且属性值等于给定字符串或以该字符串后跟连字符(-)开头的元素。这主要用于处理语言属性,如`lang`。

- 示例:`$('input[lang|="en"]')` 选取所有`lang`属性值为`en`或以`en-`开头的`input`元素。

8. **`[attribute~=value]`**

- 选择具有指定属性且属性值是一个用空格分隔的字符串,其中一个值正好等于特定值的元素。

- 示例:`$('div[rel~="nofollow"]')` 选取所有`rel`属性值中包含`nofollow`(且`nofollow`前后有空格)的`div`元素。

使用这些选择器时,你可以将它们组合起来,以构建更复杂的选择器表达式,从而精确地选取你需要的DOM元素。jQuery的灵活性使得这些选择器的使用变得非常强大和高效。