Rumah > Artikel > hujung hadapan web > Penjelasan terperinci tentang jQuery's bind() method_jquery

Penjelasan terperinci tentang jQuery's bind() method_jquery

WBOYasal: 2016-05-16 15:50:201162semak imbas

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

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>

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>

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>

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>

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：jQuery melaksanakan kod untuk meminta kata laluan strength_jqueryArtikel seterusnya：jQuery melaksanakan kod untuk meminta kata laluan strength_jquery

Artikel berkaitan

Lihat lagi