jQueryのダウンロードとインストールのチュートリアル

最新推荐文章于 2024-10-15 09:57:04 发布

westkingwy

最新推荐文章于 2024-10-15 09:57:04 发布

阅读量1.5k

点赞数

分类专栏： JQUERY 文章标签： jquery javascript ajax google api download

JQUERY 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQueryは、MITとGPL licensesのデュアルライセンスで公開されているので、ライブラリー中の著作権表示さえ消さなければ、商用・非商用を問わず誰でも自由に利用できます。今回はjQueryを利用するための準備として、ライブラリーのダウンロードと設置方法を紹介しましょう。

jQueryをダウンロードする

　jQueryをWebサイトに導入する方法はいくつかありますが、最もポピュラーなのは、公式サイトからライブラリー本体（JSファイル）をダウンロードし、サーバーにアップロードして利用する方法です。

　jQueryをダウンロードするには、公式サイトのトップページにある「Download(jQuery);」ボタンからGoogle Codeに移動し、「jquery-1.3.2.min.js」をクリックします（2009年7月現在の最新バージョンは1.3.2）。


jQueryの公式サイト

　ダウンロードしたJSファイルをテキストエディターで開いてみると、著作権表示の後にJavaScriptの命令が記述されています。


/*
* jQuery JavaScript Library v1.3.2
* http://jquery.com/
*
* Copyright (c) 2009 John Resig
* Dual licensed under the MIT and GPL licenses.
* http://docs.jquery.com/License
*
* Date: 2009-02-19 17:34:21 -0500 (Thu, 19 Feb 2009)
* Revision: 6246
*/
(function(){var l=this,g,y=l.jQuery,p=l.$,o=l.jQuery=l.$=function(E,F){return new o.fn.init(E,F)},D=/^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,f=/^.[^:#\[\.,]*$/;o.fn=o.prototype={init:function(E,H){E=...(以下省略)

　jQueryのソースコードは、変数名を短くし、コメントや空白、改行を削除する「Minified」と呼ばれる方法で圧縮されています。ファイルサイズを大幅に減らす（圧縮前117 KB→圧縮後55.9 KB）ことで読み込み速度の向上を図っているのですが、JavaScriptを熟知した人でもjQueryのソースコードを読むのは困難です。普段jQueryを利用する際はMinified版でかまいませんが、jQueryのソースコードにはJavaScriptのすばらしいTipsがたくさん詰まっているので、興味がある方は非圧縮版を入手してぜひ一度目を通してみてください。非圧縮版のjQueryは「Download(jQuery);」の上にある「Development (120KB, Uncompressed Code)」にチェックを入れることでダウンロードできます。

Read more: http://ascii.jp/elem/000/000/437/437785/#ixzz20DxeCefa

jQueryの読み込みと記述場所

　ダウンロードしたjQueryは、利用したいWebサーバーにアップロードし、Webページ（HTML／XHTML）の中にscript要素を書いて読み込みます。


<script type="text/javascript" src="./jquery-1.3.2.js"></script>

　script要素はページ内のどこに記述してもかまいませんが、一般的にはhead要素の内部に記述します。


<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title>jQueryの読み込み</title>
    <script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
</head>

　ただし最近では、body要素を閉じる直前にscript要素を記述するケースも増えています。JavaScriptの読み込みを後回しにし、HTMLやCSSの描画を優先してページの表示を高速化するためです。このあたりは、あらかじめ自社のポリシーを決めておくといいでしょう。


<body>
    (中略)
    <script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
</body>

　jQueryの命令は、jQueryのライブラリー本体を読み込んだscript要素の後に、再びscript要素で記述していきます。


<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
<script type="text/javascript">
    //jQueryの命令をここに記述
</script>

　script要素は、src属性がある場合はsrc属性に記述されている外部ファイルを、src属性がない場合はscript要素内に記述されているコードをJavaScriptの命令として評価します。jQueryを使ったプログラムを書く場合にも、script要素の中に直接記述するか、「script.js」などの外部ファイルを作成して記述する方法が選べます。


<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./script.js"></script>

　ただし、実務上は外部ファイルに記述したほうがよいでしょう。多くのブラウザーは一度読み込んだJSファイルの内容をキャッシュするため、外部化しておけば2回目以降のページの表示を高速化できます。一度作ったプログラムを後々使い回すことを考えても、JavaScriptは外部化しておいたほうが便利です。

　作成するJSファイルは、埋め込む（X）HTMLと同じ文字コードで保存してください。基本的に文字コードは何でも構いませんが、Ajaxを利用してサーバーと通信する際にはUTF-8以外だと文字化けを起こす可能性があります。特別な理由がなければ、（X）HTMLファイル、JavaScriptファイルともにUTF-8で作成するのがよいでしょう。

Read more: http://ascii.jp/elem/000/000/437/437785/#ixzz20DyXli6H

Google AJAX Libraries APIによるjQueryの利用

　本文では、jQuery本体をダウンロードする方法を紹介しましたが、米グーグルのサービス「Google AJAX Libraries API」を使えばダウンロード不要でjQueryを利用できます。Google AJAX Libraries APIは、さまざまなJavaScriptライブラリーをグーグルのサーバーにホスティングし、Webページに直接読み込めるようにしたサービスです。jQuery以外にも、「jQuery UI」「Prototype」「script.aculo.us」「MooTools」「Dojo」「SWFObject」「Yahoo! User Interface Library（YUI）」などの主要なJavaScriptライブラリーに対応しています。


Google AJAX Libraries APIの公式サイト

　Google AJAX Libraries APIで提供されるライブラリーは、いずれも「gzip」と呼ばれる圧縮形式で圧縮されており、転送量を大幅に抑えているのが特徴です。jQueryの場合、Minified版の55.9 KBがgzip圧縮によって19KBにまで軽量化されています。

　また、ユーザーが過去にGoogle AJAX Libraries APIを使っているWebページを閲覧していればJSファイルがキャッシュされているため、たとえ自分のWebサイトに初めて訪れる場合でもページの表示速度が高速化されるメリットも期待できます。

　Google AJAX Libraries APIを利用するには、script要素でhttp://www.google.com/jsapi を読み込み、使用したいJavaScriptライブラリーとライブラリーのバージョンを指定します。たとえば、jQueryの1.3.2を読み込むときは以下のように記述します。


<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>

　google.loadを利用せず、src属性で直接ライブラリーを指定しても読む込めます。


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

　以下のようにバージョン名の一部（マイナーバージョン）を省略すると、常に最新のバージョンを自動的に読み込んでくれます。


<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>

　この場合、1.3.xの最新バージョン――たとえば現在は1.3.2ですが、1.3.3がリリースされれば1.3.3が読み込まれるようになります。マイナーバージョンアップのほとんどがパフォーマンスの向上ですので、わざわざHTMLのscript要素を書き換えなくてもパフォーマンスの向上が望める、というわけです。

　ただし、マイナーバージョンアップにバグや仕様変更が含まれている場合、当然ですがそれらも自動的に反映されてしまいます。また、マイナーバージョンを指定した場合に比べてキャッシュの有効期間が短くなるため（バージョンを指定しない場合は1時間、指定した場合は1年間有効)、通常はマイナーバージョンを指定する方法をおすすめします。

◆

　今回はここまでです。次回は、いよいよjQueryのコードを実際に書きながら、基本的な文法をマスターしていきましょう。

Read more: http://ascii.jp/elem/000/000/437/437785/#ixzz20Dz0B92X