pig's diary

何でも忘れるので万年初心者ね

jQuery知らなかった点洗い出しの回〜

はや三年来のjQueryファンだけど、知らない/新入荷したAPIが沢山あることが判明!イカンです!
なので、普段必須に必要ではないけど「知ってたら使ってたよ!」というベンリapiを集めました(完全に自分基準。)

/////////// effect追加 と .dequeue() を覚える ///////////
// どうやら「現在のanimationをこなしつつ、
// 次のanimationを同時に(平行して)こなす」ということみたい
// 特定のeffectを.dequeue() やら .clearQueue() したいわがままっ子は
// 引数に文字列を渡すが良いとマニュアルには記されている
$("#box").css({position: 'relative'})
    .animate({left: '+=100px'}, 400)
    .animate({top: '+=100px'}, 400)
    .animate({left: '+=100px'}, 400)
    .animate({top: '+=100px'}, 400)
    .delay(600)
    .slideUp('fast');
$(document).click(function(){
    $("#box").dequeue();// execute the next effect before current one ends
});
    
$(document).dblclick(function(){
    $("#box").clearQueue();// cancell all effects from the next
});


/////////// .delay() これは便利!知らなかった!setTimeoutがんばって書いてたー ///////////
// .delay() も、animationのひとつとしてキューに追加される。
// .delay() のexecute中に .dequeue() すると、.delay() の次が即実行される(==.delay()がキャンセルされる)
$('#box').slideUp(300).delay(800).fadeIn(400);
$('#box').slideUp(300).delay(800).show();// 表示されない。effects queue に入れられたもののみ、遅延して表示される


/////////// いろんな .data() ///////////
$.data(document.body, 'foo', 52);
$.data(document.body, 'bar', 'test');
$('body').data('yeah', 52); // これは1.4.4からサポート!ちょっと意外
$("body").data( {'ohh': '0525'});
console.log( $("body").data('foo') );
console.log( $("body").data() ); // ぜんぶがオブジェクトで返ってくる


/////////// .getComputedが裏側で使われているという話 ///////////
var s = $("#box").width();//css("width");
console.log(s);


/////////// .context (用途がわからない ///////////
var $ul = $(".u");
var c = $("a", $ul).context;
var e = c.getElementsByTagName('li');
console.log(c.nodeName);


/////////// :first と :first-child ///////////
var $elm = $(".u > li:first");
console.log($elm);// always one element
var $elm = $(".u > li:first-child");
console.log($elm);// two elements could be hit


/////////// e.preventDefault() と e.stopPropagation(); ///////////
document.getElementById("box").addEventListener("click", clickHandler, false);
document.getElementById("boxInner").addEventListener("click", clickHandler, false);
document.getElementsByTagName("a")[0].addEventListener("click", clickHandler, false);
function clickHandler(e){
    // e.preventDefault();
    // e.stopPropagation();
    
    alert(e.currentTarget.tagName);
}

ほんとjQueryってサービス精神が服着て歩いてるみたいな奴だよね。実際、歩いちゃいないんだけどさ。

次回

「.detach()って.remove()と違うんですか!」からやろうと思います〜 ワーーー