Unity开发者联盟收藏本站
发帖教程新人必读切换到宽版

 找回密码
 立即注册
Unity开发者联盟»论坛 › 3D Dev Asset 开发资源大全 › 学术研究 Scholarly › 【JQuery框架】五大选择器“全家桶”详解！！！ ...
返回列表 发新帖
查看: 217|回复: 0

【JQuery框架】五大选择器“全家桶”详解！！！

[复制链接]
发表于 2022-6-26 18:03 | 显示全部楼层 |阅读模式
目录
选择器基本操作
1、事件绑定
2、入口函数
3、样式控制
一、基本选择器
1、标签选择器
2、id选择器
3、类选择器
4、并集选择器
二、层级选择器
1、后代选择器
2、子选择器
三、属性选择器
1、属性名称选择器
2、属性选择器
根据正则表达式的使用规则：
3、复合属性选择器
四、过滤选择器
1、首元素选择器
2、尾元素选择器
3、非元素选择器
4、偶数选择器
5、奇数选择器
6、等于索引选择器
7、大于索引选择器
8、小于索引选择器
9、标题选择器
五、表单过滤选择器
1、可用元素选择器
2、不可用元素选择器
3、选中选择器
4、选中选择器（下拉框）
Hello，大家好，我是灰小猿，一个超会写bug的程序猿！
今天来和大家分享一下jQuery的五种选择器的详细使用方法，那么何为选择器？从功能上来讲，它能够筛选具有相似特征的元素标签，在我们想要对具有相似特征的元素进行集中或统一操作时是十分有用的，
选择器基本操作

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

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

同时在jQuery中，这样的事件绑定是需要写在一个入口函数中去的，在
<script></script>的代码段中建立入口函数的语法是：
  1. $(function(){
  3. });
复制代码
在这里需要注意的是：在js中定义入口函数的window.onload方法和$(function)方法是有区别的，
具体如下：
window.onload只能定义一次，如果定义多次，后面的会将前面的覆盖掉
$(function)方法是可以定义多次的，后面的不会将前面的覆盖掉
3、样式控制

当我们对选择器的事件进行了绑定之后，我们就可以通过选择器进行相应元素的样式控制了，在这里通常的表现是css方法，通过css方法来对相应的元素样式进行修改。
来看一个基本操作的实例：
  1. <script type="text/javascript">
  2.    $(function () {
  3.       //标签选择器
  4.       // 改变元素名为 <div> 的所有元素的背景色为 红色
  5.       $("#b2").click(function f() {
  6.          $("div").css("backgroundColor","yellow");
  7.       });
  8.    });
  9. </script>
复制代码
那么接下来就通过实例分别来和大家讲一下jQuery框架下的五种选择器的使用方法。
一、基本选择器

1、标签选择器

标签选择器又称为“元素选择器”，
语法：$(“html标签名”)
作用：获得所有匹配标签元素名称的元素
  1. //标签选择器
  2. // 改变元素名为 <div> 的所有元素的背景色为 黄色id="b1"
  3. $("#b1").click(function f() {
  4.    $("div").css("backgroundColor","yellow");
  5. });
复制代码
2、id选择器

