いままでなんとなくで使っていたjQuery。
この辺でjQueryの書き方などをまとめていく。
もくじ
- jQueryを使うための準備
- jQueryでpタグの文字に装飾をしてみる
今回使うjQueryはバージョン2.1.1をつかっていきます。
そろそろIE8に振り回されるのも勘弁してほしいので。。。
jQueryを使うための準備
jQueryを使うためには、jQuery本体のファイルとhtmlファイルをリンクさせる必要があります。
jQuery本体のファイルはGoogle Library apiにあるjQueryとリンクさせるか、jQueryサイトからダウンロードして使います。
htmlコードのどこにjQueryを読み込むのかというと、bodyタグの閉じタグ直前。（下記コード位置）
<body>
<p>サンプルテキスト</p>
<!-- ここからbodyタグの閉じタグ直前までにjQueryを書く -->
<script src="js/jquery-2.1.1.min.js"></script>
</body>
jQueryを読み込み、その後に実行させたいプログラムを読み込むようにします。
<body>
<p>サンプルテキスト</p>
<script src="js/jquery-2.1.1.min.js"></script>
<!-- ↑コードを書く前にjQuery本体を読み込む -->
<script>
// ここにjQueryのコードを書く
</script>
</body>
jQueryでpタグの文字に装飾をしてみる
解説の前に実際に動くものを書いてみる。
ここではpタグの文字色を緑色（#00ff00）にしてみる。
<body>
<p>サンプルテキスト</p>
<script src="js/jquery-2.1.1.min.js"></script>
<!-- ↑コードを書く前にjQuery本体を読み込む -->
<script>
$('p').css('color','#00ff00');
</script>
</body>
文字に複数の装飾を加えたいこともあります。
例えば「文字色を変える」「サイズを変更する」「太字にする」の3つを同時に行いたいときは次のように記述します。
ここで行う装飾は次の通りです
- 文字は緑色
- サイズは30px
- 太字にする
<body>
<p>サンプルテキスト</p>
<script src="js/jquery-2.1.1.min.js"></script>
<!-- ↑コードを書く前にjQuery本体を読み込む -->
<script>
$('p').css({'color':'#00ff00','font-size':'30px','font-weight':'bold'});
</script>
</body>
ひとつだけ装飾を加える時と複数の装飾を加える時で少し書き方が変わりました。最初の書き方でpタグに「色を変える」命令と「サイズを変える」命令、「太字にする」命令を別々に指定しても同様の結果が得られます。
<body>
<p>サンプルテキスト</p>
<script src="js/jquery-2.1.1.min.js"></script>
<!-- ↑コードを書く前にjQuery本体を読み込む -->
<script>
$('p').css('color','#00ff00');
$('p').css('font-size','30px');
$('p').css('font-weight','bold');
</script>
</body>
ですが、ひとつにまとめて書いた方がすっきりしていて好みです。