jqueryでのセレクタの使い方と照合
5435 ワード
目次
セレクタ
きほんセレクタ
階層セレクタ
フィルタ
きほんフィルタ
コンテンツフィルタ
可視フィルタ
プロパティーフィルタ
子孫フィルタ
フォームフィルタセレクタ
セレクタ
きほんセレクタ
ワイルドカードセレクタ
*
$(*)すべての要素を選択
idセレクタ
#id
$("#one")idがoneの要素を選択
クラスセレクタ
.class
$(.two)すべてのclassをtwoとする要素を選択
ラベルセレクタ
ラベル名
$(「p」)すべてのラベルを選択
グループセレクタ
#one,.two
$(「#one,.two」)idがoneとclassがtwoの要素を選択
ふくごうセレクタ
div.oneは交差を取ります
$(".one")divのclassがoneの要素を選択
階層セレクタ
子孫セレクタ
$(div span)選択のすべての要素
子セレクタ
$(div>span)エレメントの下にあるエレメント名のサブエレメントを選択
兄弟セレクタ
$('.one+div')classをoneの次の要素として選択します(.oneとdivは兄弟です)
兄弟セレクタ
$('.one~div')classをoneの要素の後ろにあるすべての兄弟要素を選択
フィルタ
主に特定のフィルタリング規則により必要なDOM要素をフィルタリングし、フィルタリング規則はcssにおける擬似クラスセレクタの文法と同じである、すなわちセレクタはすべてコロンで始まる.
きほんフィルタ
:first
最初の要素を選択
$('.outer:first')最初のclassをoneの最初の要素として選択します(最初のclassがoneの最初の要素のみを返します)
:last
最後の要素を選択
$('.outer:last')最後のclassをoneの最後の要素として選択
:even
選択したインデックスは偶数のすべての要素で、インデックスは0から始まります.
$('p:even')インデックスが偶数の要素を選択
:odd
インデックスを選択すると奇数の要素が表示され、インデックスは0から始まります.
$('p:odd')インデックスが奇数の要素を選択
:eq(index)
インデックスがindexの要素を取得
$('p:eq(3)')インデックスが3の要素を選択
:lt(num)
インデックスがindexより大きい要素を選択
$('p:lt(3)')インデックスが3未満の要素を選択
:gt(num)
/インデックスがindexより小さい要素の選択
$('p:lt(3)')インデックスが3より大きい要素を選択
:not(sleector2)
指定したセレクタに一致するすべての要素を除去
$(input:not(.one))classがoneでない要素を選択
:header
すべてのh 1-h 6タイトルを選択
$(:header)Webページのすべてのタイトル要素を選択
ケース:インデックスが2より5より大きい要素を選択
コンテンツフィルタ
:contains(text)選択テキストに「text」を含む要素
selector:parent空でない要素、コンテンツまたはサブ要素を選択
selector:has(セレクタ)セレクタが一致する要素を含む要素を選択
可視フィルタ
:hidden
スクリーンスペースを占有しない選択、すなわちbody体にスクリーンスペースを占有しない選択
cssまたはhtmlプロパティには、次の設定があります.
display:none input type="hidden"
:visible
スクリーンスペースを占有する要素の選択
visibility:hidden opacity:0
プロパティーフィルタ
[attrKey]
属性名の要素が選択されています
$('body*[title]')title属性を持つ要素を選択
[attrKey=attrVal]
この属性を選択し、属性値がvalueに等しい
$('p[title=one])属性値がoneに等しい要素を選択
[attrKey^=attrVal]
この属性を選択し、属性値をattrValで開始します.
$('p[title^=t]')属性をtで始まる要素を選択
[attrKey$=attrVal]
この属性を選択し、属性値をattrValで終了します.
$('p[title$=e])属性をeで終わる要素を選択
[attrKey*=attrVal]
この属性を選択し、属性値にatttrValを含める
$('p[title*=h]')選択属性にhを含む要素
[attrKey!=attrVal]
この属性を選択し、属性値がattrValまたは属性値のない要素に等しくない場合.
$('p[title!=one])属性値がoneに等しくないか、tittle属性がないかを選択
**:上でテストしたhtmlコードは次のとおりです.
子孫フィルタ
:first-child
各親要素の最初の子ノードを取得
$('.outer*:first-child')はclassがouterの下の最初のサブ要素に一致します.
:last-child
各親要素の最後の子ノードを取得
$('.outer*:last-child')はclassがouterの下の最後のサブ要素に一致します.
:nth-child(index)
各親要素のindex番目の子ノードindexを取得1から開始
$('.outer*:nth-child(2)')outerのインデックスが2の要素に一致
:only-child
各親要素の一人っ子要素を取得
$('.outer*:only-child')はouterの下の一人っ子要素に一致します(つまりouterにはサブ要素が1つしかありません)
:last-of-type
各親要素の各タイプの最後の要素を取得
$('.outer*:last-of-type')はouterの各タイプの最後の要素と一致し、outerがサブ要素が1つしかない場合はonly-childと等価です.
**:子孫セレクタは、条件を満たす限り、継続的にドリルダウンできますが、基本フィルタ:first、:last、eq(index)では単一の要素のみが返されます.
フォームフィルタセレクタ
フォームのプロパティ
:enabled
使用可能なすべての要素を選択
$(form:enabled)formフォームの下で使用可能なすべての要素を選択
:disabled
使用できないすべての要素を選択
$(form:disabled)formフォームの下で使用できないすべての要素を選択
:checked
選択したすべての要素を選択(ラジオボックス、チェックボックス)
$(input:checked)inputで選択した要素を選択
:selected
選択したすべてのオプション要素を選択(ドロップダウンリスト)
$(select:selected)ドロップダウンリストで選択した要素を選択
:input
入力可能および選択可能なすべての要素(input、textarea、select、button)を選択します.
$(from:input)formフォームに入力可能かつ選択可能な要素(input、textarea、select、button)を選択
:text
すべての行テキスト・ボックスの選択
$('input:text')すべての単行テキストボックスを選択
:password
すべてのパスワードボックスを選択
$('input:password')すべてのパスワードボックスを選択
:radio
すべての複数選択ボックスを選択
$('input:radio')すべてのラジオボックスを選択
:checkbox
すべての複数選択ボックスを選択
$('input:checkbox')すべてのチェックボックスを選択
:submit
すべてのコミットボタンを選択
$('input:submit')すべてのinputのtypeが「submit」に等しいことを選択
:image
すべての画像ボタンを選択
$('input:image')inputのtypeが'image'に等しいことを選択
:reset
すべてのリセットボタンを選択
$('input:reset')inputのtypeが'reset'に等しいことを選択
:button
すべてのボタンを選択
$('input:button')inputのtypeが「button」に等しい要素を選択
:file
すべてのアップロードドメインを選択
$(input:submit)inputのtypeがfileの要素を選択
セレクタ
きほんセレクタ
階層セレクタ
フィルタ
きほんフィルタ
コンテンツフィルタ
可視フィルタ
プロパティーフィルタ
子孫フィルタ
フォームフィルタセレクタ
セレクタ
きほんセレクタ
ワイルドカードセレクタ
*
$(*)すべての要素を選択
idセレクタ
#id
$("#one")idがoneの要素を選択
クラスセレクタ
.class
$(.two)すべてのclassをtwoとする要素を選択
ラベルセレクタ
ラベル名
$(「p」)すべてのラベルを選択
グループセレクタ
#one,.two
$(「#one,.two」)idがoneとclassがtwoの要素を選択
ふくごうセレクタ
div.oneは交差を取ります
$(".one")divのclassがoneの要素を選択
階層セレクタ
子孫セレクタ
$(div span)選択のすべての要素
子セレクタ
$(div>span)エレメントの下にあるエレメント名のサブエレメントを選択
兄弟セレクタ
$('.one+div')classをoneの次の要素として選択します(.oneとdivは兄弟です)
兄弟セレクタ
$('.one~div')classをoneの要素の後ろにあるすべての兄弟要素を選択
フィルタ
主に特定のフィルタリング規則により必要なDOM要素をフィルタリングし、フィルタリング規則はcssにおける擬似クラスセレクタの文法と同じである、すなわちセレクタはすべてコロンで始まる.
きほんフィルタ
:first
最初の要素を選択
$('.outer:first')最初のclassをoneの最初の要素として選択します(最初のclassがoneの最初の要素のみを返します)
:last
最後の要素を選択
$('.outer:last')最後のclassをoneの最後の要素として選択
:even
選択したインデックスは偶数のすべての要素で、インデックスは0から始まります.
$('p:even')インデックスが偶数の要素を選択
:odd
インデックスを選択すると奇数の要素が表示され、インデックスは0から始まります.
$('p:odd')インデックスが奇数の要素を選択
:eq(index)
インデックスがindexの要素を取得
$('p:eq(3)')インデックスが3の要素を選択
:lt(num)
インデックスがindexより大きい要素を選択
$('p:lt(3)')インデックスが3未満の要素を選択
:gt(num)
/インデックスがindexより小さい要素の選択
$('p:lt(3)')インデックスが3より大きい要素を選択
:not(sleector2)
指定したセレクタに一致するすべての要素を除去
$(input:not(.one))classがoneでない要素を選択
:header
すべてのh 1-h 6タイトルを選択
$(:header)Webページのすべてのタイトル要素を選択
ケース:インデックスが2より5より大きい要素を選択
var $temp=$('p:lt(5):gt(2)');コンテンツフィルタ
:contains(text)選択テキストに「text」を含む要素
world
var $temp=$('div:contains("e")'); console.log($temp);
selector:empty
选择没有内容页或者没有子元素
var $temp=$('div:empty');
console.log($temp);selector:parent空でない要素、コンテンツまたはサブ要素を選択
var $temp=$('div:parent');
console.log($temp);selector:has(セレクタ)セレクタが一致する要素を含む要素を選択
var $temp=$('div:has(p)');
console.log($temp);可視フィルタ
:hidden
スクリーンスペースを占有しない選択、すなわちbody体にスクリーンスペースを占有しない選択
cssまたはhtmlプロパティには、次の設定があります.
display:none input type="hidden"
:visible
スクリーンスペースを占有する要素の選択
visibility:hidden opacity:0
プロパティーフィルタ
[attrKey]
属性名の要素が選択されています
$('body*[title]')title属性を持つ要素を選択
[attrKey=attrVal]
この属性を選択し、属性値がvalueに等しい
$('p[title=one])属性値がoneに等しい要素を選択
[attrKey^=attrVal]
この属性を選択し、属性値をattrValで開始します.
$('p[title^=t]')属性をtで始まる要素を選択
[attrKey$=attrVal]
この属性を選択し、属性値をattrValで終了します.
$('p[title$=e])属性をeで終わる要素を選択
[attrKey*=attrVal]
この属性を選択し、属性値にatttrValを含める
$('p[title*=h]')選択属性にhを含む要素
[attrKey!=attrVal]
この属性を選択し、属性値がattrValまたは属性値のない要素に等しくない場合.
$('p[title!=one])属性値がoneに等しくないか、tittle属性がないかを選択
**:上でテストしたhtmlコードは次のとおりです.
one
two
three
four
divOne
子孫フィルタ
:first-child
各親要素の最初の子ノードを取得
$('.outer*:first-child')はclassがouterの下の最初のサブ要素に一致します.
:last-child
各親要素の最後の子ノードを取得
$('.outer*:last-child')はclassがouterの下の最後のサブ要素に一致します.
:nth-child(index)
各親要素のindex番目の子ノードindexを取得1から開始
$('.outer*:nth-child(2)')outerのインデックスが2の要素に一致
:only-child
各親要素の一人っ子要素を取得
$('.outer*:only-child')はouterの下の一人っ子要素に一致します(つまりouterにはサブ要素が1つしかありません)
:last-of-type
各親要素の各タイプの最後の要素を取得
$('.outer*:last-of-type')はouterの各タイプの最後の要素と一致し、outerがサブ要素が1つしかない場合はonly-childと等価です.
**:子孫セレクタは、条件を満たす限り、継続的にドリルダウンできますが、基本フィルタ:first、:last、eq(index)では単一の要素のみが返されます.
フォームフィルタセレクタ
フォームのプロパティ
:enabled
使用可能なすべての要素を選択
$(form:enabled)formフォームの下で使用可能なすべての要素を選択
:disabled
使用できないすべての要素を選択
$(form:disabled)formフォームの下で使用できないすべての要素を選択
:checked
選択したすべての要素を選択(ラジオボックス、チェックボックス)
$(input:checked)inputで選択した要素を選択
:selected
選択したすべてのオプション要素を選択(ドロップダウンリスト)
$(select:selected)ドロップダウンリストで選択した要素を選択
:input
入力可能および選択可能なすべての要素(input、textarea、select、button)を選択します.
$(from:input)formフォームに入力可能かつ選択可能な要素(input、textarea、select、button)を選択
:text
すべての行テキスト・ボックスの選択
$('input:text')すべての単行テキストボックスを選択
:password
すべてのパスワードボックスを選択
$('input:password')すべてのパスワードボックスを選択
:radio
すべての複数選択ボックスを選択
$('input:radio')すべてのラジオボックスを選択
:checkbox
すべての複数選択ボックスを選択
$('input:checkbox')すべてのチェックボックスを選択
:submit
すべてのコミットボタンを選択
$('input:submit')すべてのinputのtypeが「submit」に等しいことを選択
:image
すべての画像ボタンを選択
$('input:image')inputのtypeが'image'に等しいことを選択
:reset
すべてのリセットボタンを選択
$('input:reset')inputのtypeが'reset'に等しいことを選択
:button
すべてのボタンを選択
$('input:button')inputのtypeが「button」に等しい要素を選択
:file
すべてのアップロードドメインを選択
$(input:submit)inputのtypeがfileの要素を選択