jQuery

jQueryとはJavaScriptの主にGUIやDOM,Ajaxを扱う軽量なライブラリのひとつです。

本来のjavascriptでは難しく面倒臭い記述を、簡単に記述できる便利な機能を持っています。

jQueryを使って動的なwebサイトを作ってみましょう

jQueryダウンロード

http://jquery.com/

公式サイトから元ファイルをダウンロードすることもできますが、googlecode用意されているだファイルに直接アクセスする方法もあります。以降の項目にて、その方法を記載しています

jQueryプラグイン

→プラグインの紹介

The AJAX Libraries API

google.load

http://code.google.com/intl/ja/apis/ajaxlibs/documentation/

googlecodeに直接アクセスするメリット

GoogleからJavaScriptライブラリ配布。一度読み込んだ情報は一時ファイルとして記憶されるため、転送量の軽減が期待できる。

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

CSSセレクタエンジン

jQuery1.3では高速なCSSセレクタエンジン「sizzle」を採用しています。

http://sizzlejs.com/ http://github.com/jeresig/sizzle/tree/master

履歴

• 2006/8/26 最初の安定版リリース。
• 2007/9/10 jQuery1.2リリース。
• 2009/1/14 jQuery1.3.0リリース。v1.2.6以前から属性セレクタなどの仕様変更がありました。
• 2009/1/17 jQuery1.3.1リリース。バグ修正。
• 2009/2/20 jQuery1.3.2リリース。セレクタがIEでも高速など。
• 2010/1/14 jQuery1.4リリース。
• 2011/1/14 jQuery1.5betaリリース。

prototype.js, YUIとの比較

http://www.prototypejs.org/

prototype.jsでもAjaxやDOM操作はできますが、現在、勢いがあるのはやはりjQueryでしょう。

「googleやMozillaなどのメイン企業から公式に認められている」「記述のシンプルさ」などは大きなアドバンテージといえます。

prototypeとは競合せずに利用する手段があるので、prototypeから徐々にjQueryに移行するという手段もあります。

まずは各要素の選択・指定方法から。以下の文字をクリックしてみてください。

$('#xxxx') idを選択

$('.xxxx') classを選択

$('[xxxx]') 属性で選択 (属性の有無)

$('[attr="xxxxx"]') 属性の内容で選択 (属性の内容 ～と等しい)

$('[attr*="xxxx"]') 属性の内容で選択 (属性の内容 ～を含む)

$('[attr^="xxxx"]') 属性の内容で選択 (属性の内容 ～で始まる)

$('[attr$="xxxx"]') 属性の内容で選択 (属性の内容 ～で終わる)

asdf$('xxxx>yyyy') 子要素を選択zxcv

asdf$('xxxx yyyy') 子孫要素を選択子孫要素を選択zxcv

※v1.2.6以前では[@attr="val]のような記述になります。

以下のボタンをそれぞれ触ってみてください

jquery標準機能：クリックorマウスホバー状態によって画像が変わる。

今までのJavaScriptならばタグのなかにonclick=～などとhtmlとJavascriptが混じった汚いコードだったり、getElementById()のような長い記述だったのが、jQueryの属性指定のおかげで綺麗に分離ができる。

クリック

ホバー

トグルスイッチ

DOM操作の代表。文字列だけでなく、タグも挿入できる。

jqueryDOM	タグの内外	要素の前後
text	テキストそのもの
html	テキストそのもの（htmlタグ含む）
append	内側	後
prepend	内側	前
after	外側	後
before	外側	前
wrap	外側	前後

• aaaa
• ア

attr()はアトリビュートを書き換える

css()はスタイルシートを書き換える

val()はフォームの内容を書き換える

toggleClass()はクラス属性の有無を切り換える

テーブルのセル内容を要素の順番によって切り替える

要素のタグ、配列の最初の要素・最後の要素・偶数・奇数などの条件によって、異なる処理を行う。

例：背景色を変えてみる

ページロード時に全部書き換えるわけではなく、マウスオーバー時に一度しか機能しない方式。（最初の読み込みを軽減し、体感速度を早くするため）

• aaaa
• bbbb
• cccc
• dddd

この技術を応用することで動的なタブ切り替えや、擬似的な「続きを読む」機能、アコーディオンメニューなどが実装できる。

var Manager = $({});

$.extend(Manager, {
    act: function(ele) {
        ele.text('off - click');
    },
    act2: function(ele) {
        ele.text('on');
    }
}
);

$(function(){
  var ele = $('#user');
  Manager.act(ele);
  ele.click(function(){
    Manager.act2(ele);
  });
});