jQuery选择器

349 阅读2分钟

jQuery选择器

jQuery选择器完全继承了CSS风格。利用jQuery选择器可以非常便捷和快速地找出特定的DOM元素,然后为他们添加相应的行为,而无需担心浏览器是否支持这一选择器。

jQuery选择器优势:1、简洁地写法  2、支持CSS1到CSS3   3、完善的处理机制

常用的基本选择器:

#id     $("#test")

.classname      $(".test")

元素名      $("p")

*:匹配所有元素   $("*")

$("div,p")

常用的层次选择器:

ancestor descendant:选取ancestor里所有descendant元素  $("div span")

parent>child:获取parent元素下的child元素  $("div>span")

prev+next:选取紧接在prev元素后的next元素  $(".one+div")  只有一个

prev~siblings:选取prev元素之后所有siblings元素

常用的基本过滤选择器:

:first 选取第一个元素

:last 选取最后一个元素

:not(selector) 去除所有与给定选择器匹配的元素   例:$("input:not(.myclass)")

:even 选取索引值为偶数的所有元素,从0开始计数   例:$("div:even")

:odd  选取索引值为奇数的所有元素,从0开始计数

:eq(index) 匹配一个给定索引值元素,从0开始   例:$('div:eq(1)')

:gt(index)  匹配大于给定索引值元素,从0开始

:lt(index)  匹配小于给定索引值元素,从0开始

:header  选择h1,h2,h3一类的标签

:animated 匹配正在执行动画效果的元素

常用的内容过滤选择器

:contains(text)  匹配包含给定文本的元素

:empty  匹配所有不包含子元素或者文本的空元素

:has(selector) 匹配含有选择器所匹配元素的元素

:parent  选取含有子元素或者文本的元素

常用的可见性过滤选择器

:hidden 选取所有不可见的元素

:visible 选取所有可见的元素

常用的属性过滤选择器

[attribute] 选取拥有此属性的元素  例 $("input[name]")

[attribute=value] 选取属性值等于value的元素 例 $("input[type='text']")

[attribute!=value]

[attribute^=value] 属性值以value开始的元素

[attribute$=value] 选取属性值以value结束的元素

[attribute*=value]选取属性值包含value的元素 例 $("input[name*='o']")

[attribute~=value]选取属性值包含value且以空格隔开的元素例 $("input[name~='tong']")

[attribute1][attribute2]...多个属性选择器合并成一个复合属性选择器

例 $("input[type^='b'][name~='hai']")

常用的子元素过滤选择器

:first-child  $('div span:first-child')   div下第一个子元素为span的

:first-of-type 选取同名兄妹节点的第一个子元素的所有元素

:last-child

:last-of-type 选取同名兄妹节点的最后一个子元素的所有元素

:only-child 选取父元素中具有唯一的子元素的所有元素

:only-of-type 选取前后没有同名兄妹节点的子元素的所有元素

:nth-child(index/even/odd)选取每个父元素下的第index个子元素或者奇偶元素(index从1开始)

:nth-last-child(index/even/odd)选取每个父元素下的第index个子元素,从最后一个往第一个数(index从1开始)

常用的表单选择器

:input 选取所有<input>、<textarea>、<select>和<button>元素

:text 选取所有单行文本框

:password  选取所有密码框

:radio 选取所有单选按钮

:checkbox 选取所有复选框

:submit 选取所有提交按钮

:image 图像按钮

:reset 重置按钮

:button  选取所有按钮

:file选取所有上传域

表单对象属性过滤选择器

:disabled

:enable

:checked

:selected

选择器中含有空格的注意事项

var $t1=$(.test :hidden)

var $t2=$(.test:hidden)

两者的区别是:

第一种写法代表选取class为“test"的元素内所有隐藏元素

第二种写法代表选取隐藏的class为‘test’的元素