Time and animation in jquery

Source: Internet
Author: User

We know that the interaction between JavaScript and HTML is done through user actions and browser-generated events, such as when browsing for money to load an HTML document or a user clicking a button generates an event, although these interactions can be accomplished with traditional JavaScript events. But jquery expands on these event handling mechanisms, not only the syntax is simpler and greatly enhances the processing power of the event!

Window.onload and $ (document). The difference between ready

The time of execution of Window.onload is. Executes when all the elements of the page, including pictures, music, and so on, are completed. This means that no page elements can be obtained inside the page until the element is loaded. and specify the use of the method once in a page

(document). Ready () is when the label element in the page is loaded or executed without having to wait for the associated elements such as the picture to be loaded but the part of the play does not load or go. It is better to say that a chapter of the picture is not loaded and its width and height can not be obtained. And you can use the hair method multiple times in one page.

In jquery, you can use load () to solve a page element as a complete problem with window.onload, which means

$ (window). Load (function () {}) can completely replace window.onload= "function () {}"

Event Bindings

The Bind method can be used to bind events in jquery

Its invocation format is:

Bind (type ", data", FN)

Type: Types of events to bind (such as click, MouseOver, etc. can also be custom event types)

"Data": Optional parameter, passing additional object data as Event.data property value

fn: handler function to bind


<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/>    <title></title>    <Scriptsrc= "Jquery-1.12.4.js"></Script>   <Scripttype= "Text/javascript">       $(function(){    //to the LI under UL bind mouseover event when the mouse moves over Li is to change its background color to red           $("ul Li"). Bind ("mouseover", function () {               $( This). CSS ("background", "Red");       });   }); </Script></Head><Body>    <ul>        <Li>Home</Li>        <Li>Brief introduction</Li>        <Li>Talent Program</Li>    </ul></Body></HTML>

Synthetic event jquery has two synthetic events hover and toggle

Hover is just the hover event of the cursor with its consolidated mouseover and mouseout whose invocation format is as follows:

Hover (FU1,FN2);

When the mouse is selected in an element, the event handler function specified by the first parameter is executed when the mouse moves out of the element, and the second parameter specifies the event handler.


<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/>    <title></title>    <Scriptsrc= "Jquery-1.12.4.js"></Script>   <Scripttype= "Text/javascript">       $(function(){           $("ul Li"). Hover (function () {                        //executes when the cursor hovers                        $( This). CSS ("background", "Red"); },                    function () {                        //executes when the cursor leaves                        $( This). CSS ("background", "");                    }                           );   }       ); </Script></Head><Body>    <ul>        <Li>Home</Li>        <Li>Brief introduction</Li>        <Li>Talent Program</Li>    </ul></Body></HTML>

Toggle () is used to simulate a continuous mouse click of the event. Its parameters are variable when the first unit price is the function that executes the first argument, the second unit price is the function that executes the second argument, and so on. Loop execution when no parameter is controlled by its display or hidden

Its invocation format is: Toggle (FN1,FN2,......FNN);


<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/>    <title></title>    <styletype= "Text/css">. Selected{background:Red;        }    </style>    <Scriptsrc= "Jquery-1.8.3.min.js"></Script>    <!--<script src= "jquery-1.12.4.js" ></script> not supported -    <!--<script src= "jquery1.11.1.js" ></script> not supported -   <Scripttype= "Text/javascript">       $(function () {                     $("Li"). Toggle (function () {                                            $( This). CSS ("Color", "Red"); },                    function () {                                                $( This). CSS ("Color", "");                                               }                           );   }       ); </Script></Head><Body>    <ul>        <LiID= "Li" >Home</Li>        <Liclass= "Li">Brief introduction</Li>        <Liclass= "Li">Talent Program</Li>    </ul></Body></HTML>

Remove Event Unbind ()

The Unbind function is used to move out a bound function if no arguments are removed from all of the bound events

Its invocation format:

Undind ("type", "Data")

Type: Types of bindings to remove

Data: handler function to remove


Time and animation in jquery

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.