jQueryではhtmlタグの各要素(エレメント)に対して多彩なアクセスが可能なのです。これ非常に便利でいいです。とてもたくさんあるので、よく使うものから順番に紹介します。アクセスするだけではちょっと物足りないので、アクセスした先に適当なメソッドを実行しています。
これらの方法はCSSのアクセス方法と全く同じなので、CSSをマスターしている方は容易に理解できてしまうと思います。
htmlタグでアクセスする
タグに直接アクセスすることができます。アクセス先にタグ名を直接書きます。複数ある場合は指定したタグすべてにアクセスします。divにアクセスしているので、h1やspanは無視されます。またアクセスした先の入れ子になっているタグもまとめてアクセスすることになりますので注意。要するにエレメントを全部まるごとアクセスすることになるわけです。[Sample]jQuery
$(document).ready(function(){
$("div").css("background-color","#00ff00");
});
htmlとか、アクセスしたエレメント(htmlタグ)に書き込んだりすることができます。[Sample]
<h1>エレメントへアクセスする</h1>
<div>divタグの部分です。<span>入れ子の部分です。</span></div>
<span>spanタグの部分です。</span>
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,#mark,span")を$("h1","#mark","span")ってな感じで個別にクォーツで囲ってしまうことです。エレメントは全部まとめてクォーツで囲んで、囲んだ中でコンマで区切ります。
<h1>エレメントへアクセスする</h1>
<div id="mark">IDで指定した部分</div>
<span>spanタグの部分です。</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>



