jQuery的bind()方法使用詳解_jquery
- WBOY原創
- 2016-05-16 15:50:201168瀏覽
bind()方法用法詳解:
此方法是使用比較頻繁的方法之一，雖然在API手冊上有著對方法的介紹，但是由於語言簡短，例子不夠詳細，可能會造成不能夠完全準確的掌握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元素中的文字設定「腳本之家」。
從bind()方法的語法結構中可以看到，還有一個可選的data參數可供使用，此參數可以作為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>
以上所述就是本文的全部內容了，希望大家能夠喜歡。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn