jQuery选择器

jQuery的选择器可参考css进行理解

1.基本选择器，根据id、class和标签名

$('*')：对所有内容生效

$('#id')：根据id进行选择

$('.class')：根据class进行选择

$('tagName')：根据html标签进行选择

$('.class,tagName,...')：同时选取多个，用逗号隔开

2.层级选择器

$('选择器1 选择器2')：选择器1的所有下属选择器2

$('选择器1>选择器2')：选择器1的直接下属选择器2

$('选择器1+选择器2')：选择器1后面的相邻兄弟选择器2

$('选择器1~选择器2')：选择器1后面的所有兄弟选择器2

3.过滤筛选器，以列表为例

$('li:first')：列表标签的第一个标签，也可写为$('li').first()

$('li:last')：列表标签的最后一个标签，也可写为$('li').last()

$('li:eq(n)')：列表标签的索引为n标签，索引从0开始，也可写为$('li').eq(n)

$('li:even')：列表标签的索引值为偶数的标签，即奇数行

$('li:odd')：列表标签的索引值为奇数的标签，即偶数行

$('li').hasclass('test')：列表标签是否具有值为test的class

4.属性选择器，通过[属性名='属性值']

$("[属性名]")：选择具有该属性的元素

$("[属性名='属性值']")：选择具有该属性并且属性为指定值的元素

$("[属性名1='属性值1'][属性名2='属性值2']")：选择同时满足属性1和属性2的元素

5.表单选择器，只适用于input标签

$("[type='text']")：选择input类型为text的标签，实际是通过属性进行选择的，其他的还有$("[type='checkbox']")、$("[type='radio']")、$("[type='submit']")等

针对表单选择器，可直接简写为$(":text")、$(":checkbox")、$(":radio")、$(":submit")等

6.查找筛选器，以下举例说明

第一组：

$('.outer').children('p')：class为outer的直接下属子元素p

$('.outer').find('p')：class为outer的所有下属子元素p，同时寻找多个$('.outer').find('p,input')

第二组：

$('li').eq(2).next()：索引下标为2的下一个li标签

$('li').eq(2).nextAll()：索引下标为2的后续所有li标签

$('li').eq(2).nextUntil('#end')：索引下标为2之后、id为end之前(不包括)的所有li标签

第三组：

$('li').eq(2).prev()：索引下标为2的上一个li标签

$('li').eq(2).prevAll()：索引下标为2的前面所有li标签

$('li').eq(2).prevUntil('#end')：索引下标为2之前、id为end之后(不包括)的所有li标签

第四组：

$('#test').parent()：id为test的直接父标签

$('#test').parents()：id为test的所有父标签，会一直寻找到html文档的最外层html标签，不常用

$('#test').parentUntil('#end')：id为test的父标签，一致寻找到id为end(不包括)的父标签截止

 第五组，最常用

$('.outer').siblings()：寻找outer的所有兄弟元素