详解JQuery框架的五大选择器

2021-10-27 09:03:30

摘要：今天来和大家分享一下JQuery的五种选择器的详细使用方法。

本文分享自华为云社区《【JQuery框架】五大选择器“全家桶”详解！！！》，原文作者：灰小猿。

今天来和大家分享一下JQuery的五种选择器的详细使用方法，那么何为选择器？从功能上来讲，它能够筛选具有相似特征的元素标签，在我们想要对具有相似特征的元素进行集中或统一操作时是十分有用的，

选择器基本操作

首先我们需要了解选择器使用的基本操作，该基本操作可以分为三步：

1、事件绑定

选择器的使用需要进行事件的绑定，一般来说我们可以将事件绑定到一个按钮上去，通过按钮的点击来触发相应的事件响应。

2、入口函数

同时在jQuery中，这样的事件绑定是需要写在一个入口函数中去的，在

$(function(){

});

在这里需要注意的是：在js中定义入口函数的window.onload方法和$(function)方法是有区别的，

具体如下：

window.onload只能定义一次，如果定义多次，后面的会将前面的覆盖掉

$(function)方法是可以定义多次的，后面的不会将前面的覆盖掉

3、样式控制

当我们对选择器的事件进行了绑定之后，我们就可以通过选择器进行相应元素的样式控制了，在这里通常的表现是css方法，通过css方法来对相应的元素样式进行修改。

来看一个基本操作的实例：

<script type="text/javascript">
   $(function () {
      //标签选择器
      // 改变元素名为 <div> 的所有元素的背景色为 红色
      $("#b2").click(function f() {
         $("div").css("backgroundColor","yellow");
      });
   });
</script>

那么接下来就通过实例分别来和大家讲一下jQuery框架下的五种选择器的使用方法。

一、基本选择器

1、标签选择器

标签选择器又称为“元素选择器”，

语法：$(“html标签名”)

作用：获得所有匹配标签元素名称的元素

//标签选择器
// 改变元素名为 <div> 的所有元素的背景色为 黄色id="b1"
$("#b1").click(function f() {
   $("div").css("backgroundColor","yellow");
});

2、id选择器

