苏飞论坛

标题: jQuery属性选择器轻松了解 [打印本页]

作者: 范范 时间: 2018-3-8 20:33
标题: 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’的元素）
点击查看详细解析

作者: 范范 时间: 2018-3-8 20:39
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" /> ]

作者: 范范 时间: 2018-3-8 20:43
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" /> ]

作者: 范范 时间: 2018-3-8 20:46
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" /> ]

作者: 范范 时间: 2018-3-8 20:48
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" /> ]

作者: 范范 时间: 2018-3-8 20:52
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" /> ]

作者: 范范 时间: 2018-3-8 20:55
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" /> ]

作者: 范范 时间: 2018-3-8 21:01
以上就是所有的属性选择器实例详解，其实属性选择器，就是根据各个元素的各种属性，进行页面html元素的选择，查询等操作

欢迎光临苏飞论坛 (http://www.sufeinet.com/)