Jquery选择器分类

今天总结一下jquery中的常用的选择器，方便以后使用。



1.基本选择器

.class：根据类名匹配元素,如$(".demo")

#id:根据id匹配元素,如$("#id")

element：根据标签名匹配元素,如$("div")

*：匹配所有元素,如$("*")

selector1,selector2，......selectorN：将每一个选择器匹配到的元素合并到一起,如$("div, .demo,p,#id")

2.层次选择器

$("selector1 selector2")：选取selector1元素里所有的selector2（后代）元素，如$(".demo div")

$("parent > child")：选取parent元素的子元素child，如$("div > span")

$("pre + next")：选取紧接在pre元素后面的next元素，如$("#id + div")

$("pre ~ siblings")：选取pre元素后面兄弟所有siblings元素，如$(".demo ~ div")

3.过滤选择器

3.1基本过滤选择器

:first，选取第一个元素，如$("div:first")

:last，选取最后一个元素，如$("div:last")

:not(selector)，去除所有与给定选择器匹配的元素，如$("div:not(.demo)")

:even，选择索引是偶数的元素，如$("div:even")

:odd，选择索引是基数的元素，如$("div:odd")

:eq(index)，选择索引等于index的元素，如$("div:eq(1)")

:gt(index)，选择索引大于index的元素，如$("div:gt(1)")

:lt(index)，选择索引小于index的元素，如$("div:lt(3)")

:header，选取所有的标题元素h1,h2,h3等，如$(":header")

:animate，选取正在执行动画的元素，如$(":animate")

3.2内容过滤选择器

:contains(text)，选择内容包含text文本的元素，如$("div:contains('hellow world')")

:empty，选择不包含子元素或者文本元素的空元素，如$("div:empty")

:has(selector)，选择含有选择器所匹配的元素的元素，如$("div:has(p)")

:parent，选择含有子元素或文本元素的元素，如$("div:parent")

3.3可见性过滤选择器

:hidden，选择所有不可见的元素包括<input type='hidden'>， display:none,visibility:hidden，如$("input:hidden")

:visible，选择所有可见的元素，如$("div:visible")

3.4属性过滤选择器

[attribute]，选择拥有此attribute属性的元素，如$("div[id]")

[attribute=value]，选择属性attribute等于value的元素，如$("input[type=button]")

[attribute!=value]，选择属性attribute不等于value的元素，如$("input[type!=button]")

[attribute^=value]，选择属性attribute以value开始的元素，如$("input[value^=点击]")

[attribute$=value]，选择属性attribute以value结束的元素，如$("input[value$=点击]")

[attribute*=value]，选择属性attribute包含value的元素，如$("input[type*=submit]")

[attribute1=value1][attribute2=value2]，选择多个属性同时满足条件的元素，如$("input[type=button][value=点击]")

3.5子元素过滤器
:nth-child(index/even/odd)，选择每个父元素下的第index(index从1开始)个子元素或者奇偶元素。:eq(index)只能匹配一个元素，而:nth-child将为每一个父元素匹配子元素，相当于为每个父元素分组，再从每个组里选择第index个子元素，以下几种子元素过滤器规则类似。并且eq(index)索引从0开始，而nth-child索引从1开始。如$("ul
li:nth-child(2)")
:first-child，选择每个父元素下的第一个子元素，如$("ul li:first-child")
:last-child，选择每个父元素下的最后一个子元素，如$("ul li:last-child")

:only-child，选择每个父元素下只有一个子元素的子元素，如$("ul li:only-child")

关于选择器就总结到这里。