2009年2月21日土曜日

 

【jQuery】トピック

イベント

ready()

DOMがロードされて操作・解析が可能になったタイミングで関数を実行する。

/* DOMロード完了後に実行 */
$(document).ready(function(){
 // ここに実際の処理を記述します。
 });

onload()」イベントをBODYタグに指定すると動かないので注意。

完全に「onload()」イベントの代わりにはならないので、「onload()」イベントのタイミングで実行したい処理は「jQuery.event.add()」を使う。

/* onloadイベントを追加 */
jQuery.event.add(window, "load", function(){
/* ここに処理を書く*/
 });

たくさんイベント使うなら以下のようにちょっと楽する。

/* jQuery.event.add()改善 */
function addOnLoadEvent(handler) {
  jQuery.event.add(window, "load", handler);
}
ready(fn) - jQuery 1.3.1 日本語リファレンス
JavaScript/jQuery/readyじゃなくてonloadイベントに関数を追加したい -
load()
/* load()でhell.htmlを読み込む */
$("#target_ajax_load").load("hello.html");

第2引数にPOSTの値を与えられる。省略されるとGETになる。

/* load()でPOSTリクエストをhell.cgiに与え結果を得る */
$("#target_ajax_load").load("hello.cgi", {
 name: "mikage",
 pageid: 3
 });

自動でGETパラメータが付けられるので「$.ajaxSetup()」メソッドでキャッシュしないように指定。


$.ajaxSetup({ cache: false }); $("#target_ajax_load").load("hello.html");

コールバック関数を指定することも出来る。ロード完了のタイミングで実行される。

load() - jQuery 開発者向けメモ - 基本・サンプル
・デモあり

関数

each()

全ての要素にコールバック関数を実行する。

/* liタグにexampleクラスを追加する */
$("li").each(function(){
  $(this).toggleClass("example");
});
each(callback) - Query 1.3.1 日本語リファレンス
セレクトのリストを取得
/* select要素の取得 */
$('#selectList').val();
jQueryを良くする25のTIPS > jQueryの関数を利用しよう - to-R
data()

dataメソッドはDOM要素にデータをストレージしておく為のメソッド。

Queryのコードを良くする5つのTIPS > DOM中にデータを保存できるdataメソッドを使おう - to-R
jQueryを良くする25のTIPS > dataメソッドを状態を保存し利用しよう - to-R

ハック

「,」区切りでセレクタ複数指定
/* 改善前 */
function del(){
  $("#ls1").val("");
  $("#ls2").val("");
  $("#ls3").val("");
}

以下のようにも書ける。

/*改善後 */
function del(){
  $("#ls1,#ls2,#ls3").val("");
}
jQueryによるJavaScript入門 - Re:Creator’s Kansai
ready()
/* 改善前 */
$(document).ready(function(){alert('hoge');})

次の様に書ける。

/* 改善後 */
$(function(){alert('hoge');})
Re:一晩で覚えるjQueryの逆引き基礎サンプル7つ -
キャッシュを使う
  1. 何度も同じセレクタを実行しない
  2. クラスだけを指定するのは禁止
  3. #idを積極的に使う
  4. 途中までの結果を再利用する
  5. 子供セレクタ(>)を使うと速くなることがある

無駄な検索をさせないという話。

/* 改善前 */
$("div.foo").addClass("bar");
$("div.foo").css("background", "#ffffff");
$("div.foo").click(function(){alert('foo');});

3つのコードの前半にあるセレクタ部分は同じ処理を繰り返してるので無駄。

/* 改善後 */
var foos = $("div.foo");
foos.addClass("bar");
foos.css("background", "#ffffff");
foos.click(function(){alert('foo');});

jQueryのメソッド・チェーンを使うと更に良い。

/* メソッド・チェーン */
$("div.foo")
 .addClass("bar")
 .css("background", "#ffffff")
 .click(function(){alert('foo');});

