Detaillierte Erläuterung der bind()-Methode_jquery von jQuery-js-Tutorial-php.cn

Detaillierte Erläuterung der bind()-Methode_jquery von jQuery

WBOY

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

Original

1190 Leute haben es durchsucht

Detaillierte Erläuterung der Verwendung der bind()-Methode:

Diese Methode ist eine der am häufigsten verwendeten Methoden. Obwohl die Methode im API-Handbuch vorgestellt wird, ist es aufgrund der kurzen Sprache und unzureichenden detaillierten Beispiele möglicherweise nicht möglich, die Verwendung von bind( )-Methode. Im Folgenden wird die Verwendung dieser Methode anhand von Beispielen vorgestellt.

Grammatikformat:

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

Nach dem Login kopieren

Diese Methode kann Ereignishandler an bestimmte Ereignisse aller übereinstimmenden Elemente binden, zum Beispiel:

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

Nach dem Login kopieren

Wenn im obigen Code auf die Schaltfläche geklickt wird, wird der Text im div-Element auf „script home“ gesetzt.

Wie Sie der Syntaxstruktur der bind()-Methode entnehmen können, steht auch ein optionaler Datenparameter zur Verfügung. Dieser Parameter kann als Attributwert event.data zur Übergabe an das zusätzliche Datenobjekt des Ereignisobjekts verwendet werden .

Beispiele sind wie folgt:

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

Nach dem Login kopieren

Der obige Code verwendet den Datenparameter, um dem Ereignisobjekt der Ereignisfunktion zusätzliche Daten zur Verarbeitung bereitzustellen, und erzielt auch den Effekt der ersten Instanz.

Mehrere Ereignisse binden:

Sie können Kettenprogrammierung verwenden, um mehrere Ereignisse an passende Elemente zu binden. Der Code lautet wie folgt:

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

Nach dem Login kopieren

Zwei Ereignisbehandlungsfunktionen sind an die Schaltfläche gebunden. Wenn auf die Schaltfläche geklickt wird, kann der Text im Div zurückgesetzt werden. Wenn die Maus die Schaltfläche verlässt, wird ein Textfeld angezeigt.

Browser-Standardereignisse deaktivieren

Zum Beispiel sind das Klicken auf einen Link, um zu einer bestimmten Adresse zu springen, und das Klicken auf die Schaltfläche „Senden“, um ein Formular abzusenden, beides Standardereignisse des Browsers. Im tatsächlichen Betrieb sind diese Standardereignisse jedoch nicht die gewünschten Vorgänge. Wenn beispielsweise die Formularüberprüfung fehlschlägt, möchten wir das Formular nicht senden. Zu diesem Zeitpunkt müssen Sie verhindern, dass das Browser-Standardereignis auftritt.

Das Codebeispiel lautet wie folgt:

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

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.