最近、私はDOM内の1つまたは別の要素を選択する方法の質問をますます求められており、この投稿はjQueryのセレクターに完全に専念します。おそらくそれらのほとんどはさまざまなソースで見ましたが、それらをまとめる価値はまだあります...
すべての例では、 $ （ドル記号）関数を使用したjQueryメソッド呼び出しの短縮バージョンを使用しています
jQueryのセレクターはCSSセレクターに基づいており、 XPathもサポートしています。 ドキュメントを掘り下げないように、例、多くの例を挙げます。 しかし、基本から始めましょう...
まず、HTMLページレイアウト（非常に一般的なレイアウト）が必要です。
< div id = "header" >
< h1 > <a href = "/" title = "homepage">タイトル< / a > < / h1 >
< h2 > サブタイトル < スパン >簡単な説明< / / スパン > < / / h2 >
< / div >
< div id = "wrapper" >
< div id = "content" >
< div class = "post" >
< h3 >投稿タイトル< / / h3 >
< p > Lorem ipsum dolor sit amet、consectetuer adipiscing elit。 Sed viverra tempus sapien。
Cras condimentum、telus id lacinia fermentum、tortor lectus tincidunt sapien、
vel varius augue tortor vel tortor。 < / p >
< スパン >画像タイトル< / スパン >
< img src = "/image1.jpg" alt = "画像Altテキスト" / >
< p > Lorem ipsum dolor sit amet、consectetuer adipiscing elit。 Sed viverra tempus sapien。
Cras condimentum、telus id lacinia fermentum、tortor lectus tincidunt sapien、
vel varius augue tortor vel tortor。 < / p >
< span class = "inner-banner" >バナーテキスト< / span
< p > Lorem ipsum dolor sit amet、consectetuer adipiscing elit。 Sed viverra tempus sapien。
Cras condimentum、telus id lacinia fermentum、tortor lectus tincidunt sapien、
vel varius augue tortor vel tortor。 < / p >
< / div >
< span id = "banner" > < img src = "/banner1.jpg" alt = "Big Banner" / > < / / span >
< div class = "post" >
< h3 >投稿タイトル< / / h3 >
< p > Lorem ipsum dolor sit amet、consectetuer adipiscing elit。 Sed viverra tempus sapien。
Cras condimentum、telus id lacinia fermentum、tortor lectus tincidunt sapien、
vel varius augue tortor vel tortor。 < / p >
< スパン >画像タイトル< / スパン >
< img src = "/image2.jpg" alt = "画像Altテキスト" / >
< p > Lorem ipsum dolor sit amet、consectetuer adipiscing elit。 Sed viverra tempus sapien。
Cras condimentum、telus id lacinia fermentum、tortor lectus tincidunt sapien、
vel varius augue tortor vel tortor。 < / p >
< span class = "inner-banner" >バナーテキスト< / span
< p > Lorem ipsum dolor sit amet、consectetuer adipiscing elit。 Sed viverra tempus sapien。
Cras condimentum、telus id lacinia fermentum、tortor lectus tincidunt sapien、
vel varius augue tortor vel tortor。 < / p >
< / div >
< / div >
< / div >
< div id = "sidebar" >
< ul >
< li > <a href = "/item0.html">メニュー項目0 < / a > < / li >
< li > <a href = "/item1.html">メニュー項目1 < / a > < / li >
< li > <a href = "/item2.html">メニュー項目2 < / a > < / li >
< li > <a href = "/item3.html">メニュー項目3 < / a > < / li >
< / ul >
< / div >
< div id = "footer" >
著作権とコピー; 2008年
< / div >
それでは、サンプルに取り掛かりましょう。
CSSで使用されるものと同様のIdまたはClassNameによる要素の選択
$ （ '#sidebar' ） ; // id = sidebarの要素を選択します
$ （ '.post' ） ; // class = postのアイテムを選択します
$ （ 'div＃sidebar' ） ; // id = sidebarのdiv要素を選択します
$ （ 'div.post' ） ; // class = postでdiv要素を選択します
注：有効なクラス名とIDを使用してください
DOM内のオブジェクトの階層をさまよう
子孫の簡単な選択：
$ （ 'div span' ） ; // div要素内のすべてのspan要素を選択します
同様の結果は、次の構成を使用しても取得できます。
$ （ 'div' ） 。 find （ 'span' ） ; // div要素内のすべてのspan要素を選択します
直接の子孫のみの選択
$ （ 'div> span' ） ; // div要素内のすべてのspan要素を選択します。spanはdivの直接の子孫です
より良い方法はありますか？ テストする必要があります...
また、セレクターをグループ化できます：
$ （ 'div、span' ） ; //すべてのdiv要素とspan要素を選択します
近隣検索：
$ （ 'span + img' ） ; //すべてのimg要素とそれに続くspan要素を選択します
$ （ 'span〜img' ） ; //最初のspan要素の後のすべてのimg要素を選択します
$ （ '#banner' ） 。 prev （ ） ; //見つかったものから前のアイテムを選択します
$ （ '#banner' ） 。 次へ （ ） ; //見つかったものから次のアイテムを選択します
すべての要素、すべての祖先、すべての子孫の選択
$ （ '*' ） ; //すべての要素を選択します
$ （ 'p> *' ） ; // p要素のすべての子孫を選択します
$ （ 'p' ） 。 子供 （ ） ; //-
$ （ 'p' ） 。 親 （ ） ; //要素pのすべての直接の祖先を選択します
$ （ '*> p' ） ; // p要素のすべての祖先を選択します（ほとんどの場合、必要ありません）
$ （ 'p' ） 。 親 （ ） ; //-
$ （ 'p' ） 。 親 （ 「div」 ） ; // divである要素pのすべての祖先を選択します（親はセレクターをパラメーターとして受け入れます）
フィルター
jQueryには多くのフィルターがあり、それらを使用するのは楽しいことです。
$ （ 'div：first' ） ; //家の最初のdivを選択します
$ （ 'div：last' ） ; //家の最後のdivを選択します
$ （ 'div：not（.red）' ） ; //クラスredを持たないdivを選択します
$ （ 'div：even' ） ; //偶数のdivを選択します
$ （ 'div：奇数' ） ; //奇数のdivを選択します
$ （ 'div：eq（N）' ） ; // DOMeの番号Nの下にあるdivを選択します
$ （ 'div：gt（N）' ） ; // DOMeでインデックスがNより大きいdivを選択します
$ （ 'div：lt（N）' ） ; // DOMeでインデックスがNより小さいdivを選択します
$ （ '：ヘッダー' ） ; //ヘッダーh1、h2、h3などを選択します
$ （ 'div：animated' ） ; //アクティブなアニメーションを持つ要素を選択します
コンテンツと可視性によるフィルター：
$ （ 'div：contains（text）' ） ; //テキストを含むdivを選択します
$ （ 'div：empty' ） ; //空のdivを選択します
$ （ 'div：has（p）' ） ; // pを含むdivを選択します
$ （ 'div.red' ） 。 filter （ '.bold' ） // redクラスとboldクラスを含む divを 選択します
$ （ 'div：hidden' ） ; //非表示のdivを選択します
$ （ 'div：visible' ） ; //表示されているdivを選択します
属性フィルターもあります。
$ （ "div [id]" ） ; // id属性を持つすべてのdivを選択します
$ （ "div [title = 'my']" ） ; //属性title = myのすべてのdivを選択します
$ （ "div [title！= 'my']" ） ; //タイトル属性がmyと等しくないすべてのdivを選択します
$ （ "div [title ^ = 'my']" ） ; // myで始まるtitle属性を持つすべてのdivを選択します
// <div title = "myCat">、<div title = "myCoffee">、<div title = "my ...">
$ （ "div [title $ = 'my']" ） ; //タイトル属性がmyで終わるすべてのdivを選択します
// <div title = "itsmy">、<div title = "somy">、<div title = "... my">
$ （ "div [title * = 'my']" ） ; // myを含むtitle属性を持つすべてのdivを選択します
// <div title = "itsmy">、<div title = "myCat">、<div title = "its my cat">、<div title = "... my ...">
また、以下のフィルターについて個別に言及する価値があります。
$ （ "a [rel〜= 'external']" ） ; //スペースで区切られた値のリストで外部を含むrel属性を持つすべてのAを選択します
彼の作業の結果、次のタグが選択されます。
<a href = "" rel = "external">リンク< / a > -はい
<a href = "" rel = "nofollow external">リンク< / a > -はい
<a href = "" rel = "external nofollow">リンク< / a > -はい
<a href = "" rel = "friend external follow">リンク< / a > -はい
<a href = "" rel = "external-link">リンク< / a > -いいえ
フォーム要素を操作するために、要素とフィルターのタイプで選択できるセレクターがいくつかあります-有効/無効/選択/チェック：
$ （ "：テキスト" ） ; // type = textのすべての入力要素を選択します
$ （ "：ラジオ" ） ; // type = radioのすべての入力要素を選択します
//など
$ （ "input：enabled" ） ; //含まれているすべての入力要素を選択します
$ （ "input：checked" ） ; //すべてのチェックされたチェックボックスを選択します
フィルタはグループ化することもできます：
$ （ "div [name = city]：visible：has（p）" ） ; // pタグを含むcityという名前の目に見えるdivを選択します
フォーム要素を操作するための便利なセレクターもいくつか提供します。
$ （ "form select [name = city] option：selected" ） 。 val （ ） ; //都市選択で選択された要素を取得します
$ （ "form：radio [name = some]：checked" ） 。 val （ ） ; // someという名前のラジオバトンの選択値を取得します
$ （ "フォーム：チェックボックス：チェック" ） ; //選択したすべてのチェックボックスを選択します
また、 jQueryの記事を読むことをお勧めします。SELECT要素を使用する際の8つの便利なヒント
すべてがどのように機能するかをテストする場合は、このためにテストページを使用できます。
スライド
どういうわけか、あまりにも多くのテキストが判明しました。おそらくスライドを表示する時です;）
この記事は、次のリソースを使用して作成されました。
記事のサイクル
- 初心者向けのjQuery
- 初心者向けのjQuery。 パート2. JavaScriptメニュー
- 初心者向けのjQuery。 パート3. AJAX
- 初心者向けのjQuery。 パート4.セレクター