jQuery入門01 - jQueryの準備 -

tech

最近jQueryを使って、自分のサイトなんかをひっそりと作っています。
僕の本業はWeb系ではないので、知らないことだらけ。なので色々勉強しながらコツコツ作っています。
その勉強したところを忘れないためにも、ちょっとずつまとめていこうかと。そしてこれが誰かの役に立てば嬉しいなと。


ということでまずはjQueryについて。

jQeuryって?

wikipediaから引用するとこんな感じ。
jQuery - Wikipedia

jQueryは、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。John Resig が2006年1月に開催された BarCamp NYC でリリースした。

MIT License と GNU General Public License のデュアルライセンスであり、フリーかつオープンソースである。

で、javascript超初級の僕が思ってるjQueryというのは、

  • DOM選択が楽でとても柔軟！！(document.getElementById()なんてもうやってられない)
  • 各ブラウザの挙動を気にしなくて良い！！(僕はFirefox3.5 , Google Chrome , IE8で動作確認中)
  • メソッドチェインを使ってすっきりかける！！(1行で色々できて便利だけど使いすぎると横長になるので注意)
  • Ajaxだって気軽に使える！！(XMLHttpRequest()なんてややこしいのは使わない)
  • でも、javascript(とCSS)の基本を知ってないと使うべきじゃない(やっぱりjsの最低限はしってないと困る。何よりjQueryの便利さを実感するために)

と言う感じです。
jQuery最高！！みたいに書いてますが、他のjsライブラリ(prototype.jsやYUI)は使ったこないのでわかりません＞＜

jQueryの準備

では早速jQueryをダウンロードして使う準備をします。jQueryは単一の.jsファイルとして提供されています。
以下のサイトの「Download(jQuery);」をクリックして、「jquery-x.x.x.min.js」をダウンロードします。(執筆時はjquery-1.3.2.min.jsでした)
jQuery

で、ダウンロードしたjQueryファイルと同じ場所に以下ようなsample.htmlファイルを作成します。
これはjQueryの機能を使って、指定した<div>の中に文字を挿入するサンプルです。
(DOCTYPE等は省略してます)

<html>

<head>
<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
  $(".Box").text("Hello jQuery!!");
});
</script>
</head>

<body>
<div class="Box"></div>
</body>

</html>

$(function(){...})と$("...")についてはまた次回説明します。
作成したsample.htmlをブラウザで開いて動作を見てみましょう。
"Hello jQuery!!"と表示されれば成功。



次回はjQueryの基本的な使い方について書こうと思います。