【jQuery】入門3. jQueryを書いてみる前の予備知識

こんにちは（・∀・）

jQueryについての超簡単入門講座です。「二回に分けてご紹介していきます」と前回言いましたが二回では終わらなそうなので、もう一回増やして三回に分けてご紹介していきます。というのも思っていたよりもボリュームアップしてしまったためです。簡単になるようなるべく軽くしているつもりなんですが...

では改めまして、今回はjQueryを始めるためのStep2「jQueryを書いてみる前の予備知識」です。

前回のStep1でjQueryを使う準備は整いました。それではいよいよjQueryを書いていきましょう。と、言いたいところですが、jQueryについてもう少し知っておきたいことを少し今回解説していきたいと思います。

jQueryの基本形

jQueryの基本的な書き方は以下のようになります。
$("セレクタ").メソッド(パラメータ);
例
$("#sample").css("color", "#00f");

上記が基本的なjQueryの書き方です。セレクタ・メソッド・パラメータ(引数)を記述するという事を覚えておいてください。

セレクタ

セレクタにはCSSでもお馴染みの要素が入ります。JavaScriptではgetElementByIdやgetElementsByTagNameで取得していましたが、jQueryでは$("body")のように簡単に取得する事ができます。

隣接セレクタや属性セレクタ、フィルタなども使用することができます。

セレクタの書き方は基本的には$()ですが、jQuery()と書くこともできます。どういうときに使うのかといえば、他のライブラリ(prototype)とjQueryを一緒に使う場合です。なぜかというと、prototypeには$()関数というのがあり、一緒に使うとjQueryとprototypeの関数がコンフリクト(競合)してしまい、正しい動作ができなくなってしまいます。それを避けるためにprototypeとjQueryを一緒に使う場合、jQueryでは$()の代わりにjQuery()を使うことがあります。

$("#sample").css("color", "#00f");
jQuery("#sample").css("color", "#00f");

どちらも同じです。

メソッドとパラメータ

次にメソッドとパラメータについてです。メソッドはサンプルの例ではcssとなっており、パラメータは"color", "#00f"となっております。サンプルの例では要素#sampleのテキストの色をCSSで青にする、という命令になっています。

$("#sample").css("color", "#00f");

ここではよく使う入門向けのメソッドをご紹介していきます。

メソッドは他にもたくさんあるのですが、とりあえず最初はこの位覚えておけば良いと思います。

jQueryの実行タイミング

jQueryを動作させたいのはどういうときでしょうか。例えば、ページを読み込んだとき？それともある要素をクリックまたはタップしたとき...？

などなど、だいたいこのどちらかで使うことがほとんどではないでしょうか。それらjQueryが実行されるタイミングをイベントといいます。

そこでまずはHTMLを読み込んだときに発生するイベントについてです。

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

上記はJavaScriptでいうところのwindow.onload()のような物です。のような物、というのはJavaScriptのwindow.onload()はwindowがロード(HTMLや画像などページの内容が読み込まれたら)されたらJavaScriptが実行されます。一方のjQueryの$(document).ready(function(){});はwindow.onload()とは違い、画像が読み込まれていなくてもHTMLが読み込まれ、スクリプトが実行できる状態になったら実行されます。なのでJavaScriptのwindow.onload()より実行されるタイミングは早くなります。

簡単に覚えるなら、

HTMLが読み込まれたとき

と覚えておけばいいでしょう。

ちなみに他にも書き方があって、次のように書くこともできます。

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

上記は$(document).ready(function(){});の省略版です。

$(document).ready(function(){
//↓と同じです。
});

$(function(){
//↑と同じです。
});

どちらも同じことで、短く省略して書けるんです。

しかし、$(function(){});は万能のようですが、注意しないといけない場合があります。先にも言いましたが$(function(){});はHTMLを読み込んだら実行します。なので画像を使ったjQueryなどでは画像が読み込まれる前に実行されてしまうとエラーになってしまいます。ではそういう場合はどうするのか...

そういう場合は.on()メソッド、パラメータloadを使います。

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

次はクリックしたときに発生するイベントについてです。

前にご紹介した「ページを読み込んだら何かする」とは違い、クリックするまでは何も起こらず、クリックして初めてイベントが発生します。

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

簡単に覚えるなら「HTMLを読み込んだら...」の中に「クリックしたら...」が入っている、と覚えておけばいいでしょう。

HTMLが読み込まれてクリックしたら

次はある要素の上にカーソルが乗ったときに発生するイベントについてです。

要素の上にカーソルが乗るまでは何も起こらず、要素の上にカーソルが乗ったらイベントが発生します。

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

簡単に覚えるなら「HTMLを読み込んだら...」の中に「要素の上にカーソルが乗ったら...」が入っている、と覚えておけばいいでしょう。

HTMLが読み込まれてマウスオーバーしたら

次は要素の上のカーソルが外れたときに発生するイベントについてです。

要素の上に載っているカーソルが外れるまでは何も起こらず、要素の上からカーソルが外れたらイベントが発生します。

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

簡単に覚えるなら「HTMLを読み込んだら...」の中に「要素の上のカーソルが外れたら...」が入っている、と覚えておけばいいでしょう。

HTMLが読み込まれてマウスアウトしたら

CSSメソッドのパラメータの書き方

ここでCSSメソッドのパラメータの書き方について解説します。CSSメソッドのパラメータの書き方にはちょっと癖があり注意が必要で、さらに書き方も複数あります。サンプルをご覧ください。

パラメータ(引数)の中のプロパティが一つの場合

$("a").css("color", "#f00");

プロパティの属性と値の区切りはカンマ(,)です。

パラメータ(引数)の中のプロパティが複数ある場合

$("a").css({"color": "#f00", "font-size": "120%"});

赤字になっている部分が一つのプロパティの場合と複数のプロパティの場合での違うポイントです。プロパティの属性と値の区切りはコロン(：)です。プロパティとプロパティはカンマ(,)で区切ります。プロパティはブレース({})で括ります。他にも属性をキャメルケースで書くこともできます。また、プロパティの属性をクォーテーションで括らない場合はキャメルケースで書かなければならない等ありますのでご注意ください。

$("a").css(fontSize, "120%");

$("a").css({color: "#f00", fontSize: "120%"});

メソッドチェーン

メソッドはドット(.)でつなげて複数指定することができます。例えば一つの要素に複数のメソッドを使いたい場合、一度に書くことができます。

一つの要素に複数のメソッドを使いたい場合

$("a").text("こんにちは！");
$("a").css("color", "#f00");

//メソッドチェーンにすると...
$("a").text("こんにちは！").css("color", "#f00");

とりあえずここまでがjQuery超入門で知っておきたい予備知識になります。次からはいよいよ簡単なjQueryを書いていきます。

次回は【jQuery】入門4. jQueryを書いてみるです。

関連リンク

JavaScript入門
jQuery入門