JQueryセレクターの概要

<p>JQueryセレクタにはたくさんの種類があり、大きく分けて以下の9種類があります。 </p>（1）BASICA ＃IDELEMENT基本フィルターセレクター <p class="best-text mb-10">:first <br>:last <br>:not <br>:even <br>:odd <br>:eq <br>:gt <br>:lt <br>:header <br>:animated <br><br>(4) コンテンツフィルターセレクター <br>:contains <br> :empty <br>:has <br>:親 <br><br>(5)可視性フィルターセレクター<br>:hidden <br>:visible <br><br>(6)属性フィルターセレクター<br>[属性] <br>[属性=値] <br>[属性!= 値] <br>[属性^=値] <br> [attribute$=value] <br>[attribute*=value] <br>[attrSel1][attrSel2][attrSelN] <br><br>(7) 子要素フィルターセレクター <br>:nth-child <br> :first-child <br>:last-child <br>:only -child <br><br>(8)フォームセレクター <br>:入力 <br>:テキスト <br>:パスワード <br>:ラジオ <br>:チェックボックス <br>:送信 <br>:画像 <br>:リセット <br>:ボタン <br> :ファイル <br>:非表示 <br><br>(9) フォームフィルターセレクター<br>:有効 <br>:無効 <br>:チェックあり <br>:選択済み<br> <br>jQuery のセレクターは非常に強力です。一般的に使用される要素検索メソッドの概要を以下に示します。 <br>$("#myELement") ID 値が myElement と等しい要素を選択します。ID 値は繰り返すことができません。そのため、取得されるのは 1 つの要素のみです。 <br>$("div") すべての div タグ要素を選択し、div 要素の配列を返します <br> <br>$(".myClass") myClassクラスのCSSを使用してすべての要素を選択します<br> "$ ("*") ドキュメント内のすべての要素を選択すると、結合選択にさまざまな選択肢を使用できます。たとえば、$ ("#myelement, div, .myclass ") <br> <br>カスケードセレクター: <br> <br>$("form input") フォーム要素内のすべての入力要素を選択します <br> <br>$("#main > *") ID 値が main であるすべての子要素を選択します <br> </p>$("label + input") すべてのラベル要素の次の入力要素ノードを選択します。テスト後、セレクターは、ラベル ラベルの直後に入力ラベルが続くすべての入力ラベル要素を返します。 <p>$("#prev ~ div") 兄弟セレクター。このセレクターは、ID prev を持つタグ要素の同じ親要素に属するすべての div タグを返します</p> <p>基本的なフィルターセレクター: </p> <p>$("tr:first") すべての tr 要素の最初の </p> を選択します <p>$("tr:last") すべての tr 要素の最後の tr 要素を選択します </p> <p>$("input:not(:checked) + スパン") </p> <p>フィルターアウト: チェックされたセレクターのすべての入力要素</p> <p>$("tr:even") すべてのtr要素の0番目、2番目、4番目...の要素を選択します(注:選択された複数の要素は配列のため、シーケンス番号は0から始まります) </p> <p>$("tr:odd") すべてのtr要素の1番目、3番目、5番目…の要素を選択します </p> <p>$("td:eq(2)") すべての td 要素の中からシリアル番号 2 の td 要素を選択します </p> : $ ("TD: GT (4)") TD 要素内のシリアル番号が 4 より大きいすべての TD 要素を選択します : $ ("TD: LT (4)") TD 要素の数が 4 未満であるすべての TD 要素を選択します <p> </p>$(":header") h1、h2、h3 などを選択します <p> </p>$("div:animated") アニメーション効果を実行する要素を選択します<p> </p>コンテンツフィルターセレクター: <p> </p>$("div:contains('John')") は div 内の John テキストを含むすべての要素を選択します <p> </p>$("td:empty") 空のすべての td 要素の配列を選択します (テキスト ノードは含まれません) <p> </p>$("div:has(p)") p タグを含むすべての div 要素を選択します <p> </p>$("td:parent") td を親ノードとするすべての要素配列を選択します <p> </p>ビジュアルフィルターセレクター: <p> </p>$("div:hidden") 非表示の div 要素をすべて選択します <p> </p>$("div:visible") 表示されているすべての div 要素を選択します <p> </p>属性フィルターセレクター: <p> </p>$("div[id]") id 属性を含むすべての div 要素を選択します <p> </p>$("input[name='newsletter']") name 属性が 'newsletter' と等しい入力要素をすべて選択します<p> </p>$("input[name!='newsletter']") name 属性が 'newsletter' と等しくないすべての入力要素を選択します<p> </p>$("input[name^='news']") name 属性が 'news' で始まるすべての入力要素を選択します <p></p> <p>$("input[name$='news']") name 属性が 'news' で終わるすべての入力要素を選択します </p> <p>$("input[name*='man']") name 属性に 'news' が含まれる入力要素をすべて選択します</p> <p>$("input[id][name$='man']") このセレクターは、id 属性を含み、属性が man で終わるすべての要素を取得します</p>。 <p>子要素フィルターセレクター: </p> <p>$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")</p> <p>$("div span:first-child") すべての div 要素の最初の子ノードの配列を返します </p> <p>$("div span:last-child") すべての div 要素の最後のノードの配列を返します </p> <p>$("div button:only-child") すべての div に子ノードが 1 つだけあるすべての子ノードの配列を返します</p> <p>フォーム要素セレクター: </p> <p>$(":input") input、textarea、select、button を含むすべてのフォーム入力要素を選択します</p> <p>$(":text") すべてのテキスト入力要素を選択します </p> <p>$(":password") パスワード入力要素をすべて選択します </p> <p>$(":radio") すべてのラジオ入力要素を選択します </p> <p>$(":checkbox") チェックボックスの入力要素をすべて選択します </p> <p>$(":submit") すべての送信入力要素を選択します </p> <p>$(":image") すべての画像入力要素を選択します </p> <p>$(":reset") すべてのリセット入力要素を選択します </p> <p>$(":button") ボタン入力要素をすべて選択します </p> <p>$(":file") すべてのファイル入力要素を選択します </p> <p>$(":hidden") フォームの非表示タイプの入力要素または非表示フィールドをすべて選択します </p> <p>フォーム要素フィルターセレクター: </p> <p>$(":enabled") 操作可能なフォーム要素をすべて選択します </p> <p>$(":disabled") 操作できないフォーム要素をすべて選択します </p> <p>$(":checked") チェックされたフォーム要素をすべて選択します </p> <p>$("select option:selected") は、select の子要素の中から選択されたすべての要素を選択します</p> <p> </p> <p>「S_03_22」という名前の入力テキストボックスの前の td のテキスト値を選択します</p> <p>$("input[@name =S_03_22]").parent().prev().text()</p> <p>名前は「S_」で始まり「_R」で終わりません</p> <p>$("input[@ name ^='S_']").not("[@ name $='_R']")</p> <p>radio_01 という名前のラジオによって選択された値</p> <p>$("input[@ name =radio_01][@checked]").val();</p> <p> </p> <p> </p> <p>$("A B") は、間接的な子ノードを含む、A 要素の下のすべての子ノードを検索します</p> <p>$("A>B") A 要素の下の直接の子ノードを検索します</p> <p>$("A+B") 間接的な子ノードを含む、A 要素の背後にある兄弟ノードを検索します</p> <p>$("A~B") は、間接的な子ノードを除いて、A 要素の背後にある兄弟ノードを検索します</p> <p>1. $("A B") は、間接的な子ノードを含む、A 要素の下のすべての子ノードを検索します</p> <p>例: フォーム内のすべての入力要素を検索します</p> <p>HTMLコード:</p> <div class="cnblogs_Highlighter"> <div> <div id="highlighter_163283" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> <div class="line number3 index2 alt2">3</div> <div class="line number4 index3 alt1">4</div> <div class="line number5 index4 alt2">5</div> <div class="line number6 index5 alt1">6</div> <div class="line number7 index6 alt2">7</div> <div class="line number8 index7 alt1">8</div> <div class="line number9 index8 alt2">9</div> <div class="line number10 index9 alt1">10</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html plain"><</code><code class="html keyword">form</code><code class="html plain">></code></div> <div class="line number2 index1 alt1"><code class="html plain"><</code><code class="html keyword">label</code><code class="html plain">>Name:</</code><code class="html keyword">label</code><code class="html plain">></code></div> <div class="line number3 index2 alt2"><code class="html plain"><</code><code class="html keyword">input</code> <code class="html plain">name="name" /></code></div> <div class="line number4 index3 alt1"><code class="html plain"><</code><code class="html keyword">fieldset</code><code class="html plain">></code></div> <div class="line number5 index4 alt2"> <code class="html spaces">      </code><code class="html plain"><</code><code class="html keyword">label</code><code class="html plain">>Newsletter:</</code><code class="html keyword">label</code><code class="html plain">></code> </div> <div class="line number6 index5 alt1"> <code class="html spaces">      </code><code class="html plain"><</code><code class="html keyword">input</code> <code class="html plain">name="newsletter" /></code> </div> <div class="line number7 index6 alt2"><code class="html plain"></</code><code class="html keyword">fieldset</code><code class="html plain">></code></div> <div class="line number8 index7 alt1"><code class="html plain"></</code><code class="html keyword">form</code><code class="html plain">></code></div> <div class="line number9 index8 alt2"><code class="html plain"><</code><code class="html keyword">input</code> <code class="html plain">name="none" /><</code><code class="html keyword">span</code> <code class="html plain">style="font-family: verdana, 'courier new'; font-size: medium;" size="4" face="verdana, 'courier new'"><</code><code class="html keyword">span</code> <code class="html plain">style="font-size: 14px; line-height: 21px; white-space: normal;"></code></div> <div class="line number10 index9 alt1"><code class="html plain"></</code><code class="html keyword">span</code><code class="html plain">></</code><code class="html keyword">span</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p>jQuery 代码:</p> <p>$("form input") </p> <p>结果:</p> <p>[ <input name="name" />, <input name="newsletter" /> ]</p> <p>2. $("A>B") 查找A元素下面的直接子节点 </p> <p>例子：匹配表单中所有的子级input元素。</p> <p>HTML 代码:</p> <div class="cnblogs_Highlighter"> <div> <div id="highlighter_935288" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2">1</div> <div class="line number2 index1 alt1">2</div> <div class="line number3 index2 alt2">3</div> <div class="line number4 index3 alt1">4</div> <div class="line number5 index4 alt2">5</div> <div class="line number6 index5 alt1">6</div> <div class="line number7 index6 alt2">7</div> <div class="line number8 index7 alt1">8</div> <div class="line number9 index8 alt2">9</div> <div class="line number10 index9 alt1">10</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"><code class="html plain"><</code><code class="html keyword">form</code><code class="html plain">></code></div> <div class="line number2 index1 alt1"><code class="html plain"><</code><code class="html keyword">label</code><code class="html plain">>Name:</</code><code class="html keyword">label</code><code class="html plain">></code></div> <div class="line number3 index2 alt2"><code class="html plain"><</code><code class="html keyword">input</code> <code class="html plain">name="name" /></code></div> <div class="line number4 index3 alt1"><code class="html plain"><</code><code class="html keyword">fieldset</code><code class="html plain">></code></div> <div class="line number5 index4 alt2"> <code class="html spaces">      </code><code class="html plain"><</code><code class="html keyword">label</code><code class="html plain">>Newsletter:</</code><code class="html keyword">label</code><code class="html plain">></code> </div> <div class="line number6 index5 alt1"> <code class="html spaces">      </code><code class="html plain"><</code><code class="html keyword">input</code> <code class="html plain">name="newsletter" /></code> </div> <div class="line number7 index6 alt2"><code class="html plain"></</code><code class="html keyword">fieldset</code><code class="html plain">></code></div> <div class="line number8 index7 alt1"><code class="html plain"></</code><code class="html keyword">form</code><code class="html plain">></code></div> <div class="line number9 index8 alt2"><code class="html plain"><</code><code class="html keyword">input</code> <code class="html plain">name="none" /><</code><code class="html keyword">span</code> <code class="html plain">style="font-family: verdana, 'courier new'; font-size: medium;" size="4" face="verdana, 'courier new'"><</code><code class="html keyword">span</code> <code class="html plain">style="font-size: 14px; line-height: 21px; white-space: normal;"></code></div> <div class="line number10 index9 alt1"><code class="html plain"></</code><code class="html keyword">span</code><code class="html plain">></</code><code class="html keyword">span</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p>jQueryコード:</p> <p>$("フォーム > 入力") </p> <p>結果:</p> <p>[ <input name="名前" /> </p>3. $("A+B") は、間接的な子ノードを含む、A 要素の背後にある兄弟ノードを検索します <p> </p>例: ラベルに続くすべての入力要素と一致します<p> </p>HTMLコード:<p> </p> <div class="cnblogs_Highlighter"> <div> <div id="highlighter_593836" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter">1<div class="line number1 index0 alt2"> </div>2<div class="line number2 index1 alt1"> </div>3<div class="line number3 index2 alt2"> </div>4<div class="line number4 index3 alt1"> </div>5<div class="line number5 index4 alt2"> </div>6<div class="line number6 index5 alt1"> </div>7<div class="line number7 index6 alt2"> </div>8<div class="line number8 index7 alt1"> </div>9<div class="line number9 index8 alt2"> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"> <code class="html plain"><</code><code class="html keyword">form</code><code class="html plain">></code> </div> <div class="line number2 index1 alt1"> <code class="html plain"><</code><code class="html keyword">label</code><code class="html plain">>Name:</</code><code class="html keyword">label</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2"> <code class="html plain"><</code><code class="html keyword">input</code> <code class="html plain">name="name" /></code> </div> <div class="line number4 index3 alt1"> <code class="html plain"><</code><code class="html keyword">fieldset</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2"> <code class="html spaces">      </code><code class="html plain"><</code><code class="html keyword">label</code><code class="html plain">>Newsletter:</</code><code class="html keyword">label</code><code class="html plain">></code> </div> <div class="line number6 index5 alt1"> <code class="html spaces">      </code><code class="html plain"><</code><code class="html keyword">input</code> <code class="html plain">name="newsletter" /></code> </div> <div class="line number7 index6 alt2"> <code class="html plain"></</code><code class="html keyword">fieldset</code><code class="html plain">></code> </div> <div class="line number8 index7 alt1"> <code class="html plain"></</code><code class="html keyword">form</code><code class="html plain">></code> </div> <div class="line number9 index8 alt2"> <code class="html plain"><</code><code class="html keyword">input</code> <code class="html plain">name="none" /> </code> </div> </div> </td> </tr> </tbody> <p class="best-text mb-10"> jQuery コード:</p> <p> </p> <p>$("ラベル + 入力") </p> <p>結果:</p> <p>[ <input name="名前" />, <input name="ニュースレター" /> </p> <p> </p>4. $("A~B") は、間接的な子ノードを除いて、A 要素の背後にある兄弟ノードを検索します <p> </p>例: フォームの兄弟であるすべての入力要素を検索します<p> </p>HTMLコード:<p> </p> <div class="cnblogs_Highlighter"> <div> <div id="highlighter_463800" class="syntaxhighlighter html"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter">1<div class="line number1 index0 alt2"> </div>2<div class="line number2 index1 alt1"> </div>3<div class="line number3 index2 alt2"> </div>4<div class="line number4 index3 alt1"> </div>5<div class="line number5 index4 alt2"> </div>6<div class="line number6 index5 alt1"> </div>7<div class="line number7 index6 alt2"> </div>8<div class="line number8 index7 alt1"> </div>9<div class="line number9 index8 alt2"> </div>10<div class="line number10 index9 alt1"> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"> <code class="html plain"><</code><code class="html keyword">form</code><code class="html plain">></code> </div> <div class="line number2 index1 alt1"> <code class="html plain"><</code><code class="html keyword">label</code><code class="html plain">>Name:</</code><code class="html keyword">label</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2"> <code class="html plain"><</code><code class="html keyword">input</code> <code class="html plain">name="name" /></code> </div> <div class="line number4 index3 alt1"> <code class="html plain"><</code><code class="html keyword">fieldset</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2"> <code class="html spaces">      </code><code class="html plain"><</code><code class="html keyword">label</code><code class="html plain">>Newsletter:</</code><code class="html keyword">label</code><code class="html plain">></code> </div> <div class="line number6 index5 alt1"> <code class="html spaces">      </code><code class="html plain"><</code><code class="html keyword">input</code> <code class="html plain">name="newsletter" /></code> </div> <div class="line number7 index6 alt2"> <code class="html plain"></</code><code class="html keyword">fieldset</code><code class="html plain">></code> </div> <div class="line number8 index7 alt1"> <code class="html plain"></</code><code class="html keyword">form</code><code class="html plain">></code> </div> <div class="line number9 index8 alt2"> <code class="html plain"><</code><code class="html keyword">input</code> <code class="html plain">name="none" /> <</code><code class="html keyword">span</code> <code class="html plain">style="font-family: verdana, 'courier new'; font-size: medium;" size="4" face="verdana, 'courier new'"><</code><code class="html keyword">span</code> <code class="html plain">style="font-size: 14px; line-height: 21px; white-space: normal;"></code> </div> <div class="line number10 index9 alt1"> <code class="html plain"></</code><code class="html keyword">span</code><code class="html plain">></</code><code class="html keyword">span</code><code class="html plain">></code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div>jQueryコード:<p> </p>$("フォーム ~ 入力") <p> </p>結果:<p> </p>[ <input name="none" /> ]<p></p> <div id="MySignature"> </div> <div class="clear"></div> </table> </div> </div> </div>