jQueryを学ぶにはよく使われるいくつかの方法を知らなければならない.
2303 ワード
jQueryイベント処理
ready(fn)
コード:
役割:Webアプリケーションの応答速度を大幅に向上させることができます.この方法を使用すると、DOMの読み込み準備が整い、操作が可能になったときにバインドされた関数をすぐに呼び出すことができますが、99.99%のJavaScript関数はその時点で実行する必要があります.
bind(type,[data],fn)
コード:
≪アクション|Actions|emdw≫:一致する要素ごとにclickのような特定のイベントにイベント・プロセッサ関数をバインドします.イベントリスニングの役割を果たす.
toggle(fn,fn)
コード:
役割:クリックするたびに呼び出す関数を切り替えます.一致する要素をクリックすると、指定した最初の関数がトリガーされ、同じ要素を再度クリックすると、指定した2番目の関数がトリガーされます.興味深い関数で、いくつかの機能を動的に実装するときに使用される可能性があります.(click()、focus()、keydown()のようなイベントはここでは言いませんが、それらは開発でよく使われています.)
jQuery外観効果
addClass(class)とremoveClass(class)
コード:
次のように書くこともできます.
役割:指定した要素にスタイルを追加または削除して、ダイナミックなスタイル効果を実現します.上記の例では、マウスで2色のテーブルを移動するコードを実現します.
css(name,value)
コード:
≪アクション|Actions|emdw≫:一致する要素にスタイル・プロパティの値を設定するのは簡単です.この個人的な感覚は上のaddClass(class)と少し似ています.
slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()
コード:
作用:jQueryで提供される比較的よく使われるいくつかのダイナミック効果の関数.パラメータ:show(speed,[callback])を追加して、すべての一致する要素を優雅なアニメーションで表示し、表示が完了した後にオプションでコールバック関数をトリガーすることもできます.
ready(fn)
コード:
$(document).ready(function(){
// Your code here...
});
役割:Webアプリケーションの応答速度を大幅に向上させることができます.この方法を使用すると、DOMの読み込み準備が整い、操作が可能になったときにバインドされた関数をすぐに呼び出すことができますが、99.99%のJavaScript関数はその時点で実行する必要があります.
bind(type,[data],fn)
コード:
$("p").bind("click", function(){
alert( $(this).text() );
});
≪アクション|Actions|emdw≫:一致する要素ごとにclickのような特定のイベントにイベント・プロセッサ関数をバインドします.イベントリスニングの役割を果たす.
toggle(fn,fn)
コード:
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
役割:クリックするたびに呼び出す関数を切り替えます.一致する要素をクリックすると、指定した最初の関数がトリガーされ、同じ要素を再度クリックすると、指定した2番目の関数がトリガーされます.興味深い関数で、いくつかの機能を動的に実装するときに使用される可能性があります.(click()、focus()、keydown()のようなイベントはここでは言いませんが、それらは開発でよく使われています.)
jQuery外観効果
addClass(class)とremoveClass(class)
コード:
$(".stripe tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
});
次のように書くこともできます.
$(".stripe tr").mouseover(function() { $(this).addClass("over") });
$(".stripe tr").mouseout(function() { $(this).removeClass("over") });
役割:指定した要素にスタイルを追加または削除して、ダイナミックなスタイル効果を実現します.上記の例では、マウスで2色のテーブルを移動するコードを実現します.
css(name,value)
コード:
$("p").css("color","red");
≪アクション|Actions|emdw≫:一致する要素にスタイル・プロパティの値を設定するのは簡単です.この個人的な感覚は上のaddClass(class)と少し似ています.
slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()
コード:
$("#btnShow").bind("click",function(event){ $("#divMsg").show() });
$("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() });
作用:jQueryで提供される比較的よく使われるいくつかのダイナミック効果の関数.パラメータ:show(speed,[callback])を追加して、すべての一致する要素を優雅なアニメーションで表示し、表示が完了した後にオプションでコールバック関数をトリガーすることもできます.