jQuery(二)、选择器

2022-11-17 11:17:44

博客已迁移到CSDN《https://blog.csdn.net/qq_33375499》

1、#id

根据给定的ID匹配一个元素，如果选择器中包含特殊字符，可以用双斜杆(\\) 转义

如：

查找ID 为 myDiv[bar] 的元素

HTML 代码:

<div id="notMe">

    <p>id="notMe"</p>

</div>

<div id="myDiv[bar]">

    id="myDiv[bar]"

</div>

jQuery 代码:

$("#myDiv\\[bar\\]");

结果:

[ <div id="myDiv[bar]">id="myDiv[bar]"</div> ]

2、element

根据给定元素名匹配所有元素

如：

查找一个 DIV 元素。

HTML 代码:

<div>DIV1</div>

<div>DIV2</div>

<span>SPAN</span>

jQuery 代码:

$("div");

结果:

[ <div>DIV1</div>, <div>DIV2</div> ]

3、 .class

根据类名进行匹配元素，一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。（多个类 jquery代码为：$(".class1.class2.class3"),且顺序可以为乱序）

如：

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

HTML 代码:

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

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

<span class="myClass a2 a4">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="notMyClass"</p>

jQuery 代码:

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

结果:

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

6、ancestor descendant

在给定的祖先元素下匹配所有(包括子元素的子元素) 的后代元素

参数：ancestor 任何有效选择器;descendant 用以匹配元素的选择器，并且它是第一个选择器的后代元素

如：

找到表单中所有的input 元素

HTML 代码:

<form>

  <label>Name:</label>

  <input name="name" />

  <fieldset>

      <label>Newsletter:</label>

      <input name="newsletter" />

 </fieldset>

</form>

<input id="inp1" name="none" />

jQuery 代码:

$("#inp1,form *")

结果:

[ <label>Name:</label>,<input name="name" />, <fieldset>, <label>Newsletter:</label>,<input name="newsletter" />,<input id="inp1" name="none" /> ]

7、parent > child

在给定的父元素下匹配所有的子元素（第一层级子元素，并且自身满足匹配结果，也会返回）

如：

匹配表单中所有当前表单的子元素

HTML 代码:

<form>

  <label>Name:</label>

  <input name="name" />

  <fieldset>

      <label>Newsletter:</label>

      <input name="newsletter" />

 </fieldset>

</form>

<input id="inp1" name="none" />

jQuery 代码:

$("#inp1,form > input")

结果:

[ <input name="name" />,<input id="inp1" name="none" /> ]

8、prev + next

匹配所有紧跟在 prev 之后的 next 元素

参数：prev 任何选择器;next 一个有效选择器并且紧接着第一个选择器

如：

匹配所有跟在lable后面的input和p元素

HTML 代码：

<form>

  <label>Name:</label>

  <input name="name" />

  <fieldset>

      <label>Newsletter:</label>

      <input name="newsletter" />

 </fieldset>

  <label>Newsletter2:</label>

  <p>p:</p>

  <input name="newsletter2" />

</form>

<input id="inp1" name="none" />

jQuery 代码:

$("label + input,p")

结果：

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

9、prev ~ siblings

匹配prev元素之后的所有siblings 元素

参数：prev 任何有效选择器； siblings 一个选择器，并且它作为第一个选择器的同级

如：

找到所有与表单下所有label子集同辈的 input元素、p元素

HTML 代码：

<form>

  <label>Name:</label>

  <input name="name" />

  <fieldset>

      <label>Newsletter:</label>

      <input name="newsletter" />

 </fieldset>

  <label>Newsletter2:</label>

  <p>p:</p>

  <input name="newsletter2" />

</form>

<input id="inp1" name="none" />

jQuery 代码:

$("form label ~ input,p")

结果：

[ <input name="name" />, <input name="newsletter" />, <p>p:</p>,<input name="newsletter2" />,<p>p:</p> ]

10、prev:first

获取prev选择器下的第一个元素

参数：prev 任何有效选择器

如：

获取form下所有label子元素后跟p的第一个p元素

$("form label + p:first")

11、prev:last

获取prev选择器下的最后一个元素

参数：prev 任何有效选择器

如：

获取form下所有label子元素后跟input的最后一个input元素

$("form label + input:last")

12、prev：not（selector1,selector2,selectorN）

去除所有prev选择器下的给定选择器selector1，selector2,selectorN 的元素(在jquery1.3 之后才支持)

如：

查找所有form元素下所有子元素后跟input元素的input元素，并且input 元素class 属性不包含 .a1.a2

$("form label + input:not(.a2.a1)")

13、prev：even

匹配prev选择器下所有索引值为偶数的元素，从 0 开始计数

如：

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

$("table tr:even")

14、prev：odd

匹配prev选择器下所有索引值为奇数的元素，从 0 开始计数

如：查找表格的2/4/6...行（即索引值为1,3,5...）

$("table tr:odd")

15、prev:eq(index)

匹配prev选择器下给定index索引值的元素

如：

查找table的第三行

$("table tr:eq(2)")

16、prev：gt(index)

匹配prev选择器下大于给定 index 索引值的元素

如：

查找table下第二行以后的行

$("table tr:gt(1)");

17、prev:lt(index)

匹配prev选择器下小于给定 index 索引值的元素

如：

查找table下第1行、第二行

$("table tr:lt(2)")

18、prev:header

匹配prev选择器下所有如h1/h2/h3/h4...子类的标题元素

如：

匹配form下所有标题元素

$("form *:header")

19、prev:animated

匹配prev选择器下所有正在执行动画效果的元素

如：

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

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

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

});

20、:focus

