search

Home >Web Front-end >JS Tutorial >Usage examples of events and animations in JQuery_jquery

Usage examples of events and animations in JQuery_jquery

WBOY
WBOYOriginal
2016-05-16 16:17:581229browse

The examples in this article describe the usage of events and animations in JQuery. Share it with everyone for your reference. The specific analysis is as follows:

1.bind event

Copy code The code is as follows:

<script><br> $(function () {<br> $("#divid h5.head").bind("click", function () { //bind event, which contains three parameters, the first is the event, the second is the event <br> alert($(this).text());<br> });<br> $("#divid h5.content").css("display", "none"); //The css method is to dynamically set the label style<br> });<br> $(function () {<br> $("#btnid").bind("click", function () {<br> if (bool == true) {<br> $("#btnid .content").css("display", "none");<br> bool = false;<br> $(this).val("display");<br> }<br> else {<br> $("#btnid .content").css("display", "");<br> bool = true;<br> $(this).val("hidden");<br> }<br> });<br> });<br> $(function () {<br> $("input[type=button]").bind("click", function () { //Display and hide content<br> var content = $("#divid .content");<br> if (content.is(":visible")) {<br> content.hide();<br> $(this).val("display");<br> }<br> else {<br> content.show();<br> $(this).val("hidden");<br> }<br> });<br> });<br> </script>


Rocky?

Let it rain. No need to bring an umbrella. Let everything be over. Let’s see how long it will take for the wet heart to dry




In the above operation, we newly learned the bind event, and the bind event has three parameters. The first parameter is the name of the event, such as: click, dbclick, mouseover, etc. The second parameter is data, which is the event passed over. Object, the third parameter is a method, which is used to process the bound event function. This is a special event of ours. In addition, an example in animation is also written here, that is, the display or hiding of text information. Before we learn show() and hide(), we usually write in the first way above. Just define a bool type variable. This is very simple to write, but when writing the show-hide time processing button The above is still quite annoying, so after learning show() and hide(), it becomes much simpler, that is, you can hide and show it directly. You can compare it. Obviously, the code processing is simple.

2.toggle events and event bubbling

Copy code The code is as follows:
<script><br> $(function () {<br> $("input[type=button]").toggle(function () { //Both parameters of toggle are events, which are called in turn<br> $(this).css("backgroundColor","red");<br> }, function () {<br> $(this).css("backgroundColor", "yellow");<br> });<br> });<br> $(function () {<br> $("div").each(function () {<br> $(this).bind("mouseup", function (e) {<br> alert(e.pageX); //Output the x-direction position of the mouse<br> alert(e.pageY); //Output the position of the mouse in the y direction<br> alert(e.which); //Output the mouse button selection, 1 is the left mouse button, 2 is the roller button, 3 is the right mouse button <br> });<br> });<br> });<br> $(function () {<br> $("#txt").keydown(function () {<br> e.preventDefault(); //Prevent a tag link<br> alert(e.keyCode); //The keyboard gets its ask code<br> });<br> });<br> $(function () {<br> $("#ouuerdiv").click(function () {<br> alert($(this).text());<br> });<br> $("#div").click(function () {<br> alert($(this).text());<br> });<br> $("#innerdiv").click(function () { //Here we write the bubbling phenomenon of an event. You can use preventDefault or recentDefault<br> to organize bubbling. alert($(this).text());<br> });<br> })<br> </script>


outer div
middle div
inner div

Baidu


Toggle event: simulates a mouse click event. The first event is triggered when the mouse moves over the element, and the second event is triggered when the mouse leaves the element. The two events are triggered by switching between each other; in addition, event bubbling is also mentioned. Event bubbling is actually simply understood as: there can be multiple events on a page, or multiple elements can correspond to one event. Assume that there are two elements in the page as above, one div element is nested in another div element and both have a click event bound to them. Then when you click on the inner div element, the outer div will also be displayed. This It's just events bubbling up. What needs to be noted here is that they are all bound to an event. It is easy to take it for granted that only the click event occurs internally.

3. Remove events and add multiple events in succession

Copy code The code is as follows:
<script><br> $(function () {<br> $("removeall").click(function () { <br> $("#btn").unbind(); //Remove event<br> });<br> $("#btn").bind("click", function () { //You can add multiple events continuously<br> $("#text").append("<p>I am the first added event</p>")<br> })<br> .bind("click", function () {<br> $("#text").append("<p>I am the second added event</p>")<br> })<br> .bind("click", function () {<br> $("#text").append("<p>I am the third added event</p>")<br> })<br> });<br> </script>


div text information


Above we learned that the bind event is to add an event, and unbind is to remove the event. We can compare it, hehe, and for adding multiple events in a row, it is actually when you add an event and continue to bind to add events.

4. Simulation event

The above bind events, click events, etc. we studied are generally events that can be triggered by clicking a button. However, sometimes, it is necessary to simulate user operations to achieve the click effect, for example: when the user enters and purchases If the click event is triggered later without the user having to click, then we use the trigger() method to complete the simulation operation.

5. Some other events

Copy code The code is as follows:
<script><br> $(function () {<br> $("#btn").click(function () {<br> //$("#div").hide(2000); //Hide within 2 seconds<br> //$("#div").show(2000); //Show <br> within 2 seconds //$("#div").fadeIn(2000); //Increase the opacity of the element until the element is fully displayed <br> //$("#div").fadeOut(2000); //Reduce the opacity of the element until the element completely disappears<br> $("#btn").toggle(function () { <br> $("div").slideDown(2000); //Change the height of the element and display it from top to bottom<br> $(this).val("display") <br> }, function () {<br> $("div").slideUp(2000); //Change the height of the element, shorten and hide it from bottom to top<br> $(this).val("hidden")<br> });<br> });<br> //$("#btn").click(function () {<br> // $("div").fadeTo(600,0.2); //The fadeTo method is applicable when the transparency is 0.2<br> within 0.6s //});<br> });<br> </script>

1234



Animation method

6. Application of multi-line text box - height change

Copy code The code is as follows:


<script><br> $(function () {<br> var comment = $("#comment");<br> $(".bigger").click(function () {<br> if (comment.height() < 500) {<br /> comment.height($("#comment").height() 100); //Increase the height by 100 based on the original height<br /> }<br /> });<br /> $(".smaller").click(function () { <br /> if (comment.height() > 100) {<br> comment.height($("#comment").height() - 100); //Reduce the original height by 100<br> }<br> }); <br> })<br> </script>


Zoom inZoom out

">