HIDAZINE

jQueryはJavaScriptのライブラリです。

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

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

prototype.js,YUIとの比較

http://www.prototypejs.org/

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

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

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

jQueryダウンロード

http://jquery.com/

jQueryプラグイン

→プラグインの紹介

The AJAX Libraries API

google.load

http://code.google.com/intl/ja/apis/ajaxlibs/documentation/ GoogleからJavaScriptライブラリ配布。一度読み込んだ情報は一時ファイルとして記憶されるため、転送量の軽減が期待できる。
2009/1/14にjQuery1.3.0リリース。v1.2.6以前から属性セレクタなどの仕様変更がありました。
2009/1/17にjQuery1.3.1リリース。バグ修正。
2009/2/20にjQuery1.3.2リリース。セレクタがIEでも高速など。

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

sizzle

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

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

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

$('#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);
  });
});

蛇腹のあれ。少ない領域にジャンル分けしたメニューをまとめることで探しやすくなる。

• 設定
  • ストーリー
  • 登場人物
  • 舞台背景
• onAIR
  • ラジオ
  • 地上波
  • 映画
• スペシャル
  • 壁紙
  • イベント

デザインに凝ったサイトでのフォーム画面でラジオボタンを消すとlabelチェックの効果が現れない。

クリックした対象とチェックを同期させるためにjqueryを扱う。

php等を使わずに初期状態を変更することもできる。

photoshopで使う10進数の色表示をブラウザ用の16進数に変更する

1010進数を16進数に変換↓
1616進数を10進数に変換↑

jQueryでメモ帳もどきをつくってみた

本来ならrows属性を変更するところだが、今回はスタイルシートで絶対値の高さを変更する。

書き換えるタイミングは入力直前に判定してしまうkeudownではなく、入力直後に判定するkeyupが望ましい。

ここに文章や改行を打ち込んでね。

フォームのＵＩ向上に。

すべてを選択(ヌ)

ヌ

ヌヌ

ヌヌヌ

ヌヌヌヌ

すべてを選択(ス)

ス

スス

ススス

下の入力フォームに文字を打ち込んでみよう。

灰色背景に書かれているコードはjQueryでscriptタグの中身をコピーし、htmlに自動生成されたものです。