Methods for translating HTML strings into jquery Dom objects in JavaScript _javascript tips

The original HTML string is as follows:

var text= "<div id= ' OverLay ' style= ' Width:50px;height:60px;background:url (imgs/back.png) left top no-repeat; Position:absolute; ' > "
        +"  '
        + ' </div> ";

1. The following uses the jquery library to convert the text string variable to a jquery object.

The jquery code is as follows:

Alert ($ (text). HTML ());

where $ (text) is converted to a jquery object for the text string, and the HTML () of the jquery object is finally exported as a string, the result is as follows:

Explains that the $ (text) jquery object represents the outermost HTML element div.

　　2. Turn the jquery object and the DOM object into each other.

The code is as follows:

var element= $ (text). Get (0)//element is a DOM object
var jqueryobj=$ (element);//jqueryobj is a jquery object.

Note: The difference between DOM objects and jquery objects

In my understanding, jquery objects and DOM objects are encapsulated HTML elements that can manipulate HTML element nodes to facilitate programming, but some of their methods are not shared, such as the jquery object's HTML () method, and Dom objects cannot be used , and the getElementById () of the DOM object, and the jquery object is not available. So they can be converted to each other when they have to.

　　3. Use JS code to convert text string variable to DOM object.

The JS code is as follows:

/* String Turn DOM object
/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);
}

Where the JS code to the text string into a DOM object and browser-related, so ... Write separately.

This enables the conversion of HTML strings to jquery objects and Dom objects.

Introduction to the method of mutual conversion between jquery object and Dom object

When you first learn jquery, you may be confused about which jquery objects and which are DOM objects. As far as DOM objects are concerned, we have too much contact, and the following focuses on jquery and the conversion between the two.

What is a jquery object?

---is the object that is generated after the DOM object is wrapped through jquery. jquery objects are unique to jquery, and they can use the methods in jquery.

Like what:

$ ("#test"). html () means: Gets the HTML code within the element with the ID test. where HTML () is the method in jquery

This code is equivalent to implementing the code with the DOM:

document.getElementById ("id"). InnerHTML;
Although jquery objects are created after wrapping a DOM object, jquery cannot use any of the methods of the DOM object, nor can the same DOM object use the method in jquery. Indiscriminate use can be an error. For example: $ ("#test"). InnerHTML, document.getElementById ("id"). The writing of HTML () is wrong.

Another thing to note is that using #id as a selector is not equivalent to getting a DOM object from a jquery object and a document.getElementById ("id"). Please refer to the conversion between the two as described below.

Since jquery is different but also connected, jquery objects and Dom objects can also be converted to each other. Before converting between the two, we give a convention: if one gets a jquery object, then we add $ to the variable, such as: var $variab = jquery object; If you get a DOM object, it's the same as usual: var Variab = dom Object This agreement is only easy to explain and difference, the actual use does not stipulate.

The jquery object is turned into a DOM object:

Two conversions convert a jquery object into a DOM object: [index] and. get (index);

(1) The jquery object is a data object, which can be obtained through the method of [index] to get the corresponding DOM object.

Such as:

var $v =$ ("#v"); jquery Object
var v= $v [0];//dom object
alert (v.checked)//Detect if this checkbox is selected

(2) jquery itself provides, through the. Get (Index) method, the corresponding DOM object

Such as:

var $v =$ ("#v"); jquery Object
var v= $v. Get (0);//dom Object
alert (v.checked)//Detect if this checkbox is selected

The DOM object turns into a jquery object:

For already a DOM object, you can get a jquery object by wrapping the DOM object with $ (). $ (DOM object)

Such as:

var V=document.getelementbyid ("V"); Dom Object
var $v =$ (v);//jquery Object

After the conversion, you can use the JQuery method at will.

The above methods allow you to arbitrarily convert jquery objects and Dom objects to each other. It should be emphasized that DOM objects can use methods in the DOM, and jquery objects are methods that cannot be used in the DOM.