ホームページ > 記事 > ウェブフロントエンド > jQueryセレクターの詳細

jQueryセレクターの詳細

伊谢尔伦オリジナル: 2016-12-10 09:45:251510ブラウズ

1. 可視性フィルターセレクター

:hidden はすべての非表示の要素を選択します。例: $(":hidden") は、非表示の要素をすべて選択することを意味します。含まれるもの:

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

HTML ページの注釈コンテンツ /**/、93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1、e8e496c15ba93d81f6ea4fe5f55a224403d0e15baf5b7c9d224e5281b47a68fe (このタグがページ上にある場合)、b2386ffb911b14667cb8f0f91ea547a733b25c82eb56da23eb9645fda47e0d27、f201f3e801a248066d83a5e65188634b2cacc6d41bbb37262a98f745aa00fbf0、61407f7b7461f346926503a77e36dc2a2cacc6d41bbb37262a98f745aa00fbf0、45964fe1ba2b97f3a8e15c01044d00e3531ac245ce3e4fe3d50054a55f265927
およびその他の要素。 d5fd7aea971a85678ba271703566ebfd 要素のみを削除したい場合は、$("input:hidden") を使用できます。input:hidden の間にスペースがないことに注意してください。スペースの有無については後で説明します。
検証内容は以下の通りです:
検証ページコード:

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

出力結果は以下の通りです:

$(&#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. セレクター内のスペースの有無

セレクター内のスペースの有無は無視できません。異なる結果が得られます。以下の例を見てください:

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

結果が異なる理由は、子孫セレクターとフィルターセレクターが異なるためです。スペースを含む
$(".test :hidden") は、クラス "test" の要素内の非表示要素を選択します。これは .class *:hidden に相当し、CSS の表現に似ています。スペースなしの

$(".test:hidden") は、クラスが「test」である非表示要素を選択します。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript の async/await を理解する次の記事：JavaScript の async/await を理解する

続きを見る

jQueryセレクターの詳細

関連記事