第22章 jQueryのトラバース - フィルタリング
jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。
homepage
# **jQueryのトラバース - フィルタリング** *** ## first()、last()、eq()、filter()およびnot()メソッド 最も基本的なフィルタリング方法は‘first()‘、‘last()‘およびです‘eq()‘。これを使用すると、要素グループ内の位置に基づいて特定の要素を選択できます。 以下のような他のフィルタリング方法、‘filter()‘および‘not()‘あなたは、特定の条件に一致する、または一致しない要素を選択することができます。 ## **1.first()メソッド** この`first()`メソッドは、指定された要素の最初の要素を返します。 次の例では、最初の```<div>```要素を選択します。 #### **例** [sample22-1.html] ``` <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("div").first().css("background-color", "yellow"); }); </script> </head> <body> <h1>Welcome to My Homepage</h1> <p>This is a paragraph.</p> <div style="border: 1px solid black;"> <p>A paragraph in a div.</p> <p>Another paragraph in a div.</p> </div> <br> <div style="border: 1px solid black;"> <p>A paragraph in another div.</p> <p>Another paragraph in another div.</p> </div> <br> <div style="border: 1px solid black;"> <p>A paragraph in another div.</p> <p>Another paragraph in another div.</p> </div> </body> </html> ``` ###* **実行結果**  ## **2.last()メソッド** `last()`この方法は、指定された要素の最後の要素を返します。 次の例では、最後の```<div>```要素を選択しています。 #### **例** [sample22-2.html] ``` <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("div").last().css("background-color", "yellow"); }); </script> </head> <body> <h1>Welcome to My Homepage</h1> <p>This is a paragraph.</p> <div style="border: 1px solid black;"> <p>A paragraph in a div.</p> <p>Another paragraph in a div.</p> </div> <br> <div style="border: 1px solid black;"> <p>A paragraph in another div.</p> <p>Another paragraph in another div.</p> </div> <br> <div style="border: 1px solid black;"> <p>A paragraph in another div.</p> <p>Another paragraph in another div.</p> </div> </body> </html> ``` #### **実行結果**  ## **3.eq()メソッド** この`eq()`メソッドは、選択された要素の特定のインデックス番号を持つ要素を返します。 インデックス番号は0から始まるため、最初の要素のインデックス番号は0で、1ではありません。次の例では、2番目の```<p>```要素（インデックス番号1）を選択します。 #### **例** [sample22-3.html] ``` <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").eq(1).css("background-color", "yellow"); }); </script> </head> <body> <h1>Welcome to My Homepage</h1> <p>My name is Donald (index 0).</p> <p>Donald Duck (index 1).</p> <p>I live in Duckburg (index 2).</p> <p>My best friend is Mickey (index 3).</p> </body> </html> ```  ## **4.filter()メソッド** この`filter()`メソッドでは基準を指定できます。基準に一致しない要素は選択から削除され、一致する要素が返されます。 次の例では```<p>```、クラス名 "intro"のすべての要素を返します。 #### **例** [sample22-4.html] ``` <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").filter(".intro").css("background-color", "yellow"); }); </script> </head> <body> <h1>Welcome to My Homepage</h1> <p>My name is Donald.</p> <p class="intro">I live in Duckburg.</p> <p class="intro">I love Duckburg.</p> <p>My best friend is Mickey.</p> </body> </html> ``` #### **実行結果**  ## **5.not()メソッド** この`not()`メソッドは、基準に一致しないすべての要素を返します。 >**ヒント：**`not()`この方法は、`filter()`の反対です。 次の例では、```<p>```クラス名 "intro"を持たないすべての要素を返します。 #### **例** [sample22-5.html] ``` <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").not(".intro").css("background-color", "yellow"); }); </script> </head> <body> <h1>Welcome to My Homepage</h1> <p>My name is Donald.</p> <p class="intro">I live in Duckburg.</p> <p class="intro">I love Duckburg.</p> <p>My best friend is Mickey.</p> </body> </html> ``` #### **実行結果** 
content
戻る
