4.属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。属性过滤选择器的介绍说明如下表所示。
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
[attribute] | 选取拥有此属性的元素 | 集合元素 | $("div[id]")选取拥有属性id的元素 |
[attribute=value] | 选取属性的值为value的元素 | 集合元素 | $("div[title=test]")选取属性title为"test"的<div>元素 |
[attribute!=value] | 选取属性的值不等于value的元素 | 集合元素 | $("div[title!=test]")选取属性title不等于"test"的<div>元素(注意:没有属性title的<div>元素也会被选取) |
[attribute^=value] | 选取属性的值以value开始的元素 | 集合元素 | $("div[title^=test]")选取属性title以"test"开始的<div>元素 |
[attribute$=value] | 选取属性的值以value结束的元素 | 集合元素 | $("div[title$=test]")选取属性title以"test"结束的<div>元素 |
[attribute*=value] | 选取属性的值含有value的元素 | 集合元素 | $("div[title*=test]")选取属性title含有"test"的<div>元素 |
[selector][selector2] [selectorN] | 用属性选择器合并成一个复合属性选择器,满足多个条件。每选择一次,缩小一次范围 | 集合元素 | $("div[id][title$='test']")选取拥有属性id,并且属性title以“test”结束的<div>元素 |
接下来使用属性过滤选择器来对<div>和<span>等元素进行操作,示例如下表所示。
功 能 | 代 码 |
---|---|
改变含有属性title的<div>元素的背景色 | $('div[title]').css("background", "#bbffaa") |
改变属性title值等于“test”的<div>元素的背景色 | $('div[title=test]').css("background", "#bbffaa") |
改变属性title值不等于“test”的<div>元素的背景色 | $('div[title!=test]').css("background", "#bbffaa") |
改变属性title值以“te”开始的<div>元素的背景色 | $('div[title^=te]').css("background", "#bbffaa") |
改变属性title值以“est”结束的<div>元素的背景色 | $('div[title$=est]').css("background", "#bbffaa") |
改变属性title值含有“es”的<div>元素的背景色 | $('div[title*=es]').css("background", "#bbffaa") |
改变含有属性id,并且属性title值 含有“es”的<div>元素的背景色 | $('div[id][title*=es]').css("background", "#bbffaa") |
5.子元素过滤选择器
子元素过滤选择器的过滤规则相对于其它的选择器稍微有些复杂,不过没关系,只要将元素的父元素和子元素区分清楚,那么使用起来也非常简单。另外还要注意它与普通的过滤选择器的区别。
子元素过滤选择器的介绍说明如下表所示。
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:nth-child (index/even/ odd/equation) | 选取每个父元素下的第index个子元素或者奇偶元素,(index从1算起) | 集合元素 | :eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child(index)的index是从1开始的,而:eq(index)是从0算起的 |
:first-child | 选取每个父元素的第1个子元素 | 集合元素 | first只返回单个元素,而:first-child选择符将为每个父元素匹配第1个子元素。 例如$("ul li:first-child");选取每个<ul>中第1个<li>元素 |
:last-child | 选取每个父元素的最后一个子元素 | 集合元素 | 同样,:last只返回单个元素,而:last-child选择符将为每个父元素匹配最后一个子元素。 例如$("ul li:first-child");选择每个<ul>中最后一个<li>元素 |
:only-child | 如果某个元素是它父元素中惟一的子元素,那么将会被匹配。如果父元素中含有其他元素,则不会被匹配 | 集合元素 | $("ul li:only-child")在<uI>中选取是惟一子元素的<li>元素 |
:nth-child()选择器是很常用的子元素过滤选择器,详细功能如下。
(1) :nth-child(even)能选取每个父元素下的索引值是偶数的元素。
(2) :nth-child(odd)能选取每个父元素下的索引值是奇数的元素。
(3) :nth-child(2)能选取每个父元素下的索引值等于2的元素。
(4) :nth-child(3n)能选取每个父元下的索引值是3的倍数的元素。(n从0开始)
(5) :nth-child(3n+1)能选取每个父元素下的索引值是(3n+1)的元素。(n从0开始)
接下来利用刚才所讲的选择器来改变<div>元素的背景色,示例如下表所示。
功 能 | 代 码 |
---|---|
改变每个class为one的<div>父元素下的第2个子元素的背景色 | $('div.one :nth-child(2)').css("background", "#bbffaa") |
改变每个class为one的<div>父元素下的第1个子元素的背景色 | $('div.one :first-child').css("background", "#bbffaa") |
改变每个class为one的<div>父元素下的最后一个了元素的背景色 | $('div.one :last-child').css("background", "#bbffaa") |
如果class为one的<div>父元素下只有一个子元素,那么则改变这个子元素的背景色 | $('div.one :only-child').css("background", "#bbffaa") |
注意:eq(index)只匹配一个元素,而:nth- child将为每一个符合条件的父元素匹配子元素。同时应该注意到nth-child(index)的index是从1开始的,而:eq(index)是 从0开始的。同理 :first和:first-child,:last和:last-child也类似。
6.表单对象属性过滤选择器
此选择器主要是对所选择的表单元素进行过滤,例比如选择被选中的下拉框,多选框等等。表单对象属性过滤选择器的介绍说明如下表所示。
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:enabled | 选取所有可用元素 | 集合元素 | $("#form1 :enabled");选取id为“form1”的表单内的所有可用元素 |
:disabled | 选取所有不可用元素 | 集合元素 | $("#form2 :disabled");选取id为“form2”的表单内的所有不可用元素 |
:checked | 选取所有被选中的元素(单选框,复选框) | 集合元素 | $("input :checked");选取所有被选中的<input>元素 |
:selected | 选取所有被选中的选项元素(下拉列表) | 集合元素 | $("select :selected");选取所有被选中的选项元素 |
为了演示这些选择器,需要制作一个包含表单的网页,里面要包含文本框、多选框和下拉列表,HTML代码如下:
- <form id="form1" action="#">
- 可用元素:<input name="add" value="可用文本框"/> <br/>
- 不可用元素:<input name="email" disabled="disabled" value="不可用文本框"/><br/>
- 可用元素: <input name="che" value="可用文本框" /><br/>
- 不可用元素:<input name="name" disabled="disabled" value="不可用文本框"/><br/>
- <br/>
- 多选框:<br/>
- <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
- <input type="checkbox" name="newsletter" value="test2" />test2
- <input type="checkbox" name="newsletter" value="test3" />test3
- <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
- <input type="checkbox" name="newsletter" value="test5" />test5
- <div></div>
- <br/><br/>
- 下拉列表1:<br/>
- select name="test" multiple="multiple" style="height:100px">
- <option>浙江</option>
- <option selected="selected">湖南</option>
- <option>北京</option>
- <option selected="selected">天津</option>
- <option>广州</option>
- <option>湖北</option>
- </select>
- <br/><br/>
- 下拉列表2:<br/>
- <select name="test2" >
- <option>浙江</option>
- <option>湖南</option>
- <option selected="selected">北京</option>
- <option>天津</option>
- <option>广州</option>
- <option>湖北</option>
- </select>
- br/><br/>
- <div></div>
- </form>
图2 初始状态
现在用jQuery的表单过滤选择器来操作它们,示例如下表所示。
功 能 | 代 码 |
---|---|
改变表单内可用<input>元素的值 | $("#form1 input:enabled").val("这里变化了!"); |
改变表单内不可用<input>元素的值 | $("#form1 input:disabled").val("这里变化了!"); |
获取多选框选中的个数 | $("#input :checked").length; |
获取下拉框选中的内容 | $("select :selected").text(); |