Jquery-selectors
jQuery-セレクター
jQueryライブラリは、カスケードスタイルシート（CSS）セレクターの機能を利用して、ドキュメントオブジェクトモデル（DOM）の要素または要素のグループにすばやく簡単にアクセスできるようにします。
jQuery Selectorは、式を使用して、指定された基準に基づいてDOMから一致する要素を見つける関数です。 簡単に言えば、セレクターはjQueryを使用して1つ以上のHTML要素を選択するために使用されます。 要素を選択すると、選択した要素に対してさまざまな操作を実行できます。
$（）ファクトリー関数
jQueryセレクターはドル記号と括弧で始まります-* $（）。 ファクトリ関数 $（）*は、指定されたドキュメント内の要素を選択しながら、次の3つの構成要素を利用します-
| Sr.No. | Selector & Description |
|---|---|
| 1 |
Tag Name DOMで利用可能なタグ名を表します。 たとえば、* $（ 'p'）*は、ドキュメント内のすべての段落<p>を選択します。 |
| 2 |
Tag ID DOMで指定されたIDで使用可能なタグを表します。 たとえば、* $（ '＃some-id'）*は、some-idのIDを持つドキュメント内の単一の要素を選択します。 |
| 3 |
Tag Class DOMの特定のクラスで使用可能なタグを表します。 たとえば、* $（ '。some-class'）*は、some-classのクラスを持つドキュメント内のすべての要素を選択します。 |
上記のすべての項目は、単独で、または他のセレクターと組み合わせて使用できます。 jQueryセレクターはすべて、いくつかの微調整を除いて同じ原則に基づいています。
注-ファクトリ関数* $（）は jQuery（）関数の同義語です。 したがって、 *$ 記号が他の何かと競合する他のJavaScriptライブラリを使用している場合は、 $ 記号を jQuery 名に置き換え、* $（）の代わりに関数* jQuery（）を使用できます。
例
以下は、タグセレクターを使用する簡単な例です。 これにより、タグ名が p のすべての要素が選択されます。
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("p").css("background-color", "yellow");
});
</script>
</head>
<body>
<div>
<p class = "myclass">This is a paragraph.</p>
<p id = "myid">This is second paragraph.</p>
<p>This is third paragraph.</p>
</div>
</body>
</html>これにより、次の結果が生成されます–
セレクターの使用方法
セレクターは非常に便利であり、jQueryを使用している間のすべてのステップで必要になります。 HTMLドキュメントから必要な要素を正確に取得します。
次の表は、いくつかの基本的なセレクターをリストし、例を使用して説明しています。
| Sr.No. | Selector & Description |
|---|---|
| 1 |
指定された要素 Name と一致するすべての要素を選択します。 |
| 2 |
指定された ID と一致する単一の要素を選択します。 |
| 3 |
指定された Class と一致するすべての要素を選択します。 |
| 4 |
DOMで使用可能なすべての要素を選択します。 |
| 5 |
指定されたすべてのセレクター E、F または G の結合結果を選択します。 |
セレクターの例
上記の構文と例と同様に、次の例は、他の便利なセレクターの異なるタイプの使用に関する理解を与えます-
ここでは、他の便利なセレクタの異なるタイプがあります-
| Sr.No. | Selector & Description |
|---|---|
| 1 |
$()* このセレクタは、ドキュメント内のすべての要素を選択します。 |
| 2 |
$("p > *") このセレクターは、段落要素の子であるすべての要素を選択します。 |
| 3 |
$("#specialID") このセレクター関数は、id = "specialID"の要素を取得します。 |
| 4 |
$(".specialClass") このセレクターは、_specialClass_のクラスを持つすべての要素を取得します。 |
| 5 |
$("li:not(.myclass)") class = "myclass"を持たない<li>に一致するすべての要素を選択します。 |
| 6 |
$("a#specialID.specialClass") このセレクターは、_specialID_のIDと_specialClass_のクラスを持つリンクに一致します。 |
| 7 |
$("p a.specialClass") このセレクタは、<p>要素内で宣言された_specialClass_のクラスを持つリンクに一致します。 |
| 8 |
$("ul li:first") このセレクターは、<ul>の最初の<li>要素のみを取得します。 |
| 9 |
$("#container p") _container_のidを持つ要素の子孫である<p>に一致するすべての要素を選択します。 |
| 10 |
$("li > ul") <li>に一致する要素の子である<ul>に一致するすべての要素を選択します |
| 11 |
$("strong + em") <strong>と一致する兄弟要素の直後に続く<em>と一致するすべての要素を選択します。 |
| 12 |
$("p ~ ul") <p>と一致する兄弟要素に続く<ul>と一致するすべての要素を選択します。 |
| 13 |
$("code, em, strong") <code>、<em>、または<strong>に一致するすべての要素を選択します。 |
| 14 |
$("p strong, .myclass") <p>に一致する要素の子孫である<strong>に一致するすべての要素と、_myclass_のクラスを持つすべての要素を選択します。 |
| 15 |
$(":empty") 子を持たないすべての要素を選択します。 |
| 16 |
$("p:empty") 子を持たない<p>に一致するすべての要素を選択します。 |
| 17 |
$("div[p]") <p>と一致する要素を含む<div>と一致するすべての要素を選択します。 |
| 18 |
$("p[.myclass]") クラスが_myclass_の要素を含む<p>に一致するすべての要素を選択します。 |
| 19 |
$("a[@rel]") rel属性を持つ<a>に一致するすべての要素を選択します。 |
| 20 |
$("input[@name = myname]") _myname._と正確に等しい名前値を持つ<input>に一致するすべての要素を選択します |
| 21 |
$("input[@name^=myname]") _myname_で始まる名前の値を持つ<input>に一致するすべての要素を選択します。 |
| 22 |
$("a[@rel$=self]") _self_で終わる rel 属性値を持つ<a>に一致するすべての要素を選択します。 |
| 23 |
$("a[@href=domain.com]")* domain.comを含むhref値を持つ<a>に一致するすべての要素を選択します。 |
| 24 |
$("li:even") 偶数のインデックス値を持つ<li>に一致するすべての要素を選択します。 |
| 25 |
$("tr:odd") 奇数のインデックス値を持つ<tr>に一致するすべての要素を選択します。 |
| 26 |
$("li:first") 最初の<li>要素を選択します。 |
| 27 |
$("li:last") 最後の<li>要素を選択します。 |
| 28 |
$("li:visible") 表示されている<li>に一致するすべての要素を選択します。 |
| 29 |
$("li:hidden") 非表示の<li>に一致するすべての要素を選択します。 |
| 30 |
$(":radio") フォーム内のすべてのラジオボタンを選択します。 |
| 31 |
$(":checked") フォーム内のすべてのチェックボックスを選択します。 |
| 32 |
$(":input") フォーム要素（入力、選択、テキスト領域、ボタン）のみを選択します。 |
| 33 |
$(":text") テキスト要素のみを選択します（input [type = text]）。 |
| 34 |
$("li:eq(2)") 3番目の<li>要素を選択します。 |
| 35 |
$("li:eq(4)") 5番目の<li>要素を選択します。 |
| 36 |
$("li:lt(2)") 3番目の要素の前の<li>要素と一致するすべての要素を選択します。つまり、最初の2つの<li>要素。 |
| 37 |
$("p:lt(3)") 4番目の要素の前の<p>要素と一致するすべての要素を選択します。つまり、最初の3つの<p>要素。 |
| 38 |
$("li:gt(1)") 2番目以降の<li>に一致するすべての要素を選択します。 |
| 39 |
$("p:gt(2)") 3番目以降の<p>に一致するすべての要素を選択します。 |
| 40 |
$("div/p") <div>に一致する要素の子である<p>に一致するすべての要素を選択します。 |
| 41 |
$("div//code") <div>に一致する要素の子孫である<code>に一致するすべての要素を選択します。 |
| 42 |
$("//p//a") <p>と一致する要素の子孫である<a>と一致するすべての要素を選択します |
| 43 |
$("li:first-child") 親の最初の子である<li>に一致するすべての要素を選択します。 |
| 44 |
$("li:last-child") 親の最後の子である<li>に一致するすべての要素を選択します。 |
| 45 |
$(":parent") テキストを含む、別の要素の親であるすべての要素を選択します。 |
| 46 |
$("li:contains(second)") 2番目のテキストを含む<li>に一致するすべての要素を選択します。 |
上記のすべてのセレクターを一般的な方法でHTML/XML要素で使用できます。 たとえば、セレクタ* $（ "li：first"）が<li>要素に対して機能する場合、 $（ "p：first"）*は<p>要素に対しても機能します。
