首页 > 代码库 > jquery选择器详解
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元素;