jQuery选择器总结

原文地址另一篇不错的jQ选择器文章

jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法

 

$( "#myELement" )    选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素

$( "div" )           选择所有的div标签元素，返回div元素数组

$( ".myClass" )      选择使用myClass类的css的所有元素

$( "*" )             选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$( "#myELement,div,.myclass" )

 

层叠选择器：

$( "form input" )         选择所有的form元素中的input元素

$( "#main > *" )          选择id值为main的所有的子元素

$( "label + input" )     选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素

$( "#prev ~ div" )       同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

 

基本过滤选择器：

$( "tr:first" )               选择所有tr元素的第一个

$( "tr:last" )                选择所有tr元素的最后一个

$( "input:not(:checked) + span" )  

 

过滤掉：checked的选择器的所有的input元素

 

$( "tr:even" )               选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）

 

$( "tr:odd" )                选择所有的tr元素的第1，3，5... ...个元素

$( "td:eq(2)" )             选择所有的td元素中序号为2的那个td元素

$( "td:gt(4)" )             选择td元素中序号大于4的所有td元素

$( "td:ll(4)" )              选择td元素中序号小于4的所有的td元素

$( ":header" )

$( "div:animated" )

内容过滤选择器：

 

$( "div:contains('John')" ) 选择所有div中含有John文本的元素

$( "td:empty" )           选择所有的为空（也不包括文本节点）的td元素的数组

$( "div:has(p)" )        选择所有含有p标签的div元素

$( "td:parent" )          选择所有的以td为父节点的元素数组

可视化过滤选择器：

 

$( "div:hidden" )        选择所有的被hidden的div元素

$( "div:visible" )        选择所有的可视化的div元素

属性过滤选择器：

 

$( "div[id]" )              选择所有含有id属性的div元素

$( "input[name='newsletter']" )    选择所有的name属性等于 'newsletter' 的input元素

 

$( "input[name!='newsletter']" ) 选择所有的name属性不等于 'newsletter' 的input元素

 

$( "input[name^='news']" )         选择所有的name属性以 'news' 开头的input元素

$( "input[name$='news']" )         选择所有的name属性以 'news' 结尾的input元素

$( "input[name*='man']" )          选择所有的name属性包含 'news' 的input元素

 

$( "input[id][name$='man']" )    可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

 

子元素过滤选择器：

 

$( "ul li:nth-child(2)" ),$( "ul li:nth-child(odd)" ),$( "ul li:nth-child(3n + 1)" )

 

$( "div span:first-child" )          返回所有的div元素的第一个子节点的数组

$( "div span:last-child" )           返回所有的div元素的最后一个节点的数组

$( "div button:only-child" )       返回所有的div中只有唯一一个子节点的所有子节点的数组

 

表单元素选择器：

 

$( ":input" )                  选择所有的表单输入元素，包括input, textarea, select 和 button

 

$( ":text" )                     选择所有的text input元素

$( ":password" )           选择所有的password input元素

$( ":radio" )                   选择所有的radio input元素

$( ":checkbox" )            选择所有的checkbox input元素

$( ":submit" )               选择所有的submit input元素

$( ":image" )                 选择所有的image input元素

$( ":reset" )                   选择所有的reset input元素

$( ":button" )                选择所有的button input元素

$( ":file" )                     选择所有的file input元素

$( ":hidden" )               选择所有类型为hidden的input元素或表单的隐藏域

 

表单元素过滤选择器：

 

$( ":enabled" )             选择所有的可操作的表单元素

$( ":disabled" )            选择所有的不可操作的表单元素

$( ":checked" )            选择所有的被checked的表单元素

$( "select option:selected" ) 选择所有的select 的子元素中被selected的元素

 

  

 

选取一个 name 为”S_03_22″的input text框的上一个td的text值

$(”input[@ name =S_03_22]“).parent().prev().text()

 

名字以”S_”开始，并且不是以”_R”结尾的

$(”input[@ name ^= 'S_' ]“).not(”[@ name $= '_R' ]“)

 

一个名为 radio_01的radio所选的值

$(”input[@ name =radio_01][@checked]“).val();

 

  

 

  

 

$( "A B" ) 查找A元素下面的所有子节点，包括非直接子节点

$( "A>B" ) 查找A元素下面的直接子节点

$( "A+B" ) 查找A元素后面的兄弟节点，包括非直接子节点

$( "A~B" ) 查找A元素后面的兄弟节点，不包括非直接子节点

 

1. $( "A B" ) 查找A元素下面的所有子节点，包括非直接子节点

 

例子：找到表单中所有的 input 元素

 

HTML 代码:

 

<form>

<label>Name:</label>

<input name= "name"  />

<fieldset>

       <label>Newsletter:</label>

       <input name= "newsletter"  />

</fieldset>

</form>

<input name= "none"  />

jQuery 代码:

 

$( "form input" )

结果:

 

[ <input name= "name"  />, <input name= "newsletter"  /> ]

 

2. $( "A>B" ) 查找A元素下面的直接子节点

例子：匹配表单中所有的子级input元素。

 

HTML 代码:

 

<form>

<label>Name:</label>

<input name= "name"  />

<fieldset>

       <label>Newsletter:</label>

       <input name= "newsletter"  />

</fieldset>

</form>

<input name= "none"  />

