jQuery为我们提供了强大的获取DOM元素的方式能为我们简化在DOM中选择元素的任务,例如CSS选择符、自定义选择符,通过使用这些选择符让我们在DOM中快捷而轻松地获取元素或元素集合,并且我们应该知道:方法连缀到$()工厂函数后面时,包装在jQuery对象中的元素会被自动、隐式地循环遍历。
1.CSS选择符基本的选择符包括:标签名、ID和类,下面是它们在CSS和jQuery的表示方式:
<1.1>子元素组合符(<)语法:parent > child
作用:在给定的父元素下匹配所有的子元素
示例:
).addClass();
作用是:使ID为:"selected-plays"元素下的所有子元素(不包括子元素的子元素)的li标签增加一个名为:"horizontal"的Class。
<1.2>否定式伪类选择符<:not(selector)>语法::not(selector)
作用:去除所有与给定选择器匹配的元素
示例:
).addClass();
作用是:ID为:"selected-plays"元素下的所有没有应用“.horizontal” Class的子元素(包括子元素的子元素)的li标签增加一个名为:"sub-level"的Class。
<1.3>属性选择符属性选择符是CSS选择符中特别有用的一类选择符。顾名思义,属性选择符通过HTML元素的属性选择元素,例如链接的title属性或图像的alt属性。
语法:
[attribute]————匹配包含给定属性的元素。
[attribute=value]————匹配给定的属性是某个特定值的元素
[attribute!=value]————匹配所有不含有指定的属性,或者属性不等于特定值的元素。
[attribute^=value]————匹配给定的属性是以某些值开始的元素
[attribute$=value]————匹配给定的属性是以某些值结束的元素
[attribute*=value]————匹配给定的属性是以包含某些值的元素
例如,要选择带有alt属性的所有图像元素,可以使用以下代码:
)
再例如,要为所有电子邮件链接添加类,使用下面的代码:
).addClass();
2.自定义选择符除了以上的CSS选择符之外,jQuery还添加了独有的完全不同的自定义选择符。这些自定义选择符进一步增强了已经十分强大的CSS选择符,为我们提供了在页面上选择元素的新手段。
提示:自定义选择符的效率没有浏览器原生的DOM选择符引擎效率高。
自定义选择符通常跟在一个CSS选择符后面,基于已经选择的元素集的位置来查找元素。自定义选择符的语法与CSS中的伪类选择符语法相同,即选择符以冒号(:)开头。
语法:
:eq(index) index从0开始计数
作用:匹配一个给定索引值的元素
示例:
)
作用是:查找第二行
<2.2> :nth-child语法:
:nth-child(index) index从1开始计数(可以使用odd和even)
作用:匹配其父元素下的第N个子或奇偶元素
示例:
HTML代码
View Code
1 <ul> 2 <li>John</li> 3 <li>Karl</li> 4 <li>Brandon</li> 5 </ul> 6 <ul> 7 <li>Glen</li> 8 <li>Tane</li> 9 <li>Ralph</li> 10 </ul>
jQuery代码:
)
结果:
1 [ <li>Karl</li>, <li>Tane</li> ]
<2.3> :odd和:even语法:
:odd —— 匹配所有索引值为奇数的元素,从 0 开始计数
:even —— 匹配所有索引值为偶数的元素,从 0 开始计数
示例:
HTML代码:
1 <table> 2 <tr><td>Header 1</td></tr> 3 <tr><td>Value 1</td></tr> 4 <tr><td>Value 2</td></tr> 5 </table>
jQuery代码:
)
结果:
1 [ <tr><td>Value 1</td></tr> ]
<2.4> :contains(text)语法:
:contains(text) text:一个用以查找的字符串,选择符区分大小写。
示例:
HTML代码:
1 <div>John Resig</div> 2 <div>George Martin</div> 3 <div>Malcom John Sinclair</div> 4 <div>J. Ohn</div>
jQuery代码:
)
结果:
[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]
<2.5>基于表单的选择符自定义选择符并不局限于基于元素的位置选择元素。比如,在操作表单时,jQuery的自定义选择符以及后来补充的CSS3选择符同样可以简化选择元素的任务。
下面是适用于表单的选择符:
选 择 符 匹 配
:input 输入字段、文本区、选择列表和按钮元素
:button 按钮元素或type属性值为button的输入元素
:enabled 启用的表单元素
:disabled 禁用的表单元素
:checked 勾选的单选按钮或复选框
:selected 选择的选项元素
我们可以通过组合使用表单选择符,可以拥有更强大的表达能力:
)//可以选择所有选中的单选按钮
)//选择所有密码输入字段和禁用的文本输入字段。
3.DOM遍历(筛选)方法