Home > Article > Web Front-end > Some details in jquery selector

Some details in jquery selector

伊谢尔伦Original: 2016-12-10 09:45:251472browse

1. Visibility filter selector

:hidden selects all invisible elements. For example:$(":hidden") means to select all invisible elements. Includes:

<input type="hidden" />
<div style="display:none;"></div>
<div style="visibity:hidden"></div>

Annotation content on the html page /**/, 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1, e8e496c15ba93d81f6ea4fe5f55a224403d0e15baf5b7c9d224e5281b47a68fe (if this tag is on the page), b2386ffb911b14667cb8f0f91ea547a7b25a9407cfe693f10872c2a72988c045, f201f3e801a248066d83a5e65188634b2cacc6d41bbb37262a98f745aa00fbf0, 61407f7b7461f346926503a77e36dc2a2cacc6d41bbb37262a98f745aa00fbf0, 769cbb542039d9a75a430d05b5cfa3b6531ac245ce3e4fe3d50054a55f265927
and other elements. If you only want to remove the d5fd7aea971a85678ba271703566ebfd element, you can use $("input:hidden"). Note that there is no space between input:hidden. We will explain the difference between the presence and absence of spaces later;
Verification is as follows:
Verification page code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试jQuery选择器</title>

    <script src="Scripts/jquery-1.7.1.js"></script>
    <style type="text/css">
        .test {            
              background-color: yellow;       
          }
    </style>
</head>
<body>
    <input type="hidden"  value="hidden"/>
    <div style="display:none"></div>  
    <script type="text/javascript">
        var $hidden1 = $(":hidden");        
        var $hidden2 = $("input:hidden");        
        var len1 = $hidden1.length;        
        var len2 = $hidden2.length;
        console.log("$(&#39;:hidden&#39;).length:"+len1);
        console.log("$(&#39;input:hidden&#39;).lengh:" + len2);
        $.each($hidden1, function () {
            console.log(this.nodeName+":"+  this.innerHTML);
        });
        $.each($hidden2, function () {
            console.log(this.nodeName + ":" + this.innerHTML);
        });    
    </script>
</body>
</html>

The output result is as follows:

$(&#39;:hidden&#39;).length:8
 $(&#39;input:hidden&#39;).lengh:1
 HEAD:    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>测试jQuery选择器</title>

    <script src="Scripts/jquery-1.7.1.js"></script>
    <style type="text/css">
        .test {
            background-color: yellow;
        }    </style>

 META:
 TITLE:测试jQuery选择器
 SCRIPT:
 STYLE:        .test {
            background-color: yellow;
        }

 INPUT:
 DIV:
 SCRIPT:        
    var $hidden1 = $(":hidden");        
    var $hidden2 = $("input:hidden");        
    var len1 = $hidden1.length;        
    var len2 = $hidden2.length;
        console.log("$(&#39;:hidden&#39;).length:"+len1);
        console.log("$(&#39;input:hidden&#39;).lengh:" + len2);
        $.each($hidden1, function () {
            console.log(this.nodeName+":"+  this.innerHTML);
        });
        $.each($hidden2, function () {
            console.log(this.nodeName + ":" + this.innerHTML);
        });

 INPUT:

2. Whether there are spaces in the selector

The spaces in the selector cannot be ignored. The presence or absence of spaces will get different results. Look at the example below:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试jQuery选择器</title>

    <script src="Scripts/jquery-1.7.1.js"></script>
    <style type="text/css">
        .test {           
                background-color: yellow;        
          }
    </style>
</head>
<body>
    <div class="test">
        <div style="display:none">a</div>
        <div style="display:none">b</div>
        <div style="display:none">c</div>
        <div class="test" style="display:none">d</div>
    </div>
    <div class="test" style="display:none;">e</div>
    <div class="test" style="display:none">f</div>

    <script type="text/javascript">
        var $t1 = $(".test :hidden");//带空格
        var $t2 = $(".test:hidden");//不带空格
        var len1 = $t1.length;        var len2 = $t2.length;
        console.log("$(&#39;.test :hidden&#39;).length:" + len1);
        console.log("$(&#39;.test:hidden&#39;).length:" + len2);
        $.each($t1, function () {
            console.log(this.nodeName+":"+ this.innerHTML);
        });
        console.log();
        $.each($t2, function () {
            console.log(this.nodeName + ":" + this.innerHTML);
        });    
     </script>
</body>
</html>

The output result is as follows:

$(&#39;.test :hidden&#39;).length:4
$(&#39;.test:hidden&#39;).length:3
 DIV:a
 DIV:b
 DIV:c
 DIV:d

 DIV:d
 DIV:e
 DIV:f

The reason why there are different results is because the descendant selector and filter selector are different.
$(".test :hidden") with spaces selects the hidden elements in the element with class "test", which is equivalent to .class *:hidden and is similar to the expression of css.

$(".test:hidden") without spaces selects the hidden element whose class is "test".

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Understanding JavaScript’s async/awaitNext article：Understanding JavaScript’s async/await

See more

Some details in jquery selector

Related articles