jQuery 代码:

 

$( "form > input" )

结果:

 

[ <input name= "name"  /> ]

 

3. $( "A+B" ) 查找A元素后面的兄弟节点，包括非直接子节点

例子：匹配所有跟在 label 后面的 input 元素

 

HTML 代码:

 

<form>

<label>Name:</label>

<input name= "name"  />

<fieldset>

       <label>Newsletter:</label>

       <input name= "newsletter"  />

</fieldset>

</form>

<input name= "none"  />

jQuery 代码:

 

$( "label + input" )

结果:

 

[ <input name= "name"  />, <input name= "newsletter"  /> ]

 

 

4. $( "A~B" ) 查找A元素后面的兄弟节点，不包括非直接子节点

例子：找到所有与表单同辈的 input 元素

 

HTML 代码:

 

<form>

<label>Name:</label>

<input name= "name"  />

<fieldset>

       <label>Newsletter:</label>

       <input name= "newsletter"  />

</fieldset>

</form>

<input name= "none"  />

jQuery 代码:

 

$( "form ~ input" )

结果:

 

[ <input name= "none"  /> ]




以下原文链接

1.基本选择器
*：所有元素选择器
例如：$("*").css("border","3px solid red")，表示为网页中的所有元素增加一个Border的css

#id:id选择器
每个id值必须是在一个文件中只能使用一次。如果一个以上的元素分配了相同的ID，查询将只选择该ID第一个匹配的DOM元素
$("#test")，选中网页中id为test的元素

.class:类选择器，选择给定类名的所有元素。
$(".test"),选择类名为test的所有元素

element:元素选择器
选择所有的element元素
$(p)：选择中页面中所有的p元素

selector1,selector2,....:组合选择器
将每一个选择器匹配到的元素合并后一起返回。
你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
$("P,#test,.te")选中所有的p元素，和id为test的元素，类名为te的元素

2.层级选择器 
$("ancestor descendant "):选择所有给定的祖先的后代元素,一个元素的后代可能是该元素的一个孩子，孙子，曾孙等。
例如$("from input")选择所有的form下的input

$("parent>child"):选择所有通过“parent”给定的元素直接子元素，该子元素“child”给定。

$("prev+next"):查找所有紧接在 prev 元素后的 next 元素
$("prev~siblings")：匹配 “prev” 元素之后的所有 “siblings” 元素。
(prev + next) 和 (prev ~ siblings)之间最值得注意的不同点是他们各自的可及之范围。前者只达到紧随的同级元素，后者扩展了该达到跟随其的所有同级元素。

3.属性选择器
$("div[id]"):选择拥有id属性的所有div元素
$("div[id=‘test’]"):选择id属性值等于test的所有div元素
$("div[id*=’test‘]"):选择id属性值包含test字符串的所有div元素
$("div[id!=‘test’]"):选择id属性值不等于test的所有div元素
$("div[id^='test']"):选择id属性值以test字符串开始的所有div元素
$("div[id$='test']"):选择id属性值以test字符串结束的所有div元素，这个比较是区分大小写的
$("div[id|='test']"):选择id属性等于test或以该字符串为前缀（"test-” ）的元素。
[selector1][selector2][selectorN]复合属性选择器，需要同时满足多个条件时使用。
$("input[id][name$='man']") :选择包含id属性并且name属性以man字符串结尾的所有input元素

4.简单的过滤选择器
$(":animated"):匹配所有正在执行动画效果的元素
$("div:not(:animated)"):匹配所有停止在执行动画效果的div
$("div:eq(index)"):选择索引值为index的div元素，index从0开始
:even，匹配所有索引值为偶数的元素，从 0 开始计数
$("tr:even”):选择索引值为偶数的tr
$("tr:odd”):选择索引值为奇数的tr
$("tr:gt(index)"):选择索引值大于index的tr元素，index从0开始
$("tr:lt(index)"):选择索引值小于index的tr元素，index从0开始
$("tr:first)"):选择第一个tr元素
$("tr:last)"):选择最后一个tr元素
$(":header"):选择所有标题元素，像h1, h2, h3 等.
:not():选择所有去除不匹配给定的选择器的元素。
$("div:not(.test)"):选择class名不是test的div

5.可见性选择器
$("hide”)：选择所有隐藏的元素
$("Visible"):选择所有可见的元素

6.子元素选择器
:first-child
选择所有父级元素下的第一个子元素,first只匹配一个单独的元素，但是first-child选择器可以匹配超过一个：为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
:last-child与上面相反
:only-child,如果某个元素是父元素中唯一的子元素，那将会被匹配
:nth-child,选择其父元素下的第N个子或奇偶元素。
通常可以使用的样式有
:nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)

7.内容选择器
:contains(text),匹配包含给定文本的元素
$("div:contains('test')"):选择div的内容中有test字符串的div
:empty，匹配不含有任何子元素的元素
:has(selector),匹配含有选择器所匹配的元素的元素
$("div:has(p)"):选择包含p元素的所有div元素
:parent匹配含有子元素或者文本的元素

8.表单选择器
$(":button")：匹配所有的type为button的form内的元素
相关：checkbox，input,text,image等
9.表单属性选择器
：checked,匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
:disabled，匹配所有不可用元素
:enabled,匹配所有可用元素
:selected，匹配所有选中的option元素