Heim > Web-Frontend > js-Tutorial > Hauptteil

So konvertieren Sie eine HTML-Zeichenfolge in ein JQuery-Dom-Objekt in Javascript

高洛峰
Freigeben: 2017-02-06 09:39:02
Original
1176 Leute haben es durchsucht

Die ursprüngliche HTML-Zeichenfolge lautet wie folgt:

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>";
Nach dem Login kopieren

1. Verwenden Sie die JQuery-Bibliothek, um die Textzeichenfolgenvariable in ein JQuery-Objekt zu konvertieren.

Der JQuery-Code lautet wie folgt:

alert($(text).html());
Nach dem Login kopieren

Wobei $(text) die in ein JQuery-Objekt konvertierte Textzeichenfolge ist und schließlich html() des JQuery-Objekts den HTML-Code konvertiert Inhalt in eine Zeichenfolge Ausgabe im Formular, das Ergebnis ist wie folgt:

<img style=&#39;margin-left:4px;margin-top: 3px;&#39; src=&#39;ima.png&#39; width=&#39;43px&#39; height=&#39;43px&#39;/>
Nach dem Login kopieren

Es zeigt, dass das $(text)Jquery-Objekt das äußerste HTML darstellt Elementdiv.

 2. Konvertieren Sie Jquery-Objekte und DOM-Objekte ineinander.

Der Code lautet wie folgt:

var element= $(text).get(0) //element就是一个dom对象
  var jqueryobj=$(element);//jqueryobj就是一个Jquery对象。
Nach dem Login kopieren

Hinweis: Der Unterschied zwischen DOM-Objekten und JQuery-Objekten

Nach meinem Verständnis sind JQuery-Objekte und DOM-Objekte sind gekapselte HTML-Elemente. Sie können HTML-Elementknoten bedienen, was für die Programmierung praktisch ist, aber einige Methoden zwischen ihnen können nicht gemeinsam genutzt werden. Beispielsweise kann die html()-Methode des Jquery-Objekts nicht mit dem DOM-Objekt verwendet werden B. GetElementById() des DOM-Objekts, Jquery-Objekte können ebenfalls nicht verwendet werden. Daher kann bei Bedarf eine gegenseitige Konvertierung durchgeführt werden.

 3. Verwenden Sie JS-Code, um die Textzeichenfolgenvariable in ein DOM-Objekt zu konvertieren.

Der js-Code lautet wie folgt:

/*字符串转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);
}
Nach dem Login kopieren

Der js-Code, der die Textzeichenfolge in ein DOM-Objekt umwandelt, hängt mit dem Browser zusammen. . . . . . Schreiben Sie separat. ​

Auf diese Weise wird die Konvertierung von HTML-Strings in Jquery-Objekte und DOM-Objekte realisiert.

Einführung in die Konvertierungsmethode zwischen jQuery-Objekten und DOM-Objekten

Wenn Sie jQuery zum ersten Mal erlernen, können Sie möglicherweise nicht erkennen, welche jQuery-Objekte und welche DOM-Objekte sind. Was das DOM-Objekt betrifft, gibt es nicht viele Erklärungen. Konzentrieren wir uns auf jQuery und die Konvertierung zwischen den beiden.

Was ist ein jQuery-Objekt?

---Es ist das Objekt, das durch Umschließen des DOM-Objekts durch jQuery generiert wird. Das jQuery-Objekt ist einzigartig für jQuery und kann Methoden in jQuery verwenden.

Zum Beispiel:

$("#test").html() bedeutet: Den HTML-Code im Element mit ID-Test abrufen. Unter diesen ist html() eine Methode in jQuery

Dieser Code entspricht der Verwendung von DOM zum Implementieren des Codes:

document.getElementById("id").innerHTML;
Obwohl Das jQuery-Objekt ist ein Wrapper. Es wird nach dem DOM-Objekt generiert, aber jQuery kann keine Methode des DOM-Objekts verwenden. Ebenso kann das DOM-Objekt die Methoden in jQuery nicht verwenden, wenn es wahllos verwendet wird. Zum Beispiel: $("#test").innerHTML, document.getElementById("id").html() und andere Schreibmethoden sind falsch.

Eine weitere zu beachtende Sache ist: Die Verwendung von #id als Selektor zum Abrufen des jQuery-Objekts und des von document.getElementById("id") erhaltenen DOM-Objekts sind nicht gleichwertig. Bitte sehen Sie sich die Umrechnung zwischen den beiden unten an.

Da jQuery unterschiedlich, aber auch verwandt ist, können jQuery-Objekte und DOM-Objekte auch ineinander konvertiert werden. Bevor wir die beiden konvertieren, treffen wir zunächst eine Konvention: Wenn ein jQuery-Objekt erhalten wird, fügen wir $ vor der Variablen hinzu, wie zum Beispiel: var $variab = jQuery-Objekt, wenn ein DOM-Objekt erhalten wird, ist es dasselbe wie üblich: var variab = DOM-Objekt; diese Konvention dient nur der Vereinfachung der Erklärung und der Unterscheidung und ist in der tatsächlichen Verwendung nicht vorgeschrieben.

JQuery-Objekt in DOM-Objekt konvertieren:

Zwei Konvertierungsmethoden konvertieren ein jQuery-Objekt in ein DOM-Objekt: [index] und .get(index);

(1 )jQuery Das Objekt ist ein Datenobjekt und das entsprechende DOM-Objekt kann über die Methode [index] abgerufen werden.

Wie zum Beispiel:

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

(2) jQuery selbst stellt über die .get(index)-Methode das entsprechende DOM-Objekt

bereit wird bereitgestellt, wie zum Beispiel:

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

Konvertieren Sie das DOM-Objekt in ein jQuery-Objekt:

Für ein DOM-Objekt, das bereits ein DOM-Objekt ist, verwenden Sie einfach $ (), um das DOM-Objekt zu umschließen. $(DOM-Objekt)

Zum Beispiel:

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

Nach der Konvertierung können Sie jQuery-Methoden nach Belieben verwenden.

Mit den oben genannten Methoden können jQuery-Objekte und DOM-Objekte nach Belieben ineinander konvertiert werden. Es muss noch einmal betont werden, dass nur DOM-Objekte Methoden im DOM verwenden können und jQuery-Objekte keine Methoden im DOM verwenden können.

Weitere verwandte Artikel zum Konvertieren von HTML-Strings in Javascript in JQuery-Dom-Objekte finden Sie auf der chinesischen PHP-Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage