3/6 jQueryのセレクタ基本 [Javascript] All About

element タグ名

セレクタ elementは、DOM要素名、つまりタグ名をjQueryセレクタとして使うもので、このタグ名にマッチするすべての要素を検索し、配列で返します。

たとえば、下の「このページのDIV要素の数」というテキスト部分をクリックしてみてください。

これは、次のコードで動作しています。

<button onclick='
  alert("このページのDIV要素の数は、"+$("div").length);
'>このページのDIV要素の数</button>

$("div")の検索結果は、タグ名DIVにマッチするすべての要素配列ですので、.lengthでそのページ内のDIVの数がわかります。

この返される要素配列は、$("div")[0]のように一般の配列と同様にindex番号でアクセスできます。あるいは、.get( index ) メソッドで $("div").get(0)などのようにもアクセス可能です(なお、get( index ) メソッドの戻り値はElementですのでメソッドチェーンを接続はできません)。

ちなみに、jQuery関数の引数は、$("div","#test")などのように第2引数をつけることもできて、「"#test"要素内の"div"要素」という具合にスコープを絞り込むことができて便利です。

たとえば、単に$("div").css("color","red");と書けば、ページ内のすべてのDIV要素が赤くなってしまいますが、次のように絞り込んで適用することも可能です。

my3

my4

my5

コードは次のとおりです。

<div id="my2">
  <div id="my3">my3</div>
  <div id="my4">my4</div>
</div>
<div id="my5">my5</div>

<script type="text/javascript">
jQuery(function($){
  $("div","#my2").css("color","red");
});
</script>

$("#my2")のコンテクスト内にあるDIV要素のcolor(文字色)をred(赤)に変えているわけです。

次ページでは、クラス名をセレクタに使ってみます。