Maison > interface Web > js tutoriel > Comment convertir une chaîne HTML en objet jquery dom en javascript

Comment convertir une chaîne HTML en objet jquery dom en javascript

高洛峰
Libérer: 2017-02-06 09:39:02
original
1226 Les gens l'ont consulté

La chaîne html d'origine est la suivante :

var text="<div id=&#39;overLay&#39; style=&#39;width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;&#39;>"
        + "<img style=&#39;margin-left:4px;margin-top: 3px;&#39; src=&#39;ima.png&#39; width=&#39;43px&#39; height=&#39;43px&#39;/>"
        + "</div>";
Copier après la connexion

1. Utilisez la bibliothèque Jquery pour convertir la variable de chaîne de texte en un objet Jquery.

Le code Jquery est le suivant :

alert($(text).html());
Copier après la connexion

Où $(text) est la chaîne de texte convertie en un objet Jquery, et enfin le html() de l'objet Jquery convertit le html contenu dans une chaîne Sortie sous la forme, le résultat est le suivant :

<img style=&#39;margin-left:4px;margin-top: 3px;&#39; src=&#39;ima.png&#39; width=&#39;43px&#39; height=&#39;43px&#39;/>
Copier après la connexion

Il montre que l'objet $(text)Jquery représente le code HTML le plus externe élément div.

 2. Convertissez les objets Jquery et les objets DOM entre eux.

Le code est le suivant :

var element= $(text).get(0) //element就是一个dom对象
  var jqueryobj=$(element);//jqueryobj就是一个Jquery对象。
Copier après la connexion

Remarque : La différence entre les objets DOM et les objets Jquery

À ma connaissance, les objets Jquery et Les objets DOM sont des éléments HTML d'encapsulation, vous pouvez utiliser des nœuds d'éléments HTML, ce qui est pratique pour la programmation, mais certaines méthodes entre eux ne peuvent pas être partagées. Par exemple, la méthode html() de l'objet Jquery ne peut pas être utilisée avec l'objet DOM ; le GetElementById() de l'objet DOM, les objets Jquery ne peuvent pas non plus être utilisés. Par conséquent, une conversion mutuelle peut être effectuée si nécessaire.

 3. Utilisez le code js pour convertir la variable de chaîne de texte en un objet DOM.

Le code js est le suivant :

/*字符串转dom对象*/
function loadXMLString(txt)
{
  try //Internet Explorer
   {
     xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
     xmlDoc.async="false";
     xmlDoc.loadXML(txt);
     //alert(&#39;IE&#39;);
     return(xmlDoc);
   }
  catch(e)
   {
     try //Firefox, Mozilla, Opera, etc.
      {
        parser=new DOMParser();
        xmlDoc=parser.parseFromString(txt,"text/xml");
       //alert(&#39;FMO&#39;);
        return(xmlDoc);
      }
     catch(e) {alert(e.message)}
   }
  return(null);
}
Copier après la connexion

Le code js convertissant la chaîne de texte en un objet DOM est lié au navigateur, donc. . . . . . Écrivez séparément. ​

De cette manière, la conversion des chaînes html en objets Jquery et objets DOM est réalisée.

Introduction à la méthode de conversion entre les objets jQuery et les objets dom

Lorsque vous commencez à apprendre jQuery, vous ne pourrez peut-être pas distinguer quels sont des objets jQuery et lesquels sont des objets DOM. Quant à l'objet DOM, il n'y a pas beaucoup d'explications. Nous en avons rencontré trop. Concentrons-nous sur jQuery et la conversion entre les deux.

Qu'est-ce qu'un objet jQuery ?

---C'est l'objet généré en encapsulant l'objet DOM via jQuery. L'objet jQuery est unique à jQuery et peut utiliser des méthodes dans jQuery.

Par exemple :

$("#test").html() signifie : récupérer le code html dans l'élément avec l'ID test. Parmi eux, html() est une méthode dans jQuery

Ce code équivaut à utiliser DOM pour implémenter le code :

document.getElementById("id").innerHTML;
Bien que l'objet jQuery est un wrapper. Il est généré après l'objet DOM, mais jQuery ne peut utiliser aucune méthode de l'objet DOM. De même, l'objet DOM ne peut pas utiliser les méthodes de jQuery. S'il est utilisé sans discernement, une erreur sera signalée. Par exemple : $("#test").innerHTML, document.getElementById("id").html() et d'autres méthodes d'écriture sont incorrectes.

Une autre chose à noter est que l'utilisation de #id comme sélecteur obtient l'objet jQuery et l'objet DOM obtenus par document.getElementById("id"), qui ne sont pas équivalents. Veuillez voir la conversion entre les deux ci-dessous.

Étant donné que jQuery est différent mais également lié, les objets jQuery et les objets DOM peuvent également être convertis les uns aux autres. Avant de convertir les deux, nous faisons d'abord une convention : si un objet jQuery est obtenu, alors nous ajoutons $ devant la variable, comme : var $variab = objet jQuery ; si un objet DOM est obtenu, c'est la même chose que habituel. : var variab = objet DOM ; cette convention est uniquement destinée à faciliter l'explication et la distinction, et n'est pas stipulée dans l'utilisation réelle.

Convertir un objet jQuery en objet DOM :

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

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

Tels que :

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

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

est fourni, tel que :

var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
Copier après la connexion

Convertir l'objet DOM en un objet jQuery :

Pour un objet DOM qui est déjà un objet DOM, utilisez simplement $ () pour envelopper l'objet DOM. Obtenez un objet jQuery. $(Objet DOM)

Par exemple :

var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
Copier après la connexion

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

Grâce aux méthodes ci-dessus, les objets jQuery et les objets DOM peuvent être convertis les uns aux autres à volonté. Ce qu'il faut souligner à nouveau, c'est que seuls les objets DOM peuvent utiliser des méthodes dans le DOM et que les objets jQuery ne peuvent pas utiliser de méthodes dans le DOM.

Pour plus d'articles sur la façon de convertir des chaînes html en javascript en objets jquery dom, veuillez faire attention au site Web PHP chinois !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal