ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery セレクターの理解_jquery

jQuery セレクターの理解_jquery

WBOY
リリース: 2016-05-16 18:32:11
オリジナル
1217 人が閲覧しました

$ のセレクター部分:
$ を使用した場合、戻り値はオブジェクトになります。
$ セレクターは主にタグを選択するために使用されます。 CSS セレクターですが、非常に興味深いのは、一般的なブラウザーをサポートしていることですが、CSS の多くのセレクターは IE6 ではサポートされていません。
1. $ の使用。 other 戻り値はオブジェクトです
$("label name") ($("p") など) すべての p ラベル ノードを選択します
$("#id name") ($("#test など) " ) は、テストの ID を持つラベル ノード
$(".class name") を選択します。たとえば、$(".test") は、テストのクラスを持つすべてのラベル ノード
を選択します。$( ") および $(".class name") の上の "label name" は、条件を満たすすべてのノードを返します。さらにフィルタリングするには、eq、gt、lt などの関数を追加できます。
2. グループ セレクター: - --- 「,」で区切られた 3 つの基本セレクターの組み合わせ
規則を作りましょう: 「タグ名、#id 名、または .class 名」を mix として書き、mix はタグ名または # ID を表します。または .class。
$("mix,mix,mix,...") (例:$("div,#test1,p,.test2,#test3")

3 .子孫セレクター: ----「 」で区切られた 3 つの基本セレクターの組み合わせ。直接のものはすべて有効です。
$("mix mix")。もちろん、複数のネストにすることができますが、子孫セレクターは深い子孫であるため、$("mix mix mix...") はあまり役に立ちません。 例: $("div .test"): div タグ内の test を持つクラスのすべての子孫要素 (つまり、ネストされたdiv の class 属性はテストタグです)

4. 子セレクター: ----「>」で区切られた 3 つの基本セレクターの組み合わせ。親と子にのみ有効です。
$( "mix>mix")、これは比較のために子孫セレクターの後に配置されます。子セレクターは、深いネストを処理しません。

は、ここでは p 段落タグに対して有効ですが、

ここでは、p 段落タグには無効です。
$("div .test)
を使用してください。セレクター: ----「」で区切られた 3 つの基本セレクターの組み合わせ。次の兄弟ノード
$("mix mix") のみが次の兄弟ノードを選択します。例: $(" div #test")。 )、ID test を持つノードは、$ ("div #test" の

) の次の兄弟ノードである必要があります。 ") p 段落ノード

を取得できません
6. 属性セレクター: ---- " |=|^|$|*"
css セレクターに属性セレクターを置かないのは、jQuery での書き方が違うためです。 CSS でのメソッドについては、以前に書いた CSS セレクターの記事を参照してください。jQuery での記述方法は xPath に似ています。
$("mix[@attr]"): すべてのミックスを選択し、attr 属性を持ちます。
$("mix[@attr=a_value"]): attr 属性を持ち、a_value としての属性値を満たすこのミックスのすべてのノード
$("mix[@attr^=a_value_head"]) を選択します: attr 属性の属性値は a_value_head
$("mix[@attr$=a_value_end"]) で始まります: attr 属性の属性値は a_value_end
$("mix[@attr*= a_value "]): attr 属性の属性値には、a_value

7 が含まれます。 限定されたセレクター:
この名前は私が独自に作成したものです。実際、セレクターの組み合わせには限定された意味があります。何が導入されるかがわかります。
修飾された子ノード セレクターがあります: $("mix1[mix2]"): mix2 を含む mix1 ノードを返します。 例: $("div[a]"): を含む div。
これは $("div a") とは異なります。後者は div 内の a タグを表し、前者は
コロンで修飾されたノードを返します。 selector: $( "mix:condition"): タグを混合し、条件を満たします。
E:root: タイプは E で、ドキュメントのルート要素です。
E:nth-child( n): タイプ E の親要素 n 個の子要素の 3 番目の要素です。基本番号は 1
E から始まります: first-child: 親要素のタイプ E の最初の子要素です
E:last-child: 親要素の最初の子要素です E
E:only-child: 型の最後の子要素であり、親要素
の型 E の唯一の子要素です

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート