jqueryのフィルターセレクターとは何ですか?一般的に使用されるフィルター セレクターは何ですか?

jquery のフィルター セレクターは何をするのですか?一般的に使用されるフィルター セレクターは何ですか? この記事では、一般的に使用される jquery フィルター セレクターが何であるかを理解できるように、jquery のフィルター セレクターについて紹介します。困っている友人は参考にしていただければ幸いです。

まず、jquery フィルター セレクター セレクター について学びましょう:

jquery セレクターは、HTML 要素グループまたは単一の要素を操作できます。ただし、フィルター セレクターは、最も広く使用されている種類の jquery セレクターであり、特定の種類のフィルター ルールに従って要素を照合し、(1 つ以上の) 要素を検索できます。

jquery フィルター セレクターは次のカテゴリに分類できます。

1. jquery 基本フィルター セレクター (キー ポイント)

2. jquery コンテンツ フィルター セレクター

3. #jquery 可視性フィルター セレクター

#jquery 属性フィルター セレクター
jquery ステータス フィルター セレクター
jquery サブ要素フィルター セレクター

6. 
   

以下では、上記の分類で使用します。一般的な jquery フィルター セレクターと、これらの jquery フィルター セレクターの使用方法について説明します。

jquery 基本フィルター セレクター (キー ポイント) ①first() or: first は最初の要素を選択します

//选择第一个div元素
$('div:first')  
$('div').first()

②last () または: last 最後の要素を選択します

//选择最后一个div元素
$('div:last')   
$('div').last()

③: not(selector) 指定されたセレクター以外の他の要素を選択します

 $('div:not(.one)')  //选择class不为one的 所有div元素

④: 偶数の要素を選択します。インデックスは 0 から始まります。

 $('div:even')   //选择 索引值为偶数 的div元素

⑤: odd は、0 から始まる奇数のインデックスを持つ要素を選択します。

$('div:odd')  //选择 索引值为奇数 的div元素

⑥: eq(index) は、0 から始まる指定されたインデックスを持つ要素を選択します

$('div:eq(3)')  //选择 索引等于 3 的div元素

⑦: gt(index) は、0 から始まる指定されたインデックスより大きい要素を選択します

$('div:gt(3)')  //选择 索引大于 3 的div元素

⑧: lt(index) は、0 から始まる指定されたインデックスより小さい要素を選択します

$('div:lt(3)')  //选择 索引小于 3 的div元素

⑨: ヘッダーはタイトル タイプ要素を選択します

$(':header')  //选择 所有的标题元素.比如h1, h2, h3等等...

⑩: アニメーション化はアニメーション効果を実行する要素を選択します

$(':animated')   //选择 当前正在执行动画的所有元素

⑪: フォーカスは現在フォーカスされている要素を選択します

$(':focus')  //选择 当前选取焦点的所有元素

##jquery content filter selector

##①：contains(text) 指定したテキストを含む要素を選択

$("div:contains('Runob')")    // 选取包含 Runob文本的元素

②：empty 子要素を含まない要素を選択またはテキスト 空要素

$("td:empty")       //选取不包含子元素或者文本的tb空元素

③：has(selector) 要素に一致するセレクターを含む要素を選択

$("div:has('.mini')")  //选取含有class为mini元素 的div元素

④：parent 子要素を含む空要素または text

$("div:parent")                //选取含有子元素或者文本的div元素

## を選択#jquery 可視性フィルター セレクター

①：hidden は不可視の要素を選択します。

$("li:hidden")       //选取所有不可见元素，或type为hidden的元素,例：<input type="hidden"/>

②：visible は可視の要素を選択します

$("li:visible")      //选取所有可见 li 元素

jquery 属性フィルター セレクター

①[属性] この属性を持つ要素を選択します

$('div[title]')  //选取含有 属性title 的div元素

②[attribute=value] 属性値 value を持つ要素を選択します

$('div[title=test]')  //选取 属性title值等于 test 的div元素

③[attribute!=value] 値が次の要素と等しくない属性を選択しますvalue

$('div[title!=test]')  //选取 属性title值不等于 test 的div元素

④[attribute^=value] 属性値が value

で始まる要素を選択します

 $('div[title^=te]')  //选取 属性title值 以 te 开始 的div元素

⑤[attribute$=value] 属性値が value

で終わる要素を選択します

$("div[title$=est]")  //选取 属性title值 以 est 结束 的div元素

⑥[attribute*=value] 属性値に value が含まれる要素を選択します

$("div[title*=es]")  //选取 属性title值 含有 es  的div元素

⑦[attribute|=value] 属性値が value に等しいか、または value が接頭辞として付いている要素を選択します (つまり、「value- xxx") 要素

$('div[title|="en"]')  //选取 属性title等于en或以en为前缀（该字符串后跟一个连字符'-'）的元素

⑧[attribute~=value] 属性値がスペースで区切られ、指定された値を含む要素を選択します

$('div[title~="uk"]')//选取 属性title用空格分隔的值中包含字符uk的元素

⑨[attribute1][attribute2]…[ [attributeN] 属性の結合セレクター

$("div[id][title*=es]")  //组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素

jquery ステータス フィルター セレクター

①：有効 使用可能な要素の選択

$("input:enabled")    // 选取可用的 input

②：[ [attribute =value] 使用できない要素を選択します

$("input:disabled")   // 选取不可用的 input

③：チェック済み 選択した要素を選択します

$("input:checked")    // 选取选中的 input

④：選択済み 選択した要素を選択します

$("option:selected")  // 选取选中的 option

jquery 子要素フィルターselector

①: first-child 各親要素の下の最初の子要素を選択し、コレクション要素を返します。

//选取每个父元素下的第一个子元素
$('div.one :first-child')

②: last-child 以下の最後の子要素を選択します。各親要素を選択し、コレクション要素を返します。

//选取每个父元素下的最后一个子元素
$('div.one :last-child')

③:only-child 各親要素の下にある唯一の子要素を選択し、コレクション要素を返します。

//如果父元素下的仅仅只有一个子元素，那么选中这个子元素
$('div.one :only-child')

④:nth-child(index) selects各親要素の下のインデックス番目の子要素または奇数偶数要素。インデックスは 1

//选取每个父元素下的第2个子元素
$('div.one :nth-child(2)')

から始まります。 概要: 上記は、いくつかの一般的な jquery フィルター セレクターの完全な紹介です。フィルターセレクターを使用して、必要な効果を実現します。皆様の学習にお役に立てれば幸いです。その他の関連チュートリアルについては、

jQuery ビデオ チュートリアル

、

JavaScript ビデオ チュートリアル

、bootstrap ビデオ チュートリアル をご覧ください。

以上がjqueryのフィルターセレクターとは何ですか?一般的に使用されるフィルター セレクターは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。