jqueryエスケータ
jQueryのセレクタはCSS 1~CSS 3規格の特徴を多く参考にし,強力なオブジェクト選択ツールセットにまとめた.ただし、対象名に「#;&,.+*~」:「!^$[]()=>|/」というメタ文字の場合は、「\」で変換する必要があります.たとえば、ドキュメントに「name=」names[]を含むinput要素を選択する場合は、フィルタリングルールを作成するときに「[]」を変換する必要があります.したがって、セレクタを「$(「input[name=names\\\]」)と定義する必要があります.テストでは、[]エスケープ文字は必要ありません.
汎用セレクタ(*)
jQueryセレクタでは、「*」号はすべてを表すワイルドカードです.例:
上の文はページ内のすべてのコンテナを遍歴し、線幅3 pxの赤い実線フレームをすべて与えたことを示しています.もう1つは、いくつかの容器の内容を操作するだけで、次のように書くことができます.
前の文はIDがtestの容器の中のサブ容器に対してのみ効果を生み出し、それらに線幅が3 pxの赤色を加えて枠線を実現した.
:animatedセレクタ
:animatedセレクタは、現在jQueryアニメーションを実行している要素を選択するために使用され、厳密にはフィーチャーフィルタです.たとえば、空のHTMLドキュメントにDivを作成し、IDの1つをmoverにして、次のjQuery文を作成します.
上のコードを実行すると、まずIDがmoverの要素が見つかり、展開と縮小のアニメーションが絶えず行われます.そしてブラウザはページ内のすべてのDivタグを巡回し、このDiv(この例ではIDがmoverのDivになっている)がアニメーションを実行している場合、jQueryはこのDivにclass="cored"を追加します.具体的なDemoはこのページを見ることができます.
属性セレクタ
jQueryのプロパティセレクタは、すべてのセレクタの中で最も強力なものであり、最も柔軟で複雑であり、具体的には細分化を継続することもできます.
属性ワードセレクタ(Attribute Contains Prefix Selector)
jQueryプロパティヘッダセレクタの使用形式は、jQuery('[attribute|=value]')です.たとえば、jQuery('[herflang|=en]')というコードが実行されると、ドキュメントにherflangプロパティが含まれているすべての要素が選択され、herflangの値が「en」で始まる要素が選択されます.つまり、「en」の後ろにハイフン「-」が続くように選択できます.
属性先頭セレクタ(Attribute Starts With Selector)
jQuery('[attribute^=value]')は、属性の値がある文字列で始まる要素を選択するために使用されますが、jQuery('[attribute|=value]')との違いは、valueの後ろにハイフンがある場合、この要素は選択されません.たとえばjQuery('[rel^=no]')は、すべてのrelの値が「no」で始まる要素を選択しますが、rel="no-****」のような要素は選択されません.
属性はセレクタ(Attribute Contains Selector)を含む
基本的な使用方法はjQuery('[attribute*=value]')です.たとえばjQuery('[rel*=no]')は、rel属性を持つすべての要素を表し、relの値にサブ文字列「no」を含む要素(rel=「nofollow」、rel=「yesorno」など)が選択されます.
属性単語選択器(Attribute Contains Word Selector)
jQuery('[attribute~=value]')このセレクタの特別な点は、valueの値は独立した単語(または文字列)でなければならないことです.例えばjQuery('[rel~=no]')は、実行時にrel="yes or no"の要素を選択しますが、rel="yesorno"の要素は選択されません.このセレクタは,属性にセレクタを含むサプリメントと見なすことができ,厳密なマッチングが必要な場合に用いる.
属性末尾セレクタ(Attribute Ends With Selector)
jQuery('[attribute$=value]')は、特定の属性の値が文字列で終わる要素を選択するために使用されます.たとえば、jQuery('[rel$=no]')は、rel属性の値が「no」で終わる要素を選択します.
属性均等セレクタ(Attribute Equals Selector)
jQuery('[attribute=value]')は、属性の値が完全に等しい要素のみを選択します.例えば、jQuery('[rel=nofollow]')は、rel="nofollow"の要素のみを選択します.
属性非等化セレクタ(Attribute Not Equal Selector)
jQuery('[attribute!=value]')、および:not([attr=value])の効果と同様に、jQuery('[rel!=nofollow]')などの属性が値に等しくない要素を選択するために使用され、すべてのrel="nofollow"の要素は選択されません.
ボタンセレクタ(:button Selector)
jQuery(':button')では、すべてのおよび
汎用セレクタ(*)
jQueryセレクタでは、「*」号はすべてを表すワイルドカードです.例:
1
$("*").css("border","3px solid red")上の文はページ内のすべてのコンテナを遍歴し、線幅3 pxの赤い実線フレームをすべて与えたことを示しています.もう1つは、いくつかの容器の内容を操作するだけで、次のように書くことができます.
1
$("#test").find("*").css("border","3px solid red")前の文はIDがtestの容器の中のサブ容器に対してのみ効果を生み出し、それらに線幅が3 pxの赤色を加えて枠線を実現した.
:animatedセレクタ
:animatedセレクタは、現在jQueryアニメーションを実行している要素を選択するために使用され、厳密にはフィーチャーフィルタです.たとえば、空のHTMLドキュメントにDivを作成し、IDの1つをmoverにして、次のjQuery文を作成します.
1
2
$("#mover").slideToggle("slow", animateIt);
$("div:animated").toggleClass("colored");上のコードを実行すると、まずIDがmoverの要素が見つかり、展開と縮小のアニメーションが絶えず行われます.そしてブラウザはページ内のすべてのDivタグを巡回し、このDiv(この例ではIDがmoverのDivになっている)がアニメーションを実行している場合、jQueryはこのDivにclass="cored"を追加します.具体的なDemoはこのページを見ることができます.
属性セレクタ
jQueryのプロパティセレクタは、すべてのセレクタの中で最も強力なものであり、最も柔軟で複雑であり、具体的には細分化を継続することもできます.
属性ワードセレクタ(Attribute Contains Prefix Selector)
jQueryプロパティヘッダセレクタの使用形式は、jQuery('[attribute|=value]')です.たとえば、jQuery('[herflang|=en]')というコードが実行されると、ドキュメントにherflangプロパティが含まれているすべての要素が選択され、herflangの値が「en」で始まる要素が選択されます.つまり、「en」の後ろにハイフン「-」が続くように選択できます.
属性先頭セレクタ(Attribute Starts With Selector)
jQuery('[attribute^=value]')は、属性の値がある文字列で始まる要素を選択するために使用されますが、jQuery('[attribute|=value]')との違いは、valueの後ろにハイフンがある場合、この要素は選択されません.たとえばjQuery('[rel^=no]')は、すべてのrelの値が「no」で始まる要素を選択しますが、rel="no-****」のような要素は選択されません.
属性はセレクタ(Attribute Contains Selector)を含む
基本的な使用方法はjQuery('[attribute*=value]')です.たとえばjQuery('[rel*=no]')は、rel属性を持つすべての要素を表し、relの値にサブ文字列「no」を含む要素(rel=「nofollow」、rel=「yesorno」など)が選択されます.
属性単語選択器(Attribute Contains Word Selector)
jQuery('[attribute~=value]')このセレクタの特別な点は、valueの値は独立した単語(または文字列)でなければならないことです.例えばjQuery('[rel~=no]')は、実行時にrel="yes or no"の要素を選択しますが、rel="yesorno"の要素は選択されません.このセレクタは,属性にセレクタを含むサプリメントと見なすことができ,厳密なマッチングが必要な場合に用いる.
属性末尾セレクタ(Attribute Ends With Selector)
jQuery('[attribute$=value]')は、特定の属性の値が文字列で終わる要素を選択するために使用されます.たとえば、jQuery('[rel$=no]')は、rel属性の値が「no」で終わる要素を選択します.
属性均等セレクタ(Attribute Equals Selector)
jQuery('[attribute=value]')は、属性の値が完全に等しい要素のみを選択します.例えば、jQuery('[rel=nofollow]')は、rel="nofollow"の要素のみを選択します.
属性非等化セレクタ(Attribute Not Equal Selector)
jQuery('[attribute!=value]')、および:not([attr=value])の効果と同様に、jQuery('[rel!=nofollow]')などの属性が値に等しくない要素を選択するために使用され、すべてのrel="nofollow"の要素は選択されません.
ボタンセレクタ(:button Selector)
jQuery(':button')では、すべてのおよび