interface Web
js tutoriel
Explication détaillée des méthodes d'événement de liaison Jquery délégué(),bind(),live(),on()
Explication détaillée des méthodes d'événement de liaison Jquery délégué(),bind(),live(),on()
Avant-propos
Étant donné que jquery est souvent utilisé pour ajouter et supprimer des éléments dom dans les projets, la méthode d'événement de liaison des éléments dom sera impliquée. Résumons brièvement les différences entre bind, live, délégué et on. , pour référence future, et j'espère que cet article pourra aider les jardiniers à l'avenir. S'il y a quelque chose d'inapproprié dans l'article, j'espère que vous me corrigerez, sans plus tarder, allons droit au but.
bind()
Brève description
bind()Ajoute un ou plusieurs gestionnaires d'événements à l'élément correspondant.
Comment utiliser
$(sélecteur).bind(événement, données, fonction)
Événement : obligatoire ; un ou plusieurs événements ajoutés à l'élément, tels que click, dblclick, etc. ;
Traitement d'un événement unique : par exemple, $(selector).bind("click",data,function);
Traitement multi-événements : 1. Utilisez des espaces pour séparer plusieurs événements, tels que $(selector).bind("click dbclick mouseout",data,function);
2. Utilisez des accolades pour définir de manière flexible plusieurs événements, tels que $(sélecteur ).bind({event1:function , event2:function, ...})
Appel de la même fonction
Alternative aux accolades : la liaison est plus flexible et vous pouvez lier des fonctions aux événements séparément
données : facultatif ; paramètres qui doivent être transmis
function : obligatoire lorsque lié La fonction qui doit être exécutée lorsqu'un certain événement se produit ; 🎜>
Exemples
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery中bind()绑定事件方式</title>
<style type="text/css">
.container
{
width: 300px;
height: 300px;
border: 1px #ccc solid;
background-color: Green;
}
.btn-test
{
border: 1px #ccc solid;
padding: 5px 15px;
cursor: pointer;
}
</style>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
/*********添加单个事件处理*********/
$(".btn-test").bind("click", function () {
//显示隐藏div
$(".container").slideToggle();
});
/********添加多个事件处理********/
//空格相隔方式
$(".btn-test").bind("mouseout click", function () {
//显示隐藏div
$(".container").slideToggle();
});
//大括号替代方式
$(".btn-test").bind({
"mouseout": function () {
alert("这是mouseout事件!");
},
"click": function () {
$(".container").slideToggle();
}
});
/********删除事件处理********/
$(".btn-test").unbind("click");
});
</script>
</head>
<body>
<input type="button" value="按钮" class="btn-test" />
<div class="container">
</div>
</body>
</html>Afficher le code
Version Jquery applicable
S'applique à toutes les versions, mais selon le site officiel, depuis la version jquery1.7, la fonction bind() Il est recommandé d'utiliser on() à la place.
live()
Brève description
live() Vers l'élément correspondant actuel ou futur Ajouter un ou plusieurs gestionnaires d'événements
Utilisation
$(sélecteur).live(événement,données,fonction)
Événement : Obligatoire ; un ou plusieurs éléments ajoutés aux événements d'élément, tels que comme click, dblclick, etc. ;
Traitement d'un événement unique : tel que $(selector).live ("clic", données, fonction);
Traitement multi-événements : 1. Utilisez des espaces pour séparer plusieurs événements Événements, tels que $(sélecteur).live("cliquez sur dbclick mouseout", données, fonction);
2. Utilisez des accolades pour définir de manière flexible plusieurs événements, tels que $(sélecteur). live({event1:function, event2:function, ...})
3. Méthode de séparation d'espace : la liaison est relativement rigide et ne peut pas lier des fonctions à des événements séparément. Elle convient à la gestion de plusieurs événements appelant la même fonction ;
Alternative aux accolades : la liaison est plus flexible et vous pouvez lier des fonctions aux événements individuellement ;
données : facultatif ; paramètres qui doivent être transmis
function：必需；当绑定事件发生时，需要执行的函数；
举例说明
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery中live()绑定事件方式</title>
<style type="text/css">
.container
{
width: 300px;
height: 300px;
border: 1px #ccc solid;
background-color: Green;
}
.btn-test
{
border: 1px #ccc solid;
padding: 5px 15px;
cursor: pointer;
}
</style>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
/*********添加单个事件处理*********/
$(".btn-test").live("click", function () {
//显示隐藏div
$(".container").slideToggle();
});
/********添加多个事件处理********/
//空格相隔方式
$(".btn-test").live("mouseout click", function () {
//显示隐藏div
$(".container").slideToggle();
});
//大括号替代方式
$(".btn-test").live({
"mouseout": function () {
alert("这是mouseout事件!");
},
"click": function () {
$(".container").slideToggle();
}
});
/********删除事件处理********/
$(".btn-test").die("click");
});
</script>
</head>
<body>
<input type="button" value="按钮" class="btn-test" />
<div class="container">
</div>
</body>
</html>View Code
适用Jquery版本
jquery1.9版本以下支持，jquery1.9及其以上版本删除了此方法，jquery1.9以上版本用on()方法来代替。
delegate()
简要描述
delegate() 为指定的元素（被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
使用方式
$(selector).delegate(childSelector,event,data,function)
childSelector: 必需项；需要添加事件处理程序的元素，一般为selector的子元素；
event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；
单事件处理：例如 $(selector).delegate(childselector,"click",data,function);
多事件处理：1.利用空格分隔多事件，例如 $(selector).delegate(childselector,"click dbclick mouseout",data,function);
2.利用大括号灵活定义多事件，例如 $(selector).delegate(childselector,{event1:function, event2:function, ...})
3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；
大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；
data：可选；需要传递的参数；
function：必需；当绑定事件发生时，需要执行的函数；
举例说明
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery中delegate()绑定事件方式</title>
<style type="text/css">
.container
{
width: 300px;
height: 300px;
border: 1px #ccc solid;
background-color: Green;
}
.btn-test
{
border: 1px #ccc solid;
padding: 5px 15px;
cursor: pointer;
}
</style>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
/***********单元素添加单事件***********/
//按钮绑定单击事件 实现div的显示隐藏
$(".header").delegate("#btn-test1", "click", function () {
$(".container").slideToggle();
});
/***********单元素添加多事件***********/
//空格相隔方式
$(".header").delegate("#btn-test1", "click mouseout", function () {
$(".container").slideToggle();
});
//大括号替代方式
$(".header").delegate("#btn-test1", {
"mouseout": function () {
alert("这是mouseout事件!");
},
"click": function () {
$(".container").slideToggle();
}
});
});
</script>
</head>
<body>
<div class="header">
<input type="button" value="按钮1" class="btn-test" id="btn-test1" />
<input type="button" value="按钮2" class="btn-test" id="btn-test2" />
</div>
<div class="container">
</div>
</body>
</html>View Code
适用Jquery版本
jque ry1.4.2 et plus
on()
Brève description
on() pour l'élément spécifié, ajoutez Un ou plus de gestionnaires d'événements et spécifie les fonctions à exécuter lorsque ces événements se produisent. Les gestionnaires d'événements utilisant la méthode on() fonctionnent sur les éléments actuels ou futurs (tels que les nouveaux éléments créés par un script). $(selector) .on(event,childselector,data,function)
événement :
Obligatoire ; un ou plusieurs événements ajoutés à l'élément, tels que click, dblclick, etc.
Traitement d'un seul événement : tel comme$(selector).on("click",childselector,data,function);
Traitement multi-événements : 1. Utilisez des espaces pour séparer plusieurs événements, tels que $(sélecteur). on("cliquez
dbclick mouseout", childseletor, data ,fonction); 2.利用大括号灵活定义多事件，例如 $(selector).on({event1:function, event2:function, ...},childselector); 3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况； 大括号替代方式：绑定较为灵活，可以给事件单独绑定函数； childSelector: 可选；需要添加事件处理程序的元素，一般为selector的子元素； data：可选；需要传递的参数； function：必需；当绑定事件发生时，需要执行的函数； 举例说明 View Code 适用Jquery版本 jquery1.7 et supérieur ; après l'apparition de la version jquery1.7, est utilisé pour remplacer bind (), méthode d'événement de liaison live() ; Les similitudes, les différences, les avantages et les inconvénients des quatre méthodes Mêmes points : 1. Les deux prennent en charge la liaison d'éléments uniques et plusieurs événements ; espaces Méthode de séparation ou méthode de substitution d'accolades ; 2. Tous les événements sont transmis au document pour la réponse aux événements via le bouillonnement d'événements ; > 比较和联系: 1.bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置；演示代码如下: 2. La fonction bind() était relativement populaire avant la version 1.7 de jquery. Après la sortie de la version 1.7, bind() n'est plus officiellement recommandée et la fonction alternative est on(). C'est aussi Les fonctions nouvellement ajoutées dans la version 1.7, de même, peuvent être Utilisé pour remplacer la fonction live(), qui a été supprimée en version 1.9 3. La fonction live() est similaire à la fonction délégué(), mais la fonction live() présente des avantages. en termes de vitesse d'exécution, de flexibilité et le le sélecteur CSS est moins pris en charge que le délégué() 4.bind() prend en charge toutes les versions de Jquery ; live() prend en charge jquery1.8- ; délégué() prend en charge jquery1.4.2+ ; on() prend en charge jquery1.7+ ; >Résumé Si le La version de jquery référencée dans le projet est une version inférieure, il est recommandé d'utiliser délégué(), les versions supérieures de jquery peuvent utiliser on() à la place. Ce qui précède n'est que mon opinion personnelle. Si vous avez des idées différentes, n'hésitez pas à communiquer. . Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery中on()绑定事件方式</title>
<style type="text/css">
.container
{
width: 300px;
height: 300px;
border: 1px #ccc solid;
background-color: Green;
}
.btn-test
{
border: 1px #ccc solid;
padding: 5px 15px;
cursor: pointer;
}
</style>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
/*********添加单个事件处理*********/
$(".header").on("click", ".btn-test", function () {
//显示隐藏div
$(".container").slideToggle();
});
/********添加多个事件处理********/
//空格相隔方式
$(".header").on("mouseout click", ".btn-test", function () {
//显示隐藏div
$(".container").slideToggle();
});
//大括号替代方式
$(".header").on({
"mouseout": function () {
alert("这是mouseout事件!");
},
"click": function () {
$(".container").slideToggle();
}
}, ".btn-test");
//删除事件
$(".header").off("click", ".btn-test");
});
</script>
</head>
<body>
<div class="header">
<input type="button" value="按钮" class="btn-test" />
</div>
<div class="container">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery中四种方式给未来元素设置事件</title>
<style type="text/css">
.container
{
width: 300px;
height: 300px;
border: 1px #ccc solid;
background-color: Green;
}
.btn-test
{
border: 1px #ccc solid;
padding: 5px 15px;
cursor: pointer;
}
</style>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//利用bind()方法，给P标签设置click方法 ======失败 没有任何反应=======
$(".container p").bind("click", function () {
alert("bind()添加单击事件成功!");
});
//利用live()方法.给P标签设置click方法 =======成功调用方法============
$(".container p").live("click", function () {
alert("live()添加单击事件成功!");
});
//利用delegate()方法.给P标签设置click方法 =======成功调用方法============
$(".container").delegate("p", "click", function () {
//显示隐藏div
alert("delegate()添加单击事件成功!");
});
//利用on()方法.给P标签设置click方法 =======成功调用方法============
$(".container").on("click", "p", function () {
//显示隐藏div
alert("on()添加单击事件成功!");
});
//按钮添加P标签
$(".btn-test").click(function () {
$(".container").append("<p>这是新增的段落!</p>");
});
});
</script>
</head>
<body>
<input type="button" class="btn-test" value="添加元素" />
<div class="container">
</div>
</body>
</html>
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment lier un sous-compte sur Xiaohongshu ? Comment vérifie-t-il si le compte est normal ?
Mar 21, 2024 pm 10:11 PM
À l’ère actuelle d’explosion de l’information, la construction d’une marque personnelle et d’une image d’entreprise est devenue de plus en plus importante. En tant que principale plateforme de partage de vie dans le domaine de la mode en Chine, Xiaohongshu a attiré l'attention et la participation d'un grand nombre d'utilisateurs. Pour les utilisateurs qui souhaitent étendre leur influence et améliorer l’efficacité de la diffusion du contenu, les sous-comptes contraignants sont devenus un moyen efficace. Alors, comment Xiaohongshu lie-t-il un sous-compte ? Comment vérifier si le compte est normal ? Cet article répondra à ces questions pour vous en détail. 1. Comment lier un sous-compte sur Xiaohongshu ? 1. Connectez-vous à votre compte principal : Tout d'abord, vous devez vous connecter à votre compte principal Xiaohongshu. 2. Ouvrez le menu des paramètres : cliquez sur « Moi » dans le coin supérieur droit, puis sélectionnez « Paramètres ». 3. Accédez à la gestion du compte : dans le menu des paramètres, recherchez l'option "Gestion du compte" ou "Assistant de compte" et cliquez sur
Tutoriel BTCC : Comment lier et utiliser le portefeuille MetaMask sur l'échange BTCC ?
Apr 26, 2024 am 09:40 AM
MetaMask (également appelé Little Fox Wallet en chinois) est un logiciel de portefeuille de cryptage gratuit et bien accueilli. Actuellement, BTCC prend en charge la liaison au portefeuille MetaMask. Après la liaison, vous pouvez utiliser le portefeuille MetaMask pour vous connecter rapidement, stocker de la valeur, acheter des pièces, etc., et vous pouvez également obtenir un bonus d'essai de 20 USDT pour la première liaison. Dans le didacticiel du portefeuille BTCCMetaMask, nous présenterons en détail comment enregistrer et utiliser MetaMask, ainsi que comment lier et utiliser le portefeuille Little Fox dans BTCC. Qu'est-ce que le portefeuille MetaMask ? Avec plus de 30 millions d’utilisateurs, MetaMask Little Fox Wallet est aujourd’hui l’un des portefeuilles de crypto-monnaie les plus populaires. Son utilisation est gratuite et peut être installée sur le réseau en tant qu'extension
Mar 22, 2024 pm 05:56 PM
1. Ouvrez Toutiao. 2. Cliquez sur Mon dans le coin inférieur droit. 3. Cliquez sur [Paramètres système]. 4. Cliquez sur [Paramètres de compte et de confidentialité]. 5. Cliquez sur le bouton sur le côté droit de [Douyin] pour lier Douyin.
Comment utiliser la méthode de requête PUT dans jQuery ?
Feb 28, 2024 pm 03:12 PM
Comment utiliser la méthode de requête PUT dans jQuery ? Dans jQuery, la méthode d'envoi d'une requête PUT est similaire à l'envoi d'autres types de requêtes, mais vous devez faire attention à certains détails et paramètres. Les requêtes PUT sont généralement utilisées pour mettre à jour des ressources, comme la mise à jour de données dans une base de données ou la mise à jour de fichiers sur le serveur. Ce qui suit est un exemple de code spécifique utilisant la méthode de requête PUT dans jQuery. Tout d'abord, assurez-vous d'inclure le fichier de la bibliothèque jQuery, puis vous pourrez envoyer une requête PUT via : $.ajax({u
Comment lier l'application Cainiao à Pinduoduo ? Comment ajouter le Cainiao Wrap à la plateforme Pinduoduo ?
Mar 19, 2024 pm 02:30 PM
L'application Cainiao est une plate-forme qui peut vous fournir diverses informations logistiques. Les fonctions ici sont très puissantes et faciles à utiliser. Si vous rencontrez des problèmes liés à la logistique, ils peuvent être résolus ici. Quoi qu'il en soit, cela peut vous apporter une solution. -Le service d'arrêt peut tout résoudre à temps. La vérification de la livraison express, la récupération de la livraison express, l'envoi de la livraison express, etc. se font sans aucun problème. Nous avons coopéré avec diverses plateformes et toutes les informations peuvent être interrogées. Il arrivera que les marchandises achetées sur Pinduoduo ne puissent pas afficher les informations logistiques. En fait, vous devez lier manuellement Pinduoduo pour y parvenir. Les méthodes spécifiques ont été triées ci-dessous, et tout le monde peut y jeter un œil. Comment lier Cainiao au compte Pinduoduo : 1. Ouvrez l'application Cainiao et accédez à la page principale.
Comment lier l'application Cainiao à Pinduoduo Comment lier l'application Cainiao à Pinduoduo
Mar 19, 2024 pm 05:16 PM
Savez-vous comment lier Pinduoduo lorsque vous utilisez Cainiao Wrap ? La version officielle de l'application Cainiao Wrap ne synchronise pas automatiquement certaines informations logistiques de Pinduoduo sur cette plateforme. Il vous suffit de copier le numéro de commande ou de vérifier votre téléphone portable pour le voir. s'il y a des informations de livraison express. Bien entendu, tout cela doit être complété manuellement. Si vous souhaitez en savoir plus, venez jeter un œil auprès de l'éditeur. Comment lier l'application Cainiao à Pinduoduo 1. Ouvrez l'application Cainiao et cliquez sur « Guide du package » dans le coin supérieur gauche de la page principale. 2. Dans l'interface, il existe de nombreux sites Web d'achats et les comptes peuvent être liés. 3. Cliquez pour importer d'autres plateformes de commerce électronique. 4. Autorisation de l'utilisateur : cliquez sur Pinduoduo pour accéder à l'interface
Comment supprimer l'attribut height d'un élément avec jQuery ?
Feb 28, 2024 am 08:39 AM
Comment supprimer l'attribut height d'un élément avec jQuery ? Dans le développement front-end, nous rencontrons souvent le besoin de manipuler les attributs de hauteur des éléments. Parfois, nous pouvons avoir besoin de modifier dynamiquement la hauteur d'un élément, et parfois nous devons supprimer l'attribut height d'un élément. Cet article explique comment utiliser jQuery pour supprimer l'attribut height d'un élément et fournit des exemples de code spécifiques. Avant d'utiliser jQuery pour exploiter l'attribut height, nous devons d'abord comprendre l'attribut height en CSS. L'attribut height est utilisé pour définir la hauteur d'un élément
Que dois-je faire si ma petite boîte noire ne peut pas être liée à Steam ?
Mar 12, 2024 pm 03:10 PM
L'incapacité de la Black Box à se lier à Steam peut être causée par des problèmes de réseau ou de version du logiciel. La petite boîte noire fournit des informations, notamment les prix des jeux sortis et à venir, les exigences et critiques de configuration de l'ordinateur, ainsi qu'une analyse approfondie du gameplay. En outre, il permet également aux utilisateurs de trouver les informations dont ils ont besoin via des appareils mobiles à tout moment et en tout lieu. Que faire si la petite boîte noire ne peut pas être liée à Steam 1. Confirmez l'état du réseau et assurez-vous que l'appareil est connecté à Internet. 2. Vérifiez la version de Little Black Box. Veuillez vous assurer que vous utilisez la dernière version du logiciel Little Black Box et essayez de lier votre compte Steam. 3. Pour vérifier les paramètres du compte Steam, veuillez vous connecter au compte Steam et vérifier si la fonction d'autorisation de liaison de logiciels tiers est activée dans les paramètres de confidentialité. 4. Contactez le service client officiel Si les étapes ci-dessus ne parviennent toujours pas à résoudre le problème, il est recommandé de contacter le service client officiel pour obtenir de l'aide.
