Einige Details im JQuery-Selektor-js-Tutorial-php.cn

Einige Details im JQuery-Selektor

伊谢尔伦

Freigeben： 2016-12-10 09:45:25

Original

1481 Leute haben es durchsucht

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>

Nach dem Login kopieren

Anmerkungsinhalt auf der HTML-Seite/**/, , (wenn dieser Tag auf der Seite ist) , , , , und andere Elemente ein. Wenn Sie nur das -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>

Nach dem Login kopieren

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:

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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.