エレメントへのアクセス方法(htmlタグ、ID、class)

2010.11.22 12:35

 jQueryではhtmlタグの各要素(エレメント)に対して多彩なアクセスが可能なのです。これ非常に便利でいいです。とてもたくさんあるので、よく使うものから順番に紹介します。アクセスするだけではちょっと物足りないので、アクセスした先に適当なメソッドを実行しています。
 これらの方法はCSSのアクセス方法と全く同じなので、CSSをマスターしている方は容易に理解できてしまうと思います。

  1. htmタグでアクセスする
  2. IDでアクセスする
  3. classでアクセスする
  4. 複数の要素でアクセスする
  5. 階層関係をたどってアクセスする


htmlタグでアクセスする

 タグに直接アクセスすることができます。アクセス先にタグ名を直接書きます。複数ある場合は指定したタグすべてにアクセスします。divにアクセスしているので、h1やspanは無視されます。またアクセスした先の入れ子になっているタグもまとめてアクセスすることになりますので注意。要するにエレメントを全部まるごとアクセスすることになるわけです。[Sample]
jQuery
$(document).ready(function(){
    $("div").css("background-color","#00ff00");
});
html
<h1>エレメントへアクセスする</h1>
<div>divタグの部分です。<span>入れ子の部分です。</span></div>
<span>spanタグの部分です。</span>
 とか、アクセスしたエレメント(htmlタグ)に書き込んだりすることができます。[Sample]
jQuery
$(document).ready(function(){
    $("div").text("divタグのに書き込みました。").css("color", "#FF0000");
});
html
<h1>エレメントへアクセスする</h1>
<div></div>
<span>spanタグの部分です。</span>

IDでアクセスする

 タグと同様にIDでアクセスすることができます。[Sample]
jQuery
$(document).ready(function(){
    $("#mark").html("<b>IDでアクセスしています。</b>");
});
html
<h1>エレメントへアクセスする</h1>
<div id="mark"></div>
<span>spanタグの部分です。</span>

クラスでアクセスする

 クラスも同様の方法。[Sample]
jQuery
$(document).ready(function(){
    $(".mark").html("<b>IDでアクセスしています。</b>");
});
html
<h1>エレメントへアクセスする</h1>
<div class="mark"></div>
<span>spanタグの部分です。</span>

複数の要素でアクセスする

 CSSがそうであるように、jQueryでも複数の要素にアクセスできます。コンマで区切って複数の要素を個別に指定できます。[Sample]
jQuery
$(document).ready(function(){
    $("h1,#mark,span").css("color","#ff0000");
});
html
<h1>エレメントへアクセスする</h1>
<div id="mark">IDで指定した部分</div>
<span>spanタグの部分です。</span>
 ここでよく間違ってしまうのは、$("h1,#mark,span")を$("h1","#mark","span")ってな感じで個別にクォーツで囲ってしまうことです。エレメントは全部まとめてクォーツで囲んで、囲んだ中でコンマで区切ります。

階層関係をたどってアクセスする

 CSSも同様ですが、階層関係を入れ子に向かって詳細にアクセスすることも勿論できます。[Sample]
jQuery
$(document).ready(function(){
    $("#mark .body span").text("階層関係をたどってアクセス先を指定できます。");
});
html
<h1>エレメントへアクセスする</h1>
<div id="mark">
    <div class="body"><span></span></div>
</div>
<span>spanタグの部分です。</span>







プロフィール



  • Name :: 山上オサム ♂(39)
  • Hobby :: 武術
  • Work :: Web Designer