1. 可視性フィルターセレクター
:hidden はすべての非表示の要素を選択します。例: $(":hidden") は、非表示の要素をすべて選択することを意味します。含まれるもの:
<input type="hidden" /> <div style="display:none;"></div> <div style="visibity:hidden"></div>
HTML ページの注釈コンテンツ /**/、
、 (このタグがページ上にある場合)、<!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("$(':hidden').length:"+len1); console.log("$('input:hidden').lengh:" + len2); $.each($hidden1, function () { console.log(this.nodeName+":"+ this.innerHTML); }); $.each($hidden2, function () { console.log(this.nodeName + ":" + this.innerHTML); }); </script> </body> </html>
出力結果は以下の通りです:
$(':hidden').length:8 $('input:hidden').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("$(':hidden').length:"+len1); console.log("$('input:hidden').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("$('.test :hidden').length:" + len1); console.log("$('.test:hidden').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>
出力結果は次のとおりです:
$('.test :hidden').length:4 $('.test:hidden').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」である非表示要素を選択します。