One, the page loads $ (document). Ready () rather than the OnLoad () event in the Web effect, this method is executed when the page is loaded, but there is a subtle difference between the two, and the Ready () event is executed when the HTML download is complete and parsed into a DOM tree. The onload () event is not executed until the HTML, including the file, is downloaded. We can bind other events or functions in the Ready () event, ready () There are several syntaxes that can be represented:
$ (document). Ready (function () {});
$ (). Ready (function () {});
$ (function () {});
Of course, I am still accustomed to using the first, enhance readability, it should be noted that when using the Ready () event, please ensure that there is no registration function in the onload event of <body> element, otherwise it will not trigger $ (document). Ready () event. You can also use the $ (document) for an unlimited number of times on the same page. Ready () event. The functions that are registered are executed sequentially in the order in which they are (in code).
Two, there are only two methods of event switching, that is, hover () and toggle () Two methods, because they intercept the combination of user operations, and with multiple function response, so also known as the composite event processing mechanism. Hover () method is a simulation of mouse hover changes in the way, simply said that the mouse is moving into the move is the time to perform the behavior you specify the method, our most commonly used is to do menu switching effect. The toggle () method is when you click to perform the function method you specify, the first time you click to perform the first function, the second click executes the second function, and so on, it can be deleted using the Unbind (' click ') method in the event binding.
Hover (over,out) Example:
The code is as follows:
<style type= "Text/css Tutorial" >
#menu
{
background-color:red;
width:150px;
height:30px;
Text-align:center;
Border:solid 1px black;
}
#menu_child
{
width:150px;
Border:solid 1px black;
Display:none;
}
#menu_child Div
{
Background-color: #f3f3f3;
width:150px;
height:30px;
Text-align:center;
}
</style>
<script language= "javascript" type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#menu"). Hover (
function () {
$ ("#menu_child"). Fadein ();
},
function () {
$ ("#menu_child"). fadeout ();
});
});
</script>
<body>
<div id= "Menu" >jquery event handling </div>
<div id= "Menu_child" >
<div> Page Load </div>
<div> Event Bindings </div>
<div> Event Delegation </div>
<div> Event Switching </div>
</div>
</body>
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
