jQuery 选择器

首页 > 代码库 > jQuery 选择器

2024-08-14 09:00:52 227人阅读

1. #id

html 代码：

<div id="notMe"><p>id="notMe"</p></div><div id="myDiv"><p>id="myDidv"</p></div>

jQuery代码：

$("#myDiv");

结果：

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

2.element

html 代码：

<div>DIV1</div><div>DIV2</div><span>SPAN</span>

jQuery代码：

$("div");

结果：

<div>DIV1</div>, <div>DIV2</div>

3. .class

html 代码：

<div class="div1"><p>div class="div1"</p></div><div class="myclss"><p>div class="myclass"</p></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 代码：

<div>DIV</div><span>SPAN</span><p>P</p>

jQuery代码：

$("*")

结果：

<div>DIV</div>,<span>SPAN</span>,<p>P</p>;

5.selector1,selector2,selectorN

html 代码：

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

jQuery代码：

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

结果：

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

6.ancestor descendant

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" /> ]

7.parent>child

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" />]

8.prev+next

html 代码：

<form>  <label>Name:</label>  <input name="name" />  <fieldset>      <label>Newsletter:</label>      <input name="newsletter" /> </fieldset></form><input name="none" />

jQuery代码：

&("lable + input");

结果：

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

9.prev~siblings

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" />]

10. :first

html 代码：

<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:first");

结果：

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

11.:not(selector)

html 代码：

<input name="apple" /><input name="flower" checked="checked" />

jQuery代码：

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

结果：

[<input name="apple" />]

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

html 代码：

<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:even");

结果：

[<li>list item 1</li>, <li>list item 3</li>,<li>list item 5</li>]

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

html 代码：

<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:odd");

结果：

[<li>list item 2</li>,<li>list item 4</li>]

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

html 代码：

<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:eq(1)");

结果：

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

15.:ge(index)(匹配所有大于给定索引值的元素)

html 代码：

<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:gt(1)");

结果：

[ <li>list item 3</li>, <li>list item 4</li>, <li>list item 5</li>]

16.:lang(language)(选择指定语言的所有元素)

html 代码：

jQuery代码：

$("p:lang(it)");

结果：

17.:last(获取最后个元素)

html 代码：

<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");

结果：

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

18.:lt(index)(匹配所有小于给定索引值的元素)

html 代码：

<ul>        <li>list item 4</li>    <li>list item 5</li></ul>

jQuery代码：

$("li:lt(3)");

结果：

[<li>list item 1</li>, <li>list item 2</li>, <li>list item 3</li>]

19.:header(匹配如 h1, h2, h3之类的标题元素)

html 代码：

<h1>Header 1</h1><p>Contents 1</p><h2>Header 2</h2><p>Contents 2</p>

jQuery代码：

$(":header");

结果：

[<h1>Header 1</h1>,<h2>Header 2</h2>]

20.:animated(匹配所有正在执行动画效果的元素)

html 代码：

<button id="run">Run</button><div><div>

jQuery代码：

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

结果：

21.:focus(匹配当前获取焦点的元素)

html 代码：

<input tabIndex="1"><input tabIndex="2">

jQuery代码：

$("input:focus").css("background","#f00");

结果：

22.:root(选择该文档的根元素)

html 代码：

jQuery代码：

$("root").css("background","#00f");

结果：

23.:target(选择由文档URI的格式化识别码表示的目标元素)

URI http://example.com/#foo

html 代码：

jQuery代码：

$(p:target);

结果：

<p id="foo">

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

html 代码：

<h1>Header 1</h1><p>Contents 1</p><h2>Header 2</h2><p>Contents 2</p>

jQuery代码：

$("p:contains(‘1‘)");

结果：

[<p>Contents 1</p>]

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

html 代码：

<ul>    <li>list item 1</li>    <li>list item 2</li>    <li>list item 3</li>    <li></li>    <li></li></ul>

jQuery代码：

$("li:empty");

结果：

[<li></li>,<li></li>]

26.:has(seletor)(匹配含有选择器所匹配的元素的元素)

html 代码：

<div><p>wtf</p></div><div>fk</div>

jQuery代码：

$("div:has(p)").addclass("wtfkk");

结果：

[<div class="wtfkk"><p>wtf</p></div>]

27.:parent(匹配含有子元素或者文本的元素)

html 代码：

<ul>    <li>list item 1</li>    <li>list item 2</li>    <li></li>    <li></li>    <li></li></ul>

jQuery代码：

$("li:parent")

结果：

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

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

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

29.:visible(匹配所有的可见元素)

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.[attrbute](匹配包含给定属性的元素)

html 代码：

<ul>    <li class="wth">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[class]")

结果：

[<li class="wth">list item 1</li>]

31.[attrbute=value](匹配给定的属性是某个特定值的元素)

html 代码：

<ul>    <li>list item 1</li>    <li>list item 2</li>    <li>list item 3</li>    <li class="he">list item 4</li>    <li class="he">list item 5</li></ul>

jQuery代码：

$("li[class=‘he‘]")

结果：

[<li class="he">list item 4</li>, <li class="he">list item 5</li>]

32.[attrbute!=value](匹配所有不含有指定的属性，或者属性不等于特定值的元素)

html 代码：

<ul>    <li>list item 1</li>    <li>list item 2</li>    <li>list item 3</li>    <li class="he">list item 4</li>    <li class="he">list item 5</li></ul>

jQuery代码：

$("li[class!=‘he‘]")

结果：

[li>list item 1</li>, <li>list item 2</li>,<li>list item 3</li>]

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

html 代码：

<ul>    <li>list item 1</li>    <li class="newfood">list item 2</li>    <li>list item 3</li>    <li class="newbox">list item 4</li>    <li class="he">list item 5</li></ul>

jQuery代码：

$("li[class^=‘new‘]")

结果：

[<li class="newfood">list item 2</li>, <li class="newbox">list item 4</li>]

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

html 代码：

<ul>    <li>list item 1</li>    <li class="newfood">list item 2</li>    <li>list item 3</li>    <li class="newbox">list item 4</li>    <li class="he">list item 5</li></ul>

jQuery代码：

$("li[class$=‘box‘]")

结果：

[<li class="newbox">list item 4</li>]

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

html 代码：

<ul>    <li>list item 1</li>    <li class="newfood">list item 2</li>    <li>list item 3</li>    <li class="newbox">list item 4</li>    <li class="he">list item 5</li></ul>

jQuery代码：

$("li[class*=‘oo‘]")

结果：

[<li class="newfood">list item 2</li>]

36.[attrSel1][attrSel2][attrSelN](复合属性选择器，需要同时满足多个条件时使用)

html 代码：

<ul>    <li>list item 1</li>    <li class="newfood" id="attr">list item 2</li>    <li>list item 3</li>    <li class="newbox" id="box">list item 4</li>    <li class="he">list item 5</li></ul>

jQuery代码：

$("li[class,id=‘box‘]")

结果：

[<li class="newbox" id="box">list item 4</li>]

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

html 代码：

<ul>  <li>John</li>  <li>Karl</li>  <li>Brandon</li></ul><ul>  <li>Glen</li>  <li>Tane</li>  <li>Ralph</li></ul>

jQuery代码：

$("li:first-child")

结果：

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

38.first-of-type(结构化伪类，匹配E的父元素的第一个E类型的孩子)

html 代码：

<ul>  <p>mumu</p>  <li>John</li>  <li>Karl</li>  <li>Brandon</li></ul><ul>  <li>Glen</li>  <li>Tane</li>  <li>Ralph</li></ul>

jQuery代码：

$("li:first-of-type")

结果：

[<li>John</li>]

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

html 代码：

<ul>  <li>John</li>  <li>Karl</li>  <li>Brandon</li></ul><ul>  <li>Glen</li>  <li>Tane</li>  <li>Ralph</li></ul>

jQuery代码：

$("li:last-child")

结果：

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

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

html 代码：

<ul>  <li>John</li>  <li>Karl</li>  <li>Brandon</li></ul><ul>  <li>Glen</li>  <li>Tane</li>  <li>Ralph</li></ul>

jQuery代码：

$("li:last-of-type")

结果：

[<li>Ralph</li>]

41.:nth-child(number)(匹配其父元素下的第N个子或奇偶元素(从1开始))

html 代码：

<ul>  <li>John</li>  <li>Karl</li>  <li>Brandon</li></ul><ul>  <li>Glen</li>  <li>Tane</li>  <li>Ralph</li></ul>

jQuery代码：

$("li:nth-chlid(2)")

结果：

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

42.:nth-last-chlid(选择器选取属于其父元素的不限类型的第 n 个子元素的所有元素，从最后一个子元素开始计数)

html 代码：

<ul>  <li>John</li>  <li>Karl</li>  <li>Brandon</li></ul><ul>  <li>Glen</li>  <li>Tane</li>  <li>Ralph</li></ul>

jQuery代码：

$("li:nth-last-chlid(1)")

结果：

[<li>Ralph</li>]

43.:nth-last-of-type(选择器选取属于其父元素的特定类型的第 n 个子元素的所有元素，从最后一个子元素开始计数)

html 代码：

<ul>  <li>John</li>  <li>Karl</li>  <li>Brandon</li></ul><ul>  <li>Glen</li>  <li>Tane</li>  <li>Ralph</li></ul>

jQuery代码：

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

结果：

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

44.nth-of-type(选择器选取属于其父元素的特定类型的第 n 个子元素的所有元素)

html 代码：

<ul>  <li>John</li>  <li>Karl</li>  <li>Brandon</li></ul><ul>  <li>Glen</li>  <li>Tane</li>  <li>Ralph</li></ul>

jQuery代码：

$("li:nth-of-type(2)")

结果：

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

45.only-child(如果某个元素是父元素中唯一的子元素，那将会被匹配)

html 代码：

<ul>  <li>John</li>  <li>Karl</li>  <li>Brandon</li></ul><ul>  <li>Glen</li></ul>

jQuery代码：

$("li:only-child")

结果：

[<li>Glen</li>]

46.only-of-type(选择所有没有兄弟元素，且具有相同的元素名称的元素)

html 代码：

<ul>  <li>John</li>  <li>Karl</li>  <li>Brandon</li></ul><ul>  <li>Glen</li></ul><ul>  <li>Mumu<li>  <p>Yarn</p></ul>

jQuery代码：

$("li:only-of-type")

结果：

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

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

html 代码：

<form>  <input type="text" />  <input type="button" value="mumu大人"/>  <textarea></textarea>  <button>Button</button>  <select><option>Option</option></select>  <p>哪个家伙说要写这个作业的，出来，保证不打你</p></form>

jQuery代码：

$(":input")

结果：

[  <input type="text" />  <input type="button" value="mumu大人"/>  <textarea></textarea>  <button>Button</button>  <select><option>Option</option></select>]

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

html 代码：

<form>  <input type="text" />  <input type="button" value="mumu大人"/>  <textarea></textarea>  <button>Button</button>  <select><option>Option</option></select></form>

jQuery代码：

$(":text")

结果：

[<input type="text" />]

49.:password(匹配所有密码框)

html 代码：

<form>  <input type="text" />  <input type="password"/>  <input type="button" value="mumu大人"/>  <textarea></textarea>  <button>Button</button>  <select><option>Option</option></select></form>

jQuery代码：

$(":password")

结果：

[<input type="password"/>]

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

html 代码：

<form>  <input type="text" />  <input type="password"/>  <input type="radio"/>  <input type="button" value="mumu大人"/>  <textarea></textarea>  <button>Button</button>  <select><option>Option</option></select></form>

jQuery代码：

$(":radio")

结果：

[<input type="radio"/>]

51.:checkbox(匹配所有复选框)

html 代码：

<form>  <input type="text" />  <input type="password"/>  <input type="radio"/>  <input type="checkbox"/>  <input type="button" value="mumu大人"/>  <textarea></textarea>  <button>Button</button>  <select><option>Option</option></select></form>

jQuery代码：

$(":checkbox")

结果：

[<input type="checkbox"/>]

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

html 代码：

<form>  <input type="text" />  <input type="password"/>  <input type="radio"/>  <input type="checkbox"/>  <input type="submit"/>  <input type="button" value="mumu大人"/>  <textarea></textarea>  <button>Button</button>  <select><option>Option</option></select></form>

jQuery代码：

$(":submit")

结果：

[<input type="submit"/>]

53.:image(匹配所有图像域)

html 代码：

<form>  <input type="text" />  <input type="password"/>  <input type="radio"/>  <input type="checkbox"/>  <input type="submit"/>  <input type="image"/>  <input type="button" value="mumu大人"/>  <textarea></textarea>  <button>Button</button>  <select><option>Option</option></select></form>

jQuery代码：

$(":image")

结果：

[<input type="image"/>]

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

html 代码：

<form>  <input type="text" />  <input type="password"/>  <input type="radio"/>  <input type="checkbox"/>  <input type="submit"/>  <input type="image"/>  <input type="reset"/>  <input type="button" value="mumu大人"/>  <textarea></textarea>  <button>Button</button>  <select><option>Option</option></select></form>

jQuery代码：

$(":reset")

结果：

[<input type="reset"/>]

55.:button(匹配所有按钮)

html 代码：

<form>  <input type="text" />  <input type="password"/>  <input type="radio"/>  <input type="checkbox"/>  <input type="submit"/>  <input type="image"/>  <input type="reset"/>  <input type="button" value="mumu大人"/>  <textarea></textarea>  <button>Button</button>  <select><option>Option</option></select></form>

jQuery代码：

$(":button")

结果：

[<input type="button" value="mumu大人"/>,<button>Button</button>]

56.:file(匹配所有文件域)

html 代码：

<form>  <input type="text" />  <input type="password"/>  <input type="radio"/>  <input type="checkbox"/>  <input type="submit"/>  <input type="image"/>  <input type="reset"/>  <input type="file"/>  <input type="button" value="mumu大人"/>  <textarea></textarea>  <button>Button</button>  <select><option>Option</option></select></form>

jQuery代码：

$(":file")

结果：

[<input type="file"/>]

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

html 代码：

<form>  <input name="email" disabled="disabled" />  <input name="id" /></form>

jQuery代码：

$("input:enabled")

结果：

[<input name="id" />]

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

html 代码：

<form>  <input name="email" disabled="disabled" />  <input name="id" /></form>

jQuery代码：

$("input:disabled")

结果：

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

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

html 代码：

<form>  <input type="radio" checked/>  <input type="checkbox"/></form>

jQuery代码：

$("input:checked")

结果：

[<input type="radio" checked/>]

60.selected(匹配所有选中的option元素)

html 代码：

<select>  <option value="1">one</option>  <option value="1" selected="selected">two</option>  <option value="1">three</option></select>

jQuery代码：

$("option:selected")

结果：

[<option value="1" selected="selected">two</option>]

匹配给定的属性是以某些值开始的元素

jQuery 选择器

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > jQuery 选择器

jQuery 选择器

看完仍有疑问？有类似问题直接问程序猿