jQueryでのスペースの使用例と注意事項 selectors_jquery

この記事は「Sharp jQuery」から抜粋したもので、私自身が少し追加しています。

セレクター内のスペースは無視できません。スペースが 1 つ多いか、1 つ少ないかによって、まったく異なる結果が生じる可能性があります。例を見てみましょう。

まず、次の HTML コードを構築します。

コードをコピーします コードは次のとおりです。

Jquery チュートリアル

="display :none;">Jquery の学習

Jquery プラグイン

style="display:none;">PHP 学習

Jquery プラグイン チュートリアル< ;/div> ;

Jquery プラグインの学習

jQuery コード:

コードをコピーします コードは次のとおりです:

var $test_a = $(".test :hidden") ;//スペースを含む jQuery セレクター

var $test_b = $(".test:hidden");//スペースを含まない jQuery セレクター
var len_a = $test_a.length
var len_b = $test_b。 length;
alert("スペースを含む jQuery セレクターによって選択された jQuery 要素は次のとおりです: " len_a "");//出力は 4 です。
alert("スペースを含まない jQuery セレクターによって選択された jQuery 要素は次のとおりです: "len_b "pcs");//出力は 3


異なる結果が表示される理由は、子孫セレクターとフィルター セレクターが異なるためです

コードをコピー コードは次のとおりです:

var $test_a = $(".test :hidden");//スペースあり jQuery selector

上記のコードは、クラス「test」を持つ要素内の非表示要素を選択します。 (子孫セレクター)

コードをコピー コードは次のとおりです:

var $test_b = $ (" .test:hidden");//スペースなしの jQuery セレクター

上記のコードは、クラス "test" の非表示要素を選択します

注:
一部のセレクターではスペースを使用する必要があります。スペースがないと要素を取得できません。例:

コードをコピー コードは次のとおりです:

$("select:selected").length;//いつでも、このセレクターは要素を取得できません。この長さは 0 でなければなりません

$("select :selected");//これは正しいです


一部のセレクターはスペースなしで使用する必要があります。スペースがある場合、要素は取得できません。例:

コードをコピーします コードは次のとおりです:

$("input: selected").length;//いつになっても、このセレクターは要素を取得できません。長さは 0 でなければなりません

$("input:checked");//これは正しいです