ホームページ > 記事 > ウェブフロントエンド > jQueryのbind()メソッドの詳しい説明_jquery
jQueryのbind()メソッドの詳しい説明_jquery
- WBOYオリジナル
- 2016-05-16 15:50:201162ブラウズ
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>
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。