Quelles sont les méthodes dans jQuery ? Méthodes couramment utilisées dans jQuery (avec code)

Le contenu de cet article concerne quelles sont les méthodes dans jQuery ? Les méthodes couramment utilisées dans jQuery (avec code) ont une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

.each()

Boucle à travers un objet jQuery, exécutant une fonction pour chaque élément correspondant

$('p').each(function(idx,node){
  $(node).text(idx + ':' + 'hello')
})

$.extend()

jQuery.extend([deep,] target [, object1 ] [, objectN ] )
Fusionner plusieurs objets et ajouter tous les attributs au premier objet

• Lorsque nous fournissons deux objets ou plus à $.extend() , toutes les propriétés de l'objet sont ajoutées à l'objet cible (paramètre cible).

• Si un seul argument est fourni à $.extend(), cela signifie que l'argument cible est omis. Dans ce cas, l'objet jQuery lui-même est par défaut l'objet cible. De cette façon, nous pouvons ajouter de nouvelles fonctionnalités sous l'espace de noms jQuery. Ceci est utile pour les développeurs de plugins qui souhaitent ajouter de nouvelles fonctions à jQuery. Autrement dit, {} est l'attribut par défaut. L'utilisateur y définit les attributs, écrasant les attributs par défaut. S'il n'y a pas de paramètre, les attributs par défaut sont utilisés. La méthode

var object = $.extend({}, object1, object2)
var object1 = {  apple: 0,  banana: { weight: 52, price: 100 },  cherry: 97
}var object2 = {  banana: { price: 200 },  durian: 100
}
// 将obj2合并到obj1上的案例
$.extend( object1, object2 )

.clone()

.clone() copie en profondeur tous les ensembles d'éléments correspondants, y compris tous les éléments correspondants, les éléments subordonnés des éléments correspondants et les nœuds de texte .
Habituellement, lorsque nous insérons un élément de la page à un autre endroit du DOM, il sera déplacé de l'ancien emplacement, semblable à un effet de cisaillement.

Par exemple :

<div class="container">    
<div class="hello">Hello</div>    
<div class="world">World</div></div>
$(&#39;.hello&#39;).appendTo(&#39;.world&#39;);<div class="container">  <div class="world">
    World    <div class="hello">Hello</div>  </div></div>

Si vous devez copier plutôt que couper, vous pouvez écrire le code comme suit :

$('.hello').clone().appendTo('.world')

.index()

Trouver un élément spécifique de la collection donnée indexIndice

• Renvoie le premier élément sans paramètres index

• Si le paramètre est un objet DOM ou un objet jQuery, renvoie le paramètre dans la collection index

• Si le paramètre est un sélecteur, renvoie le premier élément correspondant index, sinon. found return -1

$('p').eq(2).index()  //2
$('.ok').index('p')  //获取p标签中的.ok的下标

.ready()

est équivalent au document.onDOMContentLoaded
du JS natif lorsque le DOM est prêt, spécifiez une fonction à exécuter.

Par exemple, lorsque le code exécuté doit être utilisé après le chargement de l'élément (par exemple, l'obtention de la taille de l'image doit être effectuée après le chargement de l'image), vous devez mettre ce code dans l'événement de chargement.

Les deux façons d'écrire suivantes sont équivalentes

$(document).ready(function(){
})

$(function(){
})

Exemple

$(function(){    console.log('ready')
})

window.onload et $(document).ready

Développement Nous devons souvent lier les gestionnaires aux événements de certains éléments. Mais le problème est que si l’élément n’a pas été chargé sur la page mais que l’événement de liaison a été exécuté, cela n’aura aucun effet. Ces deux événements sont grossièrement utilisés pour éviter une telle situation. Placez les fonctions liées dans les rappels de ces deux événements pour garantir que les fonctions d'événement peuvent être liées après le chargement de certains éléments de la page. Quelle est la différence entre window.onload et $(document).ready ? document.onDOMContentLoaded Et ?

Quelle est la différence entre window.onload et $(document).ready ?

Les temps d'exécution varient

window.onload doit attendre que tous les éléments de la page, y compris les images, soient chargés avant de pouvoir être exécuté.
$(document).ready() est une structure DOM qui est exécutée une fois le dessin terminé sans attendre que tous les éléments de la page soient chargés.

La différence dans l'exécution répétée des deux méthodes

Vous ne pouvez pas écrire plusieurs window.onloads en même temps S'il existe plusieurs méthodes window.onload, seulement la dernière
$. (document) sera exécuté. Plusieurs ready() peuvent être écrits en même temps, et tous peuvent être exécutés.
Si les deux méthodes sont écrites, alors $(document).ready() sera exécuté avant window.onload.

Écriture simplifiée

Il n'y a pas d'écriture simplifiée pour window.onload
$(document).ready(function(){}) peut être abrégé en $(function(){})

document.onDOMContentLoaded Quoi ?

document.onDOMContentLoaded est équivalent à .ready() dans jQuery. L'événement DOMContentLoaded est déclenché une fois que le document HTML initial a été entièrement chargé et analysé, sans attendre la fin du chargement des feuilles de style, des images et des sous-cadres.

Il y a un paragraphe dans l'introduction de la documentation jQuery qui explique que ces deux fonctions ne sont pas la même fonction

Traduction

Le prêt( ) fournit une méthode qui exécute le code JavaScript dès que le modèle objet de document DOM de la page devient sûr à utiliser. C'est souvent le bon moment pour effectuer les tâches requises avant que l'utilisateur ne consulte ou n'interagisse avec la page, comme l'ajout de gestionnaires d'événements et l'initialisation de plugins. Lorsque plusieurs fonctions sont ajoutées via des appels successifs à cette méthode, elles sont préparées dans le DOM et exécutées dans l'ordre dans lequel elles ont été ajoutées. Dans jQuery Dans la version 3.0, jQuery garantit qu'une exception se produisant dans un gestionnaire n'empêche pas l'exécution des gestionnaires ajoutés ultérieurement.

La plupart des navigateurs commencent par Une fonctionnalité similaire est fournie sous la forme de l'événement DOMContentLoaded. Cependant, le .ready() de jQuery les méthodes ont une différence importante et utile : si le DOM est prêt, le navigateur le charge avant que le code appelle .ready(handler) DOMContentLoaded , le gestionnaire de fonctions sera toujours exécuté. En revanche, l'écouteur d'événement DOMContentLoaded ajouté après le déclenchement de l'événement n'a jamais été exécuté.

Donc document.onDOMContentLoaded n'est pas équivalent à .ready() dans jQuery, on peut seulement dire que c'est une méthode similaire.

Recommandations associées :

Implémentation et utilisation du préchargement d'images non ordonné dans jquery

Entre l'objet jQuery et l'objet DOM natif La différence et la conversion

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!