Jquery---选择器大全

Posted 2020-08-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery---选择器大全相关的知识，希望对你有一定的参考价值。

1.#id

a.查找 ID 为"myDiv"的元素。

html 代码:

<div id="notMe">id=notMe</div>

<div id="myDiv">id="myDiv"</div>

jQuery 代码:

$("#myDiv");

结果:

<div id="myDiv">id="myDiv"</div>

b.查找含有特殊字符的元素

HTML 代码:

jQuery 代码:

#foo\\[bar\\]

结果:

2. element: 根据给定的元素标签名匹配所有元素

HTML 代码:

jQuery 代码:

$("div");

结果:

3. .class

查找所有类是 "myClass" 的元素.

HTML 代码:

<div class="notMe">div class="notMe"</div>

<div class="myClass">div class="myClass"</div>

<span class="myClass">span class="myClass"</span>

jQuery 代码:

$(".myClass");

结果:

<div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span>

4. *

找到每一个元素

HTML 代码:

jQuery 代码:

$("*")

结果:

[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

5. selector1,selector2,selectorN

找到匹配任意一个类的元素。

HTML 代码:

<p class="myClass">p class="myClass"</p>

<p class="notMyClass">p class="notMyClass"</p>

jQuery 代码:

$("div,span,p.myClass")

结果:

<div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span>

6. ancestor descendant :在给定的祖先元素下匹配所有的后代元素

找到表单中所有的 input 元素

HTML 代码:

<form>

<label>Newsletter:</label>

</fieldset>

</form>

jQuery 代码:

$("form input")

结果:

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

7. parent > child 在给定的父元素下匹配所有的子元素

示例

描述:

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

HTML 代码:

<form>

<label>Newsletter:</label>

</fieldset>

</form>

jQuery 代码:

$("form > input")

结果:

[ <input name="name" /> ]

8. prev + next 匹配所有紧接在 prev 元素后的 next 元素

示例

描述:

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

HTML 代码:

<form>

<label>Newsletter:</label>

</fieldset>

</form>

jQuery 代码:

$("label + input")

结果:

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

9. prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素

示例

描述:

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

HTML 代码:

<form>

<label>Newsletter:</label>

</fieldset>

</form>

jQuery 代码:

$("form ~ input")

结果:

[ <input name="none" /> ]

10. :first获取第一个元素

示例

描述:

获取匹配的第一个元素

HTML 代码:

<ul>

</ul>

jQuery 代码:

$(‘li:first‘);

结果:

[ <li>list item 1</li> ]

11. :not(selector) 去除所有与给定选择器匹配的元素

示例

描述:

查找所有未选中的 input 元素

HTML 代码:

jQuery 代码:

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

结果:

[ <input name="apple" /> ]

12. :even匹配所有索引值为偶数的元素，从 0 开始计数

示例

描述:

查找表格的1、3、5...行（即索引值0、2、4...）

HTML 代码:

<table>

<tr><td>Header 1</td></tr>

<tr><td>Value 1</td></tr>

<tr><td>Value 2</td></tr>

</table>

jQuery 代码:

$("tr:even")

结果:

[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]

13. :odd匹配所有索引值为奇数的元素，从 0 开始计数

示例

描述:

查找表格的2、4、6行（即索引值1、3、5...）

HTML 代码:

<table>

<tr><td>Header 1</td></tr>

<tr><td>Value 1</td></tr>

<tr><td>Value 2</td></tr>

</table>

jQuery 代码:

$("tr:odd")

结果:

[ <tr><td>Value 1</td></tr> ]

14. :eq(index)匹配一个给定索引值的元素

从 0 开始计数

示例

描述:

查找第二行

HTML 代码:

<table>

<tr><td>Header 1</td></tr>

<tr><td>Value 1</td></tr>

<tr><td>Value 2</td></tr>

</table>

jQuery 代码:

$("tr:eq(1)")

结果:

[ <tr><td>Value 1</td></tr> ]

15. :gt(index)

概述

匹配所有大于给定索引值的元素

从 0 开始计数

示例

描述:

查找第二第三行，即索引值是1和2，也就是比0大

HTML 代码:

<table>

<tr><td>Header 1</td></tr>

<tr><td>Value 1</td></tr>

<tr><td>Value 2</td></tr>

</table>

jQuery 代码:

$("tr:gt(0)")

结果:

[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]

16. :lang(language)

示例

选择所有<P> 的语言属性:

$("p:lang(it)")

17. :last()

获取最后个元素

示例

描述:

获取匹配的最后个元素

HTML 代码:

<ul>

</ul>

jQuery 代码:

$(‘li:last‘)

结果:

[ <li>list item 5</li> ]

18. :lt(index)

概述

匹配所有小于给定索引值的元素

从 0 开始计数

示例

描述:

查找第一第二行，即索引值是0和1，也就是比2小

HTML 代码:

<table>

<tr><td>Header 1</td></tr>

<tr><td>Value 1</td></tr>

<tr><td>Value 2</td></tr>

</table>

jQuery 代码:

$("tr:lt(2)")

结果:

[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]

19. :header

匹配如 h1, h2, h3之类的标题元素

示例

描述:

给页面内所有标题加上背景色

HTML 代码:

<h1>Header 1</h1>

<p>Contents 1</p>

<h2>Header 2</h2>

<p>Contents 2</p>

jQuery 代码:

$(":header").css("background", "#EEE");

结果:

[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]

20. :animated

匹配所有正在执行动画效果的元素

示例

描述:

只有对不在执行动画效果的元素执行一个动画特效

HTML 代码:

jQuery 代码:

$("#run").click(function(){

$("div:not(:animated)").animate({ left: "+=20" }, 1000);

});

21. :focus

示例

描述:

添加一个"focused"的类名给那些有focus方法的元素

css 代码:

.focused {

background: #abcdef;

}

html 代码:

<option>select menu</option>

</select>

a div

</div>

jQuery 代码:

$( "#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 元素

HTML 代码:

<div>John Resig</div>

<div>George Martin</div>

<div>Malcom John Sinclair</div>

<div>J. Ohn

jQuery 代码:

$("div:contains(‘John‘)")

结果:

[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

25. :empty

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

示例

描述:

查找所有不包含子元素或者文本的空元素

HTML 代码:

<table>

<tr><td>Value 1</td><td></td></tr>

<tr><td>Value 2</td><td></td></tr>

</table>

jQuery 代码:

$("td:empty")

结果:

[ <td></td>, <td></td> ]

26. :has(selector)

概述

匹配含有选择器所匹配的元素的元素

一个用于筛选的选择器

示例

描述:

给所有包含 p 元素的 div 元素添加一个 text 类

HTML 代码:

<div><p>Hello</p></div>

<div>Hello again!</div>

jQuery 代码:

$("div:has(p)").addClass("test");

结果:

[ <div class="test"><p>Hello</p></div> ]

27. :parent

匹配含有子元素或者文本的元素

示例

描述:

查找所有含有子元素或者文本的 td 元素

HTML 代码:

<table>

<tr><td>Value 1</td><td></td></tr>

<tr><td>Value 2</td><td></td></tr>

</table>

jQuery 代码:

$("td:parent")

结果:

[ <td>Value 1</td>, <td>Value 2</td> ]

28. :hidden 匹配所有不可见元素，或者type为hidden的元素

示例

描述:

查找隐藏的 tr

HTML 代码:

<table>

<tr style="display:none"><td>Value 1</td></tr>

<tr><td>Value 2</td></tr>

</table>

jQuery 代码:

$("tr:hidden")

结果:

[ <tr style="display:none"><td>Value 1</td></tr> ]

描述:

匹配type为hidden的元素

HTML 代码:

<form>

</form>

jQuery 代码:

$("input:hidden")

结果:

[ <input type="hidden" name="id" /> ]

29. :visible

匹配所有的可见元素

示例

描述:

查找所有可见的 tr 元素

HTML 代码:

<table>

<tr style="display:none"><td>Value 1</td></tr>

<tr><td>Value 2</td></tr>

</table>

jQuery 代码:

$("tr:visible")

结果:

[ <tr><td>Value 2</td></tr> ]

30. [attribute]

概述

匹配包含给定属性的元素。

示例

描述:

查找所有含有 id 属性的 div 元素

HTML 代码:

<div>

<p>Hello!</p>

</div>

jQuery 代码:

$("div[id]")

结果:

[ <div id="test2"></div> ]

31. [attribute=value]

概述

匹配给定的属性是某个特定值的元素

属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。

示例

描述:

查找所有 name 属性是 newsletter 的 input 元素

HTML 代码:

jQuery 代码:

$("input[name=‘newsletter‘]").attr("checked", true);

结果:

[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]

32. [attribute!=value]

匹配所有不含有指定的属性，或者属性不等于特定值的元素。

示例

描述:

查找所有 name 属性不是 newsletter 的 input 元素

HTML 代码:

jQuery 代码:

$("input[name!=‘newsletter‘]").attr("checked", true);

结果:

[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]

33. [attribute^=value]匹配给定的属性是以某些值开始的元素

示例

描述:

查找所有 name 以 ‘news‘ 开始的 input 元素

HTML 代码:

jQuery 代码:

$("input[name^=‘news‘]")

结果:

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

34. [attribute$=value]匹配给定的属性是以某些值结尾的元素

示例

描述:

查找所有 name 以 ‘letter‘ 结尾的 input 元素

HTML 代码:

jQuery 代码:

$("input[name$=‘letter‘]")

结果:

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

35. [attribute*=value]匹配给定的属性是以包含某些值的元素

描述:

查找所有 name 包含 ‘man‘ 的 input 元素

HTML 代码:

jQuery 代码:

$("input[name*=‘man‘]")

结果:

[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]

36. [selector1][selector2][selectorN]复合属性选择器，需要同时满足多个条件时使用。

示例

描述:

找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的

HTML 代码:

jQuery 代码:

$("input[id][name$=‘man‘]")

结果:

[ <input id="letterman" name="new-letterman" /> ]

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

示例

描述:

在每个 ul 中查找第一个 li

HTML 代码:

<ul>

<li>Brandon</li>

</ul>

<ul>

<li>Ralph</li>

</ul>

jQuery 代码:

$("ul li:first-child")

结果:

[ <li>John</li>, <li>Glen</li> ]

38. :first-of-type

描述:

查找作为父元素的span类型子元素中的"长子"的span标签

HTML 代码:

<label id="n3">label1</label>

</div>

</div>

jQuery 代码:

$(".abc:first-of-type");

结果:

//.abc可以匹配id分别为n2、n5、n8的3个元素，n2是n1所有div类型子元素中的第一个，n8是n7所有span类型子元素中的第一个，但n5不是n2所有span类型子元素中的第一个，因此不能匹配n5。

[<div id="n2" class="abc">,<span id="n8" class="abc">span1</span>]

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

示例

描述:

在每个 ul 中查找最后一个 li

HTML 代码:

<ul>

<li>Brandon</li>

</ul>

<ul>

<li>Ralph</li>

</ul>

jQuery 代码:

$("ul li:last-child")

结果:

[ <li>Brandon</li>, <li>Ralph</li> ]

40. :last-of-type结构化伪类，匹配E的父元素的最后一个E类型的孩子

41. :nth-child匹配其父元素下的第N个子或奇偶元素

示例

描述:

在每个 ul 查找第 2 个li

HTML 代码:

<ul>

<li>Brandon</li>

</ul>

<ul>

<li>Ralph</li>

</ul>

jQuery 代码:

$("ul li:nth-child(2)")

结果:

[ <li>Karl</li>, <li>Tane</li> ]

42. :nth-last-child(n|even|odd|formula)选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。

必须为整数，注意从1开始而不是0

示例

在每个匹配的ul中查找倒数第二个li

<ul>

</ul>

$("ul li:nth-last-child(2)");

43. :nth-last-of-type(n|even|odd|formula)选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。

在每个匹配的ul中查找倒数第二个li

<ul>

</ul>

$("ul li:nth-last-of-type(2)");

44. :nth-of-type(n|even|odd|formula)选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。

示例

查找每个span，这个 span 是其所有兄弟span元素中的第二个元素。

<div>

<b>Rafael</b>

</div>

<div>

</div>

<div>

<i><span>Maurice</span></i>

<span>Richard</span>

<span>Ralph</span>

<span>Jason</span>

</div>

$("span:nth-of-type(2)");

45. :only-child

示例

描述:

在 ul 中查找是唯一子元素的 li

HTML 代码:

<ul>

<li>Brandon</li>

</ul>

<ul>

</ul>

jQuery 代码:

$("ul li:only-child")

结果:

[ <li>Glen</li> ]

46. :only-of-type

选择所有没有兄弟元素，且具有相同的元素名称的元素。

如果父元素有相同的元素名称的其他子元素，那么没有元素会被匹配。

47. :input匹配所有 input, textarea, select 和 button 元素

示例

描述:

查找所有的input元素，下面这些元素都会被匹配到。

HTML 代码:

<form>

<select><option>Option</option></select>

<button>Button</button>

</form>

jQuery 代码:

$(":input")

结果:

[

<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>,

]

48. :text匹配所有的单行文本框

示例

描述:

查找所有文本框

HTML 代码:

<form>

</form>

jQuery 代码:

$(":text")

结果:

[ <input type="text" /> ]

49. :password匹配所有密码框

示例

描述:

查找所有密码框

HTML 代码:

<form>

</form>

jQuery 代码:

$(":password")

结果:

[ <input type="password" /> ]

50. :radio匹配所有单选按钮

示例

描述:

查找所有单选按钮

HTML 代码:

<form>

</form>

jQuery 代码:

$(":radio")

结果:

[ <input type="radio" /> ]

51. :checkbox匹配所有复选框

示例

描述:

查找所有复选框

HTML 代码:

<form>

</form>

jQuery 代码:

$(":checkbox")

结果:

[ <input type="checkbox" /> ]

52. :submit匹配所有提交按钮

示例

描述:

查找所有提交按钮

HTML 代码:

<form>

</form>

jQuery 代码:

$(":submit")

结果:

[ <input type="submit" /> ]

53. :image匹配所有图像域

示例

描述:

匹配所有图像域

HTML 代码:

<form>

</form>

jQuery 代码:

$(":image")

结果:

[ <input type="image" /> ]

54. :reset匹配所有重置按钮

示例

描述:

查找所有重置按钮

HTML 代码:

<form>

</form>

jQuery 代码:

$(":reset")

结果:

[ <input type="reset" /> ]

55. :button匹配所有按钮

示例

描述:

查找所有按钮.

HTML 代码:

<form>

</form>

jQuery 代码:

$(":button")

结果:

[ <input type="button" />,<button></button> ]

56. :file匹配所有文件域

示例

描述:

查找所有文件域

HTML 代码:

<form>

</form>

jQuery 代码:

$(":file")

结果:

[ <input type="file" /> ]

57. :enabled匹配所有可用元素

示例

描述:

查找所有可用的input元素

HTML 代码:

<form>

</form>

jQuery 代码:

$("input:enabled")

结果:

[ <input name="id" /> ]

58. :disabled匹配所有不可用元素

示例

描述:

查找所有不可用的input元素

HTML 代码:

<form>

</form>

jQuery 代码:

$("input:disabled")

结果:

[ <input name="email" disabled="disabled" /> ]

59. :checked

匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected

示例

描述:

查找所有选中的复选框元素

HTML 代码:

<form>

</form>

jQuery 代码:

$("input:checked")

结果:

[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]

60. :selected

匹配所有选中的option元素

示例

描述:

查找所有选中的选项元素

HTML 代码:

<option value="1">Flowers</option>

<option value="2" selected="selected">Gardens</option>

<option value="3">Trees</option>

</select>

jQuery 代码:

$("select option:selected")

结果:

[ <option value="2" selected="selected">Gardens</option> ]

61. $.escapeSelector(selector)

这个方法通常被用在类选择器或者ID选择器中包含一些CSS特殊字符的时候，这个方法基本上与CSS中CSS.escape()方法类似，唯一的区别是jquery中的这个方法支持所有浏览器。

示例

描述:

对含有#号的ID进行编码

jQuery 代码:

$.escapeSelector( "#target" ); // "\#target"

描述:

选择出类中包含.box的div

HTML 代码:

<div class="notMe">div class="notMe"</div>

<div class=".box myClass">div class=".box myClass"</div>

<div class=".box">span class=".box"</div>

jQuery 代码:

$( "div" ).find( "." + $.escapeSelector( ".box" ) );

结果:

[ <div class=".box myClass">div class=".box myClass"</div>,<div class=".box">span class=".box"</div> ]

以上是关于Jquery---选择器大全的主要内容，如果未能解决你的问题，请参考以下文章

Jquery 选择器大全

jQuery 选择器大全

jquery 选择器大全

Developer Test-Jquery-选择器大全

JQuery选择器大全

Jquery---选择器 大全

jQuery 代码:

jQuery 代码:

Jquery---选择器大全