The use of "$ (document). Ready (function () {})" in jquery

Last Update:2017-11-05 Source: Internet

Author: User

Tags jquery library

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

jquery is a good JAVASCRĪPT framework, $ is the declaration of the jquery library, it is very unstable (I often met), in exchange for a stable way of writing jquery.noconflict (); JQuery (document). Ready (function () {});

The advantage of using jquery is that it wraps the operation of various browser versions on DOM objects (JavaScript DOM objects you should know, that's it).

Like the jquery notation:

1 // (1) 2 // (2) 3 // (3) 4 // (4) 5 // (5)

The first line of code gets all the <p> elements under the <div> tag.

The second line of code gets the <div> element of class container,

The third line of code gets the element with the ID msg below the <div> tag.

The four lines of code get all the connection elements in the context table.

Line five gets all elements with ID myID

If you are familiar with CSS, you will find these writing very familiar! That's right. Is. You see the mystery. jquery is the way to find the elements inside a DOM object. Similar to CSS selectors.

Now, answer your specific question.

$ (document). Ready (function() {alert ("Hello");});( 1)

Html

1 <body onload= "alert (' Hello ');" > (2)

The above two pieces of code are equivalent. But the benefit of code 1 is the performance and logical separation. And you can do the same in different JS files, that is, $ (document). Ready (FN) can be repeated on a page without conflict. Basically, many plugin of jquery use this feature, and because of this feature, multiple plugin are used together, and there is no conflict during initialization.

If we are in

$ (document). Ready (function() {add content A});

Content A:

$ (". Btn-slide"). Click (function() {          alert ("You clicked the connection of class equals btn-slide in the A tag");});

This means that when we click Class=btn-slide's super Connection, the "You clicked the connection of class equals Btn-slide in the A Label" dialog box appears.

It's so easy to use, so using jquery is a good choice.

$ (document). Ready () Usage Summary

function () {Alert ("Welcome");}

This writing function is to want to automatically execute the definition JS code (function) after the page is loaded.

$ (document). Ready (function() {...})

This function is used to replace the window.onload in the page;

Document.ready () and traditional methods <body onload= "load ()" > Similar

The difference is that the onload () method occurs only after the page is loaded, which includes the loading of DOM elements and other page elements (examples), so the use of the Document.ready () method executes faster than OnLoad ().

Javascript can perform some action on a DOM element only after it has been defined.

jquery uses Document.ready to ensure that the code to be executed is executed when the DOM element is loaded. For example:

<script type= "Text/javascript" > $ (document). Ready (function  () {alert("My first jquery code!") );}); </script>

This code means: When the DOM tree is loaded, a warning message is displayed.

The last two points to note:

Ensure that no function is registered in the OnLoad event of the <body> element, or the $ (document) event may not be triggered. (I tried to use the following example to illustrate the situation, but it didn't work, so I guess that's just what happens.) )

1 <HTML>2     <Head>3         <title>4 My Second JQuery5         </title>6         <Scripttype= "Text/javascript"src= "/js/jquery.js">7         </Script>8         <Scripttype= "Text/javascript">9             //The following is a function of load that contains the jquery registration function $Ten             functionload () { One                 $("P"). Append ("<b>Hello</b>"); A             } -             //Here's the code for jquery - $ (document). Ready (function() { the                 $("P"). Append ("my first jquery code!"); -                 $("P"). Append ("<b>Hello</b>"); -             }); -         </Script> +     </Head> -     <Bodyonload= "load ()"> +         <H2> A JQuery Simple Example 2 at         </H2> -         <P> - I would like to say: -         </P> -     </Body> -  in </HTML>

You can use the $ (document). Ready () event indefinitely on the same page. The functions that are registered are executed sequentially in order (in the code).

The use of "$ (document). Ready (function () {})" in jquery

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.

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