セレクターをフィルタする(jQuery)

セレクターで絞ったあと、さらにフィルタすることができます。
フィルタ方法には、基本フィルタ、コンテンツフィルタ、属性フィルタ、フォームフィルタがあります。

基本フィルタ

最初の要素、偶数番目の要素など、特定の条件でセレクターをフィルタします。
//一番最初の要素
$("p:first")

//一番最後の要素
$("p:last")

//指定セレクター以外の要素
$("p.not(div)")

//偶数番目の要素
$("p:even")

//奇数番目の要素
$("p:odd")

//指定番目の要素
$("p:eq(2)")

//指定番目より大きい要素
$("p:gt(2)")

//指定番目より小さい要素
$("p:lt(2)")

//見出し要素
$("p:header")

//アニメーション実行中の要素
$("p:animated")

//指定番目の子要素
$("p:nth-child(2)")

//最初の子要素
$("p:first-child")

//最後の子要素
$("p:last-child")

//1つしかない子要素
$("p:only-child")


コンテンツフィルタ

指定文字を含む、子要素の有無など、コンテンツの状態でセレクターをフィルタします。
//指定した文字列を含む要素
$("p:contains(検索する文字)")

//子要素をもつ要素
$("p:parent")

//子要素をもたない要素
$("p:empty")

//指定セレクターの子要素を持つ要素
$("p:has(div)")


属性フィルタ

HTML要素の属性値を検索してセレクターをフィルタします。
//指定した属性をもつ要素
$("input[value]")

//指定した属性値が等しい要素
$("input[value='value1']")

//指定した属性値が異なる要素
$("input[value!='value1']")

//指定した属性値で始まる要素
$("input[value^='v']")

//指定した属性値で終わる要素
$("input[value$='1']")

//指定した属性値を含む要素
$("input[value*='a']")


フォームフィルタ

input要素、type属性をもとにフォーム要素でセレクターをフィルタします。
//input要素、select要素、button要素、textarea要素
$("input:input")

//type属性がtextの要素
$("input:text")

//type属性がpasswordの要素
$("input:password")

//type属性がradioの要素
$("input:radio")

//type属性がcheckboxの要素
$("input:checkbox")

//type属性がfileの要素
$("input:file")

//type属性がhiddenの要素
$("input:hidden")

//type属性がimageの要素
$("input:image")

//type属性がbuttonの要素
$("input:button")

//type属性がsubmitの要素
$("input:submit")

//利用可能な要素
$("input:enabled")

//利用不可能な要素
$("input:disabled")

//チェックされている要素
$("input:checked")

//選択されている要素
$("input:selected")


関連する内容



Javascriptの基本



サンプル集&リファレンス

 ドキュメント、日付、数学関数、ブラウザ、ウインドウ、入力、効果に関する
 サンプル集です。

 動きのあるWebページを実現するJavaScriptのサンプル集です。

 Math、String、Array、Dateなど、オブジェクト別のリファレンス集です。


Copyright (C) JavaScript@Workshop All rights reserved.
-HTML@Workshop -ASP@Workshop -WSH@Workshop -Excel VBA@Workshop