Analyse de la conversion et de la différence entre les objets DOM de jQuery et les objets jQuery_jquery

Cet article analyse la conversion et la différence entre les objets DOM et les objets jQuery avec des exemples. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Programme jQuery Hello World :

Comparaison de $(document).ready et window.onload

Premier coup d'oeil à window.onload :

Copier le code Le code est le suivant :

window.onload = sayHello;

window.onload = sayWorld;

fonction sayBonjour() {
alert("Bonjour");
>
fonction sayWorld() {
​ alert("Monde");
>

Cette dernière méthode écrasera la méthode précédente, c'est-à-dire qu'une seule bulle sera affichée à la fin, celle du Monde.

Si $(document).ready est utilisé, les méthodes seront concaténées, c'est-à-dire que l'alerte Hello sera affichée en premier, puis l'alerte Monde sera affichée.

Copier le code Le code est le suivant :

$(document).ready(sayHello);

$(document).ready(sayWorld);

fonction sayBonjour() {
alert("Bonjour");
>
fonction sayWorld() {
​ alert("Monde");
>

De cette façon, vous pouvez associer plusieurs méthodes.

Une autre petite différence est que l'exécution de la méthode ready sera légèrement plus précoce. width.onload attendra que le DOM soit prêt et que toutes les liaisons soient terminées, tandis que ready ne peut que préparer le DOM, et d'autres travaux peuvent ne pas encore être effectués. .

Exemple : Attacher l'événement onclick à chaque objet lien hypertexte

Tout d'abord, ajoutez plusieurs objets lien hypertexte au corps :

Copier le code Le code est le suivant :

test1

test2

test3

test4

Pour ajouter un événement onclick à chaque objet, il existe de nombreuses méthodes :

Tout d'abord, vous pouvez écrire l'attribut onclick dans chaque balise Deuxièmement, vous pouvez utiliser window.onload pour ajouter une méthode permettant d'obtenir toutes les balises et d'ajouter des événements de manière uniforme, comme suit :

Copier le code Le code est le suivant :

window.onload = function () {

var mesLiens = document.getElementsByTagName("a");
pour(var i = 0; i < myLinks.length; i){
mesLiens[i].onclick = function(){
alert("Bonjour lien : " i);
>
>
>

Notez que j'ai fait une erreur ici. Au départ, je pensais que le nombre d'alertes augmenterait, mais le résultat réel était que chaque alerte était de 4.
En effet, js n'a pas de portée au niveau du bloc et la variable i fait référence à celle de for, qui devient 4 après la boucle. En d'autres termes, la valeur de i n'est prise que lorsque le. L'événement onclick se produit, bien sûr, il est 4.

Utilisez jQuery pour implémenter cette fonction ci-dessous :

Copier le code Le code est le suivant :

$(document).ready(function () {
$("a").click(function () {
alert("Bonjour lien de jQuery!");
});
});

Le symbole $() dans jQuery obtiendra tous les éléments appropriés dans la page.
Ainsi, le code ci-dessus implique le processus de traversée et ajoute une fonction de traitement d'événements à chaque élément
. La méthode click est une méthode fournie par l'objet jQuery.
onclick est une propriété de l'objet DOM.
De nombreux attributs dans DOM deviennent des méthodes dans jQuery.

Conversion mutuelle et différence entre les objets DOM et les objets jQuery

Regardez un exemple, ajoutez d'abord une balise p :

Copier le code Le code est le suivant :

Cliquez sur moi !< /p>

Récupérez d'abord un objet DOM, puis convertissez-le en objet jQuery :

Copier le code Le code est le suivant ://Partie 1 : DOM --> //Objet DOM :

var pElement = document.getElementsByTagName("p")[0];

alert("DOM pElement : " pElement.innerHTML);
//Convertir l'objet DOM en objet jQuery :
var pElementjQuery = $(pElement);
alert("jQuery pElementjQuery : " pElementjQuery.html());


Vous pouvez également obtenir d'abord un objet jQuery puis le convertir en objet DOM :

Copier le code Le code est le suivant ://Partie 2 : jQuery --> //Tableau d'objets jQuery : var clickMejQuery = $("#clickMe");

//Convertir l'objet jQuery en objet DOM (2 façons) :

//voie 1 :
var domClickMe1 = clickMejQuery[0];
alert("dom1: " domClickMe1.innerHTML);

//voie 2 :
var domClickMe2 = clickMejQuery.get(0);
alert("dom2: " domClickMe2.innerHTML);

Remarquez encore : $() dans jQuery obtient un tableau de tous les éléments qui remplissent les conditions.

Petit résumé :

$("string") renverra un tableau de tous les éléments qui remplissent les conditions, où :

La chaîne commence par #, indiquant l'identifiant ;

La chaîne commence par ., indiquant le nom de la classe CSS ; Si les deux situations ci-dessus ne sont pas le cas, modifiez la chaîne pour représenter le nom de la balise
.

$(objet DOM) peut obtenir un objet jQuery.

J'espère que cet article sera utile à la programmation jQuery de chacun.