jquery Objects and Dom objects

[Go] Front end learning--Choose whether the result is a jquery object or a DOM object: http://blog.csdn.net/xukai871105/article/details/34531373

1. Select all the Li[using jquery]

1 var $obj = $ ("li");   2

[Using JavaScript]

1 var obj = document.getelementsbytagname ("li");   2

[main difference]At this point $obj is a collection of jquery objects, and obj is a collection of Dom objects. 2.Jquery object becomes DOM object--[] Method

1 var obj = $ ("li") [0];   2 console.log (obj);                    // <li>Raspberry</li>   3 Console.log (obj.innerhtml);     // Raspberry  

[description]Here obj is a DOM object, and you can use the property innerHTML. If you use jquery's HTML method, the browser will issue an error warning. 3.Jquery object becomes DOM object--get method

1 var obj = $ ("li"). Get (1);   2 console.log (obj);               // <li>Arduino</li>   3 Console.log (obj.innerhtml);     // Arduino  

[description]The [] approach works the same as the Get method of jquery. 4. Use JavaScript to achieve the same effect

1 var obj = document.getelementsbytagname ("li") [2];   2 console.log (obj);               // <li>intel galileo</li>   3 Console.log (obj.innerhtml);     // Intel Galileo  

5.--eq method for jquery objects when selecting child elements

1 var $obj = $ ("li"). EQ (0);   2 Console.log ($obj);   3 console.log ($obj. html ());           //

[description]Using the EQ method to get the jquery object, the HTML content of this object needs to use the jquery HTML () method instead of the innerHTML property of the JavaScript.

6. Use jquery to traverse all child nodes

1 $ ("Li"). each (function(index,item) {  2     console.log (item);                  // item is a DOM  object 3     Console.log (item.innerhtml);        // output Raspberry Arduino Intel  Galileo in turn 4

[description]Each traversed item is a DOM object instead of a jquery object. 7. Iterate to a jquery object

1 $ ("Li"). each (function(index,item) {  2     $item = $ (item);                    // become a jquery object  again 3     // Console.log ($item);                 4     Console.log ($item. html ());          // output Raspberry Arduino Intel  Galileo in turn 5 });

[description]$item = $ (item) again changes the jquery object, $ (item) at this time and $ (<li>Raspberry<li>) equivalent, meaning to select a Dom object and become a jquery object. 8. Use JavaScript to traverse all child nodes

1 var objs = document.getElementsByTagName ("li");   2  for (var i=0; i<objs.length; i++) {  3    console.log (Objs[i]);   4     Console.log (objs[i].innerhtml);    // output Raspberry Arduino Intel  Galileo in turn 5 }  

9. Summary[1] using the jquery selector, you can use [] and get to get the child dom, that is, [] and get have the ability to convert a jquery object to a DOM object. [The 2]eq method obtains an object that is still a jquery object [the 3]each method iterates when the item is a DOM object [4]jquery object uses the JQuery method, and the DOM object uses the DOM method.

JQuery objects and Dom objects