jQuery提供了多种选择器方式来选中要操作的DOM元素。
1.基本CSS选择器
基本CSS选择器可以通过dom元素的id,所包含的css class类名,以及标签类别进行筛选,如下实例:
a 选中所有的连接元素
#specialId 选中id为specialId的元素
.classID 选中拥有class类别为classID的元素
a#specialID.classID 选中id为specialID,具有css类别为classID的链接元素
p a.classID 选中css类别名为classID且声明于p元素之内的链接元素
2.子选择器、容器选择器和特性选择器
父节点与子节点之间以 “>” 分隔开,如 “p > a”标识选中p节点的直接子节点的连接元素。
特性选择器,可以通过元素属性值的特性来匹配。如下:
a[href^=http://] 标识匹配url地址是以 http://开头的地址的连接元素
a[href$=.pdf] 标识匹配url地址以.pdf结尾的地址的链接元素
a[href*=jquery.com] 标识url地址任何位置中可以匹配jquery.com的地址的链接元素
form[method] 标识有显示method属性的form元素
input[type=text] 标识type属性为text的所有input元素(文本输入框)
容器选择器。可以通过容器师傅哦包含某元素来筛选容器元素,如下:
li:has(a) 匹配所有包含了a元素的li元素
jQuery只支持一层嵌套的容器选择器。如foo.not(bar:has(baz))
二、通过位置选择
通过元素在页面的位置进行选择,如下;
li:first 第一个li元素(每个ul元素的第一个li元素,下同)
li:last 最后一个li元素
td:first-child tr中的第一个表项(即第一个td)
td:last-child tr中的最后一个表项
td:nth-child(n) 指定的第n个表项,n从1开始
td:nth-child(even|odd) 取奇数项后者偶数项