【JQuery】熟能生巧JQuery（四）——基本选择器

﹏ヽ暗。殇╰゛Y 2022-06-18 07:41 253阅读 0赞

一、前言

  1.   在上一篇博客中宏观向大家介绍了JQuery的选择器，“[【JQuery】熟能生巧JQuery（三）——选择器][JQuery_JQuery]”，一共分了四种。每一种都有各自不同的功能。在这篇博客中，小编向大家介绍第一种选择器——基本选择器。

二、基本选择器

  1.   基本选择器是JQuery中使用最频繁的。它由id，class，元素名，多个选择符，通过基本选择器可以实现大多页面的查找。



































关键字 说明 示例
id 根据id选择元素 $(“#title”).css(“background-color”,”aqua”);
.class 根据类属性选择元素 $(“.clsOne “).css(“background-color”,”aqua”);
element 根据元素名选择 $(“div span “).css(“background-color”,”aqua”);
选择全部的元素 $(” ”).css(“background-color”,”aqua”);
selector1,selectorN 将每个选择器匹配到的元素合并后一起返回 $(“#title,span”).css(“background-color”,”aqua”);

三、例子展示

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>事件的链式写法</title>
  6.         <script type="text/javascript" src="js/jquery-3.2.0.min.js" ></script>
  7.         <style type="text/css"> .iframe{ border:solid 1px #888;font-size:13px;} .iframe div span{ padding:8px;font-size: 12px;} </style>
  8.         <script type="text/javascript"> $(function(){ //ID匹配元素 $("#title").css("background-color","aqua"); }); $(function(){ //元素名匹配元素 $("div span ").css("background-color","aqua"); }); $(function(){ //类匹配元素 $(".clsOne ").css("background-color","aqua"); }); $(function(){ //匹配所有元素 $("*").css("background-color","aqua"); }); $(function(){ //合并匹配元素 $("#title,span").css("background-color","aqua"); }); </script>
  9.     </head>
  10.     <body>
  11.         <div class="iframe">
  12.             <div id="title">ID</div>
  13.             <div class="clsOne">Class</div>
  14.             <span>span</span>
  15.         </div>
  16.     </body>
  17. </html>
  19.   通过更换js中的代码就可以看出，他们之间不同的样式变化。如果用DOM来操作获取元素也可以实现，但是代码量会增加很多。

四、小结

  1.   通过学习JQuery的选择器，我们可以很快的入门，了解其中的语法才可以更加的熟练，所以我们要多练，多练。
  3.   下一篇博客将向大家介绍另一种选择器——层次选择器

发表评论

表情：
评论列表 （有 0 条评论，253人围观）

还没有评论，来说两句吧...

相关阅读

    相关 jQuery 基本选择器

    在jQuery的使用中，选择器是使用率最高的方法，那么从本篇文章开始，介绍jQuery的选择器的使用。依小编自己的看法就是一个WEB前端开发者使用jQuery选择器的方式与他的

    柔光的暖阳◎柔光的暖阳◎/ 0 赞/ 315 阅读