"jQuery"の記事

iPhone Safariキーボードの"Return"のkeydownイベントをキャッチ

Situation

iPhone Safariを使うときにあるInput boxで何か入力後"return"キーのkeydownイベントをキャッチして、何かしらのアクションを行いたい、のが目的です。よくあるのがreturnキーでformをsubmitしたり、ボタンクリックのアクションを行ったり、キーボードを隠したりするところですかね。

Keydown event

13という数字がreturnキーのkeydown時のコードです。実はJavascript経験がある方ならすぐ分かると思いますが、13Enterキーのコードでもあります。

もう一つのTipはキーボードを隠したいときはjQueryのblur()を使えばOKです。

参考:http://stackoverflow.com/questions/5932317/how-to-capture-the-keyboard-return-event-on-iphone-browser

2011年10月25日(火) iphone, jQuery, Javascript, safari, keyboard, keydown

CoffeeScriptでjQueryのdocument.readyの書き方

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

2011年07月09日(土) jQuery, CoffeeScript

jQueryでselectorと一致する最初のものを取る

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

// 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

2011年07月02日(土) jQuery

jQuery: append(prepend,appendTo,prependTo)とafter(before,insertAfter,insertBefore)の違い

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に何の変更もないです。

2010年12月01日(水) jQuery, Javascript

jQueryセレクタのパフォーマンス:elem vs id

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));

2010年05月17日(月) jQuery

jQuery blockUI Pluginのバグ:unblock時にマウスカーソルが砂時計のまま(IE, Chrome)

下記のURLで試してみればすぐ分かりますが、
表題の通りblockUIで制御したところは解除した後にマウスのカーソルがおかしいです。
IE,FirefoxとChromeでテストした結果、Firefoxは無事のようです。

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

解決策

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

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

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

参考サイト

http://groups.google.com/group/jquery-en/browse_thread/thread/c86671033a86be25/ebd5e710cc78885a?lnk=gst&q=cursor#

2010年04月26日(月) jQuery

jQuery siblings()とchildren()の内部ソースを見た

よく出来ていると思います。
勉強になります。

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;
    }

2010年04月19日(月) jQuery

jQuery1.3.2 bind時にnamespaceを使うとIE6ではメモリリーク

表題の通り、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の対応で解決できたように見える」と、
ずいぶん適当な回答ですよね。。。

2010年04月04日(日) jQuery

jQueryパフォーマンス:DOM操作について

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(...)の方は読みやすいので結構気に入ったんですけど。。。

2010年03月26日(金) jQuery

jQuery1.3.2のバグ?IEで&nbsp;を$.trimするとき変な結果に

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タグのテキストにある"&nbsp;"
$.trimをかけて見ると
Firefoxはちゃんとtrimしてlengthが0になったが、
IEはtrimできずlengthが1のままです。

しかしtrタグのテキストにある"&nbsp;"をtrimすると
IEも正しくtrimしてlengthが0になるんです。。。

DEMO

jQuery最新版(1.4.2)を使うDEMO

2010年03月10日(水) jQuery