読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

セレクタ

jQuery

セレクタとは

  • 名前・属性・状態などによりドキュメント内の要素を選択する機能(要素がオブジェクトとして返ってきます)


$( '要素' )

基本セレクタ

要素セレクタ

$( 'div' )


idセレクタ

$( '#title' )


classセレクタ

$( '.text' )


複合セレクタ

$( 'p, span, #title' )


ユニバーサルセレクタ

$( '*' )

階層セレクタ

セレクタ

$( 'div > span' )


子孫セレクタ

$( 'div span' )


隣接セレクタ

$( 'div + p' )


兄弟セレクタ

$( 'div ~ p' )

属性セレクタ


$( 'input[name=title]' )

フォームセレクタ


$( 'input:text' )

基本フィルター


$( 'li:first' )


$( 'li:eq(3)' ) //数値は0から数えるから4番目の要素のみ選択

子要素フィルター


$( 'li:first-child' )

コンテンツフィルター


$( 'div:has(p)' )

可視性フィルター


$( 'dd:visible' )

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

  • jQueryへのアクセスをできるだけ少ない回数にすることが、パフォーマンスの向上につながります
    1. 変数を生成してセレクタを格納する
    2. classよりidで指定する
    3. 出来る限り要素を含めない(処理が遅くなるので、子孫セレクタを避ける)
広告を非表示にする