jquery选择器（照着jq手册写的）
Posted H5小菜鸟
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery选择器（照着jq手册写的）相关的知识，希望对你有一定的参考价值。
基本
1、id
概述
根据给定的ID匹配一个元素。
使用任何的元字符（如 !"#$%&‘()*+,./:;<=>[email protected][\]^`{|}~）作为名称的文本部分， 它必须被两个反斜杠转义：\\。 参见示例。
用于搜索的，通过元素的id属性中给定的值
//查找ID的为"myDiv"的元素。并给他个css样式
<div id="myDiv">I am div</div>
<div id="notdiv">notDiv</div>
<script>
$(function(){ $("#div").css({
width:100,
height:100,
border:"1px solid #000"
})
})
</script>
//jQuery 代码：
$("#myDiv");
//查找含有特殊字符的元素。 <span id="foo:bar"></span> <span id="foo[bar]"></span> <span id="foo.bar"></span> //jQuery 代码： #foo\\[bar\\] //结果： [<span id="foo[bar]"></span>]
2、element
//查找某个元素,比如查找DIV元素
<div>DIV1</div>
<div>DIV2</div>
<span>notDiv</span>
//jQuery代码
$("div");
3、.class
jQuery 类选择器可以通过指定的 class 查找元素。
//查找所有类是 "myClass" 的元素.
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
//jQuery 代码:
$(".myClass");
4、 *
匹配所有元素
多用于结合上下文来搜索。
//找到每一个元素
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
//jQuery 代码:
$("*")
//结果:
[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]
5、selector1,selector2,selectorN
概述
将每一个选择器匹配到的元素合并后一起返回。
你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
//找到匹配任意一个类的元素。
<div>me</div>
<p class="myClass">me</p>
<span>me</span>
<p class="notMyClass">p class="notMyClass"</p>
//jQuery 代码:
$("div,span,p.myClass");
//结果：
[ <div>me</div>, <p class="myClass">me</p>, <span>me</span> ]
层级：
6、ancestor descendant
概述
在给定的祖先元素下匹配所有的后代元素
//找到form表单中所有的 input 元素
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
//jQuery 代码:
$("form input")
7、parent>child
在给定的父元素下匹配所有的子元素
//匹配表单中所有的子级input元素。
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
//jQuery 代码：
$("form > input");
8、prev + next
匹配所有紧接在 prev 元素后的 next 元素
//匹配所有跟在 label 后面的 input 元素
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
//jQuery 代码:
$("label + input");
9、prev + siblings
匹配 prev 元素之后的所有 siblings同辈 元素
//找到所有与表单同辈的 input 元素
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" /> //他与表单form同辈
//jQuery 代码:
$("form ~ input")
基本筛选器：
10、:first
获取第一个元素
// 获取匹配的第一个元素
<ul>
<li>list item 1</li> //first
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
//jQuery 代码:
$(‘li:first‘);
11、:not(selector)
去除所有与给定选择器匹配的元素
在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）
//查找所有未选中的 input 元素
<input name="apple" /> //选中的 input 元素
<input name="flower" checked="checked" />
// jQuery 代码:
$("input:not(:checked)")
12、:even
匹配所有索引值为偶数的元素，从 0 开始计数
//查找表格的1、3、5...行（即索引值0、2、4...）
<table>
<tr><td>Header 1</td></tr> // 索引值0
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr> // 索引值2
</table>
//jQuery 代码:
$("tr:even")
13、:odd
匹配所有索引值为奇数的元素，从 0 开始计数
//查找表格的2、4、6行（即索引值1、3、5...）
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr> //索引值1
<tr><td>Value 2</td></tr>
</table>
//jQuery 代码:
$("tr:odd")
14、:eq(index)
匹配一个给定索引值的元素
//查找第二行
<table>
<tr><td>Header 1</td></tr> //索引值0
<tr><td>Value 1</td></tr> //索引值1
<tr><td>Value 2</td></tr> //索引值2
</table>
//jQuery 代码:
$("tr:eq(1)")
15、:gt(index)
匹配所有大于给定索引值的元素
//查找第二第三行，即索引值是1和2，也就是比0大
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr> //第二行
<tr><td>Value 2</td></tr> //第三行
</table>
//jQuery 代码:
$("tr:gt(0)")
16、:lang(language)
选择指定语言的所有元素。
:lang选择器,匹配有一个语言值等于所提供的语言代码，或以提供的语言代码开始，后面马上跟一个“ - ”的元素。例如，选择器$("div:lang(en)")将匹配<div lang="en"> and <div lang="en-us">（和他们的后代<div>），但不包括<div lang="fr">
对于html元素，语言值由lang属性决定，也可能由来自meta元素或HTTP头信息决定。
这种用法的进一步讨论可以在 W3C CSS规范中找到。
//选择所有<P> 的语言属性:
$("p:lang(it)")
17、:last
获取最后个元素
//获取匹配的最后个元素
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li> //最后一个
</ul>
//jQuery 代码:
$(‘li:last‘)
18、:it(index)
匹配所有小于给定索引值的元素
//查找第一第二行，即索引值是0和1，也就是比2小
<table>
<tr><td>Header 1</td></tr> //索引值0，比2小
<tr><td>Value 1</td></tr> //索引值1，比2小
<tr><td>Value 2</td></tr> //索引值2
</table>
//jQuery 代码:
$("tr:lt(2)")
19、:header
匹配如 h1, h2, h3之类的标题元素
//给页面内所有标题加上背景色
<h1>Header 1</h1> //h1
<p>Contents 1</p>
<h2>Header 2</h2> //h2
<p>Contents 2</p>
$(":header").css("background", "#ccc");
20、:animated
匹配所有正在执行动画效果的元素
//只有对不在执行动画效果的元素执行一个动画特效
<button id="run">Run</button><div></div>
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});
21、:focus
匹配当前获取焦点的元素。
如同其他伪类选择器（那些以":"开始），建议:focus前面用标记名称或其他选择;否则，通用选择("*")是不言而喻的。换句话说，$(‘:focus‘)等同为$(‘*:focus‘)。如果你正在寻找当前的焦点元素，$( document.activeElement )将检索，而不必搜索整个DOM树。
//添加一个"focused"的类名给那些有focus方法的元素
//css代码：
.focused {
background: #abcdef;
}
//html代码：
<div id="content">
<input tabIndex="1">
<input tabIndex="2">
<select tabIndex="3">
<option>select menu</option>
</select>
<div tabIndex="4">
a div
</div>
</div>
//jq代码：
$( "#content" ).delegate( "*", "focus blur", function( event ) {
var elem = $( this );
setTimeout(function() {
elem.toggleClass( "focused", elem.is( ":focus" ) );
}, 0);
});
22、:root
选择该文档的根元素。
在HTML中，文档的根元素，和$(":root")选择的元素一样， 永远是<html>元素。
//设置<html>背景颜色为黄色
$(":root").css("background-color","yellow");
23、:target
选择由文档URI的格式化识别码表示的目标元素。
如果文档的URI包含一个格式化的标识符，或hash（哈希）， 然后:target选择器将匹配ID和标识符相匹配的元素。 例如，给定的URI http://example.com/#foo， $( "p:target" )，将选择<p id="foo">元素。
这个不寻常的用法，可进一步讨论中找到 W3C CSS specification.
内容：
24、:contains(text)
匹配包含给定文本的元素
//查找所有包含 "John" 的 div 元素
<div>John Resig</div> //查找包含 "John" 的 div 元素
<div>George Martin</div>
<div>Malcom John Sinclair</div> //查找包含 "John" 的 div 元素
<div>J. Ohn
$("div:contains(‘John‘)")
25、:empty
匹配所有不包含子元素或者文本的空元素
//查找所有不包含子元素或者文本的空元素
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
$("td:empty")
26、:has(selector)
匹配含有选择器所匹配的元素的元素
<div><p>Hello</p></div>
<div>Hello again!</div>
//给所有包含 p 元素的 div 元素添加一个 text 类
$("div:has(p)").addClass("test");
27、:parent
匹配含有子元素或者文本的元素
<table>
<tr>
<td>Value 1 //td 元素 的文本 Value 1
< p>p 1</p> //td子元素
</td><td>
</td>
</tr>
<tr><td>Value 2</td><td></td></tr>
</table>
//查找所有含有子元素或者文本的 td 元素
$("td:parent")
可见性：
28、:hidden
匹配所有不可见元素，或者type为hidden的元素
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
//查找隐藏的 tr
$("tr:hidden")
29、:visible
匹配所有的可见元素
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
//查找所有可见的 tr 元素
$("tr:visible")
属性：
30、[attrbute]
匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。
<div>
<p>Hello!</p>
</div>
<div id="test2"></div>
//查找所有含有 id 属性的 div 元素
$("div[id]")
31、[attrbute=value]
匹配给定的属性是某个特定值的元素
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
//查找所有 name 属性是 newsletter 的 input 元素，并给一个选中的checked
$("input[name=‘newsletter‘]").attr("checked", true);
32、[attrbute!=value]
匹配所有不含有指定的属性，或者属性不等于特定值的元素。
此选择器等价于 :not([attr=value]) 要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
//查找所有 name 属性不是 newsletter 的 input 元素
$("input[name!=‘newsletter‘]").attr("checked", true);
33、[attrbute^=value]
匹配给定的属性是以某些值开始的元素
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
//查找所有 name 以 ‘news‘ 开始的 input 元素
$("input[name^=‘news‘]")
34、[attrbute$=value]
匹配给定的属性是以某些值结尾的元素
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
//
查找所有 name 以 ‘letter‘ 结尾的 input 元素
$("input[name$=‘letter‘]")
35、[attrbute*=value]
匹配给定的属性是以包含某些值的元素
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
//查找所有 name 包含 ‘man‘ 的 input 元素
$("input[name*=‘man‘]")
36、[attrSel1][attrSel2][attrSelN]
复合属性选择器，需要同时满足多个条件时使用
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />
//找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的
$("input[id][name$=‘man‘]")
子元素：
37、:first-child
匹配第一个子元素
类似的 :first 匹配第一个元素，而此选择符将为每个父元素匹配一个子元素
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
//在每个 ul 中查找第一个 li
$("ul li:first-child")
38、:first-of-type
结构化伪类，匹配E的父元素的第一个E类型的孩子。等价于 :nth-of-type(1) 选择器。
解释的很模糊，网上搜了很多都是扯淡的解释，作者也只能自己一个个试，试了几十次才弄的稍微有点清楚，如果错了，慢点拍砖，怕怕。直接看示例。
<div id="n1">
<div id="n2" class="abc">
<label id="n3">label1</label>
<span id="n4">span1</span>
<span id="n5" class="abc">span2</span>
<span id="n6">span3</span>
</div>
<div id="n7">
<span id="n8" class="abc">span1</span>
<span id="n9">span2</span>
</div>
</div>
//查找作为父元素的span类型子元素中的"长子"的span标签
$("span:first-of-type");
39、:last-chid
匹配最后一个子元素
:last 只匹配最后一个元素，而此选择符将为每个父元素匹配最后一个子元素
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
//在每个 ul 中查找最后一个 li
$("ul li:last-child")
40、:last-of-child
结构化伪类，匹配E的父元素的最后一个E类型的孩子
大体的意思跟 :first-of-type 差不多，只是一个是第一个元素，一个是最后一个元素，这里就不赘述了
<div id="n1">
<div id="n2" class="abc">
<label id="n3">label1</label>
<span id="n4">span1</span>
<span id="n5" class="abc">span2</span>
<span id="n6">span3</span>
</div>
<div id="n7">
<span id="n8" class="abc">span1</span>
<span id="n9">span2</span>
</div>
</div>
//查找作为父元素的span类型子元素中的最后一个的span标签
$("span:last-of-type");
41、:nth-child()
匹配其父元素下的第N个子或奇偶元素
:eq(index) 匹配选择器指定序列的元素，而这个将为每一个父元素匹配子元素。
:nth-child从1开始的，而:eq()是从0算起的！可以使用:<br>nth-child(even)<br>:nth-child(odd)<br>:nth-child(3n)<br>:nth-child(2)<br>:nth-child(3n+1)<br>:nth-child(3n+2)
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
//在每个 ul 查找第 2 个li
$("ul li:nth-child(2)")
42、:nth-last-child()
选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。
因为jQuery的实现:nth-child(n)是严格来自CSS规范，所以n值是“1索引”，也就是说，从1开始计数。对于所有其他选择器表达式，jQuery遵循javascript的“0索引”的计数。因此，给定一个单一<ul>包含两个<li>， $(‘li:nth-child(1)‘)选择第一个<li>，而$(‘li:eq(1)‘)选择第二个。
这个不寻常的用法，可进一步讨论中找到W3C CSS specification.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
//在每个匹配的ul中查找倒数第二个li
$("ul li:nth-last-child(2)");
43、:nth-last-of-type()
选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。
因为jQuery的实现:nth-是严格来自CSS规范，n值是“1-indexed”，也就是说，从1开始计数。 对于所有其他选择器表达式比如:eq() 或 :even ，jQuery遵循JavaScript的“0索引”的计数。因此，给定一个单一<ul>包含3个<li>，$(‘li:nth-last-of-type(1)‘)选择第3个，也就是最后一个<li>。
这个不寻常的用法，可进一步讨论中找到 W3C CSS specification.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
//在每个匹配的ul中查找倒数第二个li
$("ul li:nth-last-of-type(2)");
44、:nth-of-type()
选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。
因为jQuery的实现:nth-是严格来自CSS规范，n值是“1-indexed”，也就是说，从1开始计数。对于所有其他选择器表达式比如:eq() 或 :even ，jQuery遵循JavaScript的“0索引”的计数。
这个不寻常的用法，可进一步讨论中找到W3C CSS specification
<div>
<span>John</span>
<b>Kim</b>
<span>Adam</span>
<b>Rafael</b>
<span>Oleg</span>
</div>
<div>
<b>Dave</b>
<span>Ann</span>
</div>
<div>
<i><span>Maurice</span></i>
<span>Richard</span>
<span>Ralph</span>
<span>Jason</span>
</div>
//查找每个span，这个 span 是 其所有兄弟span元素中的第二个元素。
$("span:nth-of-type(2)");
45、:only-child
如果某个元素是父元素中唯一的子元素，那将会被匹配
如果父元素中含有其他元素，那将不会被匹配。
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
</ul>
//在 ul 中查找是唯一子元素的 li
$("ul li:only-child")
46、:onli-of-type
选择所有没有兄弟元素，且具有相同的元素名称的元素。
如果父元素有相同的元素名称的其他子元素，那么没有元素会被匹配。
表单：
47、:input
匹配所有 input, textarea, select 和 button 元素
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
//查找所有的input元素，下面这些元素都会被匹配到。
$(":input")
48、:text
匹配所有的单行文本框
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
</form>
//查找所有文本框
$(":text")
49、:password
查找所有密码框
50、:radio
查找所有单选按钮
查找所有复选框
查找所有提交按钮
53、:image
匹配所有图像域
<input type="image" />
//匹配所有图像域
$(":image")
54、:reset
查找所有重置按钮
55、:button
查找所有按钮.
56、:file
查找所有文件域
表单属性：
57、:enabled
匹配所有可用元素
<form>
<input name="email" disabled="disabled" />
<input name="id" /> //可用
</form>
//查找所有可用的input元素
$("input:enabled")
58、:disabled
匹配所有不可用元素
<form>
<input name="email" disabled="disabled" /> //不可用
<input name="id" />
</form>
//查找所有不可用的input元素
$("input:disabled")
59、:checked
匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected
<form>
<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>
//查找所有选中的复选框元素
$("input:checked")
60、:selected
匹配所有选中的option元素
<select>
<option value="1">Flowers</option>
<option value="2" selected="selected">Gardens</option> //selected
<option value="3">Trees</option>
</select>
//查找所有选中的选项元素
$("select option:selected")
混淆选择器：
61、$.escapeSelector(selector)
以上是关于jquery选择器（照着jq手册写的）的主要内容，如果未能解决你的问题，请参考以下文章
JQ001-认识jQuery 和 JQ002-jQuery选择器
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq