欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery的bind()方法使用詳解

 更新時間：2015年07月15日 08:50:54   投稿：hebedich  
bind()定義和用法：bind() 方法向被選元素添加一個或多個事件處理程序，以及當(dāng)事件發(fā)生時運(yùn)行的函數(shù)。

bind()方法用法詳解:

此方法是使用比較頻繁的方法之一，雖然在API手冊上有著對方法的介紹，但是由于語言簡短，例子不夠詳細(xì)，可能會造成不能夠完全準(zhǔn)確的掌握bind()方法的使用，下面就結(jié)合實例介紹一下此方法的使用。

語法格式:

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

此方法可以為所有匹配元素的特定事件綁定事件處理函數(shù)，例如:

<!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="點(diǎn)擊測試代碼" />
</body>
</html>

以上代碼中，當(dāng)點(diǎn)擊按鈕的時候，會將div元素中的文本設(shè)置“腳本之家”。

從bind()方法的語法結(jié)構(gòu)中可以看到，還有一個可選的data參數(shù)可供使用，此參數(shù)可以作為event.data屬性值，傳遞給事件對象的額外數(shù)據(jù)對象。

實例如下:

<!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="點(diǎn)擊測試代碼" />
</body>
</html>

以上代碼利用data參數(shù)為事件處函數(shù)的事件對象提供額外的數(shù)據(jù)進(jìn)行處理，同樣達(dá)到了第一個實例的效果。

綁定多個事件:

可以使用鏈?zhǔn)骄幊痰姆绞綖槠ヅ湓亟壎ǘ鄠€事件。代碼如下:

<!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="點(diǎn)擊測試代碼" />
</body>
</html>

為按鈕綁定了兩個事件處理函數(shù)，當(dāng)點(diǎn)擊按鈕的時候能夠重新設(shè)置div中的文本，當(dāng)鼠標(biāo)離開按鈕的時候，會彈出文本框。

使瀏覽器默認(rèn)事件失效

例如點(diǎn)擊鏈接跳轉(zhuǎn)到一個指定的地址和點(diǎn)擊提交按鈕提交表單都是瀏覽器默認(rèn)的事件。但是在實際操作過程中，這些默認(rèn)事件并非我們想要的操作，例如早表單驗證沒有通過的時候，就不想提交表單。這個時候就需要阻止瀏覽器默認(rèn)事件的發(fā)生。

代碼實例如下:

<!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>

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

相關(guān)文章

最新評論