jQuery基礎文法最速マスター

このエントリーをはてなブックマークに追加

はやっているようなのでまとめてみたいと思います。

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 日本語リファレンス
もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)
40分で覚える!jQuery速習講座

jQueryについてもっと知りたい!

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)Web制作の現場で使う jQueryデザイン入門

実務で使えるサンプル100本超の作成を通じて、手を動かしながらjQueryの基礎からしっかり学べる1冊です。是非参考にしてください。

JavaScriptについてもっと知りたい!

JavaScript基礎文法最速マスター - なんとなく日記にまとまっていますので是非参考にしてください。

関連エントリー

8のjQueryのすごいTIPS
jQueryを良くする25のTIPS
jQueryのコードを良くする5つのTIPS
jQueryを使ったサンプルコード
Re:マークアップ・エンジニアのJavaScript入門 - 配列を理解する

スポンサードリンク

«MTのキャプチャ認証の負荷を軽減する方法 | メイン | Web Creators (ウェブクリエイターズ) 2010年 3月号»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/884
コメント

$.each 等々の説明があるといいと思いました :)

投稿者:Guwashi | 2010年2月 5日 00:32

>Guwashiさん

ご指摘ありがとうございます。
eachについて追加しました。

投稿者:西畑一馬 | 2010年2月 6日 19:26

はてなブックマークからきました

とても参考になりました

ありがとうございます

投稿者:ユッキー | 2013年5月18日 14:10

はてなブックマークからきました

とても参考になりました

ありがとざいます

投稿者:pesan obat herbal grosir termurah | 2014年3月 3日 16:53
コメントを投稿