Understanding jquery Objects $.html

If you want to figure out the relationship between jquery and native JavaScript, I personally think it's the difference between automatic and manual cars. Using native JavaScript, you can know the role of the clutch and gear, while using jquery, the clutch and the manual gear are encapsulated into the function, straight forward, back, or in-car. Therefore, it is a natural step to use native JavaScript skillfully and then use jquery. From the beginning of this article, we will introduce the relevant content of jquery, and give the relevant native JavaScript implementation. Next, the jquery object is described in detail in the $

$ object

Speaking of jquery, the most obvious sign, no doubt, is the dollar sign $, dollar sign $ is actually a shorthand for jquery. The object that is wrapped with $ () is the jquery object

The DOM object, which corresponds to the jquery object, is actually the DOM element node object

If the document is written directly, it refers to the DOM element object of document

Document.onclick = function () {alert (' Dom ');}

And if the $ () is included, such as $ (document), is the shorthand for jquery (document), it refers to the jquery object

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

<script src= "Jquery-3.1.0.js" ></script> <script> console.log (jquery (document));//[document] Con Sole.log (document);//[document] Console.log (document);//#document </script>

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

[Note that]jquery objects cannot use the methods of Dom objects, and DOM objects cannot use the methods of jquery objects

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

<script src= "Jquery-3.1.0.js" ></script> <script>/unresponsive $ (document). onclick = function () {    Alert (0);    };    Uncaught TypeError:document.click is not a function document.click (function () {alert (1); });</script>

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

Transformation

"1" Dom to jquery object

For a jquery object, you only need to wrap the DOM object with $ () to get a jquery object.

"2" jquery goto DOM Object

jquery is a class array object that can be obtained by means of [index] or get (index) of the corresponding DOM object

Console.log (document = = = $ (document) [0]);//trueconsole.log (document = = = $ (document). Get (0));//true

Coexistence

If the jquery object and the DOM object point to the same object and bind different functions, the function executes sequentially in order

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

Eject 0 First, then eject 1document.onclick = function () {alert (0);} $ (document). Click (function () {alert (1);});

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

No error

If you use a DOM object, setting a style for a nonexistent DOM object will cause an error

Uncaught Typeerror:cannot Read Property ' style ' of Nulldocument.getelementbyid (' test '). Style.color = ' red ';

Using jquery objects, setting styles for non-existent jquery objects does not give an error

$ (' #test '). CSS (' Color ', ' red ');

Judging existence

Generally, DOM objects need to be judged before they are used to prevent errors

if (document.getElementById (' #test ')) {document.getElementById (' #test '). Style.color = ' red ';}

For jquery objects, because $ () gets to always be an object, even if the element is not on the page. So it can't be judged by the following way

if ($ (#test)) {//}

Should be judged based on the length of the element obtained.

if ($ (#test). Length) {//}

or convert it to a DOM object to determine

if ($ (#test) [0]) {//}

Understanding jquery Object $.html