ホームページ > 記事 > ウェブフロントエンド > Jquery API で Jquery を学ぶ Selector_jquery
Jquery API で Jquery を学ぶ Selector_jquery
- WBOYオリジナル
- 2016-05-16 18:30:021504ブラウズ
Jquery のセレクターを使用すると、食事も気分も良くなります...
1. 基本
jquery で最も一般的に使用されるセレクターは、セレクターであることがわかります。 jqueryAPI には、基本的に 5 つの状況があります: クラス、ID、要素、*、およびマルチセレクター ここでは CSS スタイルの書き方について考えます
CSS スタイルにもいくつかの状況があります: 1. クラス スタイル 2. ID スタイル 3 .Tag スタイル、
aa クラスがある場合、aa として定義するスタイルは .aa として記述する必要があります。{}
bb の ID がある場合、定義するスタイル bb は次のように記述する必要があります書かれた #bb{}
タグ
すべてのタグ スタイルを定義したい場合は、それを記述しますas *{} (もちろん、これは Great の省略形ではありません)
複数のタグを定義する場合は、セミコロンを使用してタグを区切ります。たとえば、.aa,#bb,div{} はクラスを次のように定義します。 aa、id は bb、タグは div です。
上記の 5 つの if を見て、jquery の 5 つの基本セレクターと比較します
aa クラスを選択したい場合は、$(".aa") として記述します
選択したい場合は、 bbのidは $("#bb") と書きます
divのタグを選択したい場合は $("div") と書きます
すべてを選択したい場合は$("*") と記述します
複数のオブジェクトを選択したい場合は、 $(".aa, #bb,div") と記述できます
比較すると、基本的なセレクターは完全に
2 つのレベル
上記の 5 つのセレクターの書き方がわかったので、レベルのセレクターを作成する方法を考えてみましょう。
最初に、レベルとは何かについて考えます。実際には HTML です。DOM 構造はレイヤーごと、または XML の構造レベルです。
次に、jquery の API を開くと、レベルに関するセレクターが 4 つあることがわかります。
要約すると、スペース b、a>b、a b、a~b です。もちろん、ここではいくつかの単語を節約するためにここにいます。
たとえば、次のような構造があります。
コードをコピーします コードは次のとおりです。
12
3
4
次のノードの下にあるすべてのスパン ノードを選択します。 id aa、$("#aa span") を使用してください ここで、aa ノードの下の最初のレイヤーの ID を持つスパンを選択したいと思います。これは、テキスト 3 と 4 を持つスパンです。そのため、 $( "#aa >span")
クラス bb に続くスパンは、スパン内にテキスト 3 を持つものなので、$(“.bb span”)
今、取得したい場合は、クラス bb の後のすべてのスパンを取得するには、$(“.bb~span ”) を使用します
要約すると、最初のスタイルは CSS スタイルと同じ方法で記述され、スペースを使用してノードの下の要素を表します
2 つ目は、子ノードを表すために > を使用します。スペースとの違いは、最初のノードでのみ機能することです。
の 3 番目と 4 番目の層は、後続のノードを表すために使用されます。次のノード、および ~ は後続のすべてのノードを表すために使用されます。 (スペース>~) 4 つの記号を覚えておく必要があります。 以上です
3 単純 基本的なセレクターと階層セレクターについては理解しました。場合によっては、
コードをコピー のように複数選択することがあります。コードは次のとおりです:
< ;ul>
1
3
4
ul li の最初 (first)、最後 (last)、基本行 (奇数)、偶数行 (even) を取得して 3 行目 (eq(2)) に一致させ、3 行以上に一致させる (gt) ( 1))、3 行目 (lt(2)) 未満に一致します。ここでは 7 つ挙げられています。では、最初の $("ul li:first") に一致し、3 番目の行に一致するなど、このセレクターをどのように記述すればよいでしょうか。 $("ul li:eq(2)") で、残りは書きません
ここでは、CSS でリンクを記述するいくつかのスタイルについて考えます a:hover a:link...それらは同じですか?
さて、ここでは 7 つのタイプについて説明しました。API と他の 3 つのタイプについて見てみましょう。
1 : 指定されたセレクターに一致するすべての要素は削除されません。構文は同じです。 $(“ ul li:not( #aa)") は、ul li 内の ID aa を持つ要素を削除することを意味します。 $("ul li") を使用して 4 li を取得できます。 $("ul li:not(#aa)" を使用します最初の li には、h1 h2 h3 を選択するために使用される 3 つの
2:header のみが含まれています...このようなタイトル
3:animated は、アニメーションを実行する要素
と一致します。実際には、選択されたものを一度にスクリーニングすることです。基礎と層の上に構築されます。
4 Text Visibility
引き続き API を見下ろします。 もちろん、テキスト内に 4 つの機能があります。
上記は、選択したコンテンツをフィルタリングするためのものです。ノードをフィルターします。次に、コンテンツをフィルターする必要があります
4
ul li の最初 (first)、最後 (last)、基本行 (奇数)、偶数行 (even) を取得して 3 行目 (eq(2)) に一致させ、3 行以上に一致させる (gt) ( 1))、3 行目 (lt(2)) 未満に一致します。ここでは 7 つ挙げられています。では、最初の $("ul li:first") に一致し、3 番目の行に一致するなど、このセレクターをどのように記述すればよいでしょうか。 $("ul li:eq(2)") で、残りは書きません
ここでは、CSS でリンクを記述するいくつかのスタイルについて考えます a:hover a:link...それらは同じですか?
さて、ここでは 7 つのタイプについて説明しました。API と他の 3 つのタイプについて見てみましょう。
1 : 指定されたセレクターに一致するすべての要素は削除されません。構文は同じです。 $(“ ul li:not( #aa)") は、ul li 内の ID aa を持つ要素を削除することを意味します。 $("ul li") を使用して 4 li を取得できます。 $("ul li:not(#aa)" を使用します最初の li には、h1 h2 h3 を選択するために使用される 3 つの
2:header のみが含まれています...このようなタイトル
3:animated は、アニメーションを実行する要素
と一致します。実際には、選択されたものを一度にスクリーニングすることです。基礎と層の上に構築されます。
4 Text Visibility
引き続き API を見下ろします。 もちろん、テキスト内に 4 つの機能があります。
上記は、選択したコンテンツをフィルタリングするためのものです。ノードをフィルターします。次に、コンテンツをフィルターする必要があります
コードをコピーします コードは次のとおりです:
xxiu
xxiu zhang
特定のノードを含む要素と一致します $("div:has (a)")
が一致します。 空ではないテキストは 2 の逆です。 $("div:parent") は最初の 3 つの div と一致します。
要約すると、テキスト マッチングは主にテキスト (1) とノードを実行します。 (3) に一致し、テキストに一致しません。または、ノード (2) がテキスト ノード (4) に一致します。2 つの文: テキストまたはノードはありますか?
次に、可視性を確認します。理解するのは簡単です。非表示は表示ノードを選択します。または非表示は非表示ノードを選択します。言うことはありません
5 属性セレクター
まず最も基本的なものを見てみましょう。属性セレクター
zhang
🎜> < /div>
指定されたテキストが含まれています $("div:contains(xxiu)") 選択した div のテキストに xxiu 空のテキストと一致します $(" div:empty") 4 番目の div ノードの下には何もないので一致します 特定のノードを含む要素と一致します $("div:has (a)")
が一致します。 空ではないテキストは 2 の逆です。 $("div:parent") は最初の 3 つの div と一致します。
要約すると、テキスト マッチングは主にテキスト (1) とノードを実行します。 (3) に一致し、テキストに一致しません。または、ノード (2) がテキスト ノード (4) に一致します。2 つの文: テキストまたはノードはありますか?
次に、可視性を確認します。理解するのは簡単です。非表示は表示ノードを選択します。または非表示は非表示ノードを選択します。言うことはありません
5 属性セレクター
まず最も基本的なものを見てみましょう。属性セレクター
コードをコピー コードは次のとおりです:
zhang
上記のノードのように、ID を含むノードを選択したいのですが、前の方法を使用する場合はどうすればよいでしょうか。
複数選択メソッド $("#aa,#bb") を使用すると、必要なものが得られましたが、N 個ある場合は、時間がかかりませんか? 私たちは皆、非常に怠け者なので、属性を持っています。セレクター $("div[id]") は、必要な結果を取得します。 select name $("div[name]") ただし、名前 xxiu のみを取得したいので、 $("div[ name = 'zhang']")
zhang ではない $("div[name !='zhang']") を取得、zh で始まる $("div[name ^='zh']") を取得
xxiu ("div[name $='zhang']") で終わる $、ang を含む $ ("div[name *='ang']")
または ID があり、xxiu $(" div[id][name *='xxiu']")
さて、上記の 2 つの内容を読んだ後は、少しめまいがするはずです。要約してみましょう。
1 [id] と [id] は何ですか? ='aa'] は [id!='aa'] と等しくありません
2 ^= で始まるもの $= で終わるもの 一致するもの *= (完全に正規表現の構文ですか)
3 複数の属性を選択 $("div[id][name *='xxiu']")
6 つの子要素
1 は最初と一致 $("ul li:first-child") 最後の子要素の $ ("ul li:last-child")
2 は子要素 $("ul li:only-child") の唯一の要素と一致します
3 は要素 $("ul li :nth-child (2)") は $("ul li:eq(1)") と同じです。 前者は 1 から数え始め、後者は 0
7 から数え始めます。
を見てください。そうすれば、入力された数字がわかります フォームの種類 $(":text") テキストフォームを取得 $(":checkbox") チェックフォームを取得 何が起こっているかを知るために API を見てください
次のように書くことができますこの $( 前の選択メソッド "input[type='text']") を使用します。しかし、より多くの単語を入力するよりも、より少ない単語を入力する方が良いでしょう。 $(":text") のように記述する方がはるかにすっきりではないでしょうか。 this?
8 フォーム属性
1 使用可能有効および使用不可無効
調べます
2 チェックおよび選択
すべての API がここで処理されているのは良いことであり、セレクターは基本的に唯一の違いは、自分でいくつかの文コードを書くことです。この記事にはコードはありません。コードを確認したい場合は、Jquery のドキュメントを読んでください。
asdf
xxiu
上記のノードのように、ID を含むノードを選択したいのですが、前の方法を使用する場合はどうすればよいでしょうか。
複数選択メソッド $("#aa,#bb") を使用すると、必要なものが得られましたが、N 個ある場合は、時間がかかりませんか? 私たちは皆、非常に怠け者なので、属性を持っています。セレクター $("div[id]") は、必要な結果を取得します。 select name $("div[name]") ただし、名前 xxiu のみを取得したいので、 $("div[ name = 'zhang']")
zhang ではない $("div[name !='zhang']") を取得、zh で始まる $("div[name ^='zh']") を取得
xxiu ("div[name $='zhang']") で終わる $、ang を含む $ ("div[name *='ang']")
または ID があり、xxiu $(" div[id][name *='xxiu']")
さて、上記の 2 つの内容を読んだ後は、少しめまいがするはずです。要約してみましょう。
1 [id] と [id] は何ですか? ='aa'] は [id!='aa'] と等しくありません
2 ^= で始まるもの $= で終わるもの 一致するもの *= (完全に正規表現の構文ですか)
3 複数の属性を選択 $("div[id][name *='xxiu']")
6 つの子要素
1 は最初と一致 $("ul li:first-child") 最後の子要素の $ ("ul li:last-child")
2 は子要素 $("ul li:only-child") の唯一の要素と一致します
3 は要素 $("ul li :nth-child (2)") は $("ul li:eq(1)") と同じです。 前者は 1 から数え始め、後者は 0
7 から数え始めます。
を見てください。そうすれば、入力された数字がわかります フォームの種類 $(":text") テキストフォームを取得 $(":checkbox") チェックフォームを取得 何が起こっているかを知るために API を見てください
次のように書くことができますこの $( 前の選択メソッド "input[type='text']") を使用します。しかし、より多くの単語を入力するよりも、より少ない単語を入力する方が良いでしょう。 $(":text") のように記述する方がはるかにすっきりではないでしょうか。 this?
8 フォーム属性
1 使用可能有効および使用不可無効
調べます
2 チェックおよび選択
すべての API がここで処理されているのは良いことであり、セレクターは基本的に唯一の違いは、自分でいくつかの文コードを書くことです。この記事にはコードはありません。コードを確認したい場合は、Jquery のドキュメントを読んでください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。