• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 通配符选择器

    选择所有元素.

    jQuery("*")

    警告:除非被它自己使用,否则*选择器或通用选择器,其速度是极其慢的。

    例子

    查找文档中的每一个元素(包括 head, body 等)。 Note that if your browser has an extension/add-on enabled that inserts a <script> or <link> element into the DOM, that element will be counted as well.

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      h3 { margin: 0; }
      div,span,p {
        width: 80px;
        height: 40px;
        float:left;
        padding: 10px;
        margin: 10px;
        background-color: #EEEEEE;
      }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <div>DIV</div>
     
      <span>SPAN</span>
      <p>P <button>Button</button></p>
    <script>var elementCount = $("*").css("border","3px solid red").length;
    $("body").prepend("<h3>" + elementCount + " elements found</h3>");</script>
     
    </body>
    </html>
    

    查找document.body的所有元素所以像head,script等元素被排除在外。

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      h3 { margin: 0; }
      div,span,p {
        width: 80px;
        height: 40px;
        float:left;
        padding: 10px;
        margin: 10px;
        background-color: #EEEEEE;
      }
      #test {
        width: auto; height: auto; background-color: transparent;
      }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <div id="test">
      <div>DIV</div>
      <span>SPAN</span>
      <p>P <button>Button</button></p>
    </div>
    <script>
    var elementCount = $("#test").find("*").css("border","3px solid red").length;
    $("body").prepend("<h3>" + elementCount + " elements found</h3>");</script>
     
    </body>
    </html>
    

    下篇:类选择器