1. Load DOM:
$ (Function () {// do something...}) $ (document). Ready (function () {// do something ...})
Note: $ (document). Ready (function () {//...}) in jquery differs from window. onload in javascript:
1.1. execution mechanism: $ (document ). ready () method and window. the onload method has similar functions, but the window. onload is executed only when all elements (including all associated files of the elements) in the webpage are fully loaded into the browser. That is, JavaScript can access any elements in the webpage. Event Processing registered using the $ (document). Ready () method in jqueryProgramCan be called when the Dom is fully ready. In this case, all elements of the webpage are accessible to jquery. However, this does not mean that all files associated with these elements have been downloaded.
JqueryWebpageThe speed of parsing to the DOM tree is better than that of window. onload is fast, but in $ (document ). if the function registered in ready () method uses the height and width of the sample slice, but the image has not been loaded, the method becomes invalid, jquery also provides another method load (). The load () method binds a handler to the onload event of the element.
2. Bind events: BIND (type [, data], FN) binds events to elements after the file is loaded.
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en"> <HTML>3. Event merging:
3.1. The hover (enter, leave) method is used to simulate mouse hover events. When the cursor moves to an element, the specified first function is triggered. When the cursor moves out of this element, the second function is triggered.
<! -- $ (Function () {$ ("H5 "). hover (function () {$ ("p "). show () ;}, function () {$ ("p "). hide () ;}) ;}// -->
3.2. The toggle (fn1, FN2,... FNN) method is used to simulate continuous Mouse clicking events. When you click an element, the specified first function (fn1) is triggered. When you click it again, the specified second function (FN2) is triggered. If there are more functions, the function is triggered in turn.
<! -- $ (Function () {$ ("H5 "). toggle (function () {alert ("this is fn1 .... ") ;}, function () {alert (" this is fn2 .... ") ;}, function () {alert (" this is fn3 .... ") ;}) // -->4. Event bubbling: First, check the following section.Code
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en"> <HTML>When you click the <span> element with the mouse, three pieces of information are output, because clicking the <span> element inside triggers the click event on the <div> and <body> elements, this is caused by event bubbles. The trigger sequence is: <span>, <div>, and <body>.
$ (Element). BIND ('click', function (event) {// do something ......}$ ('Span '). BIND ('click', function (event) {$ TXT = ← ('{msg'}.html () + '<p> the inner span element is clicked </P> '{}('{msg'}.html ($ txt); event. stoppropagation (); // prevents event bubbling behavior });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