语法：$(“#id的属性值”)

作用：获得与指定id属性值匹配的元素

//id选择器
// 改变 id 为 one 的元素的背景色为 粉色 id="b2"
$("#b2").click(function () {
   $("#one").css("backgroundColor","pink");
});

3、类选择器

语法：$(“.class的属性选择器”)

作用：获得与指定class属性值匹配的元素

//类选择器
// 改变 class 为 mini 的所有元素的背景色为 红色id="b3"
$("#b3").click(function () {
   $(".mini").css("backgroundColor","red");
});

4、并集选择器

语法：$(“选择器1,选择器2....”)

获取多个选择器选中的所有元素

//并集选择器
// 改变所有的<span>元素和 id 为 two 的元素的背景色为蓝色id="b4"
$("#b4").click(function () {
   $("span,#two").css("backgroundColor","blue");
});

二、层级选择器

1、后代选择器

语法：$(“A B”)

作用：选择A元素内部的所有B元素

//后代选择器
// 改变 <body> 内所有 <div> 的背景色为红色id="b1"
$("#b1").click(function () {
   $("body div").css("backgroundColor","pink");
});

2、子选择器

语法：$(“A > B”)

作用：选择A元素内部的所有B子元素

// 子选择器
// 改变 <body> 内子 <div> 的背景色为 红色id="b2"
$("#b2").click(function () {
   $("body > div").css("backgroundColor","red");
});

在这里需要注意的是：这两个选择器看上去似乎没有什么区别，但是我们在使用时就会发现其实是有区别的，后代选择器会将元素A内部的所有B元素都选中，而子选择器只会选中元素A的下一级元素中的B元素，范围是小于后代选择器的。具体可以看下面的实例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>层次选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script  src="../js/jquery-3.3.1.min.js"></script>
   <style type="text/css">
         div,span{
             width: 180px;
             height: 180px;
             margin: 20px;
             background: #9999CC;
             border: #000 1px solid;
            float:left;
             font-size: 17px;
             font-family:Roman;
         }
 
         div .mini{
             width: 50px;
             height: 50px;
             background: #CC66FF;
             border: #000 1px solid;
             font-size: 12px;
             font-family:Roman;
         }
 
         div .mini01{
             width: 50px;
             height: 50px;
             background: #CC66FF;
             border: #000 1px solid;
             font-size: 12px;
             font-family:Roman;
         }
 
    </style>
    <script type="text/javascript">

      $(function () {
         //后代选择器
         // 改变 <body> 内所有 <div> 的背景色为红色
         $("#b1").click(function () {
            $("body div").css("backgroundColor","pink");
         });

         // 子选择器
         // 改变 <body> 内子 <div> 的背景色为 红色
         $("#b2").click(function () {
            $("body > div").css("backgroundColor","red");
         });

      });
   </script>
 
   </head>
 
   <body>
 
       <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
       <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色"  id="b1"/>
       <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/>
       <h1>有一种奇迹叫坚持</h1>
       <h2>自信源于努力</h2>
 
        <div id="one">
           id为one  
 
       </div>
 
       <div id="two" class="mini" >
             id为two   class是 mini 
             <div  class="mini" >class是 mini</div>
      </div>
 
       <div class="one" >
             class是 one 
             <div  class="mini" >class是 mini</div>
            <div  class="mini" >class是 mini</div>
       </div>
       <div class="one">
           class是 one 
             <div  class="mini01" >class是 mini01</div>
            <div  class="mini" >class是 mini</div>
      </div>
      <span class="spanone">    span
      </span>
 
   </body>
</html>

三、属性选择器

1、属性名称选择器

语法：$(“A[属性名]”)

作用：包含指定属性的选择器

// 含有属性title 的div元素背景色为红色"  id="b1"
$("#b1").click(function () {
   $("div[title]").css("backgroundColor","pink");
});

2、属性选择器

语法：$(“A[属性名=’值’]”)

作用：包含指定属性等于指定值的选择器，

// 属性title值等于test的div元素背景色为红色"  id="b2"
 $("#b2").click(function () {
    $("div[title=‘test‘]").css("backgroundColor","red");
 });

在这个选择器中，我们可以根据他的功能进行拓展，比如我们可以将：“=”换成“!=”，就是指定属性名称不等于指定值的选择器

 // 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"
 $("#b3").click(function () {
    $("div[title!=‘test‘]").css("backgroundColor","red");
 });

根据正则表达式的使用规则：

“=”换成“^=”，就是指定属性名称是以指定值开头的选择器

 // 属性title值 以te开始 的div元素背景色为红色"  id="b4"
 $("#b4").click(function () {
    $("div[title^=‘te‘]").css("backgroundColor","red");
 });

“=”换成“$=”,就是指定属性名称是以指定值结尾的选择器

 // 属性title值 以est结束 的div元素背景色为红色"  id="b5"
$("#b5").click(function () {
   $("div[title$=‘est‘]").css("backgroundColor","red");
});

“=”换成“*=”，就是指定属性名称中包含指定值的选择器

 // 属性title值 含有es的div元素背景色为红色"  id="b6"
 $("#b6").click(function () {
    $("div[title*=‘es‘]").css("backgroundColor","red");
 });

3、复合属性选择器

语法：$(“A[属性名=’值’][]...”)

作用：包含多个属性条件的选择器

// 选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"
$("#b7").click(function () {
 $("div[id][title*=‘es‘]").css("backgroundColor","red");
});

四、过滤选择器

1、首元素选择器

语法：$(“A:first”)

作用：获得选择的元素的第一个元素

// 改变第一个 div 元素的背景色为 红色"  id="b1"
$("#b1").click(function () {
   $("div:first").css("backgroundColor","red");
});

2、尾元素选择器

语法：$(“A:last”)

作用：获得选择的元素的最后一个元素

// 改变最后一个 div 元素的背景色为 红色"  id="b2"
$("#b2").click(function () {
   $("div:last").css("backgroundColor","red");
});

3、非元素选择器

语法：$(“not(selector)”)

作用：不包括指定内容的元素

// 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3
$("#b3").click(function () {
   $("div:not(.one)").css("backgroundColor","red");
});

4、偶数选择器

语法：$(“A:even”)

作用：从0开始计数，获得选择的元素中索引为偶数的元素

// 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"
$("#b4").click(function () {
   $("div:even").css("backgroundColor","red");
});

5、奇数选择器

语法：$(“A:odd”)

作用：从0开始计数，获得选择的元素中索引为奇数的元素

// 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"
$("#b5").click(function () {
   $("div:odd").css("backgroundColor","red");
});

6、等于索引选择器

语法：$(“A:eq(index)”)

作用：获得选择的元素中指定索引的元素

// 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"
$("#b7").click(function () {
   $("div:eq(3)").css("backgroundColor","red");
});

7、大于索引选择器

语法：$(“A:gt(index)”)

作用：获得选择的元素中大于指定索引的元素

// 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"
$("#b6").click(function () {
   $("div:gt(3)").css("backgroundColor","red");
});

8、小于于索引选择器

语法：$(“A:lt(index)”)

作用：获得选择的元素中小于指定索引的元素

// 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"
$("#b8").click(function () {
   $("div:lt(3)").css("backgroundColor","red");
});

9、标题选择器

语法：$(“:header”)

作用：获得标题（h1~h6）元素，为固定写法

// 改变所有的标题元素的背景色为 红色"  id="b9"
$("#b9").click(function () {
   $(":header").css("backgroundColor","red");
});

五、表单过滤选择器

1、可用元素选择器

语法：$(“A:enabled”)

作用：获得选择元素中的可用元素

// 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"
$("#b1").click(function () {
   $("input[type=‘text‘]:enabled").val("aaa");
});

2、不可用元素选择器

语法：$(“A:disabled”)

作用：获得选择元素中的不可用元素

// 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"
$("#b2").click(function () {
   $("input[type=‘text‘]:disabled").val("bbb");
});

3、选中选择器

语法：$(“A:checked”)

作用：获得单选/复选框选中的元素

// 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"
$("#b3").click(function () {
   var lengths = $("input[type=‘checkbox‘]:checked").length;
   alert(lengths);
});

4、选中选择器（下拉框）

语法：$(“A:selected”)

作用：获得下拉框选中的元素

// 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"
$("#b4").click(function () {
   var selects = $("#job > option:selected").length;
   alert(selects)
});

在这里需要注意一点：上面的两个选中选择器的作用对象是不一样的，第一个选中选择器的作用对象是单选/复选框，而第二个选中选择器的作用对象是下拉框，同时对于第二种选择器，它的作用内容是下拉框中的包含在<option></option>内的选项，因此在使用时应当使用“>”来具体说明，具体可以看下面的实例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>表单属性过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script  src="../js/jquery-3.3.1.min.js"></script>
   <style type="text/css">

         #job{
            margin: 20px;
         }
         #edu{
            margin-top:-70px;
         }
 
    </style>
    <script type="text/javascript">
      $(function () {

         // 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"
         $("#b3").click(function () {
            var lengths = $("input[type=‘checkbox‘]:checked").length;
            alert(lengths);
         });

         // 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"
         $("#b4").click(function () {
            var selects = $("#job > option:selected").length;
            alert(selects)
         });

      });

   </script>
   </head>
 
   <body>
 
       <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
       <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"/>
       <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"/>
 
      <br><br>
 
       <br><br>
       <input type="checkbox" name="items" value="美容" >美容
       <input type="checkbox" name="items" value="IT" >IT
       <input type="checkbox" name="items" value="金融" >金融
       <input type="checkbox" name="items" value="管理" >管理
 
       <br><br>
 
        <input type="radio" name="sex" value="男" >男
        <input type="radio" name="sex" value="女" >女
 
         <br><br>
 
        <select name="job" id="job" multiple="multiple" size=4>
           <option>程序员</option>
         <option>中级程序员</option>
         <option>高级程序员</option>
         <option>系统分析师</option>
          </select>
 
          <select name="edu" id="edu">
           <option>本科</option>
         <option>博士</option>
         <option>硕士</option>
         <option>大专</option>
          </select>
 
      <br/>
 
   </body>
 
</html>

好了，关于jQuery框架中五种选择器的使用就先和大家分享到这里，之后还会继续和小伙伴们分享jQuery的选择器、DOM操作以及jQuery的高级进阶内容。

点击关注，第一时间了解华为云新鲜技术~