Methode zum Konvertieren einer HTML-Zeichenfolge in ein JQuery-Dom-Objekt in Javascript_Javascript-Kenntnissen

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. 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());

Dabei konvertiert $(text) die Textzeichenfolge in ein Jquery-Objekt und verwendet schließlich html() des Jquery-Objekts, um den HTML-Inhalt in Form einer Zeichenfolge auszugeben. 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-Element div 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-Objekten

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. die html()-Methode des Jquery-Objekts Das DOM-Objekt kann 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.

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 also 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 gegenseitige Konvertierungsmethoden 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 zur Implementierung des Codes:

document.getElementById("id").innerHTML;
Obwohl das jQuery-Objekt nach dem Umschließen des DOM-Objekts generiert wird, kann jQuery 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.

Zu beachten ist außerdem, dass das durch die Verwendung von #id als Selektor erhaltene jQuery-Objekt und das durch document.getElementById("id") erhaltene DOM-Objekt nicht gleichwertig 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 vorgeschrieben.

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 das entsprechende DOM-Objekt über die .get(index)-Methode

bereit

Zum Beispiel:

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

DOM-Objekt in jQuery-Objekt konvertieren:

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 jede beliebige jQuery-Methode 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.