Home > Developer > Web Develop
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 readySynthetic event jquery has two synthetic events hover and toggleThe 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 BindingsThe 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
Dome
<!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>
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.
Dome
<!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);
Dome
<!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
AnimationTime and animation in jquery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
