Die ursprüngliche HTML-Zeichenfolge lautet wie folgt:
var text="<div id='overLay' style='width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;'>" + "<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px'/>" + "</div>";
1. 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) 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='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px'/>
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对象。
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('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, 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是否被选中
(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是否被选中
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 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!