jQueryでHTML要素を操作するときは、まず、操作の対象となるHTML要素を指定します。

たとえば、複数の製品写真の表示の切り替えにフェードアウト/フェードインのエフェクトをかける場合を考えてみましょう。

この場合、単純にimg要素に対してエフェクトを適用すると、Webページ上のすべての画像にフェードアウト/フェードインがかかってしまうため、『クラス名に「slideltems」を設定したimg要素』というように、操作対象となる要素を絞り込む必要があります。

このように、操作対象を特定の要素に限定する働きをもつのがセレクターです。


標準のJavaScripyでは、要素を指定する際に「要素名(getElememtsByTagName)」「id名(getElementById)」「name属性(getElementsByName)」をもとにした指定方法しかなかったため、スクリプトが煩雑になりがちでした。

jQueryには、「Sizzle」と呼ばれるCSSセレクターエンジンが搭載されているため、CSS1からCSS3の仕様で規定されているほとんどのセレクターをそのまま利用できます。

こちらはjQueryのもっとも強力な機能のひとつで、より手軽に操作対象の要素を選択できます。

jQueryで利用できるセレクターは次の通りです。

利用できるセレクターを理解しておけばスクリプトをシンプルに記述できるため、動作速度や開発効率が大きく向上します。

・基本セレクター
・階層セレクター

var target = null;
var images = document.getElementsByTagName(“img”);

for(var i = 0; target = images[i]; i++){
 if(target.className.match(/slideltems/i)){
  var timer = window.setTimeout(function(){
   // フェードアウトの処理
  },1000/20);
 }
}

$(“div#container div#content p#article”);

$(“#article”);