ホームページ > 記事 > ウェブフロントエンド > jQuery の on() 関数の役割と使用法を分析する
この記事では、主に jQuery での on() メソッドの使用法を紹介し、on() メソッドの関数と定義を例と、1 つ以上の イベント処理 関数を一致する要素にバインドする使用スキルを分析します。 need it can 参考までに、
この記事では、jQuery の on() メソッドの使用法を例とともに説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです:
このメソッドは、1 つ以上のイベント処理関数を一致する要素にバインドできます。
on() メソッドでバインドされたイベントを削除するには、off() メソッドを使用します。
文法構造 1:
コードは次のとおりです:
$(selector).on(events,[selector],[data],fn)
パラメータリスト:
コード例:
例 1:
コードは次のとおりです:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>脚本之家</title> <style type="text/css"> p{ width:60px; height:60px; border:1px solid green; font-size:12px; } </style> <script type="text/ javascript " src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").on("click",function(){ $(this).text("脚本之家欢迎您"); }) }) </script> </head> <body> <p>原来内容</p> </body> </html>
上記のコードは、p をクリックすると、p に新しいテキスト コンテンツを設定できます。
例 2:
コードは次のとおりです:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>脚本之家</title> <style type="text/css"> p{ width:60px; height:60px; border:1px solid green; font-size:12px; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").on("click mousemove",function(){ $(this).text("脚本之家欢迎您"); }) }) </script> </head> <body> <p>原来内容</p> </body> </html>
上記のコードは、2 つのイベントを p にバインドします。p をクリックするか、p 内でマウスを移動すると、新しいテキスト コンテンツが p に設定されます。
例 3:
コードは次のとおりです:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>脚本之家</title> <style type="text/css"> p{ width:60px; height:60px; border:1px solid green; font-size:12px; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ var newtext="这是新文本" $("p").on("click",{"mytext":newtext},function(e){ $(this).text(e.data.mytext); }) }) </script> </head> <body> <p>原来内容</p> </body> </html>
上記のコードは、data パラメーターを使用して、バインドされたイベント処理関数にデータを渡します。
例 4:
コードは次のとおりです:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>脚本之家</title> <style type="text/css"> .parent{ width:160px; height:160px; border:1px solid green; font-size:12px; } .children{ width:100px; height:100px; border:1px solid red; } span{background-color:green;} </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ var newtext="这是新文本" $(".parent").on("click",".children",{"mytext":newtext},function(e){ $(this).text(e.data.mytext); }) }) </script> </head> <body> <p class="parent"> <p class="children"><span>原来内容</span></p> </p> <span>大家好</span> </body> </html>
上記のコードは、セレクター文字列を使用して、一致する要素のどの子要素がバインドされたイベントに応答できるかをフィルターします。上記のコードでは、クラス名がchildrenである要素とその子要素はバインドされたイベントを呼び出すことができます。
文法構造 2:
コードは次のとおりです:
$(selector).on(object,[selector],[data])
パラメータリスト:
实例代码:
代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>脚本之家</title> <style type="text/css"> p{ width:160px; height:160px; border:1px solid green; font-size:12px; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ var newtext="这是新文本" $("p").on({click:function(e){ $(this).text(e.data.mytext); }},{"mytext":newtext}) }) </script> </head> <body> <p>原来内容</p> </body> </html>
以上代码中,事件类型和事件处理函数以对象的形式绑定的。
以上がjQuery の on() 関数の役割と使用法を分析するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。