触发每一个匹配元素的focus事件(这将触发所有绑定的focus函数，注意：某些对象不支持focus方法)

如：

当页面加载后将 id 为 'login' 的元素设置焦点:

$("#login:focus");

21、prev:contains(text)

匹配prev选择器下所有包含给定文本的元素

如：查找所有包含“A”文本的div元素

$("div:contains('A')")

22、prev:empty

匹配prev选择器下所有 不包含子元素或者文本 的空元素

23、prev:has(selector1,selector2,selectorN)

匹配prev选择器下所有含有selector1||selector||selectorN的元素的元素

如：

匹配所有子元素包含class为 .a1或.a3 的fieldset元素

HTML 代码：

 <fieldset>

      <label>Newsletter:</label>

      <input name="newsletter" class="a1 a2" />

        <h3>h3:</h3>

 </fieldset>

  <fieldset>

      <label class="a3">Newsletter:</label>

 </fieldset>

jQuery 代码：

$("fieldset:has(.a1,.a3)")

结果:

[

    <fieldset>

      <label>Newsletter:</label>

      <input name="newsletter" class="a1 a2" />

        <h3>h3:</h3>

 </fieldset>,

  <fieldset>

      <label class="a3">Newsletter:</label>

 </fieldset>

]

24、prev:parent

匹配prev选择器下所有包含子元素或文本的元素(存在子元素或文本的元素)

25、prev:hidden

匹配prev选择器下所有不可见元素(display:none)，或者type为hidden的元素(<input type='hidden' />)

26、prev:visible

匹配prev选择器下所有可见元素

27、prev[attribute]

匹配prev选择器下所有包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。

28、prev[attribute = 'value']

匹配prev选择器下所有包含给定的属性是某个特定值的元素

29、prev[attribute! = 'value']

匹配prev选择器下所有不包含给定属性，或者属性不等于特定值的元素 ( 此选择器等价于:not([attr=value]);要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value]) )

30、prev[attribute ^= 'value']

匹配prev选择器下给定的属性是以某些值开始的元素

如：

匹配所有id以mydiv 开头的div

$("div[id ^= 'mydiv']")

31、prev[attribute $= 'value']

匹配prev选择器下给定的属性是以某些值结束的元素

如：

匹配所有id以mydiv 结束的div

$("div[id $= 'mydiv']")

32、prev[attribute *= 'value']

匹配prev选择器下给定属性是包含某些值的元素

如：

匹配所有id包含div 的div

$("div[id *= 'div']")

33、[selector1][selector2][selectorN]

复核属性选择器，需要同时满足多个条件时使用。

如：

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

34、prev:nth-child(index)

匹配prev选择器下所有元素的子元素的第N个子或奇偶元素
':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从 1 开始的，而:eq()是从0算起的！可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)

参数：index 要匹配元素的序号，从1开始

如：

在每个 ul 查找第 2 个li

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-child(2)")

结果:

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

35、prev:first-child

匹配prev选择器下的所有元素的第一个子元素

36、prev:last-child

匹配prev选择器下的所有元素的最后一个子元素

37、prev:only-child

匹配prev选择器下中某个只有唯一一个子元素的元素。如果含有其他元素，将不会被匹配

38、prev:input

匹配prev选择器下所有的input、textarea、select和button元素

39、prev:text

匹配prev选择器下所有单行文本框<input type='text' />

40、prev:password

匹配prev选择器下所有密码框<input type='password' />

41、prev:radio

匹配prev选择器下所有单选按钮<input type='radio' />

42、prev:checkbox

匹配prev选择器下所有复选按钮<input type='checkbox' />

43、prev:submit

匹配prev选择器下所有提交按钮<input type='submit' />

44、prev:image

匹配prev选择器下所有图片域<input type='image' />

45、prev:reset

匹配prev选择器下所有重置按钮<input type='reset' />

46、prev:button

匹配prev选择器下所有按钮<input type='buttton' />、<button></button>

47、prev:file

匹配prev选择器下所有文件域<input type='file' />

48、prev:enabled

匹配prev选择器下所有可用元素(disabled)

49、prev:disabled

匹配prev选择器下所有不可用元素

50、prev:checked

匹配prev选择器下所有选择的被选中元素(复选框、单选框等，不包括 select中的option)

51、prev:selected

匹配prev选择器下所有选中的option元素

码农公寓

博客已迁移到CSDN《https://blog.csdn.net/qq_33375499》

1、#id

2、element

3、 .class

4、*

5、selector1,selector2,selectorN

6、ancestor descendant

7、parent > child

8、prev + next

9、prev ~ siblings

10、prev:first

11、prev:last

12、prev：not（selector1,selector2,selectorN）

13、prev：even

14、prev：odd

15、prev:eq(index)

16、prev：gt(index)

17、prev:lt(index)

18、prev:header

19、prev:animated

20、:focus

21、prev:contains(text)

22、prev:empty

23、prev:has(selector1,selector2,selectorN)

24、prev:parent

25、prev:hidden

26、prev:visible

27、prev[attribute]

28、prev[attribute = 'value']

29、prev[attribute! = 'value']

30、prev[attribute ^= 'value']

31、prev[attribute $= 'value']

32、prev[attribute *= 'value']

33、[selector1][selector2][selectorN]

34、prev:nth-child(index)

35、prev:first-child

36、prev:last-child

37、prev:only-child

38、prev:input

39、prev:text

40、prev:password

41、prev:radio

42、prev:checkbox

43、prev:submit

44、prev:image

45、prev:reset

46、prev:button

47、prev:file

48、prev:enabled

49、prev:disabled

50、prev:checked

51、prev:selected

相关文章