Home > Developer > Web Develop
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8">5 <title>JQuery Event Handling (i)</title>6 <Scripttype= "Text/javascript"src= "Jquery-1.7.2.min.js"></Script>7 <Scripttype= "Text/javascript">8 /*9 | ——————————————————————————————————————Ten 1.ready () One $ (document). Ready (function () {}); A the difference between 2.ready () and Window.load - (1). Ready () executes immediately after the DOM structure is loaded - Window.load all elements on the page are loaded OK before they are executed the For example: A picture site has css,js,html and a large number of picture files, it is recommended to use the Ready method. Instead of using Window.load. There will be a better user experience. - (2) The same Web page can have multiple ready (), but only one window is in effect. - The load method. - shorthand method for the 3.ready () method + $ (function () {}); - | —————————————————————————————————————— + jquery Event Handling methods A Blur ([[[DATA],FN]) triggers loss of focus at $ (function () { - $ (': Text '). blur (function () { - alert ("# # #"); - }); - }); - Change ([[DATA],FN]) when the value of an element changes in - click ([[DATA],FN]) to $ (' Div:eq (1) '). Click (function () { + $ (this). CSS (' background ', ' red '); - }); the DblClick ([[DATA],FN]) * error ([[[DATA],FN]) $ focus ([[[DATA],FN])Panax Notoginseng Focusin ([data],fn) - focusout ([data],fn) the KeyDown ([[DATA],FN]) + KeyPress ([[DATA],FN]) A KeyUp ([[DATA],FN]) the $ (': Text '). Change (function () { + $ (' #out '). Text ($ (this). Val ()); - }); $ MouseDown ([[DATA],FN]) $ MouseEnter ([[DATA],FN]) - MouseLeave ([[DATA],FN]) - MouseMove ([[DATA],FN]) the mouseout ([[DATA],FN]) - mouseover ([[DATA],FN])Wuyi MouseUp ([[DATA],FN]) the resize ([[DATA],FN]) - scroll ([[DATA],FN]) Wu Select ([[DATA],FN]) - Submit ([[DATA],FN]) About unload ([[DATA],FN]) $ |-------------------------------- - Event Switching - hover ([over,]out) - a method that mimics the hover event (moving the mouse over an object and moving out of the object). This is a custom method that provides a "keep in" state for frequently used tasks. A $ (' div:last '). Hover (function () { + $ (this). CSS (' background ', ' red '); the },function () { - $ (this). CSS (' background ', ' green '); $ }); the Toggle (FN, fn2, [Fn3, Fn4, ...]) the used to bind two or more event handler functions in response to a rotating click event of the selected element. Note: The Click event must be bound!!!!! the $ (' #out '). Toggle (function () { the $ (this). CSS (' background ', ' red '); - },function () { in $ (this). CSS (' background ', ' green '); the },function () { the $ (this). CSS (' background ', ' white '); About },function () { the $ (this). CSS (' background ', ' yellow '); the }); the + - |________________________________ the Bayi */ the $(function(){ the /*$ (': Text '). KeyUp (function () { - var value = $.trim ($ (this). Val ()); - if (value = = ' 111 ') { the $ (' #out '). Text (' ######## '); the }else{ the $ (' #out '). Text (' &&&&&&&& '); the } - });*/ the //$ (' div:last '). MouseOver (function () { the //$ (this). CSS (' background ', ' red '); the // });94 the the }); the </Script>98 <styletype= "Text/css"> About #out{width:300px;Height:400px;background:#c0c0c0;} - input{101 width:250px;102 }103 </style>104 </Head> the <Body>106 <DivID= "in"><inputtype= "text"name= "in"value= "Please enter user name">107 <Button>Button</Button>108 </Div>109 <DivID= "Out"></Div> the </Body>111 </HTML>
jquery Event Handling (i)
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
