jQueryの使用方法について
jQueryがよく使われるケースとしては、HTMLソース上の特定の要素に対して何らかの操作を行いたい時、その場所を特定する事が簡単だからという事になるでしょうか？
また、どの操作であっても書式がすべて共通しているというメリットもあります。
その書式は、「$('セレクタ').メソッド();」です。
セレクタについては、CSSと全く同じです。
要素で指定、IDで指定、classで指定する事が出来ます。
また、CSSで当たり前に使われてる、「子孫セレクタ（親子も含む）」、「疑似要素、疑似セレクタ」など、CSSでの書式がすべて使えます。
例えば、次のようなHTMLがあった場合、
|
1 2 3 |
<div id="large" class="outbox"> <p id="content" class="font24">サンプル</p> </div |
「サンプル」と言う文字を赤くしたい場合は、次のどれでも可能です。
|
1 2 3 4 5 6 |
$('#content').css('color', '#FF0000'); $('.font24').css('color', '#FF0000'); $('div p').css('color', '#FF0000'); $('#large p').css('color', '#FF0000'); $('.outbox p').css('color', '#FF0000'); $('#large .font24').css('color', '#FF0000'); |
このように普段CSSで指定している方法と全く同じ記述方法で特定の場所に対し、コントロールができます。
メソッドについて
メソッドについては、書ききれない程の種類がありますが、最低次の物ぐらいは覚えておきたいものです。
|
1 2 3 4 5 |
・.css() － CSSの設定 ・.html() － 要素内のHTML部分を入れ替える ・.text() － 要素内のテキスト部分のみを入れ替える ・.append() － 特定の要素内にHTMLを追加する ・.click() － 特定の場所がクリックされた時の処理を記述する |
Javascript、jQueryは一般的にhead要素内に記述しますのでHTMLの表示と処理順序が逆転してしまいます。
そこでセレクタで場所を特定する場合次の様な処理が必要になります。
|
1 2 3 4 |
$(function() { //セレクタなどを使用する場合、 //この中に記述する必要がある }); |
この 「function」内の記述は、 HTMLの表示がすべて表示されてから実行するという事になるので、HTML内の場所の特定が正しく行われるようになります。
