jQueryの基礎を体験しよう
jQueryはと初心者の方でも理解すればすぐに使用できます。その反面、多機能でもあるため、基礎知識がない状態でコードを先頭から詠み進めたり、断片的なコードを拾い読みする方法を行うと、何からどうすればよいのかわからなくなるというリスクがあります。
そこでまずは以下の3つのステップを行い、基礎を学びましょう。
- CSSのスタイルを変更してみよう
- タイミングをコントロールしてみよう
- アニメーションさせてみよう
これらはシンプルな機能ですが、見た目の実現に関する基礎となります。
目次
CSSのスタイルを変更してみよう
まずは、jQueryを使用してCSSのスタイルを変更してみます。
エディタを開き、以下のコードを入力してみましょう。
$(function(){
$('#typo').css('color','#ebc000');
});
上記のコードを入力すると、#typoの要素の文字色が変更されます。
コード解説
先ほど入力したコードの内容を見ていきましょう。理解しやすいようにコードを以下の2つのパートに分けます。
■1つめのパート
$(function){
//2つめのパートが記述
});
■2つめのパート
$('#typo').css('color','#ebc000');
1つめのパートのコードの意味は後程説明します。
ここでは2つめのパートをご覧ください。
このコードは以下の通りです。
■スタイルを変更するコードの内容
$('セレクタ').css('プロパティ','値');
| 要素 | 説明 |
|---|---|
| セレクタ | ここにはcssと同じセレクタを指定できる。 |
| プロパティ | CSSのプロパティを指定する |
| 値 | プロパティに設定する値を指定する |
このコードは「セレクタ」に該当する要素のCSSの「プロパティ」を「値」に変更する処理を行います。
jQueryの最も基本的な構文
まず先ほどの2つめのパートを使用して、jQueryの基本的な構文と考え方を解説します。
$('#typo').css('color','#ebc000');
上記の構文では「$(‘#typo’)」という命令の対象に対して、css(‘color’,’#ebc000′)という命令を指示していると捉えることができます。
css()では「()」（カッコ）の中に記述した’color’がcssのプロパティ、’#ebc000’がそのプロパティの値に該当します。従ってcssのcolorプロパティに#ebc000を指定せよという命令になります。
このcss()という命令は、jQuery独自の命令です。このようなjQuery独自の命令のことをjQueryメソッドと呼びます。
また、css()の()の中に記述したcssプロパティや値のように、メソッドに引き渡されたデータを引数と呼びます。
上記構文の場合、jQueryのメソッド→css()、引数→(‘color’,#222)の構成となっていることを理解しておいてください。
命令の対象
css()というメソッドの命令の対象になっているのはid=”typo”が指定されているHTML要素ですが、jQueryではHTML要素に対して直接css()メソッドを実行することはできません。メソッドを使用するためには、以下のようにjQuery独自の形式で命令の対象をしていすることが必要です。
$('#typo')
$()とcssのセレクタ（上記では’#typo’）の関係は、css()メソッドと引数（cssプロパティと値）の関係と同じです。セレクタは$()の引数として渡されています。
$()はHTML要素をもとにしてjQuery独自の要素生成するという機能を持っている関数です。HTML要素を指定する方法として、CSSのセレクタを指定できます。この$()関数によってjQueryの形式に変換された要素のことをjQueryオブジェクトと呼びます。
処理の流れは以下の通りです。
- 【1】$関数で命令の対象となるHTML要素をjQueryオブジェクトに変換
- 【2】jQueryオブジェクトに対してメソッドを呼び出して変更を加える
jQueryにはcss()メソッド以外にもたくさんのメソッドがありますが、どのメソッドもこの流れは同じです。
ドット（.）とセミコロン(;)
「.」にはjQueryオブジェクトとjQueryメソッドをつなく役割があります。
また、「;」にはJavascriptのコードの終わりを表します。いくつか例外もありますが、現時点では、Javascriptの1つ命令が終わったら「;」をつけると覚えましょう。
HTMLの準備が整うのを待つ仕組み
後に回していたサンプルコードの1つめのパートについて説明します。
$(function()){
//2つめのパートが記述
});
ブラウザは基本的に、HTMLのコードが記述された順番どおりに処理していきます。
そして<script src=”○○.js”></script>に到達すると○○.jsを読み込み、完了するとその内容を実行します。この際、○○.jsにはその後に続くHTML要素を操作する命令が書かれているとブラウザはこの時点でまだ要素の途中までしか認識していないため、処理を実行できません。
この問題を解決するために1つめのパートが必要となります。$(function()){});を記述すると、ブラウザはその中に記述された処理を一旦予約状態にしておき、HTMLを最後まで読み込んだ時点でそれらを実行するようになります。
