jQueryを読み込む
まずjQueryを読み込む必要があります。
ダウンロードしてローカルから読み込む方法と、googleサーバーにあるjQueryを使用する方法の2つがあります。
http://code.google.com/intl/ja/apis/ajaxlibs/documentation/index.html#jquery
ソース
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
特定の要素にアクセスする
特定のID名を持つエレメントへのアクセスには$("#ID名")のように指定します。しかし、操作対象となる全てのエレメントにID名を割り当てることができない場合があります。jQueryではID名ではなくクラス名でアクセスすることができるため、エレメントにクラス名が割り当てられていれば十分です。ID名にカンマやピリオドが含まれる場合（#id3.0）は、$("id3\\0")とバックスラッシュでエスケープします。
また、thisの中のulにアクセスしたい場合は$("ul",this)と記述します。
サンプル
このテキストが変わります。
ソース
<script type="text/javascript">
function changeText(){
$("p.about").text("軽量/高速なライブラリです");
}
</script>
階層構造へのアクセス
$("p span")とするとpタグ内にあるspanタグが操作対象になります（子孫セレクタ）。この方法は、pタグ内に含まれるspanタグ全てが該当しますが、子孫ではなく子のみ対象とすることもできます。この場合は>記号を使って指定します。$("p>span")とするとpタグ内にある子spanのみ対象となり、孫spanは対象外になります。
サンプル
この色が変わります。
ソース
<script type="text/javascript">
function accessSample(){
$("p>span.accessSample").css("color", "#ff0000");
}
基本フィルタ (:first, :last, :not, :even, :odd, :eq, :gt, :lt)
アクセスした要素から、さらに一番始めの要素や後ろの要素を特定する為には:first,:last等のフィルタを使用します。
:first 一番始めの要素
:last 一番後ろの要素
:not() not以外、例えば:not(:first):not(:last)だと、:firstでも:lastでも無い要素となります。
:even 2で割り切れる順番に存在する要素
:odd 2で割り切れない順番に存在する要素
:eq() ()番目に存在する要素、例えば:eq(2)ならば、2番目に存在する要素、イコールという意味
:gt() ()番目より大きい順番に存在する要素、例えば:gt(3)ならば、4,5,6…番目に存在する要素
:lt() ()番目より小さい順番に存在する要素、例えば:gt(3)ならば、0,1,2番目に存在する要素
サンプル
- 0番目
- 1番目
- 2番目
- 3番目
ソース
<script type="text/javascript">
function filterSample(){
$(".filterSample li:gt(1)").css("color", "#ff0000");
}
</script>
要素のCSS操作
上記でアクセスした指定要素にcssを追加したり変更したりする時は、$().css("プロパティ","数値")と記述します。
プロパティは通常のcssで記述している様に書きます。
サンプル
フォントサイズを変更します
ソース
<script type="text/javascript">
function accessCss(){
$("cssAccess").css("font-size", "122%");
}
CSSの一括指定
一つの要素に対して複数のプロパティを付与させたい場合は、$().css({"プロパティ1":"数値1","プロパティ2":"数値2","プロパティ3":"数値3"})のように、
カンマ(,)区切りで指定をしていきます。
サンプル
フォントの指定を一括で変更します
ソース
<script type="text/javascript">
function accessAllCss(){
$("p#cssAllAccess").css({ "color" : "#008800", "font-size" : "180%"});
}
要素にclassを追加・削除する
アクセスした要素に対して新しくclassを付ける時は.addClass("class名")、削除したりする時は、.removeClass("class名")と設定します。
サンプル
ソース
<!-- クラスを追加 -->
<script type="text/javascript">
function addClassSample(){
$("p#addClass").addClass("addCss"); //クラスを追加
}
</script>
<!-- クラスを削除 -->
<script type="text/javascript">
function removeClassSample(){
$("p#addClass").removeClass("addCss"); //クラスを削除
}
</script>
属性値を操作する
タグに付与されている属性を取得・書き換えなどの操作をするためには、attr()を使用します。
サンプル
ソース
<!-- クラスを追加 -->
<script type="text/javascript">
function addClassSample(){
$("p#addClass").addClass("addCss"); //クラスを追加
}
</script>
<!-- クラスを削除 -->
<script type="text/javascript">
function removeClassSample(){
$("p#addClass").removeClass("addCss"); //クラスを削除
}
</script>
ページが読み込まれたら処理を実行する(イベント)
ページの読み込みが完了した時に発生するイベントであるwindow.onloadイベント (loadイベント) をjQueryで設定してみます。
jQueryの場合は$(function(){ 処理 })とするだけです。
サンプル
ソース
<script type="text/javascript">
$(function(){
$("p#loadSample").text("読み込みが完了しました。");
});
</script>
クリックしたら処理を実行する(イベント)
今までのサンプルはaタグのonClickで処理をしてきましたが、jQuery側から要素をクリックした時に処理を実行する場合は、.click(function(){処理});と記述します。
jQueryのイベントに関しては、こちらを参照してください。
サンプル
下のリンクをクリックしてください
ソース
<script type="text/javascript">
$(function(){
$("a#clickSampleLink").click(function(){
$("#clickSample").fadeOut();
});
});
</script>
要素の属性を取得・書き換え
たとえば、aタグのhrefやwidthなどの属性を取得したい場合は、.attr("属性","属性値")を使用します。
ここまでの覚えたことで出来ること
基本的なことを羅列してきましたが、ひとまずここまでの事を知っておけば、
プラグインを使わなくても、jQueryさえ読み込んでいれば、
自分で調べたりしながら自力で出来るレベルのサンプルを作ってみました。
サンプル
参考サイト
http://www.openspc2.org/JavaScript/Ajax/jQuery_study/ver1.3.1/index.html
http://allabout.co.jp/internet/javascript/closeup/CU20071020A/