はやっているようなのでまとめてみたいと思います。]]>
jQueryの読み込み
Google AJAX Libraries APIで簡単に読み込めます。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
jQueryの記述場所
基本的にはscript要素内の次の箇所に記述していきます。
<script type="text/javascript">
$(function(){
/*ここにjQueryを記述*/
})
</script>
上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。
<script type="text/javascript">
$(document).ready(function(){
/*ここにjQueryを記述*/
})
</script>
jQueryの実行場所の設定
jQueryで操作したい要素をセレクターで指定します。
$("セレクター")
セレクターはCSSとほぼ同じものが利用できます。
HTMLの操作
セレクターで指定した要素内のテキストを変更します。
$("セレクター").text("ほげほげ");
セレクターで指定した要素内のHTMLを変更します。
$("セレクター").html("<strong>ほげほげ</strong>");
セレクターで指定した要素内の先頭にHTMLを追加します。
$("セレクター").prepend("<strong>ほげほげ</strong>");
セレクターで指定した要素内の最後にHTMLを追加します。
$("セレクター").append("<strong>ほげほげ</strong>");
セレクターで指定した要素の前にHTMLを追加します。
$("セレクター").before("<strong>ほげほげ</strong>");
セレクターで指定した要素の後ろにHTMLを追加します。
$("セレクター").after("<strong>ほげほげ</strong>");
セレクターで指定した要素を別の要素で包みます。
$("セレクター").wrap("<h1></h1>");
セレクターで指定した要素を別の要素と置き換えます。
$("セレクター").replaceWith("<h1></h1>");
セレクターで指定した要素を削除します。
$("セレクター").remove();
セレクターで指定した要素の属性を変更します。
$("セレクター").attr("属性名","属性値");
セレクターで指定した要素の属性を削除します。
$("セレクター").removeAttr("属性名");
セレクターで指定した要素にclass属性を追加します。
$("セレクター").addClass("class属性値");
セレクターで指定した要素からclass属性を取除きます。
$("セレクター").removeClass("class属性値");
セレクターで指定した要素のCSSを変更します。
$("セレクター").css("プロパティ","値");
jQueryの実行のタイミング
jQueryはイベントを設定し、そのタイミングで命令を実行できます。
$("セレクター").イベント(function(){
/*ここにイベント時の命令を記述*/
})
イベントにはclick、dblclick、mousedown、mouseup、mouseover、mouseout、mousemoveなどの他に、交互に命令を実行するtoggleなどがあります。
jQueryでのアニメーション
以下のようなアニメーションで表示、非表示を切り替えることが出来ます。
$("セレクター").show(スピード);//表示
$("セレクター").hide(スピード);//非表示
$("セレクター").slideDown(スピード);//表示
$("セレクター").slideUp(スピード);//非表示
$("セレクター").fadeIn(スピード);//表示
$("セレクター").fadeOut(スピード);//非表示
スピードにはslow／normal／fast のいずれか、またはミリ秒（1秒＝1000秒）が指定できます。
スピードの後ろにはコールバック関数を指定することができ、アニメーション終了時の命令が設定できます。
$("セレクター").アニメーション(スピード,function(){
/*アニメーション終了時の命令*/
});
次のように設定するとCSSの値をアニメーションで変更することが出来ます。
$("セレクター").animate(値を変更したいCSSプロパティ, スピード, 動き, コールバック関数)
動きには「linear」または「swing」を設定でき、linearは常に一定の速度で、swingは最初ゆっくり・後半は速くCSSプロパティの値を変更します。
jQueryでAjax
次のように記述しておくとセレクターで指定した要素の内側を取得したファイルの内容と差し替えることができます。
$("セレクター").load("ファイル名");
繰り返し構文(2010/2/6追加)
eachで繰り返し処理を行うことができます。
$("セレクター").each(function(){
//セレクターで指定した要素に対する命令
});
if文などで条件により異なる命令を設定する場合などによく利用します。
プラグインの作成(2010/2/6追加)
jQueryでは次のようなコードで新たにメソッドを定義することが出来ます。
$.fn.メソッド名 = function(){
//実行したい命令
return this;
}
jQueryの為になるサイト
jQuery公式サイト
jQuery 1.3.2 日本語リファレンス
Web制作の現場で使える jQuery UIデザイン入門
もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き）
jQueryについてもっと知りたい！
「Web制作の現場で使う jQueryデザイン入門」という書籍が発売されますので是非参考にしてください。
JavaScriptについてもっと知りたい！
JavaScript基礎文法最速マスター - なんとなく日記にまとまっていますので是非参考にしてください。
関連エントリー
8のjQueryのすごいTIPS
jQueryを良くする25のTIPS
jQueryのコードを良くする5つのTIPS
jQueryを使ったサンプルコード
Re:マークアップ・エンジニアのJavaScript入門 - 配列を理解する
]]>
![Web creators ( ウェブクリエイターズ ) 2010年 04月号 [雑誌]](http://images.amazon.com/images/P/B0037YLK2S.09._PB_PT-2_OU09_SCMZZZZZZZ_.jpg)
Web Creators (ウェブクリエイターズ) 2010年 4月号が発売されました。今回は記念すべきvol.100号です。]]>
今回、私の連載では「HTML5で作るWebサイト」と題してHTML5でサイトを作成する際の方法と注意点に付いて解説しております。
![Web Designing ( ウェブデザイニング ) 2010年 03月号 [雑誌]](http://images.amazon.com/images/P/B0037LYQLS.09._PB_PT-2_OU09_SCMZZZZZZZ_.jpg)
![Web creators ( ウェブクリエイターズ ) 2010年 03月号 [雑誌]](http://images.amazon.com/images/P/B0034C7S56.09._PB_PT-2_OU09_SCMZZZZZZZ_.jpg)
![Web creators (ウェブクリエイターズ) 2010年 1月号 [雑誌]](http://images.amazon.com/images/P/B0030EL14W.09._PB_PT-2_OU09_SCMZZZZZZZ_.jpg)
![Web creators (ウェブクリエイターズ) 2010年 1月号 [雑誌]](http://images.amazon.com/images/P/B002WIWJI4.09._PB_PT-2_OU09_SCMZZZZZZZ_.jpg)
![Web creators (ウェブクリエイターズ) 2009年 12月号 [雑誌]](http://images.amazon.com/images/P/B002SR7Q6O.09._PB_PT-2_OU09_SCMZZZZZZZ_.jpg)
