セレクタ

セレクタとは

  • 名前、属性、状態などによりドキュメント内の要素を選択する役割
セレクタの書き方
$( '要素' )

セレクタを使用するときの注意点

  • セレクタを使用する場合は、jQueryへのアクセスをできるだけ少ない回数にすることがパフォーマンスの向上に繋がります
変数を生成してセレクタを格納する
  • １つのセレクタを数回使用する場合は、次のコードのように変数を生成し、セレクタを格納しておきます
var box = $( '#box' );
box.css( 'width', '100px' );
class指定より id指定
  • できる限り id指定でセレクタを取得することが望ましい
  • JavaScriptには class指定でHTMLElementを取得するメソッドがないため、処理が複雑化され非効率になってしまいます
できる限りタグ指定もしない
  • タグを入れてしまうと、検索対象にタグが入ってしまうため、id指定だけで可能な場合は、タグ指定を省略します
余計な要素を指定しない
  • 子孫セレクタを複雑に記述すると、検索対象にタグ要素が入ってしまい処理が遅くなります

セレクタの種類

基本セレクタ

エレメント（要素）セレクタ
  • HTML要素（エレメント）を指定して選択したセレクタです
$( '要素名' )
id セレクタ
$( '#' + 'id名' )
class セレクタ
$( '.' + 'class名' )
複合セレクタ
$( セレクタ, セレクタ, セレクタ )
ユニバーサルセレクタ
$( '#' )

階層セレクタ

  • 親要素を指定して選択、隣接している直前の要素を指定して選択、直前の要素を指定してそれ以降の要素を選択など、階層で指定しているセレクタを階層セレクタと呼びます
子セレクタ
  • 指定した親要素を持つ子要素を選択するセレクタです
  • 直前の親要素に対して選択されるセレクタ
$( '親要素 > 子要素' )
子孫セレクタ
  • 指定した要素が親以降にある子要素を選択するセレクタです
  • 親以降の要素に指定した要素が存在する場合、その子要素は選択されます
$( '要素 子要素' )
隣接セレクタ
  • 指定した直前の要素に隣接している要素を選択するセレクタです
$( '直前の要素 + 隣接する要素' )
兄弟セレクタ
  • 指定した直前の要素以降にある要素を選択するセレクタです
$( '直前の要素 - 要素' )

属性セレクタ

$( 'セレクタ[属性名]' )

$( 'セレクタ[属性名 = 属性値]' )

$( 'セレクタ[属性名 != 属性値]' )  //属性名が属性値と異なる要素を選択

$( 'セレクタ[属性名 *= 属性値]' )  //属性名が属性値を含む要素を選択


Attribute | jQuery API Documentation
http://api.jquery.com/category/selectors/attribute-selectors/

フォームセレクタ

  • フォーム関連のtype属性を指定したセレクタです
$( 'セレクタ : type属性' )


Form | jQuery API Documentation
http://api.jquery.com/category/selectors/form-selectors/

基本フィルタ

  • 「最初の要素」「n 番目の要素」「奇数要素」など、jQuery独自のフィルタによるセレクタです
一番最初の要素を選択
$( 'セレクタ : first' )
n 番目の要素を選択
$( 'セレクタ : eq( 数値 )' )


Basic Filter | jQuery API Documentation
http://api.jquery.com/category/selectors/basic-filter-selectors/

子要素フィルタ

最初の子要素を選択
$( 'セレクタ : first-child' )
最後の子要素を選択
$( 'セレクタ : last-child' )


Child Filter | jQuery API Documentation
http://api.jquery.com/category/selectors/child-filter-selectors/

コンテンツフィルタ

指定した子要素を持つ要素を選択
$( 'セレクタ : has( セレクタ )' )
子要素を持たない要素を選択
$( 'セレクタ : empty' )


Content Filter | jQuery API Documentation
http://api.jquery.com/category/selectors/content-filter-selector/

可視性フィルタ

表示要素を選択
$( 'セレクタ : visible' )
非表示要素を選択
$( 'セレクタ : hidden' )


Visibility Filter | jQuery API Documentation
http://api.jquery.com/category/selectors/visibility-filter-selectors/

カスタムフィルタセレクタの作成

  • セレクタは、jQuery.expr[ ':' ]オブジェクトを使って新しく作成することができます
  • 新しく作成したフィルタは、そのオブジェクトのプロパティとして参照することができます
jQuery.expr[ ':' ].customFilter = function() {
  return true;
};


《カスタムフィルタ例》

jQuery.expr[ ':' ].bold = function( elem ) {
  return $( elem ).css( 'font-weight' ) === 'bold';
};


《カスタムセレクタ例》

$( 'li:bold' ).css( 'color', '#F00' );