jquery选择器详解

@1.基础选择器

元素选择器：$("div,input")表示选中div,input的html元素；

id选择器：$("#big")表示选中html元素中id为big的元素,如果有多个id,只对一个id生效，因为id是唯一标示符;

类选择器：$(".big")表示选中html元素中class为big的元素；

通配符*选择器：$("*")表示匹配html中所有元素；

>或child匹配所有的子元素:$("div>span")或$("div").next("span")表示选中div下所有为span的子元素，注意，孙子元素或以下不匹配；

+或next匹配在后面的元素:$("div+span")表示选中div后面所有为span的元素；

~或prev匹配在后面的同级元素：$("div~span")表示选中div后面同级的span元素，子辈或以下的不匹配;

@2.过滤选择器

:first表示获取匹配的第一个元素：$("li:first")表示l匹配第一个list元素；

:last表示获取匹配的最后一个元素：$("li:last")表示匹配的最后一个list元素；

:not去除元素:$("div:not")表示匹配除了div之外的html元素；

:even匹配所有索引值为偶数的元素:$("div:even")表示匹配div下索引值为0,2,4...的元素；

:odd匹配所有索引值为奇数的元素：$("div:odd")表示匹配div下索引值为1,3,5...的元素；

:eq(index)匹配一个给定索引值的元素:$("div:eq(1)")表示匹配第二个div元素       因为索引值是从0开始的;

:gt(index)匹配所有大于给定索引值的元素：$("div:gt(2)")表示匹配第三个div元素后的所有div元素；

:lt(index)匹配所有小于给定索引值的元素：$("div:lt(2)")表示匹配第三个div元素前面的所有div元素；

:header匹配h1-h6之类的标题性元素：$(":header")表示匹配所有h1-h6的标题元素;

:animate匹配正在执行动画效果的元素:$("div:not(:animate)").css("color","red")将所有没有执行动画效果的元素的颜色变为红色;

:focus触发一个匹配元素的focus事件:$("#input:focus").functin(){}当光标移到id为input的元素上面时触发一个函数;

@内容过滤选择器

:contains匹配给定文本的元素:$(":contains(‘John‘)")匹配所有包含John的元素；

:has(selector)匹配所有含有selector的元素:$(":has(p)")匹配所有包含p元素的元素;

:empty匹配所有不包含元素或者文本的元素:$("div:empty")匹配所有div为空的元素（没有子元素，也没有文本，我是一颗无忧无虑的小草.......);

:parent匹配所有含有子元素或文本的元素:$("div:parent")匹配所有含有子元素或子元素不为空的div元素;

:hidden匹配所有不可见的元素，或type为hidden的元素：$("div:hidden")匹配html中这样的元素<div style="display:none"></div>或<div type="hidden"></div>

:none匹配所有不可见元素

:visible匹配所有可见的元素:与:hidden的例子相反；

@属性选择器

[attribute]匹配所有包含该属性的元素:$("div[id]")匹配所有含有id值的div元素；

[attribute=value]匹配所有包含该属性且属性值为value的元素:$("div[id=1]")匹配所有id=1的div元素;

[attribute!=value]匹配所有包含该属性但属性值不为value的元素;

[attribute^=value]匹配所有包含该属性值且属性值以value开头的元素:$("div[id^=news]")匹配html中这样的元素 <div id=newspaper></div>和<div id=newspara></div>;

[attribute$=value]匹配所有包含该属性值且属性值以value结尾的元素：与正则表达式中^和$的含义相似；

[attribute*=value]匹配所有包含该属性且属性值里有value的元素:  *表示通配;

[selector1][selector2]:符合选择器，需要满足多个条件时使用;

:nth-child(index)匹配父元素下的第index个元素：$("ul li:nth-child[2]")  注意，这里索引值是从1开始;

:first-child匹配第一个子元素;

:last-child匹配最后一个子元素;

:only-child表示如果这个元素是父元素的唯一子元素，那么将会被匹配;

:selected匹配所有选中的option元素;

jquery选择器详解,古老的榕树,5-wow.com