シャープなjQueryの要点まとめ(3) jQueryのイベントとアニメーション(その1:イベント)_jquery

1. イベント

1 DOM のロード

コードをコピー コードは次のとおりです:

$(document).ready(function(){//...})
DOM がロードされた後に実行されます。これは window.onload=function(){// とは異なります。 ...再利用性の観点から。 }
$(window).load(function(){//...})
ウィンドウ内のすべてのオブジェクトが読み込まれた後に実行され、window.onload= とほぼ同等です。関数（）{//...} 。このメソッドは、セレクター

Another: $(document).ready(function(){//...}) の省略形: $(function(){//.. ) にも使用できます。 }) または $().ready(function(){//...})

2 イベント バインディング

コードをコピー コードは次のとおりです:

$("selector").bind()
はイベントを要素にバインドします。形式: binding(type[,data]) ,fn)、
type イベント タイプには、blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、などがあります。 select、submit、keydown、keypress、keyup、error またはカスタム イベント
省略メソッド: $("selector").bind(type, function(){//...}) は $("selector" と同等です) ) .type(function(){//...})
特定のイベントのバインドを解除するためにデータパラメータを渡すことができます
$("selector").is()
判定メソッド

(外部: ローカル変数を定義するためにメソッドを複数回再利用できます var $x = $("selector").method())

3 合成イベント

コードをコピー コードは次のとおりです:

$("selector").hover(enter,leave)
カーソルをシミュレートhover イベント。マウスが入ったときに Enter イベントがトリガーされ、マウスが外に出たときに Leave イベントがトリガーされます (bind("mouseenter") と binding("mouseleave") の代わりに)
使用法: $("selector ").hover(function(){ //enter case...},function(){//leave case...})
(例外: IE6 は CSS の :hover 疑似クラス問題をサポートしていません)タグ以外 - このホバー イベントは、解決するためのハックとして使用できます)
$("selector").toggle(fn1,fn2,...,fnN)
連続マウス クリック イベントをシミュレートし、クリック順にイベントを順番に並べる
使い方：$("selector").toggle(function(){//case1...},function(){//case2...},。 ..,function(){//caseN})
特別な使用法: 要素の表示状態を切り替えます。要素が非表示の場合は、切り替えをクリックして要素を表示します。要素が表示されている場合は、 をクリックします。要素をトリガーして非表示にします

P108 の例:

コードをコピー コードは次のとおりです次のように:

<script> <BR>$(function(){ <BR>$ ("パネル h5.head").toggle(function(){ <BR>$(this ).next().toggle(); <BR>},function(){ <BR>$(this).next( ).toggle(); <BR>}) <BR>}) <BR>< /script> <BR></script>

4 イベントバブリング

$("selector").bind("type",function(event){//event: イベント オブジェクト...})
Event イベント オブジェクト: この関数内でのみアクセスできます。イベント処理関数の実行後、イベント オブジェクトは破棄されます。
event.stopPropagation()
イベントの終了時にイベントのバブリングを停止するために使用されます。 function
P111 例:

コードをコピー コードは次のとおりです。 script>

$('span').bind("click",function(event){

var txt = $('msg') .html() "

内側のspan要素がクリックされました";
$('#msg').html(txt);
event.stopPropagation();
})

event.preventDefault ()


要素のデフォルト動作を防止します
例: 検証フォーム (空の入力により送信とプロンプトが阻止されます)

コードをコピー コードは次のとおりです。 <script> </script>

$(function(){

$("#submit").bind("click" ,function(event){
var username=$("#username").val();
if(username=="") {
$("#msg").html("

テキスト ボックスの値を空にすることはできません

");
event.preventDefault();
}
});
})
スクリプト>


return false;
バブリングとオブジェクトイベントのデフォルト動作を同時に停止します。これは stopPapagation() とPreventDefault() を同時に呼び出すのと同じです
(例外: イベントキャプチャとイベントバブリングは逆の処理、イベントキャプチャは DOM の上から下にトリガーされます、jQuery はサポートしていないため、本書では省略します)

5 イベントオブジェクトのプロパティ

event.type
イベントタイプの取得
例:

コードをコピー コードは次のとおりです:

<script> <BR>$("a ").click(function(event){ <BR>alert(event.type); <BR>return false; <BR>}) <BR></script>> ;

「クリック」の上に戻る
event.target
イベントをトリガーした要素を取得します
例:

コードをコピー コードは次のとおりです:

<script> <BR>$("a[href=http://baidu.com]" ).click(function(){ <BR>alert(event.target. href); <BR>return false; <BR>}) <BR></script>

上記"http://baidu.com" を返します
event.popularTarget
イベント関連要素にアクセスします
event.pageX /event.pageY
カーソルの相対的な x 座標と y 座標を取得しますページへ
event.that
マウス クリック イベントでマウスの左と中央を取得し、キーボード イベントでキーボード キーを取得します (戻り値 1 = マウスの左ボタン、2 = 中央のマウス)。 button; 3 = マウスの右ボタン)
event.metaKey
キーボード イベントの ボタンを取得します
event.originalEvent
元のイベント オブジェクトを指します

6イベントを削除

$("selector").unbind()
要素のイベントを削除します。形式:$("selector").unbind([type][,data]);パラメータがない場合は、バインドされたすべてのイベントが削除されます。イベント タイプ パラメータが指定されている場合は、そのタイプのバインドされたイベントのみが削除されます。バインド時に渡されたハンドラ関数を 2 番目のパラメータとして使用する場合は、この特定のイベント ハンドラ関数のみが削除されます。
例:

コードをコピー コードは次のとおりです:

<script> <BR>$(function(){ <BR>$('#btn').bind("click", myFun1=function(){ //最初にバインドします <BR>$('#test') .append("..."); <BR>}); <BR></script>
$('#delOne') (){
$('#btn').unbind("click",myFun1); //その後、
})


$ ("selector").one()
一度トリガーされてから削除されるイベントをバインドします。形式: $("selector ").one(type[,data],fn);

7操作のシミュレート

$("selector").trigger("type");
ユーザー操作のシミュレート、省略形メソッド: $("#selector").type(); ").trigger(type[,data])
例: クリックを使用してマウスの受け渡しを置き換えます

コードをコピー コード <script> </script>

$("selector").mouseover(function{ //...});

$("selector2"). (function(){
$("selector").trigger("mouseover"); //または $("selector") .mouseover()
})
>

カスタムイベントの例

コードをコピー

コードは次のとおりです: <script> </script>$("selector").bind("myClick",function(){//...}) //カスタム イベントをバインドします

$("selector").trigger ("myClick"); // カスタム イベントをトリガーします

$("selector").trigger (type[,data])


パラメータを渡すことができます配列形式のコールバック関数に追加します
P119 例:

コードをコピー

コードは次のとおりです: <script> </script>$("#btn").bind("myClick",function(event,message1,message2){

$("#test").append( "

" message1 message2 "

");

$("#btn").trigger("myClick" , ["My Customization", "Event"]) );



8 その他の使用法

$("selector").bind( "type1 type2",function(){//. .})
一度に複数のイベント タイプをバインドする

P119 価値のある例




コードをコピー

コードは次のとおりです以下のように:

<script> <BR>$(function(){ <BR>$("div").bind("mouseover Mouseout",function(){ <BR>$(this).toggleClass( "over"); //スイッチクラス <BR>}) <BR>}) <BR><BR> </script>

$("selector").bind("type.name") Space",function(){//...})
管理を容易にするために、複数のイベントのイベント名前空間を追加します。名前空間を削除すると、次のような名前空間の下のイベントが同時に削除されます。 🎜>$(" div").bind("mouseover.plugin",function(){//...})
$("div").bind("click.plugin",function(){ //... })
$("div").unbind(".plugin");
$("selector").trigger("type!")
"!" が使用されます名前空間の type メソッドに含まれない一致を選択するには