Javascript/Javascript関連情報

jQueryのセレクタ 基本(3ページ目)

今回から、jQueryのAPI自体の使い方についても目配りしていきます。今回はまず、jQueryセレクタの基本的なものから順番に試してみます。

高橋 登史朗

執筆者:高橋 登史朗

Javascriptガイド

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

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

  • 前のページへ
  • 1
  • 2
  • 3
  • 4
  • 6
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます