Home > Developer > Web Develop
tag:john out styles Click event xhtml 1.0 alert animation Design hid
Window.onload and Jquery $ (document). Ready () Difference * 1. JavaScript window.onload: must wait for all elements on the page ( css/js/ picture) Code 2 in the function that executes the binding after it is passed . In the form of jquery, as long as the DOM tree in the page is formed, the execution begins ( Simple to understand that the current page is passed to Execute)* There is no shorthand form window.onload no shorthand form $ (document). Ready (function () {}) has a short form of $ (function() {}); * the number of functions bound is different window.onload can only bind a function $ (function () {}); can bind any number of functions
Window.onload can only bind a function, the following code, will only execute two
<Scripttype= "text/javascript"> functionone () {alert (" one"); } functionboth () {alert (" both"); } window.onload=one ; Window.onload=both ;</Script>
$ (function () {}); Can bind any number of functions, the following code will execute
<Scripttype= "text/javascript"> functionone () {alert (" one"); } functionboth () {alert (" both"); } $ (document). Ready (function() {one (); }) $ (document). Ready (function() {both (); })</Script>
jquery Perfect Event Handling mechanism, if the binding fails, the code below will also execute, but the binding of the paragraph will not be executed
<!DOCTYPE HTML Public "-//w3c//dtd XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "content-type"content= "text/html; charset=utf-8" /><title>Panel</title><Scriptsrc=".. /.. /jquery-1.4.2.js "></Script><Scripttype= "text/javascript">$(function(){ $("#t"). bind ("Click",function() {alert ("zzzz"); }); Alert ("1111"); Alert ("2222");});</Script></Head><Body><PreID= "tt">Realize the perfect event handling mechanism of jquery</Pre><Pre>1. Realize the perfect event handling mechanism of jquery 2. Bind event $DM for DM node. bind ("", function () {});</Pre></Body></HTML>
<!DOCTYPE HTML Public "-//w3c//dtd XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "content-type"content= "text/html; charset=utf-8" /><title>4-2-1</title><Linkrel= "stylesheet"type= "text/css"href=".. /css/style.css " /><Scriptsrc=".. /.. /jquery-1.4.2.js "></Script><Script>$(function(){ /** Gets the H5 element with the value of the class under the Panel ID of the head, * for this element to bind the Fixed-point event with jquery in its original way * Let the next sibling node of the current element display*/ //$ ("#panel. head"). bind ("click", function () { //$ (this). Next (). show (); //}); /** After the page is loaded, the H5 element with the class value head under the ID panel is bound in its original way to a click event, * Gets the next sibling element of the current node $content * When the $coantent element is a visible shape $dm.is (": Visible") makes the node $content node Hidden. * Otherwise let node $content node Xianshi. */ /** $ ("#panel. head"). bind ("click", function () {var $con =$ (this). Next (); If ($con. is (": Visible")) {$con. hide (1000); }else{$con. Show (1000); } });*/ /** after the page is loaded, * The H5 element with the value head of the class under the ID panel is bound to the MouseOver event in its original way, * Let the next sibling node of the current node display * * For the ID pan The value of class under El is the H5 element of head that binds the Mouseout event in its original way, which hides the next sibling node of the current node*/ /** $ ("#panel h5.head"). bind ("mouseover", function () {$ ("#panel h5.head"). next (). show (); }). bind ("mouseout", function () {$ ("#panel h5.head"). next (). Hide (); });*/ /** * Wait for the page to load, * for the ID of the panel under the class value of the head of the H5 element in shorthand form binding a mouseover event, so that the next sibling node of the current node display * For the ID of the panel under the class The H5 element with the head value binds a mouseout event in shorthand to hide the next sibling node of the current node*/
Shorthand
$("#panel H5.head"). mouseover (function(){ $("#panel H5.head"). next (). show (); }). Mouseout (function(){ $("#panel H5.head"). Next (). Hide (); }); });</Script></Head><Body><DivID= "panel"> <h5class= "head">What is jquery?</h5> <Divclass= "content">jquery is another excellent JavaScript library following prototype, an open source project created by John Resig in January 2006. With its simple syntax and Cross-platform compatibility, jquery greatly simplifies JavaScript developers traversing HTML documents, manipulating the dom, handling events, performing animations, and developing ajax. Its unique and elegant code style has changed the way JavaScript programmers design ideas and write Programs. </Div></Div><Pre>summary: What are the events? 1. How to bind an event to a node * $dm. bind ("click", function () {...}); * $dm. Click (function () {...}); $DM. Click (function () {}); 2. $ (this) in the meaning of this and why you need to enclose this in $ () 3. $dm. Show (); $dm. Hide (); All belong to the animation operation of the node, you can pass parameters to it, the form of the parameter is "" "," slow "," normal "," fast "</Pre></Body></HTML>
*{margin:0;padding:0;}Body{font-size:13px;Line-height:130%;padding:60px}#panel{width:300px;Border:1px solid #0050D0}. Head{padding:5px;background:#96E555;cursor:Pointer}. Content{padding:10px;text-indent:2em;Border-top:1px solid #0050D0;Display:Block;Display:None; }
Find me a friend is very rich, buy a down jacket on more than 20,000, and strive to make money, and later bought to their families
jquery Event Binding
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
