jQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみる

人気のJavaScriptライブラリ、jQueryもかなり
情報が増えました。僕の様に知識が無くても
簡単に動きのあるWebサイトや、更なるユー
ザビリティの向上を可能にしてくれましたが、
いつまでもコピペではいずれ困る事になります。
その前にそろそろ基礎から学んでみませんか。

という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下さい。内容は基礎中の基礎です。

いつまでもコピペに頼っていては、何か問題が起こったときに対応できませんし、そもそもコピペするならjQueryである必要はありません。

でもjQueryはすごく便利なので、ちゃんと使いこなしたいところですよね。この記事が、誰かが勉強し始める切欠になれば幸いです。

jQueryを使うには

まず、jQueryを利用するには本体を読み込む必要があります。方法は2つあって、本家jQueryでダウンロードし、自分のサーバーにアップするか、Google AJAX Libraries APIを利用するかです。ここではGoogle AJAX Libraries APIを利用していきます。


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script>

これでjQuery本体の準備が整いました。これより下に実行したいjQueryを書いていきます。

準備する

jQueryのコードは基本的に以下のように書き出します。

<script type="text/javascript">
$(function(){
	ここに動作・実行させる為のコードを書く
})
</script>

この中身が実際にjQueryを使って動作させる部分になります。ここにいろいろ指定する訳ですね。

[note]尚、$(function()は$(document).ready(function()を省略した形になります。どちらでも動作します。[/note]

動作させる

実行したいコードがあって、そのコードをどの部分に指定するか、を決めなければなりません。例えば、買い物を頼まれても買う場所が分からないと買えませんよね。買い物をして欲しいなら買う場所を指示する必要あがあります。

同様に、jQueryにもどの部分で動作させるか、という指示をしなくてはなりません。

その指示書としてセレクタを使います。

STEP.1 / セレクタを知る

$(“div.example”)

よく見かけますね、これ。これがセレクタです。

$(“.example”)

css同様に、上記でも基本的に問題ありません。

STEP.2 / 動作を決める

では、次に「動作」を決めてみます。

.hide();

hideは表示状態の要素を非表示にする命令文です。

これらをつなげると

$(“div.example”).hide();

となります。これで「div.example要素を隠す」という命令文が一つ出来上がりました。

では、この流れの続きで開閉パネルを作ってみます。

STEP.3 / 命令文を付け足す

$(“div.trigger”).click(function(){
$(this).toggleClass(“active”).next().slideToggle(“fast”);
});

1行目：div.triggerというHTML要素をクリックすると、その後に命令されているコードが実行されます。
2行目：toggleClassは指定したcssのclassが要素に無ければ追加、あれば削除させるコードです。slideToggleは要素をスライドアップ/ダウンさせます。fastはアニメーションのスピードの指示内容です

STEP.4 / つなげる

全部つなげると

$(“div.example”).hide();
$(“div.trigger”).click(function(){
$(this).toggleClass(“active”).next().slideToggle(“fast”);
});

という形になりました。これが命令文全体になります。これを

<script type="text/javascript">
$(function(){
	ここに実行したいコード
})
</script>

の中に入れます。

コード完成

<script type="text/javascript">
$(function(){
	$("div.example").hide();
	$("div.trigger").click(function(){
		$(this).toggleClass("active").next().slideToggle("fast");
	});
})
</script>

コードが完成しました。せっかくtoggleClass(“active”)でcssに変化を加えていますので、パネルが開いている際のスタイルを変更してみます。

書いたコードに合わせてcssを書いてみる

div class=”trigger”の部分は、クリックされることでclassにactiveを追加します。

<style type="text/css">
div.active{
background: #0f81ff ;
}
</style>

このようにすると、パネルが開いている時は、背景色が出ることになります。

では実際に動かしてみます。

動作デモ

クリックでパネルを開閉出来ます

div.exampleで隠していた（hide）部分が、div.triggerがクリックされたことで、activeが追加され、アニメーションで開きました（slideToggle）。

大まかな手順は

jQuery本体を読み込む
セレクタで動作させる場所を指定する
動作を決める
$(function(){***})で動作させるコードを囲う
動作テスト

となります。

[note]誤解をしやすいのですが、上記サンプルでアニメーション動作そのものにactiveは不要です。これは開いている状態の時にcssでスタイルを変更できるように加えたものになります。

この場合、div.triggerはdiv.activeとなりますので開いている状態のスタイルはdiv.active{background: #0f81ff ;}といった形で指定します。
サンプルコードには含めましたが、無くてもアニメーションそのものに影響はありません。[/note]

使用したコードとマークアップ

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
$(function(){
	$("div.example").hide();
	$("div.trigger").click(function(){
		$(this).toggleClass("active").next().slideToggle("fast");
	});
})
</script>
<style type="text/css">div.active{background: #0f81ff ;}div.example{overflow: hidden;}</style>

<div class="trigger"><a href="#ex">クリックでパネルを開閉出来ます</a></div>

<div class="example"> 
		<div class="block"> 
			 
			div.exampleで隠していた（hide）部分が、div.triggerがクリックされたことで、activeが追加され、アニメーションで開きました（slideToggle）。

大まかな手順は
<ol>
	<li>jQuery本体を読み込む</li>

<li>セレクタで動作させる場所を指定する</li>
<li>動作を決める</li>
<li>$(function(){***})で動作させるコードを囲う</li>
<li>動作テスト</li></ol>
となります。
		</div> 

	</div>

※追記：「IE6でhideしない」と言われたのでdiv.example{overflow: hidden;}を追加しました。コピペしてほしくない記事なので全ブラウザで動くのが本当は嫌だったんですが、誤解も招いたので補足。

Chrome以外で確認していませんが、多分大丈夫じゃないかと思います。基本はこんな感じになります。命令文は沢山ありますので、まずはどんな命令を出せるかを知ると学ぶ楽しみが増えるのではないでしょうか。

どこで命令文を覚えるの？

色々学べるサイトはありますが、最初はリファレンスサイトや書籍以外は見ないほうがいいかも知れません。応用が書かれているとかえって混乱します。

jQuery日本語リファレンス

以下は尊敬するTo-Rさんと5509さんの書籍です。お勧め。

jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践

posted at 2011.2.22

西畑一馬,中村享介,徳田和規
インプレスジャパン
売り上げランキング: 8522

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

posted at 2011.2.22

西畑一馬
アスキー・メディアワークス
売り上げランキング: 3004

jQueryにもバージョンがあって、最新は~~1.5~~1.7になります。

プラグインは使わせてもらおう

コピペに頼らない、と言っても、全て自分で書いたほうがいい、という意味ではありません。配布されている便利なプラグインは使わせてもらうべきです。時間も短縮できますしね。

ただ、基本を理解すれば、そのプラグインを改造したり、バグを直すこともできるし、応用的に使うことも出来るわけです（ライセンスにもよりますけどｗ）。この差はいずれ大きくなるかと思います。

ご注意

この記事は、JavaScriptを知らない方でもjQueryの基本を理解できるように、言葉やコードの書き方をある程度選んで書いています事をご理解いただきますようお願い致します。また、僕もあまり把握出来ていないので、間違いがあればご指摘頂けると幸いです。

勘のいい方はaタグがいらないことに気がつかれたかと思います。