JQuery选择器学习整理(基本选择器，层级选择器，伪类选择器，属性过滤，内容过滤，可见性过滤，范围选择器，排除选择器)

Posted 2020-09-03

　　总的来说，选择器引擎规则就是: $(‘查询字符串‘)。

　　最常用最基本的就是：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://www.cnblogs.com/xuxiuyu/p/5989278.html#3552284

　　　2、http://hemin.cn/jq/nthChild.html