Maison >interface Web >js tutoriel >Exemple de code détaillé sur la façon de convertir des objets jquery et des objets DOM les uns dans les autres

Exemple de code détaillé sur la façon de convertir des objets jquery et des objets DOM les uns dans les autres

伊谢尔伦
伊谢尔伦original
2017-07-20 10:48:531406parcourir

Les objets jQuery sont des objets générés en encapsulant des objets DOM avec jQuery. L'objet jQuery est unique à jQuery. Il peut utiliser des méthodes dans jQuery, mais ne peut pas utiliser de méthodes DOM ; par exemple : $("#img").attr("src","test.jpg"); img") est l'objet jQuery.

Les objets DOM sont des opérations sur les objets inhérentes à Javascript. Les objets DOM peuvent utiliser des méthodes inhérentes à Javascript, mais ne peuvent pas utiliser de méthodes dans jQuery. Par exemple : document.getElementById("img").src = "test.jpg"; document.getElementById("img") voici l'objet DOM.

$("#img").attr("src","test.jpg"); est équivalent à document.getElementById("img").src = "test.jpg"; mais $("#img").src = "test.jpg"; ou document.getElementById("img").attr("src","test.jpg");

Un autre exemple est celui-ci. Lorsque j'écris jQuery, j'écris souvent comme ceci : this.attr("src","test.jpg"); , et .attr( "src","test.jpg") est une méthode jQuery, donc une erreur s'est produite. Pour résoudre ce problème, vous devez convertir l'objet DOM en un objet jQuery, tel que $(this).attr("src","test.jpg");

1. Objet DOM dans un objet jQuery

Pour un objet DOM qui est déjà un objet DOM, il vous suffit d'envelopper l'objet DOM avec $() pour obtenir un objet jQuery, $(Objet DOM) Remarque : var est une variable définie

Par exemple :


var v = document.getElementById("v"); //DOM对象
var $v = $(v); //jQuery 对象

Après la conversion, vous pouvez utiliser les méthodes jQuery à volonté.

2. Convertir un objet jQuery en objet DOM

Deux méthodes de conversion parlent de convertir un objet jQuery en objet DOM : [index] et .get(index);

(1) L'objet jQuery est un objet de données et l'objet DOM correspondant peut être obtenu via la méthode [index].

Par exemple :


var $v = $("#v"); //jQuery 对象
var v = $v[0]; //DOM 对象
alert(v.checked); //检测这个checkbox是否被选中

(2) jQuery lui-même fournit l'objet DOM correspondant via la méthode .get(index)

Par exemple :


var $v = $("#v"); //jQuery 对象
var v = $v.get(0); //DOM对象 ( $v.get()[0] 也可以 )
alert(v.checked); //检测这个 checkbox 是否被选中

Grâce aux méthodes ci-dessus, les objets jQuery et les objets DOM peuvent être convertis les uns aux autres à volonté. Il convient de souligner à nouveau : Objet DOM Seules les méthodes du DOM peuvent être utilisées. Les objets jQuery ne peuvent pas utiliser les méthodes du DOM.

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!

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