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

Die jüngsten Projektanforderungen bestehen darin, eine Anwendung im Zusammenhang mit Baidu Maps zu entwickeln. Sie müssen die gewünschten Elemente und Attributinformationen aus der fest codierten HTML-Zeichenfolge extrahieren. Da die Elementknoten und -attribute in js oder jq betrieben werden, ist dom verwendet. Objekt oder JQ-Objekt. Im Folgenden wird die Methode zum Konvertieren einer HTML-Zeichenfolge in ein JQuery-Dom-Objekt in Javascript vorgestellt. Freunde, die sie benötigen, können auf

Die ursprüngliche HTML-Zeichenfolge lautet wie folgt:

var text="<p 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;/>"
        + "</p>";

　1 Als nächstes verwenden Sie die JQuery-Bibliothek, um die Textzeichenfolgenvariable in ein JQuery-Objekt zu konvertieren.

Der JQuery-Code lautet wie folgt:

　　alert($(text).html());

Wobei $(text) in a konvertiert wird Text-String-JQuery-Objekt und verwenden Sie schließlich html() des JQuery-Objekts, um den HTML-Inhalt in Form einer Zeichenfolge auszugeben

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;/>

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

　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对象。

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

Nach meinem Verständnis sind JQuery-Objekte und DOM-Objekte gekapselte HTML-Elemente. Sie können HTML-Elementknoten bedienen, um die Programmierung zu erleichtern, aber einige Methoden zwischen ihnen können nicht gemeinsam genutzt werden, wie z. B. html() von JQuery-Objekten .-Methode kann das DOM-Objekt nicht verwendet werden und die GetElementById() des DOM-Objekts kann nicht vom Jquery-Objekt 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('IE');
     return(xmlDoc); 
   }
  catch(e)
   {
     try //Firefox, Mozilla, Opera, etc.
      {
        parser=new DOMParser();
        xmlDoc=parser.parseFromString(txt,"text/xml");
       //alert('FMO');
        return(xmlDoc);
      }
     catch(e) {alert(e.message)}
   }
  return(null);
}

Der js-Code konvertiert die Textzeichenfolge in a DOM-Objekt und es ist browserabhängig, also. . . . . . Schreiben Sie separat. ​

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

Einführung in die Konvertierungsmethoden zwischen jQuery-Objekten und Dom-Objekten

Wenn Sie jQuery zum ersten Mal erlernen, können Sie möglicherweise nicht erkennen, welche jQuery-Objekte sind und welche DOM-Objekte. 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 jQuery-Objekte nach dem Umschließen von DOM-Objekten generiert werden, können DOM-Objekte keine Methoden in jQuery verwenden. Bei wahlloser Verwendung wird ein Fehler gemeldet. Zum Beispiel: $("#test").innerHTML, document.getElementById("id").html() und andere Schreibmethoden sind falsch.

Eine weitere zu beachtende Sache ist, dass die Verwendung von #id als Selektor das jQuery-Objekt und das von document.getElementById("id") erhaltene DOM-Objekt erhält, die nicht äquivalent sind. 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 festgelegt.

JQuery-Objekt in DOM-Objekt konvertieren:

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

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

Zum Beispiel:

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

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

wie:

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

DOM-Objekt in jQuery-Objekt konvertiert:

Bei einem DOM-Objekt müssen Sie das DOM-Objekt nur mit $() umschließen, um ein jQuery-Objekt zu erhalten. $(DOM-Objekt)

Zum Beispiel:

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

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

Mit den oben genannten Methoden können jQuery-Objekte und DOM-Objekte beliebig 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.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So ändern Sie den ursprünglichen HTML-Inhalt über js

Das obige ist der detaillierte Inhalt vonSo konvertieren Sie eine HTML-Zeichenfolge in ein JQuery-Dom-Objekt in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!