jQueryでチェックボックスの状態を監視するイベントはclick eventを使う。

チェックされたかを判断するには$(“#some_checkbox”).is(‘:checked’)がいい。

CoffeeScriptでのサンプルコード：

$("#some_checkbox").click (e) ->
  if $(this).is(':checked')
    # actions when checked
  else
    # actions when not checked

change eventも監視はできるが、取れる値は遅延されるみたいです。

The change event is sent to an element when its value changes. This event is limited to input elements, textarea boxes and select elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

http://api.jquery.com/change/

参考：http://forum.jquery.com/topic/jquery-checkbox-checked-event

下記どちらもOKです。明示的に書きたいときはjQueryで。

jQuery ->
  alert "hello"

$ ->
  alert "hello"

一年くらい使ってなかったので、ほぼ忘れてしまいました。そのためのメモという感じです。

// idがwrapperの中の最初のdivを取る
$("#wrapper").find("div:first")

この:xxxがBasic Filter(基本フィルタ)と読んで、他にもいろいろあります。

:first 先頭の要素を選択する。

:last 末尾の要素を選択する。

:not(selector) 指定したセレクターを除外した要素を選択する。

:even 偶数番の要素を選択する。

:odd 奇数番の要素を選択する。

:eq(index) インデックス指定した要素を選択する。

:gt(index) 指定したインデックスより後の要素を選択する。

:lt(index) 指定したインデックスより前の要素を選択する。

:header h1,h2などのヘッダ要素を選択する。

:animated アニメーション中の要素を選択する。

英語API

日本語API

jQueryのappendやafterは全部DOM Manipulation、つまりDOM操作のメソッドであります。どう違うかは下記ソースコードを見るのが一番速いでしょう。

append(prepend,appendTo,prependTo)は要素内に、子供要素として貼り付ける

$('<span>span text</span>').appendTo(".chapter");

<div class="chapter"> ... </div>

組み立てた結果：

<div class="chapter">
	...
	<span>span text</span>
</div>

append、appendToは最後の子供要素として、prepend、prependToは最初の子供要素として挿入する感じです。

after(before,insertAfter,insertBefore)は要素の外、つまり同一のレベルで兄弟要素として貼り付ける

$('<span>span text</span>').insertAfter(".chapter");

組み立てた結果：

<div class="chapter">
	...
	<span>span text</span>
</div>

htmlタグがなければ無効

$('some text').appendTo(".chapter");

htmlに何の変更もないです。

elem指定とID指定のjQueryセレクタパフォーマンス実験を行いました。

“先にJavascriptでelementをとってそれをjQueryの$セレクタに囲むやつ”

vs

“直接jQueryのidセレクタでとるやつ”。

コードで言うと

$(document.getElementById(“foo”))

vs

$(“#foo”)

普通前者が勝だろうと思うだろう、

どれくらいの差かを確認したくて。

結果

一万回ループでとった結果です。

• IE8: 187 vs 344
• IE6: 203 vs 453
• Firefox×(3.6.3): 21 vs 63
• Chrome(4.1.xx): 9 vs 39

サンプルコード

デモページへ

var t0 = new Date();

for (var i=0; i<10000; i++){
	$(document.getElementById("foo"));
}

var t1 = new Date();

for (var i=0; i<10000; i++){
	$("#foo");
}

var t2 = new Date();

alert("直接elementを渡す時間は：" + (t1-t0) + " , ID指定でとる時間は："+ (t2-t1));

下記のURLで試してみればすぐ分かりますが、

表題の通りblockUIで制御したところは解除した後にマウスのカーソルがおかしいです。

IE,FirefoxとChromeでテストした結果、Firefoxは無事のようです。

http://malsup.com/jquery/block/position.html

解決策

jquery.blockUI.jsを開いてreset()のfunctionのところに以下のコードを追加

data.el.style.cursor = 'default';

第三者のソースに手を加えるのはあまりやりたくないけど。

参考サイト

Forbidden

よく出来ていると思います。

勉強になります。

siblings: function( elem ) {
	return jQuery.sibling( elem.parentNode.firstChild, elem );
},
children: function( elem ) {
	return jQuery.sibling( elem.firstChild );
},

そしてjQuery.sibling()の中身です！

nodeTypeが1の場合はelementノードの意味です。

nはループに使われて、elemは除外する要素です。

例えばsiblings()の場合は自分自身を除外しています。

for文の書き方も覚えとこう、、

javaでのIteratorのhasNext()関数みたいな動きをしていますね。

	sibling: function( n, elem ) {
		var r = [];

		for ( ; n; n = n.nextSibling ) {
			if ( n.nodeType === 1 && n !== elem ) {
				r.push( n );
			}
		}

		return r;
	}

表題の通り、IE6 + jQuery1.3.2の状態でbindする時に

jQueryのnamespaceを使うと確実にメモリリークが発生します。

jQuery1.4.2では発生しないことを確認しました。

メモリリークが発生するコード

$("#foo").bind("change.abc", function(){});

上記”change.abc”のabcがnamespaceです。

それをなくすことでメモリリークは解消されます。

イベントハンドラの中身とは関係ありません。

メモリリークは発生しない

$("#foo").bind("change", function(){});

これはjQueryのbugとして上げられましたが、

完全に修正できなかったみたいです。

#4241 (Namespaced events cause memory leaks)
– jQuery Core
– Bug Trackerで

当時の担当者のコメントを見ると

I had a really difficult time getting a reliable test case to verify this actually solves the memory leak. r6321 appears to have fixed this issue

「時間ないからちゃんとテストしてない、r6321の対応で解決できたように見える」と、

ずいぶん適当な回答ですよね。。。

DOM操作を避けてjQueryのパフォーマンスを改善する掟です。

こんなコードがあるとしましょう。

パフォーマンスの悪い例

var list = [....];    // 長さ100の配列とする

for (var i in list) {

    var li = document.createElement("li");

    $(li)
       .attr("id", "li" + i)
       .text(list[i]);

$("ul").append(li);

}

改善したコード

var list = [....];    // 長さ100の配列とする

var li = "";
for (var i in list) {

    li += "<li id='li" + i "'>" + list[i] + "</li>";

}

$("ul").html(li);

まとめ

• document.createElementの代わりにHTMLの文字列を作る
• jQueryオブジェクトに属性やテキストを設定するのではなく、直接HTML文字列に書く
• for文内毎回appendの代わりにhtml()を使う

実際のプロジェクトでやってみたら10倍以上は速くなりました。

とは言ってもこれはIE6でのパフォーマンスで、

FirefoxやIE8だと悪い例のコードても遅いとは実感できないくらいでした。

ちなみに

$(li).attr(…).val(…).text(…)の方は読みやすいので結構気に入ったんですけど。。。

jQuery 1.4.2ではこれは治ったようです。

jQuery最新版をお使いの方は下記のようなバグはもう発生しません。

サンプル

※jQuery 1.3.2で発生する問題※

HTML

<select>
	<option id="foo">&nbsp;</option>
	<option>11</option>
	<option>22</option>
</select>

<tr id="bar">&nbsp;</tr>

Javascript

var optionText = $("#foo").text();

// firefoxは0、IEは1
alert("select optionタグの をtrimした後のlength: " + $.trim(optionText).length);

var trText = $("#bar").text();

// firefoxは0、IEも0！
alert("trタグの をtrimした後のlength: " + $.trim(trText).length);

結果

selectのoptionタグのテキストにある“ ”に

$.trimをかけて見ると

Firefoxはちゃんとtrimしてlengthが0になったが、

IEはtrimできずlengthが1のままです。

しかしtrタグのテキストにある” ”をtrimすると

IEも正しくtrimしてlengthが0になるんです。。。

DEMO

jQuery最新版(1.4.2)を使うDEMO