语法：$(“#id的属性值”)
作用：获得与指定id属性值匹配的元素
  1. //id选择器
  2. // 改变 id 为 one 的元素的背景色为 粉色 id="b2"
  3. $("#b2").click(function () {
  4.    $("#one").css("backgroundColor","pink");
  5. });
复制代码
3、类选择器

语法：$(“.class的属性选择器”)
作用：获得与指定class属性值匹配的元素
  1. //类选择器
  2. // 改变 class 为 mini 的所有元素的背景色为 红色id="b3"
  3. $("#b3").click(function () {
  4.    $(".mini").css("backgroundColor","red");
  5. });
复制代码
4、并集选择器

语法：$(“选择器1,选择器2....”)
获取多个选择器选中的所有元素
  1. //并集选择器
  2. // 改变所有的<span>元素和 id 为 two 的元素的背景色为蓝色id="b4"
  3. $("#b4").click(function () {
  4.    $("span,#two").css("backgroundColor","blue");
  5. });
复制代码
二、层级选择器

1、后代选择器

语法：$(“A B”)
作用：选择A元素内部的所有B元素
  1. //后代选择器
  2. // 改变 <body> 内所有 <div> 的背景色为红色id="b1"
  3. $("#b1").click(function () {
  4.    $("body div").css("backgroundColor","pink");
  5. });
复制代码
2、子选择器

语法：$(“A > B”)
作用：选择A元素内部的所有B子元素
  1. // 子选择器
  2. // 改变 <body> 内子 <div> 的背景色为 红色id="b2"
  3. $("#b2").click(function () {
  4.    $("body > div").css("backgroundColor","red");
  5. });
复制代码
在这里需要注意的是：这两个选择器看上去似乎没有什么区别，但是我们在使用时就会发现其实是有区别的，后代选择器会将元素A内部的所有B元素都选中，而子选择器只会选中元素A的下一级元素中的B元素，范围是小于后代选择器的。具体可以看下面的实例：
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.     <title>层次选择器</title>
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6.    <script  src="../js/jquery-3.3.1.min.js"></script>
  7.    <style type="text/css">
  8.          div,span{
  9.              width: 180px;
  10.              height: 180px;
  11.              margin: 20px;
  12.              background: #9999CC;
  13.              border: #000 1px solid;
  14.             float:left;
  15.              font-size: 17px;
  16.              font-family:Roman;
  17.          }
  18.          
  19.          div .mini{
  20.              width: 50px;
  21.              height: 50px;
  22.              background: #CC66FF;
  23.              border: #000 1px solid;
  24.              font-size: 12px;
  25.              font-family:Roman;
  26.          }
  27.          
  28.          div .mini01{
  29.              width: 50px;
  30.              height: 50px;
  31.              background: #CC66FF;
  32.              border: #000 1px solid;
  33.              font-size: 12px;
  34.              font-family:Roman;
  35.          }
  36.          
  37.     </style>
  38.     <script type="text/javascript">
  40.       $(function () {
  41.          //后代选择器
  42.          // 改变 <body> 内所有 <div> 的背景色为红色
  43.          $("#b1").click(function () {
  44.             $("body div").css("backgroundColor","pink");
  45.          });
  47.          // 子选择器
  48.          // 改变 <body> 内子 <div> 的背景色为 红色
  49.          $("#b2").click(function () {
  50.             $("body > div").css("backgroundColor","red");
  51.          });
  53.       });
  56.    </script>
  57.    
  58.    </head>
  59.    
  60.    <body>
  61.             
  62.        <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
  63.        <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色"  id="b1"/>
  64.        <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/>
  65.       
  67.        <h1>有一种奇迹叫坚持</h1>
  68.        <h2>自信源于努力</h2>
  69.       
  70.         <div id="one">
  71.            id为one  
  72.            
  73.        </div>
  74.       
  75.        <div id="two" class="mini" >
  76.              id为two   class是 mini
  77.              <div  class="mini" >class是 mini</div>
  78.       </div>
  79.       
  80.        <div class="one" >
  81.              class是 one
  82.              <div  class="mini" >class是 mini</div>
  83.             <div  class="mini" >class是 mini</div>
  84.        </div>
  85.        <div class="one">
  86.            class是 one
  87.              <div  class="mini01" >class是 mini01</div>
  88.             <div  class="mini" >class是 mini</div>
  89.       </div>
  90.       
  91.       
  92.       <span class="spanone">    span
  93.       </span>
  94.       
  95.    </body>
  96.    
  97.    
  98. </html>
复制代码
三、属性选择器

1、属性名称选择器

语法：$(“A[属性名]”)
作用：包含指定属性的选择器
  1. // 含有属性title 的div元素背景色为红色"  id="b1"
  2. $("#b1").click(function () {
  3.    $("div[title]").css("backgroundColor","pink");
  4. });
复制代码
2、属性选择器

语法：$(“A[属性名=’值’]”)
作用：包含指定属性等于指定值的选择器，
  1. // 属性title值等于test的div元素背景色为红色"  id="b2"
  2. $("#b2").click(function () {
  3.     $("div[title='test']").css("backgroundColor","red");
  4. });
复制代码
在这个选择器中，我们可以根据他的功能进行拓展，比如我们可以将：
“=”换成“!=”，就是指定属性名称不等于指定值的选择器
  1. // 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"
  2. $("#b3").click(function () {
  3.     $("div[title!='test']").css("backgroundColor","red");
  4. });
复制代码
根据正则表达式的使用规则：

“=”换成“^=”，就是指定属性名称是以指定值开头的选择器
  1. // 属性title值 以te开始 的div元素背景色为红色"  id="b4"
  2. $("#b4").click(function () {
  3.     $("div[title^='te']").css("backgroundColor","red");
  4. });
复制代码
“=”换成“$=”,就是指定属性名称是以指定值结尾的选择器
  1. // 属性title值 以est结束 的div元素背景色为红色"  id="b5"
  2. $("#b5").click(function () {
  3.    $("div[title$='est']").css("backgroundColor","red");
  4. });
复制代码
“=”换成“*=”，就是指定属性名称中包含指定值的选择器
  1. // 属性title值 含有es的div元素背景色为红色"  id="b6"
  2. $("#b6").click(function () {
  3.     $("div[title*='es']").css("backgroundColor","red");
  4. });
复制代码
3、复合属性选择器

语法：$(“A[属性名=’值’][]...”)
作用：包含多个属性条件的选择器
  1. // 选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"
  2. $("#b7").click(function () {
  3. $("div[id][title*='es']").css("backgroundColor","red");
  4. });
复制代码
四、过滤选择器

1、首元素选择器

语法：$(“A:first”)
作用：获得选择的元素的第一个元素
  1. // 改变第一个 div 元素的背景色为 红色"  id="b1"
  2. $("#b1").click(function () {
  3.    $("div:first").css("backgroundColor","red");
  4. });
复制代码
2、尾元素选择器

语法：$(“A:last”)
作用：获得选择的元素的最后一个元素
  1. // 改变最后一个 div 元素的背景色为 红色"  id="b2"
  2. $("#b2").click(function () {
  3.    $("div:last").css("backgroundColor","red");
  4. });
复制代码
3、非元素选择器

语法：$(“not(selector)”)
作用：不包括指定内容的元素
  1. // 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3
  2. $("#b3").click(function () {
  3.    $("div:not(.one)").css("backgroundColor","red");
  4. });
复制代码
4、偶数选择器

语法：$(“A:even”)
作用：从0开始计数，获得选择的元素中索引为偶数的元素
  1. // 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"
  2. $("#b4").click(function () {
  3.    $("div:even").css("backgroundColor","red");
  4. });
复制代码
5、奇数选择器

语法：$(“A:odd”)
作用：从0开始计数，获得选择的元素中索引为奇数的元素
  1. // 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"
  2. $("#b5").click(function () {
  3.    $("div:odd").css("backgroundColor","red");
  4. });
复制代码
6、等于索引选择器

语法：$(“A:eq(index)”)
作用：获得选择的元素中指定索引的元素
  1. // 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"
  2. $("#b7").click(function () {
  3.    $("div:eq(3)").css("backgroundColor","red");
  4. });
复制代码
7、大于索引选择器

语法：$(“A:gt(index)”)
作用：获得选择的元素中大于指定索引的元素
  1. // 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"
  2. $("#b6").click(function () {
  3.    $("div:gt(3)").css("backgroundColor","red");
  4. });
复制代码
8、小于索引选择器

语法：$(“A:lt(index)”)
作用：获得选择的元素中小于指定索引的元素
  1. // 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"
  2. $("#b8").click(function () {
  3.    $("div:lt(3)").css("backgroundColor","red");
  4. });
复制代码
9、标题选择器

语法：$(“:header”)
作用：获得标题（h1~h6）元素，为固定写法
  1. // 改变所有的标题元素的背景色为 红色"  id="b9"
  2. $("#b9").click(function () {
  3.    $(":header").css("backgroundColor","red");
  4. });
复制代码
五、表单过滤选择器

1、可用元素选择器

语法：$(“A:enabled”)
作用：获得选择元素中的可用元素
  1. // 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"
  2. $("#b1").click(function () {
  3.    $("input[type='text']:enabled").val("aaa");
  4. });
复制代码
2、不可用元素选择器

语法：$(“A:disabled”)
作用：获得选择元素中的不可用元素
  1. // 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"
  2. $("#b2").click(function () {
  3.    $("input[type='text']:disabled").val("bbb");
  4. });
复制代码
3、选中选择器

语法：$(“A:checked”)
作用：获得单选/复选框选中的元素
  1. // 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"
  2. $("#b3").click(function () {
  3.    var lengths = $("input[type='checkbox']:checked").length;
  4.    alert(lengths);
  5. });
复制代码
4、选中选择器（下拉框）

语法：$(“A:selected”)
作用：获得下拉框选中的元素
  1. // 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"
  2. $("#b4").click(function () {
  3.    var selects = $("#job > option:selected").length;
  4.    alert(selects)
  5. });
复制代码
在这里需要注意一点：上面的两个选中选择器的作用对象是不一样的，第一个选中选择器的作用对象是单选/复选框，而第二个选中选择器的作用对象是下拉框，同时对于第二种选择器，它的作用内容是下拉框中的包含在<option></option>内的选项，因此在使用时应当使用“>”来具体说明，具体可以看下面的实例：
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.     <title>表单属性过滤选择器</title>
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6.    <script  src="../js/jquery-3.3.1.min.js"></script>
  7.    <style type="text/css">
  9.          #job{
  10.             margin: 20px;
  11.          }
  12.          #edu{
  13.             margin-top:-70px;
  14.          }
  15.          
  16.     </style>
  17.     <script type="text/javascript">
  18.       $(function () {
  20.          // 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"
  21.          $("#b3").click(function () {
  22.             var lengths = $("input[type='checkbox']:checked").length;
  23.             alert(lengths);
  24.          });
  26.          // 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"
  27.          $("#b4").click(function () {
  28.             var selects = $("#job > option:selected").length;
  29.             alert(selects)
  30.          });
  32.       });
  34.    </script>
  35.    </head>
  36.    
  37.    <body>
  38.             
  39.        <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
  40.        <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"/>
  41.        <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"/>
  43.       <br><br>
  44.       
  45.        <br><br>
  46.        <input type="checkbox" name="items" value="美容" >美容
  47.        <input type="checkbox" name="items" value="IT" >IT
  48.        <input type="checkbox" name="items" value="金融" >金融
  49.        <input type="checkbox" name="items" value="管理" >管理
  50.       
  51.        <br><br>
  52.       
  53.         <input type="radio" name="sex" value="男" >男
  54.         <input type="radio" name="sex" value="女" >女
  55.         
  56.          <br><br>
  57.       
  58.         <select name="job" id="job" multiple="multiple" size=4>
  59.            <option>程序员</option>
  60.          <option>中级程序员</option>
  61.          <option>高级程序员</option>
  62.          <option>系统分析师</option>
  63.           </select>
  64.          
  65.           <select name="edu" id="edu">
  66.            <option>本科</option>
  67.          <option>博士</option>
  68.          <option>硕士</option>
  69.          <option>大专</option>
  70.           </select>
  71.       
  72.       <br/>
  73.       
  74.    </body>
  75.    
  76. </html>
复制代码
好了，关于jQuery框架中五种选择器的使用就先和大家分享到这里，之后还会继续和小伙伴们分享jQuery的选择器、DOM操作以及jQuery的高级进阶内容。
觉得不错记得点赞关注哟！

灰小猿陪你一起进步！


本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表 发新帖
懒得打字嘛，点击右侧快捷回复 【右侧内容，后台自定义】
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Unity开发者联盟 ( 粤ICP备20003399号 )

GMT+8, 2024-6-5 21:12 , Processed in 0.105060 second(s), 26 queries .

Powered by Discuz! X3.5 Licensed

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表