iPhone Safariを使うときにあるInput boxで何か入力後"return"キーのkeydownイベントをキャッチして、何かしらのアクションを行いたい、のが目的です。よくあるのがreturnキーでformをsubmitしたり、ボタンクリックのアクションを行ったり、キーボードを隠したりするところですかね。
13という数字がreturnキーのkeydown時のコードです。実はJavascript経験がある方ならすぐ分かると思いますが、13はEnterキーのコードでもあります。
もう一つのTipはキーボードを隠したいときはjQueryのblur()を使えばOKです。
下記どちらもOKです。明示的に書きたいときはjQueryで。
一年くらい使ってなかったので、ほぼ忘れてしまいました。そのためのメモという感じです。
// 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 アニメーション中の要素を選択する。
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に何の変更もないです。
elem指定とID指定のjQueryセレクタパフォーマンス実験を行いました。
"先にJavascriptでelementをとってそれをjQueryの$セレクタに囲むやつ"
vs
"直接jQueryのidセレクタでとるやつ"。
コードで言うと
$(document.getElementById("foo"))
vs
$("#foo")
普通前者が勝だろうと思うだろう、
どれくらいの差かを確認したくて。
一万回ループでとった結果です。
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';
第三者のソースに手を加えるのはあまりやりたくないけど。
よく出来ていると思います。
勉強になります。
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として上げられましたが、
完全に修正できなかったみたいです。
http://dev.jquery.com/ticket/4241で
当時の担当者のコメントを見ると
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);
実際のプロジェクトでやってみたら10倍以上は速くなりました。
とは言ってもこれはIE6でのパフォーマンスで、
FirefoxやIE8だと悪い例のコードても遅いとは実感できないくらいでした。
ちなみに
$(li).attr(...).val(...).text(...)の方は読みやすいので結構気に入ったんですけど。。。
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になるんです。。。