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

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>
</div> <br>4 イベントバブリング <br><br>$("selector").bind("type",function(event){//event: イベント オブジェクト...}) <br>Event イベント オブジェクト: この関数内でのみアクセスできます。イベント処理関数の実行後、イベント オブジェクトは破棄されます。<br>event.stopPropagation() <br>イベントの終了時にイベントのバブリングを停止するために使用されます。 function<br>P111 例: <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="14424" class="copybut" id="copybut14424" onclick="doCopy('code14424')"><u>コードをコピー</u></a></span> コードは次のとおりです。 script></div>$('span').bind("click",function(event){ <div class="codebody" id="code14424">var txt = $('msg') .html() "<p>内側のspan要素がクリックされました< ;/p>"; <BR>$('#msg').html(txt); <BR>event.stopPropagation(); <BR>}) <BR></script> 
event.preventDefault () 

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

コードをコピーコードは次のとおりです。 <script> </div>$(function(){ <div class="codebody" id="code96671">$("#submit").bind("click" ,function(event){ <br>var username=$("#username").val(); <br>if(username=="") { <br>$("#msg").html(" <p> テキストボックスの値を空にすることはできません</p>"); <br>event.preventDefault(); <br>} <br> }); <br>}) <br></スクリプト><br><br><br>return false; <br>バブリングとオブジェクトイベントのデフォルト動作を同時に停止します。これは stopPapagation() とPreventDefault() を同時に呼び出すのと同じです <br> (例外: イベントキャプチャとイベントバブリングは逆の処理、イベントキャプチャは DOM の上から下にトリガーされます、jQuery はサポートしていないため、本書では省略します) <br><br>5 イベントオブジェクトのプロパティ<br><br>event.type <br>イベントタイプの取得<br>例: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="23374" class="copybut" id="copybut23374" onclick="doCopy('code23374')"><u>コードをコピー </u></a></span> コードは次のとおりです: </div> <div class="codebody" id="code23374"> <br><script> <br>$("a ").click(function(event){ <br>alert(event.type); <br>return false; <br>}) <br></script&gt ; <br> </div> <br>「クリック」の上に戻る <br>event.target <br>イベントをトリガーした要素を取得します<br> 例: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="43264" class="copybut" id="copybut43264" onclick="doCopy('code43264')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code43264"> <br><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> </div>$("selector").mouseover(function{ //...}); <div class="codebody" id="code9488">$("selector2"). (function(){ <br>$("selector").trigger("mouseover"); //または $("selector") .mouseover() <br>}) <br></script> >

カスタムイベントの例

コードをコピー

コードは次のとおりです: <script> </span>$("selector").bind("myClick",function(){//...}) //カスタムイベントをバインドします </div>$("selector").trigger ("myClick"); // カスタムイベントをトリガーします <div class="codebody" id="code84921"></script>
$("selector").trigger (type[,data])

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

コードをコピー

コードは次のとおりです: <script> </span>$("#btn").bind("myClick",function(event,message1,message2){ </div>$("#test").append( "<p>" message1 message2 "</p>"); <div class="codebody" id="code58622">$("#btn").trigger("myClick" , ["My Customization", "Event"]) ); <br></script>

8 その他の使用法

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

P119 価値のある例

コードをコピー

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

人気のチュートリアル

詳細>

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