jQuery でのさまざまなセレクターの種類と使用法をマスターする

jQuery は、Web ページ上で HTML 要素、イベント処理、アニメーション効果、Ajax を操作するプロセスを簡素化する人気の JavaScript ライブラリです。 jQuery を使用して開発する場合、さまざまなセレクターの種類とその使用法を理解しておくことが重要です。セレクターは、jQuery で指定された要素を選択するためのメソッドであり、必要に応じて操作したい要素を正確に選択することができ、より柔軟な開発を実現できます。

1. 基本セレクター

1. 要素セレクター: 指定されたすべての要素を選択します。構文は $("element")# # ＃。たとえば、$("p") はすべての段落要素を選択します。

   $("p").css("color", "red");

2. ID セレクター : 特定の ID を持つ要素を選択します。構文は $("#id") です。たとえば、$("#myId")ID が「myId」の要素を選択します。

   $("#myId").hide();

3. クラス セレクター: 指定されたクラスの要素を選択します。構文は $(".class") です。たとえば、$(".myClass") はクラス「myClass」の要素を選択します。

   $(".myClass").fadeIn();

2. 階層セレクター

1. 子孫セレクター: 指定された要素の子孫要素を選択します。構文は次のとおりです。 $("親の子孫")。たとえば、$("div p") は、div 要素内のすべての段落要素を選択します。

   $("div p").addClass("highlight");

2. 子要素セレクター: 指定された要素の直接の子要素を選択します。構文は $("parent > child")## です。 ＃。たとえば、$("ul > li") は、ul 要素の下にある直接の子要素 ​​li を選択します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>$(&quot;ul &gt; li&quot;).hover(function(){ $(this).toggleClass(&quot;hover&quot;); }); ### 3. 过滤选择器</pre><div class="contentsignin">ログイン後にコピー</div></div>

3. 最初の要素

   : 最初に一致する要素を選択します。構文は :first です。たとえば、$("li:first") は最初の li 要素を選択します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>$(&quot;li:first&quot;).css(&quot;font-weight&quot;, &quot;bold&quot;);</pre><div class="contentsignin">ログイン後にコピー</div></div>

4. 最後の要素

   : 最後に一致した要素を選択します。構文は :last です。たとえば、$("li:last") は最後の li 要素を選択します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>$(&quot;li:last&quot;).css(&quot;color&quot;, &quot;blue&quot;);</pre><div class="contentsignin">ログイン後にコピー</div></div>4. コンテンツ セレクター

5. 指定されたテキスト コンテンツを含む要素

   : 指定されたテキスト コンテンツを含む要素を選択します。構文は :contains です。 （文章）＃＃＃。たとえば、$("p:contains('Hello')") は、テキスト「Hello」を含む段落要素を選択します。

   $("p:contains('Hello')").addClass("highlight");

空の要素
6. : 子要素のない空の要素を選択します。構文は

   :empty です。たとえば、$("div:empty") は空の div 要素を選択します。

   $("div:empty").text("This div is empty");

   5. ステータス セレクター

表示要素
7. : 表示要素を選択します。構文は

   :visible です。たとえば、$("div:visible") は、表示される div 要素を選択します。

   $("div:visible").fadeOut();

隠し要素
8. : 隠し要素を選択します。構文は

   :hidden です。たとえば、$("div:hidden") は、非表示の div 要素を選択します。

以上がjQuery でのさまざまなセレクターの種類と使用法をマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。