Penjelasan terperinci tentang jQuery's bind() method

Penjelasan terperinci tentang jQuery's bind() method_jquery

WBOY

Lepaskan： 2016-05-16 15:50:20

asal

1192 orang telah melayarinya

Penjelasan terperinci tentang penggunaan kaedah bind():

Kaedah ini adalah salah satu kaedah yang lebih kerap digunakan Walaupun kaedah ini diperkenalkan dalam manual API, disebabkan bahasa yang pendek dan contoh terperinci yang tidak mencukupi, mungkin tidak dapat memahami penggunaan bind( dengan sepenuhnya dan tepat. ) kaedah berikut akan memperkenalkan penggunaan kaedah ini dengan contoh.

Format tatabahasa:

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

Salin selepas log masuk

Kaedah ini boleh mengikat pengendali acara kepada acara khusus semua elemen padanan, contohnya:

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

Salin selepas log masuk

Dalam kod di atas, apabila butang diklik, teks dalam elemen div akan ditetapkan kepada "rumah skrip".

Seperti yang anda boleh lihat daripada struktur sintaks kaedah bind(), terdapat juga parameter data pilihan yang tersedia Parameter ini boleh digunakan sebagai nilai atribut event.data untuk dihantar ke objek data tambahan objek acara .

Contohnya adalah seperti berikut:

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

Salin selepas log masuk

Kod di atas menggunakan parameter data untuk menyediakan data tambahan untuk objek acara fungsi acara untuk diproses dan juga mencapai kesan contoh pertama.

Ikatan berbilang acara:

Anda boleh menggunakan pengaturcaraan rantaian untuk mengikat berbilang acara pada elemen yang sepadan. Kodnya adalah seperti berikut:

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

Salin selepas log masuk

Dua fungsi pengendalian acara terikat pada butang Apabila butang diklik, teks dalam div boleh ditetapkan semula Apabila tetikus meninggalkan butang, kotak teks akan muncul.

Lumpuhkan acara lalai penyemak imbas

Sebagai contoh, mengklik pautan untuk melompat ke alamat yang ditentukan dan mengklik butang hantar untuk menyerahkan borang adalah kedua-dua peristiwa lalai penyemak imbas. Walau bagaimanapun, dalam operasi sebenar, peristiwa lalai ini bukanlah operasi yang kami mahukan. Contohnya, jika pengesahan borang gagal, kami tidak mahu menyerahkan borang. Pada masa ini, anda perlu menghalang peristiwa lalai penyemak imbas daripada berlaku.

Contoh kod adalah seperti berikut:

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

Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.