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()と違うんですか!」からやろうと思います〜 ワーーー