Home > Developer > Web Develop
Hi
Sleeping in a daze, wondering what the spirit is.
1. JQuery
-----Events and Application-----
Trigger Ready () event----page load
ready()Events are similar to onLoad() events, but the former is triggered as soon as the page's DOM structure is loaded, and the latter must be triggered when all elements of the page are loaded successfully, ready() can be written in multiple, and executed sequentially. In addition, the following notation is equal:
$(document).ready(function(){})Equivalent to$(function(){});
<body>
<div id= "Tip" ></div>
<input id= "btntest" type= "button" value= "point under Me"/>
<script type= "Text/javascript" >
$ ("#btntest"). Ready (function ()) {
$ ("#btntest"). Bind ("click", Function () {
$ ("#tip"). HTML ("I've been clicked!"). ");
});
});
</script>
</body>
----Binding an element's events using the Bind () method
bind()Method binding element of the event is very convenient, before binding, you need to know the name of the binding element, the event name of the binding, the event is executed in the function of the content can be, and its binding as follows:
$(selector).bind(event,[data] function)
The argument event is the event name, and multiple event names are separated by a space, function for the event execution.
<body>
<input id= "btntest" type= "button" value= "Click or move Out is not available"/>
<script type= "Text/javascript" >
$ (function () {
$ ("#btntest"). Bind ("Click Mouseout", function () {
$ (this). attr ("Disabled", "true");
})
});
</script>
</body>
----Switching events using the hover () method
hover()The function of the method is that when the mouse moves over the selected element, executes the first function in the method, when the mouse moves out, executes the second function in the method, implements the actual effect of the event, and invokes the format as follows:
$(selector).hover(over，out);
The over parameter is the function that is moved to the trigger on the selected element, and the out parameter is the functions that are triggered when the element is moved out.
<body>
<div> Don't go! You are local tyrants </div>
<script type= "Text/javascript" >
$ (function () {
$ ("div"). Hover (
function () {
$ (this). addclass ("orange");
},
function () {
$ (this). Removeclass ("Orange")
})
});
</script>
</body>
----binding multiple functions using the toggle () method
toggle()The method can bind two or more than two functions in the element's click event, and it can also implement the toggle between hiding and displaying the element, and the calling format for binding multiple functions is as follows:
$(selector).toggle(fun1(),fun2(),funN(),...)
Where Fun1,fun2 is the name of multiple functions
<body>
The <input id= "btntest" type= "button" value= "Dot Me"/>
<div> I am dynamic display </div>
<script type= "Text/javascript" >
$ (function () {
$ ("#btntest"). Bind ("click", Function () {
$ ("div"). Toggle ();}
</script>
</body>
----Use the Unbind () method to remove an element-bound event
unbind()method to remove the event that the element is bound to, and its invocation format is as follows:
$(selector).unbind(event,fun)
Where the parameter event represents the event name that needs to be removed, multiple event names are separated by spaces, and the fun parameter is the function name that is called when the event executes.
If no parameters are specified, the Unbind () method removes all event handlers for the specified element.
<body>
<input id= "btntest" type= "button" value= "Remove event"/>
<div> local tyrants, let's make a friend </div>
<script type= "Text/javascript" >
$ (function () {
$ ("div"). Bind ("click",
function () {
$ (this). Removeclass ("BackColor"). AddClass ("color");
}). bind ("DblClick", function () {
$ (this). Removeclass ("Color"). AddClass ("BackColor");
})
$ ("#btntest"). Bind ("click", Function () {
$ ("div"). Unbind ()
$ (this). attr ("Disabled", "true");
});
});
</script>
</body>
----One-time event that binds elements using the one () method
one()The method can bind an element to any valid event, but the event that this method binds is only fired once, and its invocation format is as follows:
$(selector).one(event,[data],fun)
The parameter event is the name of the events, and data is what is carried when the event is triggered, and fun is the function that is executed when the event is triggered.
<body>
The <div> Click on me for a moment </div>
<script type= "Text/javascript" >
$ (function () {
var IntI = 0;
$ ("div"). One ("click", Function () {
inti++;
$ (this). CSS ("Font-size", IntI + "px");
})
});
</script>
</body>
----Call the trigger () method to trigger the specified event manually
trigger()The method can manually trigger an element-specific event, which can either be an element's own event or a custom event, in short, the event must be able to execute, and its invocation format is:
$(selector).trigger(event)
Where the event parameter is the name of the events that need to be triggered manually.
<body>
<div> local tyrants, let's make a friend </div>
<script type= "Text/javascript" >
$ (function () {
$ ("div"). Bind ("Change-color", function () {
$ (this). addclass ("color");
});
$ ("div"). Trigger ("Change-color");
});
</script>
</body>
----focus and Blur events for text boxes
The focus event is triggered when the element gets focus, such as when a text box is clicked, and the Blur event is triggered when the element loses focus, such as clicking on any element of the text box.
<body>
<input id= "Txtest" type= "text" value= "/>
<div></div>
<script type= "Text/javascript" >
$ (function () {
$ ("input")
. Bind ("Focus", function () {
$ ("div"). html ("Please enter your name!"). ");
})
$ ("input"). Bind ("Blur", function () {
if ($ (this). Val (). length = = 0)
$ ("div"). html ("Your name cannot be empty!"). ");
})
});
</script>
</body>
Change event----drop-down list box
When the value of an element changes, an event is triggered change , such as when the option in the drop-down list box is selected change .
<body>
<select id= "Seltest" >
<option value= "Grapes" > Grapes </option>
<option value= "Apple" > Apple </option>
<option value= "Lychee" > Lychee </option>
<option value= "Xiang jiao" > Incense </option>
</select>
<script type= "Text/javascript" >
$ (function () {
$ ("select"). Bind ("Change", function () {
if ($ (this). val () = = "Apple")
$ (this). CSS ("Background-color", "Red");
Else
$ (this). CSS ("Background-color", "green");
})
});
</script>
</body>
----Call the Live () method to bind an element's event
As with the bind() method, the method live() and the executable event that can bind the element, in addition to this same function, live() can also bind dynamic elements, that is, element events that are added using code, in the following format:
$(selector).live(event,[data],fun)
The parameter event is the name of the events, and data is what is carried when the event is triggered, and fun is the function that is executed when the event is triggered.
<body>
<script type= "Text/javascript" >
$ (function () {
$ ("#btntest"). Live ("Click Mouseout", function () {
$ (this). attr ("Disabled", "true");
})
$ ("Body"). Append ("<input id= ' btntest ' type= ' button ' value= ' Click or move out will not be available '/> ');
});
</script>
</body>
----
Lazy Day-jquery Events and applications
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
