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

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

# 一、前言 #

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

# 二、基本选择器 #

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

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

# 三、例子展示 #

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>事件的链式写法</title>
            <script type="text/javascript" src="js/jquery-3.2.0.min.js" ></script>
            <style type="text/css"> .iframe{ border:solid 1px #888;font-size:13px;} .iframe div span{ padding:8px;font-size: 12px;} </style>
            <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>
        </head>
        <body>
            <div class="iframe">
                <div id="title">ID</div>
                <div class="clsOne">Class</div>
                <span>span</span>
            </div>
        </body>
    </html>

通过更换js中的代码就可以看出，他们之间不同的样式变化。如果用DOM来操作获取元素也可以实现，但是代码量会增加很多。

# 四、小结 #

通过学习JQuery的选择器，我们可以很快的入门，了解其中的语法才可以更加的熟练，所以我们要多练，多练。

下一篇博客将向大家介绍另一种选择器——层次选择器

[JQuery_JQuery]: http://blog.csdn.net/kisscatforever/article/details/68928550