jQuery选择器

最新推荐文章于 2024-09-05 15:53:15 发布

原创最新推荐文章于 2024-09-05 15:53:15 发布 · 266 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery选择器 #表单选择器 #过滤选择器 #层级选择器

web前端专栏收录该内容

41 篇文章

订阅专栏

博客介绍了jQuery选择器，包括基本选择器，通过id、class、标签查找dom元素；层级选择器，获取特定元素；过滤选择器，有基本、内容、可见性等多种类型；表单选择器，可方便获取表单元素，还提及表单对象属性选择器对表单元素的过滤。

基本选择器

最常用的选择器，主要通过id,class,标签等查找dom元素。每个ID名称只能用一次，class允许重复使用。

#id	比如$("#test")选取id为test的元素
.class	比如比如$(".test")选取class为test的元素
element	$("P")选取所有<p>元素
*	$("*")选取所有元素

层级选择器

获取特定元素，比如后代元素、子元素、相邻元素、同级元素等。

比如针对下面这段代码进行操作：

      <div id="btn">11111111111</div>
      <div class="content">222222222</div>
      <div class="content">333333333</div>
      <div class="content">444444444</div>
      <div class="content">555555555</div>
      <div class="content">666666666</div>

//选取#btn之后的所有同辈div元素 给其添加背景色
$("#btn ~ div").css("background","red");
//选取#btn之后的所有同辈div元素 给其添加背景色
$("#btn").nextAll("div").css("background","green");
//选取#btn所有同辈div元素，无论前后位置
$("#btn").siblings("div").css("background","red");

过滤选择器

选择器都以一个冒号（:）开头

1.基本过滤选择器

比如针对下面的代码，进行操作：

 <div class="choose-list">
       <div class="list-text">:first(选取第一个元素)</div>
       <div>33333333</div>
       <div class="list-text">444444444</div>
       <div class="list-text">555555555555</div>
       <div class="list-text">777777777</div>
   </div>

<script>
    $(".choose-list div:first").css("color","red")
    $(".choose-list div:last").css("color","green")
    $(".choose-list div:not(.list-text)").css("color","yellow")
    $(".choose-list div:even").css("color","orange")
    $(".choose-list div:gt(3)").css("color","#DBDBDB")
</script>

2.内容过滤选择器

主要体现在所包含的子元素或者文本上

3.可见性过滤选择器——根据原序的可见和不可见状态来选择相应的元素

:hidden	选取所有不可见的元素; 比如$("input:hidden")
:visible	选取所有可见的元素; $("div:visible")选取所有可见的<div>元素

4.属性选择器

形如$("div[title=en]")：选取属性title为en的<div>元素。

其中支持一些正则操作，比如$("div[title^=en]")：选取属性title为en开始的<div>元素；

比如$("div[title*=en]")：选取属性title含有en开始的<div>元素。

<div title="en">title为en的div元素</div>
<div title="en-UK">title为en-UK的div元素</div>
<div title="en-USA">title为en-USA的div元素</div>
<div title="en-china">title为en-china的div元素</div>

<script>
  $("div[title=en]").css("color","red")
</script>

5.子元素过滤选择器

:nth-child	选取每个父元素下的第index个子元素 :nth-child(even)选取每个父元素下的索引值为偶数的元素 :nth-child(odd)选取每个父元素下的索引值为奇数的元素 :nth-child(2n)选取每个父元素下的索引值为2的倍数的元素
:first-child	选取每个父元素下的第1个子元素
:last-child	选取每个父元素下的最后一个子元素
:only-child	如果某个元素是他父元素中的唯一子元素，那么他就会被匹配

6.表单对象属性选择器

主要是对所选择的表单元素进行过滤，比如被选中的下拉框，多选框等。

:enabled——选取所有可用的元素

:disabled——选取所有不可用的元素

:checked——选取所有被选中的元素（单选框、复选框☑️）

:selected——选取所有被选中的元素（下拉框列表）

表单选择器

能够更方便的获取表单的某个或者某类型的元素。

:input	选取所有input\textarea\select\button元素
:text	选取所有的单行文本框
:password	选取所有的密码框
:radio	选取所有的单选框
:checkbox	选取所有的多选框
:submit	选取所有的提交按钮
:image	选取所有的图像按钮
:reset	选取所有的重置按钮
:button	选取所有的按钮
:file	选取所有的文件上传按钮