子供セレクタ(>)を使うと速くなることがある」も必要なければ孫要素まで検索させないようするため。

クラスだけを指定するのは禁止」「#idを積極的に使う」はクラス指定の検索が遅いから。

/* 改善前 */
$(".foo").css("display", "none");

全ての要素のクラス名を調べることになるので要素の指定もする。

/* 改善後 */
$("div.foo").css("display", "none");

更に「#id」を使うともっと良い。「getElementById()」があるし。

jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JSクラスを使ってJavascriptオフ環境に対応

HTML要素にJSというclassを追加する。

/* JSクラス */
$('HTML').addClass('JS');

CSSで非表示にしておく。

/* JSクラスのCSS */
.JS #myDiv{display:none;}

そうするとJavaScriptがonの環境では「#myDiv」を閲覧できない。
「#myDiv」にはJavaScripがoffの場合でもすべてコンテンツが閲覧できるような内容にする。

画像の読み込み完了を知る
/* 画像ロード完了を通知 */
$('#myImage').attr('src', 'image.jpg').load(function() { alert('Image Loaded'); });
noconflict設定でJSライブラリの共存

JSライブラリは「$」を使うので競合しないようnoconflict設定で変更する。

/* $の代わりに$jを設定する */
var $j = jQuery.noConflict(); $j('#myDiv').hide();
Google AJAX Libraries APIを利用

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
 // Load jQuery
 google.load("jquery", "1.2.6");
 google.setOnLoadCallback(function() {
 // Your code goes here. });
 </script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
jQueryを良くする25のTIPS > Google AJAX Libraries APIを利用しよう - to-R
処理結果をHTMLタグで囲む

早いらしい。

/* liタグで囲む */
var myList = $('.myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
  myListItems += '<li>This is list item ' + i + '</li>';
}
myListItems += '</ul>';
myList.html(myListItems);
jQueryを良くする25のTIPS > 1つの要素でwrapする為のテクニック - to-R
セレクタにコンテキストを与える

無駄な検索をしないように。

/* 改善前 */
var selectedItem = $('#listItem' + i);
/* 改善後 */
var selectedItem = $('#listItem' + i, $('.myList'));
jQueryを良くする25のTIPS > セレクタにコンテキストを与えよう - to-R
eventデリゲート
/* 改善前 */
$('#myTable TD').click(function(){ $(this).css('background', 'red'); });

イベントが増えるとその分用意しなくちゃいけない。

/* 改善後 */
$('#myTable').click(function(e) {
 var clicked = $(e.target); clicked.css('background', 'red');
});

eはクリックされた要素の情報を含むコンテンツ。

jQueryを良くする25のTIPS > eventデリゲートについて学ぼう - to-R
チェーン・メソッド
$('myDiv').removeClass('off').addClass('on');

異なる要素に指定を行いたい場合はfind()とend()を利用する。

/*  */
$('#myTable')
 .find('.firstColumn')
       .css('background','red')
 .end()
 .find('.lastColumn')
        .css('background','blue');
jQueryを良くする25のTIPS > チェーンメソッドを利用しよう - to-R
HTMLのコンテンツの値をフラグにする
classに情報を設定しておこう - to-R
膨大なデータやフォームなどをjQueryで追加する
jQueryを良くする25のTIPS - to-R
> ページが読み込まれてからHTMLを修正する
> 読み込みが遅いコンテンツはSEO効果が薄い

参考書

jQuery Cookbook
jQuery Cookbook

jQueryで作る Ajaxアプリケーション
jQueryで作る Ajaxアプリケーション

CSS + jQuery Webデザインテクニック
CSS + jQuery Webデザインテクニック

ラベル:


コメント: コメントを投稿

登録 コメントの投稿 [Atom]



この投稿へのリンク:

リンクを作成



<< ホーム

This page is powered by Blogger. Isn't yours?

登録 投稿 [Atom]

Google