亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery的bind()方法使用詳解

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

bind()方法用法詳解:

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

語(yǔ)法格式:

$(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)擊測(cè)試代碼" />
</body>
</html>

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

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

實(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(){
 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)擊測(cè)試代碼" />
</body>
</html>

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

綁定多個(gè)事件:

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

<!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)擊測(cè)試代碼" />
</body>
</html>

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

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

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

代碼實(shí)例如下:

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

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

相關(guān)文章

最新評(píng)論