总的来说,选择器引擎规则就是: $('查询字符串')。
最常用最基本的就是:1、标签选择器(以文档元素作为选择符):$("div"); 2、id选择器(以ID作为选择符): $("#demo1"); 3、类选择器(以class作为选择符): $(".selected"); 4、群组选择器: $(".class1, .class2, .class3"); 5、后代选择器: $("p span")
多种规则的组合将是我们工作得得力助手,下面就举些例子:
一、层级选择器: 它是通过DOM的嵌套关系来进行元素匹配的
A、包含选择器:$("#contain div")——匹配id为contain的元素下的所有的div,就是在给定的祖先元素下匹配所有后代元素,不一定非要是子元素。
B、子选择器:$("#contain > .class1") ——匹配id为contain的元素所有有class1类的子元素,这在给定的父元素下匹配所有子元素,一定要是子元素,隔代就不行了。
C、相邻选择器:$(".contain + div") ——匹配所有.contain元素的下一个紧相连的.class1兄弟元素,相当于使用next。
D、兄弟选择器:$(".contain ~ div")——匹配.contain元素之后的所有同辈div元素,注意.contain元素之前的同辈元素不算。
二、通过伪类来进行过滤选择
(1)、特定位置选择器
:first——匹配找到的第1个元素,例如:$('li:first')
:last——匹配找到的最后一个元素,例如:$('li:last')
:eq——匹配一个给定索引值的元素,例如:$("tr:eq(1)")
(2)、指定范围选择器
:even——匹配所有索引值为偶数的元素,例如:$("tr:even")
:odd——匹配所有索引值为奇数的元素,例如:$("tr:odd")
:gt(index)——匹配所有大于给定索引值的元素,例如:$("tr:gt(0)")
:lt(index)——匹配所有小于给定索引值的元素,例如:$("tr:lt(2)")
(3)、排除选择器
:not——去除所有与给定选择器匹配的元素,例如:$("input:not(:checked)")
(4)、可见性过滤
:hidden——匹配所有不可见元素,或者type为hidden的元素,例如:$("input:hidden")
:visible——匹配所有的可见元素,例如:$("tr:visible")
(5)、内容过滤
:contains(text)——匹配包含给定文本的元素,例如查找所有包含 "John" 的 div 元素:$("div:contains('John')")(第一次见到,先备忘一下)
:empty——匹配所有不包含子元素或者文本的空元素,例如:$("td:empty")
:parent——匹配含有子元素或者文本的元素,例如:$("td:parent"),与前一个相对
:has(selector)——匹配含有选择器所匹配的元素的元素,是用于筛选的选择器,$("div:has(p)").addClass("test");给所有包含p元素的 div 元素添加一个text类
(6)、属性过滤
[attribute]——匹配包含给定属性的元素,例如:查找所有含有id属性的div元素 -> $("div[id]")
[attribute=value]——匹配给定的属性是某个特定值的元素,例如:查找所有name属性是newsletter的input元素 -> $("input[name='newsletter']"),用的蛮多的
[attribute!=value]——匹配所有不含有指定的属性,或者属性不等于特定值的元素。用法同上
[attribue^=value]——匹配给定的属性是以某些值开始的元素,感觉有点像正则匹配,$("input[name^='news']")
[attribue$=value]——匹配给定的属性是以某些值结尾的元素,用法同上
[attribute*=value]——匹配给定的属性是以包含某些值的元素,$("input[name*='man']"),
name="man-news"和
name="milkman"都能匹配
[selector1][selector2][selectorN]——复合属性选择器,需要同时满足多个条件时使用。$("input[id][name$='man']")
(7)、子选择器
:first-child——匹配第一个子元素,例如:$("ul li:first-child"),在每个ul中查找第一个li
:last-child——匹配最后一个子元素,用法同上
:nth-child()——匹配其父元素下的第N个子或奇偶元素,:nth-child从1开始的(:eq()是从0算起,例如:$("ul li:nth-child(2)"),在每个ul查找第2个li。
:nth-child(2)
:nth-child(even)
:nth-child(odd)
:nth-child(3n)
参考:1、
http://hemin.cn/jq/nthChild.html