jQuery-セレクター

jQueryライブラリは、カスケードスタイルシート(CSS)セレクターの機能を利用して、ドキュメントオブジェクトモデル(DOM)の要素または要素のグループにすばやく簡単にアクセスできるようにします。

jQuery Selectorは、式を使用して、指定された基準に基づいてDOMから一致する要素を見つける関数です。簡単に言うと、セレクターはjQueryを使用して1つ以上のHTML要素を選択するために使用されます。要素が選択されると、その選択された要素に対してさまざまな操作を実行できます。

$()ファクトリ関数

jQueryセレクターはドル記号と括弧で始まります- $()。工場機能$() 特定のドキュメント内の要素を選択する際に、次の3つのビルディングブロックを利用します-

シニア番号 セレクターと説明
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セレクターは、いくつかの調整を除いて同じ原則に基づいています。

NOTE −ファクトリ機能 $() の同義語です 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ドキュメントから必要な要素を正確に取得します。

次の表に、いくつかの基本的なセレクターをリストし、例を挙げて説明します。

シニア番号 セレクターと説明
1 名前

指定された要素に一致するすべての要素を選択します Name

2 #ID

指定された要素と一致する単一の要素を選択します ID

3 。クラス

指定されたものと一致するすべての要素を選択します Class

4 ユニバーサル(*)

DOMで使用可能なすべての要素を選択します。

5 複数の要素E、F、G

指定されたすべてのセレクターの結果を組み合わせて選択します E, F または G

セレクターの例

上記の構文と例と同様に、次の例では、さまざまなタイプの他の便利なセレクターの使用について理解できます。

シニア番号 セレクターと説明
1

$('*')

このセレクターは、ドキュメント内のすべての要素を選択します。

2

$("p > *")

このセレクターは、段落要素の子であるすべての要素を選択します。

3

$("#specialID")

このセレクター関数は、id = "specialID"の要素を取得します。

4

$(".specialClass")

このセレクターは、specialClassのクラスを持つすべての要素を取得します。

5

$("li:not(.myclass)")

class = "myclass"を持たない<li>に一致するすべての要素を選択します。

6

$("a#specialID.specialClass")

このセレクタは、IDとのリンク一致スペシャルID特殊身分とのクラスspecialClassを

7

$("p a.specialClass")

このセレクターは、<p>要素内で宣言されたspecialClassのクラスとリンクを照合します。

8

$("ul li:first")

このセレクターは、<ul>の最初の<li>要素のみを取得します。

9

$("#container p")

コンテナの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]")

<a>に一致し、rel属性を持つすべての要素を選択します。

20

$("input[@name = myname]")

mynameとまったく同じ名前値を持つ<input>に一致するすべての要素を選択します

21

$("input[@name^=myname]")

mynameで始まる名前の値を持つ<input>に一致するすべての要素を選択します。

22

$("a[@rel$=self]")

<a>に一致するすべての要素を選択します。 relselfで終わる属性値。

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>要素でも機能します。