【jQuery】入門4. jQueryを書いてみる

こんにちは（・∀・）

Webデザイナー向けjQuery超簡単入門講座三回目、今回が最終回です。今回はjQueryを始めるためのStep3「jQueryを書いてみる」です。

それではいよいよ簡単なjQueryを書いていきます。

前回のStep2の最後にjQueryの実行タイミング(イベント)について解説しました。「HTMLが読み込まれたら」、「クリックしたら」、「マウスオーバーしたら」、「マウスアウトしたら」等。イベントは他にもありますが今回は入門編ということで、jQueryはその4パターンのイベントに絞ってそれぞれサンプルを作っていきたいと思います。

1. HTMLが読み込まれたら

ページを読み込んだときに発生するイベントのサンプルです。

$(function(){
//HTMLを読み込んだらここに書いたことを実行します。
});

「HTMLが読み込まれたら…」の基本形です。上記のサンプルを使ってjQueryを書いていきます。

See the Pen jquery-write_demo1 by Webデザインラボ (@webdlab) on CodePen.

上記JSのタブをクリックして見ていただければわかると思いますが、jQueryでdemo1のテキストを青く表示させております。

$(function(){
//HTMLを読み込んだらここに書いたことを実行します。
$(".demo1").css("color", "#00f");
});

上記が「HTMLを読み込んだら…」の$(function(){});にスクリプトを書いてみた場合の基本形です。「HTMLも画像も全部読み込んだら...」の$(window).on("load", function(){});の場合は次のようになります。

See the Pen jquery-write_demo2 by Webデザインラボ (@webdlab) on CodePen.

$(window).on("load", function(){
//HTMLも画像も読み込んだらここに書いたことを実行します。
$(".demo2").css("color", "#00f");
});

「HTMLを読み込んだら...」の場合と同じくdemo2のテキストは青く表示されました。「demo1とdemo2が違って表示された」などということは特にありません。続いては「クリックされたら」の場合です。

2. クリックされたら

HTMLを読み込んでクリックされたときに発生するイベントのサンプルです。

$(function(){//HTMLを読み込んで、
$(".demo3").click(function() {
//クリックしたらここに書いたことを実行します。
});
});

「HTMLを読み込んで...、クリックしたら」の基本形です。上記のサンプルを使ってjQueryを書いていきます。

See the Pen jquery-write_demo3 by Webデザインラボ (@webdlab) on CodePen.

$(function(){//HTMLを読み込んで、
$(".demo3").click(function() {
//クリックしたらここに書いたことを実行します。
$(this).text("クリックされました！");
});
});

.textメソッドでdemo3のテキストをクリックして書きかえました。続いては「カーソルが要素に乗ったら」と「カーソルが要素から外れたら」の場合です。

3.カーソルが乗ったら・カーソルが外れたら

HTMLを読み込んで要素の上にカーソルが乗ったときに発生するイベントのサンプルです。

$(function(){//HTMLを読み込んで、
$(".demo4").mouseover(function() {
//要素の上にカーソルが乗ったらここに書いたことを実行します。
});
$(".demo4").mouseout(function() {
//要素の上のカーソルが外れたらここに書いたことを実行します。
});
});

「HTMLを読み込んで...、要素の上にカーソルが乗ったら」と「要素の上のカーソルが外れたら」の基本形です。上記のサンプルを使ってjQueryを書いていきます。

See the Pen RaGQWv by Webデザインラボ (@webdlab) on CodePen.

$(function(){//HTMLを読み込んで、
$(".demo4").mouseover(function() {
//要素の上にカーソルが乗ったらここに書いたことを実行します。
$(this).css("background", "#9fb7d4");
});
$(".demo4").mouseout(function() {
//要素の上のカーソルが外れたらここに書いたことを実行します。
$(this).css("background", "none");
});
});

.cssメソッドでdemo4のテキストの上にカーソルをあわせるとテキストの背景色が青になり、カーソルを外すとdemo4の背景色は無しになるように設定されております。

いかがでしたでしょうか。jQuery超入門はこれで終了となります。今回ここでご紹介したものはjQueryのほんの一部です。しかし、この三回の講座で簡単なjQueryなら皆さん書けるようになっていると思います。

サーバーサイドのプログラムに比べてJavaScriptはプログラミングの世界に触れるには、とても入門しやすいフロントエンドの言語だと思います。それをさらに簡潔にしているのがjQueryなので「プログラムは難しい...」という苦手意識を取り払って勉強していけば、そんなに難しくないということを実感できると思います。

今回の講座をきっかけに、「jQueryちょっとやってみようかなー」、なんて気持ちにになっていただければ幸いです。また、jQuery超入門はここで終わりますが、今回の講座ではカバーしきれていない部分はまだたくさんあります。今後もjQueryの知識を深めていけるよう少しづつプラスαの講座を続けていけたらと考えております。

関連リンク

JavaScript入門
jQuery入門