Posts Tagged ‘jQuery’
2011年11月22日
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
Tags: checkbox, jQuery
Posted in jQuery | No Comments »
2010年12月01日
jQueryのappendやafterは全部DOM Manipulation、つまりDOM操作のメソッドであります。どう違うかは下記ソースコードを見るのが一番速いでしょう。
$('<span>span text</span>').appendTo(".chapter");
<div class="chapter"> ... </div>
組み立てた結果：
<div class="chapter">
...
<span>span text</span>
</div>
append、appendToは最後の子供要素として、prepend、prependToは最初の子供要素として挿入する感じです。
$('<span>span text</span>').insertAfter(".chapter");
組み立てた結果：
<div class="chapter">
...
<span>span text</span>
</div>
$('some text').appendTo(".chapter");
htmlに何の変更もないです。
Tags: JavaScript, jQuery
Posted in jQuery | No Comments »
2010年05月17日
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));
Tags: JavaScript, jQuery, Performance
Posted in jQuery | 1 Comment »
2010年04月19日
よく出来ていると思います。
勉強になります。
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;
}
Tags: jQuery, Snippet
Posted in jQuery | 1 Comment »
2010年04月04日
表題の通り、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の対応で解決できたように見える」と、
ずいぶん適当な回答ですよね。。。
Tags: IE, IE8, jQuery, トラブル
Posted in jQuery | 1 Comment »
2010年03月26日
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(…)の方は読みやすいので結構気に入ったんですけど。。。
Tags: jQuery, Performance, Tips
Posted in jQuery | No Comments »
2010年03月10日
jQuery 1.4.2ではこれは治ったようです。
jQuery最新版をお使いの方は下記のようなバグはもう発生しません。
※jQuery 1.3.2で発生する問題※
<select>
<option id="foo"> </option>
<option>11</option>
<option>22</option>
</select>
<tr id="bar"> </tr>
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になるんです。。。
jQuery最新版(1.4.2)を使うDEMO
Tags: JavaScript, jQuery
Posted in JavaScript, jQuery | No Comments »
