recherche

Maison >interface Web >js tutoriel >Explication détaillée de la méthode bind() de jQuery_jquery

Explication détaillée de la méthode bind() de jQuery_jquery

WBOY
WBOYoriginal
2016-05-16 15:50:201187parcourir

Explication détaillée de l'utilisation de la méthode bind() :

Cette méthode est l'une des méthodes les plus fréquemment utilisées. Bien que la méthode soit présentée dans le manuel de l'API, en raison du langage court et du manque d'exemples détaillés, il peut ne pas être possible de comprendre pleinement et précisément l'utilisation de bind(. ) méthode. Ce qui suit présentera l’utilisation de cette méthode avec des exemples.

Format de grammaire :

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

Cette méthode peut lier les gestionnaires d'événements à des événements spécifiques de tous les éléments correspondants, par exemple : 

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

Dans le code ci-dessus, lorsque vous cliquez sur le bouton, le texte de l'élément div sera défini sur "script home".

Comme vous pouvez le voir dans la structure syntaxique de la méthode bind(), un paramètre data facultatif est également disponible. Ce paramètre peut être utilisé comme valeur d'attribut event.data à transmettre à l'objet de données supplémentaire de l'objet événement. .

Les exemples sont les suivants :

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

Le code ci-dessus utilise le paramètre data pour fournir des données supplémentaires pour l'objet événement de la fonction événementielle à des fins de traitement, et obtient également l'effet de la première instance.

Lier plusieurs événements :

Vous pouvez utiliser la programmation en chaîne pour lier plusieurs événements aux éléments correspondants. Le code est le suivant :

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

Deux fonctions de gestion d'événements sont liées au bouton. Lorsque le bouton est cliqué, le texte du div peut être réinitialisé. Lorsque la souris quitte le bouton, une zone de texte apparaît.

Désactiver les événements par défaut du navigateur

Par exemple, cliquer sur un lien pour accéder à une adresse spécifiée et cliquer sur le bouton Soumettre pour soumettre un formulaire sont tous deux des événements par défaut du navigateur. Cependant, en fonctionnement réel, ces événements par défaut ne correspondent pas aux opérations souhaitées. Par exemple, si la vérification du formulaire échoue, nous ne souhaitons pas soumettre le formulaire. À ce stade, vous devez empêcher l’événement par défaut du navigateur de se produire.

L'exemple de code est le suivant :

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

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jQuery implémente le code pour demander le mot de passe strong_jqueryArticle suivant：jQuery implémente le code pour demander le mot de passe strong_jquery

Articles Liés

Voir plus