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(赤)に変えているわけです。

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