• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • 并集选择器

    将每一个选择器匹配到的元素合并后一起返回。取并集。

    jQuery("selector1, selector2, selectorN")

    selector1:任何有效的选择。selector2:其他有效的选择。selectorN:更多有效的选择。您可以指定任何数量的选择器。组合成一个单一的结果。

    这个多个表达组合是一种有效的方法来选择不同的元素。因为他们将按在文件的顺序,DOM元素的顺序在返回的jQuery对象中可能不相同。

    另一种选择器组合是.add()方法。

    例子

    查找任何匹配下面三个选择器的元素。

    <!DOCTYPE html>
    <html>
    <head>
      <style>
     
      div,span,p {
        width: 126px;
        height: 60px;
        float:left;
        padding: 3px;
        margin: 2px;
        background-color: #EEEEEE;
        font-size:14px;
      }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <div>div</div>
     
      <p class="myClass">p class="myClass"</p>
      <p class="notMyClass">p class="notMyClass"</p>
      <span>span</span>
    <script>$("div,span,p.myClass").css("border","3px solid red");</script>
     
    </body>
    </html>
    
    div

    p class="myClass"

    p class="notMyClass"

    span

    显示jQuery对象中的顺序。

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      b { color:red; font-size:16px; display:block; clear:left; }
      div,span,p { width: 40px; height: 40px; float:left;
                   margin: 10px; background-color: blue;
                   padding:3px; color:white;
                 }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <span>span</span>
     
      <p>p</p>
      <p>p</p>
      <div>div</div>
      <span>span</span>
     
      <p>p</p>
      <div>div</div>
      <b></b>
    <script>
        var list = $("div,p,span").map(function () {
          return this.tagName;
        }).get().join(", ");
        $("b").append(document.createTextNode(list));
    </script>
     
    </body>
    </html>
    
    span

    p

    p

    div
    span

    p

    div

    注意

    $("p:first",this)等价于$(this).find("p:first")

    <style>
    .demo3 .show{padding:10px 20px;background:#f7f7f7;}
    </style>
    <div style="width:400px;">
    <div class="show">
    <p>内第一行</p>
    <p>内第二行</p>
    </div>
    <p>外一</p>
    <p>外二</p>
    </div>
    
    <script>
    $(".demo3 .show").mouseenter(function()
    {
     $("p:first",this).css({"color":"#ff0000"});
    }); 
    </script>
    
    

    内第一行

    内第二行

    外一

    外二

    上篇:标签选择器

    下篇:包含选择器