开发者社区> 灰小猿> 正文

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

简介: 【JQuery框架】五大选择器“全家桶”详解!!!
+关注继续查看

 

目录

选择器基本操作

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>的代码段中建立入口函数的语法是:

$(function(){
});

image.gif

在这里需要注意的是:在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>

image.gif

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

一、基本选择器

1、标签选择器

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

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

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

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

image.gif

2、id选择器

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

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

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

image.gif

3、类选择器

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

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

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

image.gif

4、并集选择器

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

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

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

image.gif

二、层级选择器

1、后代选择器

语法:$(“A B”)

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

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

image.gif

2、子选择器

语法:$(“A > B”)

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

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

image.gif

在这里需要注意的是:这两个选择器看上去似乎没有什么区别,但是我们在使用时就会发现其实是有区别的,后代选择器会将元素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>

image.gif

三、属性选择器

1、属性名称选择器

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

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

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

image.gif

2、属性选择器

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

作用:包含指定属性等于指定值的选择器,

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

image.gif

在这个选择器中,我们可以根据他的功能进行拓展,比如我们可以将:

“=”换成“!=”,就是指定属性名称不等于指定值的选择器

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

image.gif

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

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

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

image.gif

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

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

image.gif

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

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

image.gif

3、复合属性选择器

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

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

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

image.gif

四、过滤选择器

1、首元素选择器

语法:$(“A:first”)

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

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

image.gif

2、尾元素选择器

语法:$(“A:last”)

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

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

image.gif

3、非元素选择器

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

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

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

image.gif

4、偶数选择器

语法:$(“A:even”)

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

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

image.gif

5、奇数选择器

语法:$(“A:odd”)

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

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

image.gif

6、等于索引选择器

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

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

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

image.gif

7、大于索引选择器

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

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

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

image.gif

8、小于索引选择器

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

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

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

image.gif

9、标题选择器

语法:$(“:header”)

作用:获得标题(h1~h6)元素,为固定写法

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

image.gif

五、表单过滤选择器

1、可用元素选择器

语法:$(“A:enabled”)

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

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

image.gif

2、不可用元素选择器

语法:$(“A:disabled”)

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

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

image.gif

3、选中选择器

语法:$(“A:checked”)

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

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

image.gif

4、选中选择器(下拉框)

语法:$(“A:selected”)

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

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

image.gif

在这里需要注意一点:上面的两个选中选择器的作用对象是不一样的,第一个选中选择器的作用对象是单选/复选框,而第二个选中选择器的作用对象是下拉框,同时对于第二种选择器,它的作用内容是下拉框中的包含在<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>

image.gif

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

觉得不错记得点赞关注哟!

灰小猿陪你一起进步!

imageimage.gif编辑

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23579 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
22345 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
19800 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
14743 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
22537 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
36439 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
16428 0
+关注
灰小猿
一个用代码编织世界的工程师
70
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载