Front-end Learning-Choose whether the result is a jquery object or a DOM object?

0. PrefaceJQuery's selectors are often used in the course of learning and using JavaScript, but it is often difficult to find a DOM object or a jquery object when it is often "confusing" to get a selection result.    In order to let oneself no longer confused through the blog to sum up lessons learned, I hope that in the summary process slowly improve. "Related Posts" "Front end learning-How to modify <a href=" # ">url name</a> using JavaScript and jquery" Sample page "--test-ul.html

<! DOCTYPE html><meta charset= "Utf-8" >

1. Select all the Li"Using jquery"
var $obj = $ ("li"); Console.log ($obj);
"Using JavaScript"
var obj = document.getelementsbytagname ("li"); Console.log (obj);
"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
var obj = $ ("li") [0];console.log (obj);                    <li>raspberry</li>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
var obj = $ ("li"). Get (1); Console.log (obj);                    <li>arduino</li>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
var obj = document.getelementsbytagname ("li") [2];console.log (obj);                    <li>intel Galileo</li>console.log (obj.innerhtml);     Intel Galileo

5.--eq method for jquery objects when selecting child elements
var $obj = $ ("li"). EQ (0); Console.log ($obj); Console.log ($obj. html ());           Raspberry
"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
$ ("Li"). each (function (index,item) {    console.log (item);                  Item is DOM object    console.log (item.innerhtml);   Output Raspberry Arduino Intel Galileo} in turn);
"description"Each traversed item is a DOM object instead of a jquery object.
7. Iterate to a jquery object
$ ("Li"). each (function (index,item) {    $item = $ (item);                    Become a JQuery object again    //Console.log ($item);                  Console.log ($item. html ());       Output Raspberry Arduino Intel Galileo} in turn);
"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
var objs = document.getelementsbytagname ("Li"), for (var i=0; i<objs.length; i++) {    console.log (objs[i]);    Console.log (objs[i].innerhtml);    Output Raspberry Arduino Intel Galileo} in turn

9. Summary    1 uses the jquery selector to get the child DOM using [] and get, which means [] and get have the ability to convert a jquery object to a DOM object.     The "2" EQ method obtains objects that are still jquery objects     "3" each method iterates when the item is a DOM object     "4" jquery object using the jquery method, DOM objects use DOM methods.