- 2013-10-15
- 講師: 宮崎 雄策 (Yuusaku Miyazaki)
- Mail: [email protected]
- Twitter: @sutara_lumpur
- jQueryの何が美味しいの?
- jQueryの使用準備
- セレクタで要素を指定できてラクちん!
- HTML要素をいじくりまわそう!
- イベント作成もかんたん!
ライブラリとは、プログラムで頻繁に使用するような複数の機能をまとめたものです。
jQueryのほかにも様々なものが公開されています。
とはいえ、現在、jQueryのシェアは圧倒的です。
教科書にもあるように、jQueryにはさまざまな利点があるからです。
- ブラウザごとに異なる動作の違いを吸収してくれる。
つまり、特定のブラウザのために分岐を設けて処理を作って上げる必要がない。 - CSSに似た直感的な記述
- DOMの操作が簡単
- Ajax操作用の便利なメソッドが用意されている
http://jquery.com/
圧縮版(jquery.min.js)と非圧縮版(jquery.js)の2種類が公開されています。
jQuery自体の開発者やバグ検証目的などでなければ圧縮版を選びます。
現在はバージョン1.x系と2.x系の2種類が公開されています。
両者の違いは、古いInternetExplorer(IE)に対応しているかどうかです。
jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8.
古いIEを搭載しているWindows XPが2014年の4月にサポートが終了するまでは、もうしばらくバージョン1.x系を使うほうがいいと思います。
- 利点
- jQuery本体をダウンロードする必要がない。
- 一度使用したライブラリはWebブラウザにキャッシュされ、同じライブラリを使用する場合に、キャッシュ内のライブラリが読み込まれるため高速な処理が可能。
- 欠点
- ローカル環境においてもインターネットへの接続環境が必要。
以上の点を理解した上でCDNを利用してください。
下記のように記述します。
なお、現在、JavaScriptはbody要素の最後に記述するのが流行であり、標準になりつつあります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<!-- HTMLを記述 -->
<!-- JavaScript -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
// 処理を記述
});
</script>
</body>
</html>CSS1～3までのセレクタのほとんどに対応しています。
jQuery独自の指定方法もあります。
素のJavaScriptでCSSプロパティを指定する形式(DOM形式)でも記述できます。
…でも、多分使わないと思います。
サンプルをいじりながら説明していきます。
サンプルをいじりながら説明していきます。
$は他のJavaScriptライブラリでも使われています。
いきなり$を使うのではなく、下記のブロックの中で使うようにしましょう。
jQuery(document).ready(function($) {
// ページの読み込み完了後に実行したい処理を書く
});(function($) {
// すぐに実行したい処理を書く
})(jQuery);ちなみに、$を使わずに下記のように書くこともできます。
…面倒くさいですけど (^ ^;)
jQuery('#output').text(jQuery('#input').val());
jQuery('#result').text('コードも読みづらくなるし、やっぱり"$"は便利です');