jQuery属性选择器轻松了解

范范

jQuery属性选择器，顾名思义，就是根据jQuery的各个属性进行页面元素的选择。常见的jQuery属性选择器，有如下几种：
1.  [attribute]  匹配包含给定属性的元素（如： 包含id、name、class等 ）
2.  [attribute=value]  匹配给定的属性是某个特定值的元素（如： 查找name=‘text’的元素 ）

3.  [attribute!=value]  匹配所有不含有指定的属性，或者属性不等于特定值的元素。（如：查找name !=‘text’的元素 ）

4.  [attribute^=value]  匹配给定的属性是以某些值开始的元素（如：查找 name 以btn_开头的元素 ）

5.  [attribute$=value]  匹配给定的属性是以某些值结尾的元素（如： 查找 name 以news结束的元素 ）

6.  [attribute*=value]  匹配给定的属性是以包含某些值的元素（如： 查找 name 包含news的元素 ）

7.  [attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用。（ 如： 查找所有input元素中，name=‘text’的元素 ）


从上面可以看到，属性选择器，主要就是根据各个属性，不同的内容，获取不同的元素列表。
在日常的开发中，经常使用的，查找所有的，name=固定值的所有元素，然后进行相应操作。


1.  [attribute] 匹配包含给定属性的元素
详细解析如下：
html代码：

[HTML] 纯文本查看 复制代码

<div>
  <p>Hello!</p>
</div>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div name="test4"></div>

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("div[id]")

输出结果：

[JavaScript] 纯文本查看 复制代码

[ <div id="test1"></div>,  <div id="test2"></div>,  <div id="test3"></div> ]

从上面可以看到，此处获取的是，所有包含id属性的div元素
从html中可以看到， 总共有5个div，其中3个div包含id属性，1个div包含name属性， 还有一个div不包含任何属性   故输出结果中，有3个输出


2.  [attribute=value] 匹配给定的属性是某个特定值的元素（如： 查找name=‘text’的元素 ）
   点击查看详细解析

3.  [attribute!=value]  匹配所有不含有指定的属性，或者属性不等于特定值的元素。（如：查找name !=‘text’的元素 ）
   点击查看详细解析


4.  [attribute^=value]  匹配给定的属性是以某些值开始的元素（如：查找 name 以btn_开头的元素 ）
   点击查看详细解析


5.  [attribute$=value]  匹配给定的属性是以某些值结尾的元素（如： 查找 name 以news结束的元素 ）
   点击查看详细解析


6.  [attribute*=value]  匹配给定的属性是以包含某些值的元素（如： 查找 name 包含news的元素 ）
   点击查看详细解析


7.  [attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用。（ 如： 查找所有input元素中，name=‘text’的元素 ）
   点击查看详细解析

范范

2.  [attribute=value]  匹配给定的属性是某个特定值的元素
详细讲解如下：
实例如下： 查找所有 name 属性是 newsletter 的 input 元素

html代码：

[HTML] 纯文本查看 复制代码

<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("input[name='newsletter']").attr("checked", true);

输出结果：

[HTML] 纯文本查看 复制代码

[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]

范范

3.  [attribute!=value]  匹配所有不含有指定的属性，或者属性不等于特定值的元素


详细讲解实例如下：
   **** 查找所有 name 属性不是 newsletter 的 input 元素， 并给这些元素添加 checked=true的属性


html代码：

[HTML] 纯文本查看 复制代码

<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("input[name!='newsletter']").attr("checked", true);

输出结果：

[HTML] 纯文本查看 复制代码

[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]

范范

4.  [attribute^=value]  匹配给定的属性是以某些值开始的元素
详细代码讲解如下：
  **** 查找所有 name 以 'news' 开始的 input 元素


html代码：

[HTML] 纯文本查看 复制代码

<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("input[name^='news']")

输出结果：

[HTML] 纯文本查看 复制代码

[ <input name="newsletter" />, <input name="newsboy" /> ]

范范

5.  [attribute$=value]  匹配给定的属性是以某些值结尾的元素
详细实例代码如下：
  *** 查找所有 name 以 'letter' 结尾的 input 元素


html代码：

[HTML] 纯文本查看 复制代码

<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("input[name$='letter']")

输出结果：

[HTML] 纯文本查看 复制代码

[ <input name="newsletter" />, <input name="jobletter" /> ]

范范

6.  [attribute*=value]  匹配给定的属性是以包含某些值的元素


详细代码实例如下：
  *** 查找所有 name 包含 'man' 的 input 元素


html代码：

[HTML] 纯文本查看 复制代码

<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("input[name*='man']")

输出结果：

[HTML] 纯文本查看 复制代码

[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]

范范

7.  [attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用


详细实例代码如下：
   *** 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的

html代码：

[HTML] 纯文本查看 复制代码

<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("input[id][name$='man']")

输出结果：

[HTML] 纯文本查看 复制代码

[ <input id="letterman" name="new-letterman" /> ]

范范

以上就是所有的 属性选择器 实例详解，  其实属性选择器，就是根据 各个元素的各种属性，进行页面html元素的选择，查询等操作