セレクタ
セレクタとは
- テキストP.24〜
- 名前、属性、状態などによりドキュメント内の要素を選択する役割
セレクタを使用するときの注意点
変数を生成してセレクタを格納する
var box = $( '#box' ); box.css( 'width', '100px' );
class指定より id指定
- できる限り id指定でセレクタを取得することが望ましい
- JavaScriptには class指定でHTMLElementを取得するメソッドがないため、処理が複雑化され非効率になってしまいます
できる限りタグ指定もしない
- タグを入れてしまうと、検索対象にタグが入ってしまうため、id指定だけで可能な場合は、タグ指定を省略します
余計な要素を指定しない
- 子孫セレクタを複雑に記述すると、検索対象にタグ要素が入ってしまい処理が遅くなります
基本セレクタ
階層セレクタ
属性セレクタ
$( 'セレクタ[属性名]' )
$( 'セレクタ[属性名 = 属性値]' )
$( 'セレクタ[属性名 != 属性値]' ) //属性名が属性値と異なる要素を選択
$( 'セレクタ[属性名 *= 属性値]' ) //属性名が属性値を含む要素を選択
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/基本フィルタ
一番最初の要素を選択
$( 'セレクタ : 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' )