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

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved