After writing JQuery events and animations

Source: Internet
Author: User

After writing JQuery events and animations
In this dark room where the sun is invisible, I will not talk about it again after a hard day. Next I will talk about my understanding of jQuery events and animations !!! I still have to say a few more words. Our dear, teacher Y has finished talking about jQuery events and animations, and he is very impressed with us, don't go home if you don't finish writing a sentence. It's worse than being hit by a car ......

I. Events in jQuery

1. How to load the DOM?

In general JavaScript code, we usually use window. the onload method is correct. In jQuery, $ (document) is used ). ready () method. $ (document ). the ready () method greatly improves the response speed of Web applications.

2. execution time

The window. onload method and the $ (document). ready () method have similar functions, but there are differences in execution timing.

Window. the onload method is executed only after all the elements in the webpage are fully loaded into the browser ). the time handler for ready () method registration can be called when the DOM is ready.

In a simple example, there is a large image library website that adds certain actions to some images in the webpage, such as hiding or displaying an image after you click it. if you use window. when the onload method class is used for processing, you must wait until each image is loaded to perform a small operation. However, if you use $ (document) in jQuery ). the ready () method is used for setting. You can perform operations as long as the DOM is ready. You do not need to wait until all the images have been downloaded.

Obviously, you don't need to say that you know which method is used to speed up !!!

3. Multiple Use

Differences between the window. onload method and the $ (document). ready () method

 

$(function(){            $(document).ready(function() {                alert("one");            })            $(document).ready(function () {                alert("two");            })        })

 

window.onload = one;window.onload = two;

The results of these two operations are: first, the two will pop up in sequence, and the second will only display two.

 

I am quietly telling you a secret. The average person will not tell him

First:

 

$ (Document). ready (function () {// write code });

 

Second:

 

$ (Function () {// write code });

 

Third:

$ (). Ready (function () {// write code });

 

The second is the abbreviation of the first one. Do not worship me !!!

Can be written according to your habits

 

 

 

4. How to bind events

If you want to bind events to the elements to complete some operations, you can use the bind () method to match the elements for specific event binding.

Call format of the bind () method:

Bind (type [, data], fn );

 

$ ("Li "). bind ({mouseover: function () {callback (this).css ("background", "pink") ;}, mouseout: function () {callback (this..css ("background ", "");}}); // tag <body> <ul> <li> homepage </li> <li> Company Information </li> <li> talent Program </li> </ul> </body>

 

This example fully demonstrates how to bind events using the bind () method.

 

 

Well, this time I will talk so much about it. What's wrong with it? Please give me some advice. Thank you for watching it.

 

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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