jQueryのbind()メソッドの詳しい説明_jquery-jsチュートリアル-php.cn

jQueryのbind()メソッドの詳しい説明_jquery

WBOY

リリース： 2016-05-16 15:50:20

オリジナル

1199 人が閲覧しました

bind() メソッドの使用法の詳細な説明:

このメソッドは、API マニュアルで紹介されている最も頻繁に使用されるメソッドの 1 つですが、言語が短く、詳細な例が不十分なため、bind( の使用方法を完全かつ正確に把握することはできない可能性があります。 ) メソッドの使用方法を例とともに紹介します。

文法形式:

$(selector).bind(type,[data],function(eventObject))

ログイン後にコピー

このメソッドは、一致するすべての要素の特定のイベントにイベントハンドラーをバインドできます。例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脚本之家</title>
<style type="text/css">
div{
 width:150px;
 height:40px;
 background-color:blue;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#bt").bind("click",function(){$("div").text("脚本之家")}) 
})
</script>
</head>
<body>
<div>您好</div>
<input type="button" id="bt" value="点击测试代码" />
</body>
</html>

ログイン後にコピー

上記のコードでは、ボタンをクリックすると、div 要素内のテキストが「script home」に設定されます。

bind() メソッドの構文構造からわかるように、オプションのデータパラメーターも使用でき、このパラメーターはイベントオブジェクトの追加データオブジェクトに渡すために、event.data 属性値として使用できます。。

例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脚本之家</title>
<style type="text/css">
div{
 width:150px;
 height:40px;
 background-color:blue;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 var newtext="脚本之家";
 $("#bt").bind("click",{"mytext":newtext},function(e){
  $("div").text(e.data.mytext);
 }) 
})
</script>
</head>
<body>
<div>您好</div>
<input type="button" id="bt" value="点击测试代码" />
</body>
</html>

ログイン後にコピー

上記のコードは、data パラメーターを使用して、処理用のイベント関数のイベントオブジェクトに追加データを提供し、最初のインスタンスの効果も実現します。

複数のイベントをバインドします:

チェーンプログラミングを使用して、複数のイベントを一致する要素にバインドできます。コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脚本之家</title>
<style type="text/css">
div{
 width:150px;
 height:40px;
 background-color:blue;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 var newtext="脚本之家";
 $("#bt").bind("click",{"mytext":newtext},function(e){
  $("div").text(e.data.mytext);
 }).bind("mouseout",function(){
  alert("欢迎下次光临");
 }) 
})
</script>
</head>
<body>
<div>您好</div>
<input type="button" id="bt" value="点击测试代码" />
</body>
</html>

ログイン後にコピー

ボタンをクリックすると、div 内のテキストがリセットされ、テキストボックスがポップアップします。

ブラウザのデフォルトイベントを無効にする

たとえば、リンクをクリックして指定したアドレスにジャンプすることと、送信ボタンをクリックしてフォームを送信することは、どちらもブラウザーのデフォルトのイベントです。ただし、実際の操作では、これらのデフォルトイベントは、たとえばフォームの検証が失敗した場合には、フォームを送信したくない操作です。現時点では、ブラウザのデフォルトイベントが発生しないようにする必要があります。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(":submit").bind("click",function(){
  if($("#username").val()=="")
  {
   alert("用户名不能为空!");
   $("#username").focus();
   return false;
  }
  if($("#pw").val()=="")
  {
   alert("密码不能为空!");
   $("#pw").focus();
   return false;
  }
 })
})
</script>
</head>
<body>
<form action="" name="myform">
<ul>
 <li>用户名:<input type="text" id="username" /></li>
 <li>密码:<input type="password" id="pw" /></li>
 <li><button>提交表单</button></li>
</ul>
</form>
</body>
</html>

ログイン後にコピー

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。