jQuery セレクタ

jQueryは「セレクタ」と「メソッド」という構成で記述されている。

$( ‘ セレクタ ‘ ) . メソッド( ) ;
   何を   どう処理するか

セレクタ…処理対象となるDOM要素
     HTML要素(p,h1,ulなど)の場合はそのまま記述
     id —「#」をつける
     class —「.」をつける
メソッド…その処理対象に対して行いたい「処理」のこと

例;
$( ’.item’ ) .css( ’color’, ‘red’ ) .hide( ’slow’ );
セレクタ   メソッド      メソッドチェーン(続けて書くこと)

セレクタで使える記号
 「>」— 直下の子要素
 「空白」— それ以下の要素
 「,」— 複数の要素
 「+」— 隣接する要素
例;
$(“#main .item”).css(‘color’, ‘red’);  それ以下の要素
$(“p, .item”).css(‘color’, ‘red’);    複数の要素
$(“.item + .item”).css(‘color’, ‘red’);  隣接する要素

セレクタで使えるフィルタ
 :eq( ) — イコール
 :gt( )、:lt( ) — 〜より大きい、〜より小さい 
:even、:odd — 奇数、偶数
:contains( ) — 要素の中身に何があるか
:first、:last — 一番上、一番下を選択する
例;
$(“#sub > li:eq(2)”).css(‘color’, ‘red’);   
$(“#sub > li:gt(1)”).css(‘color’, ‘red’);
$(“#sub > li:odd”).css(‘color’, ‘red’);
$(“#sub > li:contains(‘4’)”).css(‘color’, ‘red’);

メソッドを使ったDOM要素の指定
 parent()、children() — ある要素の親要素、子要素を指定
 next()、prev() — ある要素の前、後を指定
 siblings() — 兄弟要素を指定
例;
$(“#sub”).children().css(‘color’, ‘red’);
$(“#sub > li:eq(2)”).prev().css(‘color’, ‘red’);
$(“#sub > li:eq(2)”).siblings().css(‘color’, ‘red’);

属性セレクタとは、HTMLに含ませる属性でセレクタを指定してくるもの
「=」— 〜と等しい
「!=」— 〜と等しくない
「*=」— 〜を含む
「^=」— 先頭から始まる
「$=」— 終わりを指す
例;
$(‘a[href = “http://google.com”]’).css(‘background’, ‘red’);
$(‘a[href != “http://google.com”]’).css(‘background’, ‘red’);
$(‘a[href *= “dotinstall”]’).css(‘background’, ‘red’);
$(‘a[href $= “jp”]’).css(‘background’, ‘red’);


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です