jQuery选择器（元素，ID，类，并列，层次选择器）

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

新一代小卷王

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

阅读量4.4k

点赞数 65

分类专栏：【扬帆起航】jQuery 文章标签： javascript jquery 原型模式 html5 css3

本文链接：https://blog.csdn.net/m0_70571756/article/details/124892297

版权

【扬帆起航】jQuery 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

这篇博客详细介绍了jQuery的选择器，包括基本选择器（元素、ID、类和并列选择器）和层次选择器（祖先后代、父子、前后、兄弟选择器），并提供了多个示例展示如何使用jQuery选择器来操作和修改HTML元素，强调了jQuery选择器的高效性和浏览器兼容性。

摘要由CSDN通过智能技术生成

写在前面

jQuery是一个快速、简洁的 JavaScript 框架，是继Prototype之后又一个优秀的 JavaScript 代码库。jQuery的设计宗旨是“WriteLess，DoMore”，即倡导写更少的代码，做更多的事情。jQuery封装了 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

🍓jQuery选择器

在CSS中，选择器的作业是选择页面中的某些HTML元素或者某一个HTML元素。jQuery中的选择器使用“$",其方式更全面，而且不存在浏览器的兼容问题。
jQuery选择器允许通过标签名，属性名或内容对HTML元素进行选择或者修改HTML元素的样式属性。jQuery的选择器很多，可以分为基本选择器、层次选择器、过滤选择器和属性选择器。

🍍基本选择器

1.元素选择器

元素选择器可以选中HTML文档中所有的某个元素。如$(“p”)可以表示选中本网页中所有的p元素，又如$("input")表示选中本网页中所有的input元素。

2.ID选择器

ID选择器可以根据指定ID值返回一个唯一的元素。例1中定义一个ID为“myId”的<p id="myld">Hello</p>，单击该ID标记内的文字时，把其中的文字内容由“Hello”改为“World”，使用ID选择器选中该<p>元素的方法是$(“#my”)。

【例1】

<!doctype html>
<html>
   <head>
     <meta charset="utf-8">
     <title>jQuery</title>
     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
     <script>
      $(document). ready(function(e){
       $("#myId"). click(function(){
         $("#myId"). html("World");
       });
      });
     </script>
   </head>
<body>
    <p id="myId">Hello</p>
</body>
</html>

3.类选择器

类选择器可以根据元素的CSS类选择一组元素。例如，$(". left")指选择页面中所有class属性为left的元素；$("p. left")指选择页面中所有class属性为left的p元素。

例2是在HTML中定义myClass类的<li>元素，在jQuery中使用类选择器选中这些元素，然后遍历<li>元素，并修改其HTML的显示内容，在浏览器中的显示结果如图1所示，单击相应按钮后在浏览器中的显示结果如图2所示。

【例2】

<!doctype html>
<html>
   <head>
     <meta charset="utf-8">
     <title>jQuery类选择器</title>
     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
     <script>
       $(document). ready(function(){
        $("button"). click(function(){
         $(".myClass"). each(function(index, element){  
          $(this). html(index+"-"+$(this). text())／／修改其元素的文字内容
          });
        });
       });
     </script>
   </head>
<body>
   <button>增加每个列表项的索引值</button>
   <ul>
     <li class="myClass">足球</li>
     <li class="myClass">羽毛球</li>
     <li class="my Class">篮球</li>
   <ul>
</body>
</html>

图1 jQuery类选择器

图2 jQuery类选择器元素遍历

4.并列选择器

并列选择器指使用逗号隔开的选择符，彼此之间是并列关系。例如，$("p，div")指选择页面中所有的p元素和div元素；$(#my，p，. lef")指选择页面中id为my的第一个元素、所有的p元素以及所有的class属性为left的元素。

🍉层次选择器

层次选择器可以根据页面中HTML元素之间的嵌套关系选择元素，主要包括祖先后代选择器、父子选择器、前后选择器、兄弟选择器。

1.祖先后代选择器

祖先后代选择器中祖先选择符和后代选择符之间使用空格隔开，不限制嵌套的层次数。例如：$(". left p")或$("form input")
前面一个选择符表示选择所有class属性为left的元素中的所有p元素；后面一个选择符表示选择所有form元素中的input元素。

例3是在HTML中定义祖先元素＜div＞，其id属性为box，后代元素＜li＞，在jQuery中使用祖先后代选择器选中这些<li>元素，选择方法是 $("#box li"),然后通过增加CSS类的方法改变其显示风格，在浏览器中的显示结果如图3所示，单击相应按钮后，在浏览器中的显示结果如图4所示。

【例3】

<!doctype html>
<html>
   <head>
     <meta charset="utf-8">
     <title>jQuery祖先后代选择器</title>
      <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
      <script>
        $(document). ready(function(){
         $("button"). click(function(){
           $("#box li").addClass("myClass")
           });
        });
      </script>
    <style>
    .myClass{ist-style:none; background :#C9C;width:200px;text-align:center;margin:5px;}
    </style>
    </head>
<body>
    <button>改变列表显示样式</button>
    <div id="box">
    <ul>
       <li>足球</li>
       <li>羽毛球</li>
       <li>篮球</li>
     </ul>
     </div>
 </body>
</html>

图3 祖先后代选择器

图4 改变列表显示样式

2.父子选择器

在HTML中，元素之间存在包含关系。在例3中<div>元素的子元素是<ul>元素，<ul>元素的子元素是<li>元素，而<div>元素的父元素是<body>元素。父子选择器的父元素和子元素之间使用符号“＞”隔开，前后元素的嵌套关系只能是一层。例如， $("div>ul") 指选择div元素内直接嵌套的ul元素。

例4中利用父子选择器以及jQuery中的CSS()方法，完成与上例相同的程序代码的功能。

【例4】

<!doctype html>
<html>
  <head>
  <meta charset="utf-8">
  <title>jQuery父子选择器</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
     $(document). ready(function(){
      $("button"). click(function(){
       $("#myU1>li"). css({"list-style":"none"," background ":"#C9C",
         "width":"200px","text=align":"center","margin":"5px"})
       });
     });
  </script>
  </head>
<body>
  <button>改变列表显示样式</button>
<div>
   <ul id="myUl">
     <li>足球</li>
     <li>羽毛球</li>
     <li>篮球</li>
   </ul>
</div>
</body>
</html>

3.前后选择器

前后选择器可以选择某元素的下一个同级兄弟元素，前后选择器对两个同级别的元素起作用，前后元素中间使用“+”分隔，选择在某元素后面的next元素，相当于next()方法。例如，$("#my+img")是选择id为my的元素后的第一个同级别img元素，相当于$("#my"). next("img")。

例5是一个验证用户输入数据是否为空的页面，如果为空，则给出相应的错误提示，在浏览器中的运行结果如图所示。

【例5】

<!doctype html>
<html>
  <head>
  <meta charset="utf-8">
  <title>jQuery前后选择器</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">  </script>
  <script>
    $(document). ready(function(){
     $("button").click(function(){
      if($("#username"). val()==""){
        $("#username+span"). html("用户名不能为空!")
        $("#username+span"). css("display","inline")
      }
      else{
        $("#username+span"). css("display","none")
      }
     });
    });
   </script>
   <style>
     div span{display:none; background:red;color:white;}
   </style>
  </head>
 <body>
   <div>
    <label>用户名</label>
    <input type="text" id="username">
    <span></span>
   </div>
   <button>测试</button>
 </body>
</html>