Heim > Artikel > Web-Frontend > Einige Details im JQuery-Selektor

Einige Details im JQuery-Selektor

伊谢尔伦Original: 2016-12-10 09:45:251507Durchsuche

1. Sichtbarkeitsfilterauswahl

:hidden wählt alle unsichtbaren Elemente aus. Beispiel: $(":hidden") bedeutet, alle unsichtbaren Elemente auszuwählen. Einschließlich:

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

Anmerkungsinhalt auf der HTML-Seite/**/, 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1, e8e496c15ba93d81f6ea4fe5f55a224403d0e15baf5b7c9d224e5281b47a68fe (wenn dieser Tag auf der Seite ist) , b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f, f201f3e801a248066d83a5e65188634b2cacc6d41bbb37262a98f745aa00fbf0, 61407f7b7461f346926503a77e36dc2a2cacc6d41bbb37262a98f745aa00fbf0, 810738cdb25dadd7af4db3f94fb66716531ac245ce3e4fe3d50054a55f265927 und andere Elemente ein. Wenn Sie nur das d5fd7aea971a85678ba271703566ebfd-Element entfernen möchten, können Sie $("input:hidden") verwenden. Beachten Sie, dass zwischen input:hidden kein Leerzeichen steht. Wir werden den Unterschied zwischen dem Vorhandensein und Fehlen von Leerzeichen später erklären.
Die Verifizierung erfolgt wie folgt:
Verifizierungsseitencode:

<!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>

Das Ausgabeergebnis lautet wie folgt:

$(&#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 🎜>

Die Leerzeichen im Selektor können nicht ignoriert werden. Mit oder ohne Leerzeichen werden unterschiedliche Ergebnisse erzielt. Schauen Sie sich das folgende Beispiel an:

Das Ausgabeergebnis lautet wie folgt:

<!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>

$(&#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

Der Grund, warum es unterschiedliche Ergebnisse gibt, liegt darin, dass der Nachkommenselektor und der Filterselektor identisch sind anders. $(".test :hidden") mit Leerzeichen wählt die ausgeblendeten Elemente im Element mit der Klasse „test“ aus, was .class *:hidden entspricht und dem Ausdruck von CSS ähnelt.

$(".test:hidden") ohne Leerzeichen wählt das versteckte Element aus, dessen Klasse „test“ ist.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Async/await von JavaScript verstehenNächster Artikel：Async/await von JavaScript verstehen

In Verbindung stehende Artikel

Mehr sehen