jQuery常用选择器

最新推荐文章于 2024-10-31 15:39:18 发布

王可zykon

最新推荐文章于 2024-10-31 15:39:18 发布

阅读量212

点赞数

CC 4.0 BY-SA版权

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/zykon/article/details/78774039

学习笔记专栏收录该内容

21 篇文章

订阅专栏

本文介绍了jQuery中的九种常用选择器，包括id选择器、元素选择器、类选择器等，并通过示例展示了如何使用这些选择器来定位网页中的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery常用选择器

1.id选择器
概述：根据给定的ID匹配一个元素。

用法：查找 ID 为"myDiv"的元素。
HTML 代码:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
jQuery 代码:
$("#myDiv");
结果:
[ <div id="myDiv">id="myDiv"</div> ]

2.元素选择器
概述：根据给定的元素名匹配所有元素

用法：查找一个 DIV 元素。
HTML 代码:
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
jQuery 代码:
$("div");
结果:
[ <div>DIV1</div>, <div>DIV2</div> ]

3.类选择器
概述：根据给定的类匹配所有元素

用法：查找一个 DIV 元素。
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 代码:
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
jQuery 代码:
$("*")
结果:
[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

5.群组选择器
概述：将每一个选择器匹配到的元素合并后一起返回。

用法：找到匹配任意一个类的元素。
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.后代选择器
概述：在给定的祖先元素下匹配所有的后代元素

用法：找到表单中所有的 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" /> ]

7.子选择器
概述：在给定的父元素下匹配所有的子元素

用法：匹配表单中所有的子级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" /> ]

9.兄弟选择器
概述：匹配所有紧接在 prev 元素后的 next 元素

用法：匹配所有跟在 label 后面的 input 元素
HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
  <label>Newsletter:</label>
  <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
$("label + input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]