Une brève introduction à l'API, aux événements et à la coexistence de plusieurs bibliothèques dans jQuery

Le contenu de cet article est une brève introduction à la coexistence d'API, d'événements et de plusieurs bibliothèques dans jQuery. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. Les méthodes

API

prop() et attr()

prop() sont utilisées Les modifications affectent l'état dynamique des éléments DOM plutôt que de modifier les attributs HTML. Par exemple : désactivé, coché.

val()

Définit ou renvoie la valeur des éléments du formulaire (input, select, textarea).

width() et height()

Définit ou obtient les valeurs de largeur et de hauteur​​des éléments correspondants. La valeur renvoyée est un nombre (sans unité). , tandis que $(selector ).css('width') renvoie une chaîne (avec unité).

offset()

Get : La valeur de retour {left : Number, top : Number} est la position par rapport au document.
Paramètres : Si l'élément n'est pas positionné (c'est-à-dire position : statique), il sera modifié en relatif.

position()

Obtient la position de l'élément correspondant par rapport à son élément parent le plus proche avec positionnement (c'est-à-dire que la position n'est pas statique) {gauche : numéro , en haut : Nombre}, ne peut pas être défini.

scrollLeft() et scrollTop().

Obtenir ou définir la position horizontale et verticale de l'élément, de type numérique.

La position de la barre de défilement verticale est la hauteur de la zone cachée au-dessus de la zone visible de la zone de défilement.

Si la barre de défilement ne défile pas vers le haut ou si l'élément actuel n'a pas de barre de défilement, alors cette distance est de 0.

Événement

Liaison d'événement bind(), délégué() et on()

bind() a été remplacé par on() après la version 1.7, liant plusieurs événements : $(selector).on('dblclick contextment', function(){}); Mais l’inconvénient des deux méthodes est que l’élément à lier doit exister dans le document.

Syntaxe : $(selector).on('events'[, 'selector'][, data], handler); Le premier paramètre peut être un nom d'événement standard ou un événement personnalisé (déclenché par un déclencheur) ; , les deuxième et troisième paramètres peuvent être omis, le deuxième paramètre est l'élément descendant de l'élément correspondant et le troisième paramètre est les données transmises à la fonction de traitement, qui sont reçues via event.data dans la fonction.

delegate() prend en charge les éléments créés dynamiquement.

Syntaxe : $('p').delegate('p', 'mousemove', function(){}); Liez l'événement mousemove à p en dessous du div (y compris ceux générés dans le futur).

Event unbind(), undelegate() et off()

Dissocier tous les événements de l'élément correspondant sans passer de paramètres, sinon dissocier les événements de paramètres spécifiés.
$(selector).off('click', '**'); Dissocie les événements de clic de tous les agents, mais les événements de l'élément lui-même ne seront pas dissociés.

Déclencheur d'événement trigger() et triggerHandler()

Déclencheur simple : $(selector).click();
trigger() déclenche un événement et déclenche le comportement du navigateur. $(selector).trigger("click");
triggerHandler() déclenche la méthode de réponse à l'événement et ne déclenche pas le comportement du navigateur. $(selector).triggerHandler("focus");

Event object event

event.data Données supplémentaires transmises au gestionnaire d'événements

event .currentTarget est équivalent à ceci, qui fait référence à l'objet DOM actuel

event.target déclenche la source de l'événement, pas nécessairement la même que celle-ci (apparaît généralement dans le délégué de l'événement)

événement. tapez type d'événement

event.quel type de bouton de la souris : gauche 1, milieu 2, droite 3 ou code clavier

event.keyCode code clavier

event.pageX souris par rapport à La position du bord gauche du document

Programmation en chaîne

Principe : renvoyer ceci ;
Habituellement, seules les opérations de paramétrage peuvent être enchaînées opérations, et les retours correspondants sont renvoyés lors de l'obtention des opérations. La valeur de this ne peut pas être renvoyée.
end() termine la dernière opération de filtrage de la chaîne actuelle et renvoie l'état avant l'élément correspondant.

Plusieurs bibliothèques cohabitent

jQuery占用了$ 和jQuery这两个变量，如果同一个页面引用了jQuery库，还引用了其他库或者其他版本的jQuery也用的了$或jQuery这个变量，为了保证每个库都能正常使用，就需要让jQuery交出变量的控制权。
$.noConflict(); 交出$
$.noConflict(true); 交出$ 和 jQuery

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    console.log($.fn.jquery); // 3.2.1
    console.log(jQuery.fn.jquery); // 3.2.1
</script>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $.noConflict();
    console.log($.fn.jquery); // 2.2.4
    console.log(jQuery.fn.jquery); // 3.2.1
</script>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $.noConflict(true);
    console.log($.fn.jquery); // 2.2.4
    console.log(jQuery.fn.jquery); // 2.2.4
</script>

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!