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

#id ID名

#idは、ID属性名の頭に#を付けた、jQueryセレクタで、最も基本的なセレクタです。このID名にマッチする要素を検索し返します。

たとえば、簡単なサンプルを作ってみます。

my1

my2

my3

my3の文字色が赤くなっていると思いますがコードは次のとおりです。

<div id="my1">my1</div>
<div id="my2">my2</div>
<div id="my3">my3</div>

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

$("#my3")にマッチするID名のDOM要素のCSSのcolor(文字色)をred(赤)に変えているわけです。

ちなみに、jQuery(function($){ から });の部分は、以前の記事DOMの構築待ちイベントで出てきた処理で、DOM要素の構築を待ってからfunction(){}内の処理を行うことで、未構築の要素へのアクセスエラーなどを回避する言い回しです。

ところで、セレクタで検索して、処理を行うといっても、#ID名で検索した結果に直接innerHTMLで文字列を出力することはできません。たとえば、次のような書き方はできないのです。

 $("#testId1").innerHTML="hoge<b>hoge</b>" //使えません

セレクタによる検索の結果返されるのは、あくまでも、検索結果を含むjQueryオブジェクトだからです。

たとえば、innerHTMLのようにHTML文字列を出力したいなら、検索結果に.html("HTML文字列")や.append("HTML文字列")のようにしてメソッドを接続して処理を行います。

 $("#testId2").html("hoge<b>hoge</b>") ;
 $("#testId3").append("hoge<b>hoge</b>") ;

では、検索結果にHTML文字列を出力するサンプルとして.html()を使ってみます。次のボタンをクリックしてみてください。

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

<script src="./jquery-1.2.3.min.js" 
        type="text/javascript"></script>

<div id="my4"></div>

<button onclick='
  $("#my4").html("idがmy4の要素を見つけました。");
'>#my4を探します</button>

.html()は、引数の文字列をinnerHTMLのようにHTMLとして該当要素へ出力するメソッドですが、この場合は、ボタンをクリックすると、$("#my4")で検索されたDOM要素へ"idがmy4の要素を見つけました。"という文字列を出力しています。

もうひとつ試してみましょう。もし、IDがピリオドやコロンを含む時は、ダブルのバックスラッシュ(円?記号)でエスケープする必要がありますので、それも試してみましょう。

次のサンプルは、フォントサイズを50pxにするスクリプトで、test3.0とtest4,000 をエスケープしています。

test3.0

test4,000

test5.0

test6,000

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

<div id="test3.0">test3.0</div>
<div id="test4,000">test4,000</div>
<div id="test5.0">test5.0</div>
<div id="test6,000">test6,000</div>

<script type="text/javascript">
  jQuery(function($){
      $("#test3??.0").css("font-size","50px");
      $("#test4??,000").css("font-size","50px");
      $("#test5.0").css("font-size","50px");
      $("#test6,000").css("font-size","50px");
  });

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