Home > Others

Conversion and difference between DOM objects and jQuery objects

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

JQuery introduces the conversion and difference between DOM objects and jQuery objects.


JQuery Hello World program

<Script type = "text/javascript" src = "xxx // jquery-x.y.z.js">

The introduction of jQuery. There are two versions, the jquery-x.y.z.min.js is a simplified compressed version, without min is the development version, the comments and indentation in the code are retained.
Note that "/" in the path must be escaped, that is, "//".

The $ () symbol converts a DOM object to a jQuery object.

The Hello World program is as follows:

 

The code is as follows: Copy code

<Html>
<Head>
<Title> Hello jQuery </title>
<Script type = "text/javascript" src = "libs // jquery-1.11.2.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
Alert ("Hello World ");
});
</Script>
</Head>
<Body>

</Body>
</Html>

 

$ (Document). ready and window. onload comparison

First, let's look at window. onload:

 

The code is as follows: Copy code

Window. onload = sayHello;
Window. onload = sayWorld;

Function sayHello (){
Alert ("Hello ");
}
Function sayWorld (){
Alert ("World ");
}

 

The subsequent method will overwrite the previous method, that is, only one, that is, the World, is displayed at the end of the bubble.
 
If $ (document). ready is used, the method will be connected in series, that is, the Hello alert will be displayed first, and then the World will be displayed.

 

The code is as follows: Copy code

$ (Document). ready (sayHello );
$ (Document). ready (sayWorld );

Function sayHello (){
Alert ("Hello ");
}
Function sayWorld (){
Alert ("World ");
}

 

In this way, you can associate multiple methods.

Another small difference is that the execution of the ready method is slightly higher. widow. onload will wait for the DOM to be ready, and all binding ends, while ready can only be DOM ready, other work may not be done yet.

Instance: attaches an onclick event to each hyperlink object.

First, add multiple hyperlink objects to the body:

The code is as follows: Copy code
<Body>
<A href = "#"> test1 </a> <br>
<A href = "#"> test2 </a> <br>
<A href = "#"> test3 </a> <br>
<A href = "#"> test4 </a>
</Body>

To add an onclick event to each object, you can use the following methods:
First, you can write the onclick attribute in each a tag;
Secondly, you can use window. onload to add a method to obtain all labels and add events in a unified manner, as shown below:

The code is as follows: Copy code
Window. onload = function (){
Var myLinks = document. getElementsByTagName ("");
For (var I = 0; I <myLinks. length; ++ I ){
MyLinks [I]. onclick = function (){
Alert ("Hello link:" + I );
        }
    }
}

Note: I made a mistake here. I thought the number of alert would increase progressively. The actual result is that every alert is 4.
This is because js does not have block-level scope. Variable I references the one in for and changes to 4 after the loop. that is, the value of I is obtained only when the onclick event occurs. Of course, all values are 4.
 
JQuery is used to implement this function:

The code is as follows: Copy code
$ (Document). ready (function (){
$ ("A"). click (function (){
Alert ("Hello link from jQuery! ");
});
});

The $ () symbol in jQuery gets all the appropriate elements in the page.
Therefore, the code above implies the traversal process and adds an Event Processing function to each element.
The click method is provided by the jQuery object.
Onclick is the attribute of the DOM object.
Many attributes in DOM become methods in jQuery.
 
 
Mutual Conversion and difference between DOM objects and jQuery objects

Let's look at an example. Add a p tag first:

<P id = "clickMe"> Click Me! </P>

First obtain a DOM object, and then convert it into a jQuery object:

The code is as follows: Copy code
// Part 1: DOM --> jQuery
// DOM object:
Var pElement = document. getElementsByTagName ("p") [0];
Alert ("DOM pElement:" + pElement. innerHTML );
// Convert DOM object to jQuery object:
Var pElementjQuery = $ (pElement );
Alert ("jQuery pElementjQuery:" + pElementjQuery.html ());

You can also obtain a jQuery object and then convert it to a DOM object:

 

The code is as follows: Copy code

// Part 2: jQuery --> DOM
// JQuery object array:
Var clickMejQuery =$ ("# clickMe ");
// Convert jQuery object to DOM object (2 ways ):
// Way 1:
Var domClickMe1 = clickMejQuery [0];
Alert ("dom1:" + domClickMe1.innerHTML );

// Way 2:
Var domClickMe2 = clickMejQuery. get (0 );
Alert ("dom2:" + domClickMe2.innerHTML );

 

Note: $ () in jQuery obtains an array of all elements that meet the conditions.
 
Summary:

$ ("String") returns an array of all elements that meet the conditions, where:
The string starts with #, indicating the id;
The string starts with ".", indicating the class name of CSS;
If not, change the string to the tag name.
 
$ (DOM object) to get a jQuery object.

    
References:
JQuery official website: http://jquery.com/
JQuery API: http://api.jquery.com/
JQuery UI demos: http://jqueryui.com/demos/
W3school jQuery Tutorial: http://www.w3school.com.cn/jquery/index.asp

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More