什么是选择器
就是选中到我们的dom节点 或者说 选中我们页面中的元素的工具 不管是你的css选择器也好 还是jq选择器也好 都是为了选中我们页面中的元素
标签选择器:$("p")选中所有的p标签
id选择器: $("#text")选中id是test的标签
类选择器: $(".test")选中类名是test的标签
交集选择器: $("p.test")选中的就是类名为test的p标签
分组选择器: $("h1,h2,h3")选中的是我们所有的h1,h2,h3标签
后代选择器: $(".test p")选中的是我们类名为test的内容中的p标签
通配符选择器:$("*")选中我们页面上所有标签
儿子选择器: $(".test>p")选中的是我们类名为test的儿子p标签
兄弟选择器: $(".test+h1")选中的是我们类名为test的后面一个兄弟h1 如果后面的兄弟不是h1 那么他就不起作用
N兄弟选择器:$(".test~p")选中的是我们类名为test的后面的所有的p标签
子元素过滤选择器
$(" :root") 选中根标签 也就是html标签
$(" :nth-child(2)") 选中每家的第二个孩子 不论是男孩还是女孩
$(" :first-child") 选中每家的第一个孩子 不论男孩还是女孩 和:nth-child(1)一样
$(" :last-child") 选中每一家的最后一个孩子
$(" :nth-last-child(2)") 这表示选中倒数第二个孩子
$(" :only-child") 选中每家的独生子女
$(" :nth-child(2n)") 和 $(":nth-child(even)") 一样 选中每家排行偶数的孩子 从1开始算
$(" :nth-child(2n+1)") 和 $(":nth-child(odd)") 一样 选中每家排行奇数的孩子 从1开始算
$(":nth-of-type(2)") 针对的是同类型的标签 选中每家第二个儿子
$(" :last-of-type") 选中某一个类型标签的最后一个
$(":nth-last-of-type(2)") 选中的就是某一类标签的倒数第二个
$(" :only-of-type") 选中每家唯一的儿子
$(" :nth-of-type(2n-1)") 和$(":nth-of-type(odd") )是一样的 表示选中每家排行为奇数的儿子或者女儿 索引从1开始
$(" :nth-of-type(2n)") 和$(":nth-of-type(even)") 是一样的 表示选中每家排行为偶数的儿子或者女儿
基础选择过滤器
$(" li:eq(0)") 表示选中第一个li eq里面加的是 索引 默认是0开始
$("li:first")表示选中第一个li
$(" li:last") 表示选中最后一个li
$("li:even") 表示选中偶数个的li 注意:我们这里起使坐标是0
$(" li:odd") 表示选中奇数个的li
$("li:gt(2)")表示索引大于2的
$(" li:lt(2)")表示索引小于2的
$(" :header ")表示选中所有的标题标题标签
$(" li:not(:eq(1)) ")选中除了第二个li(索引为1的li)之外的所有li
属性选择器
$(" h1[title]") 选中具有title这个属性的h1标签
$(" h1[title=world]")选中title属性值为world的标签
$(" h1[title!=world]") 选中title属性值不为world的标签
$(" h1[title^=hello]") 选中title属性值以hello开头的
$(" h1[title$=hello]") 选中title属性值以jq结尾的
$("h1[title*=wangcai]")选中title属性值有wangh1[title][id]这表示选中既有title属性的 又有id属性的
内容过滤选择器
$("li:contains(Jquery)")选中内容包含Jquery的li
$(" li:has(a)") 这表示 内容有a标签的
$(" li:empty") 这是选中内容为空的li标签
$(" li:not(:empty)") 这是选中内容不为空的li标签
$(" li:parent") 这是匹配子元素或者文本元素的