This example describes the events and animation usage in jquery. Share to everyone for your reference. The specific analysis is as follows:
1.bind Event
Copy Code code as follows:
<script src= "Script/jquery-1.7.1.min.js" ></script>
<script>
$ (function () {
$ ("#divid h5.head"). Bind ("click", Function () {//bind event, which contains three arguments, the first is an event, and the second is an event
Alert ($ (this). text ());
});
$ ("#divid h5.content"). CSS ("display", "none"); CSS method is to dynamically set the label style
});
$ (function () {
$ ("#btnid"). Bind ("click", Function () {
if (bool = = True) {
$ ("#btnid. Content"). CSS ("display", "none");
bool = false;
$ (this). Val ("show");
}
else {
$ ("#btnid. Content"). CSS ("Display", "");
BOOL = true;
$ (this). Val ("hidden");
}
});
});
$ (function () {
$ ("Input[type=button]"). Bind ("click", Function () {//content display and hide
var content = $ ("#divid. Content");
if (content.is (": Visible")) {
Content.hide ();
$ (this). Val ("show");
}
else {
Content.show ();
$ (this). Val ("hidden");
}
});
});
</script>
<body>
<div id= "divID" >
<div class= "Content" > Let the Rain down don't take an umbrella to let it all go to see how long the wet heart will dry </div>
</div>
<input type= "button" name= "name" value= "display" id= "Btnid"/>
</body>
In the above operation we learned the bind event, and the Bind event is three parameters, the first parameter is the name of the event, such as: Click,dbclick,mouseover, the second parameter is data, which is passed over the event object, the third parameter is a method, The event function that is used to handle binding this is a special event for us; also here is an example of an animation examples, that is, the display of text information or hidden, before you learn show () and hide () we generally follow the first way to write, To define a variable of type bool, it is very simple to write, but it is quite annoying to write the hidden time processing button, so after learning Show () and Hide () is a lot simpler, is directly can hide and display. Can compare, obviously in the code processing simple.
2.toggle Event and event bubbling
Copy Code code as follows:
<script>
$ (function () {
$ ("Input[type=button]"). Toggle (function () {//toggle Two parameters are events that are called by turns
$ (this). CSS ("BackgroundColor", "Red");
}, function () {
$ (this). CSS ("BackgroundColor", "yellow");
});
});
$ (function () {
$ ("div"). each (function () {
$ (this). Bind ("MouseUp", function (e) {
alert (E.pagex); Where to output the x direction of the mouse
alert (E.pagey); Where to output the Y-direction of the mouse
alert (E.which); Output mouse button selection, 1 for the left mouse button, 2 for the roller button, 3 for the right mouse button
});
});
});
$ (function () {
$ ("#txt"). KeyDown (function () {
E.preventdefault (); Block a label link
alert (E.keycode); Keyboard gets its Ask code
});
});
$ (function () {
$ ("#ouuerdiv"). Click (function () {
Alert ($ (this). text ());
});
$ ("#div"). Click (function () {
Alert ($ (this). text ());
});
$ ("#innerdiv"). Click (function () {//Here is the bubbling phenomenon of an event, where the organization bubbles can use Preventdefault or Precentdefault
Alert ($ (this). text ());
});
})
</script>
<body>
<input type= "button" Name= "Btnname" value= "button" id= "Btn"/>
<div id= "Ouuerdiv" > External div<div id= "div" > Central div<div id= "Innerdiv" > Internal div</div></div>< /div>
<a href= "http://www.baidu.com" id= "a" > Baidu </a>
<textarea id= "TXT" rows= "5" cols= "5" >
</textarea>
</body>
Toggle Event: Simulates a mouse click event that triggers the first event when the mouse moves over an element, triggering the second event when the mouse leaves the element. Two events switch between triggers; In addition to the event bubbling, event bubbling in fact, the simple understanding is: On a page can have multiple events, or multiple elements corresponding to an event. Just like the above. Assuming that there are two elements in the page, one of which is nested within another div element and is bound to a click event, when you click inside the div element time, the outer div is displayed, and this is the event bubbling. Here is the need to note that all are bound to an event, it is easy to assume that only the internal occurrence of the Click event.
3. Remove events and add multiple events continuously
Copy Code code as follows:
<script>
$ (function () {
$ ("RemoveAll"). Click (function () {
$ ("#btn"). Unbind (); Implementing a Remove Event
});
$ ("#btn"). Bind ("click", Function () {//can add multiple events continuously
$ ("#text"). Append ("<p> I am the first event added </p>")
})
. bind ("click", Function () {
$ ("#text"). Append ("<p> I am the second added event </p>")
})
. bind ("click", Function () {
$ ("#text"). Append ("<p> I am the third added event </p>")
})
});
</script>
<body>
<button id= "BTN" > Click me </button><button id= "RemoveAll" > Delete all Events </button>
<div id= "text" >div text information </div>
</body>
The above we learned the bind event, is to add an event, and Unbind is to remove the event, we can compare, hehe, and for continuous add multiple events is actually when you add play an event to continue. Bind Add event.
4. Simulation Events
The above BIND events, click Events, and so on are generally the events that can be triggered by clicking a button, but there are times when you need to simulate user actions to achieve a click effect, such as triggering the Click event after the user enters and buys a year, without requiring the user to click, Then we use the trigger () method to complete the simulation operation.
5. A number of other events
Copy Code code as follows:
<script>
$ (function () {
$ ("#btn"). Click (function () {
$ ("#div"). Hide (2000); Hide in 2 seconds
$ ("#div"). Show (2000); Display in 2 seconds
$ ("#div"). FadeIn (2000); Enhances the opacity of the element until the element is fully displayed
$ ("#div"). fadeout (2000); Reduce the opacity of the element until the element disappears completely
$ ("#btn"). Toggle (function () {
$ ("div"). Slidedown (2000); Change the height of the element to display from top to bottom
$ (this). Val ("show")
}, function () {
$ ("div"). Slideup (2000); Change the height of the element, reducing the hidden from bottom to top
$ (this). Val ("Hide")
});
});
$ ("#btn"). Click (function () {
$ ("div"). Fadeto (600,0.2); The Fadeto method is applicable to the 0.2 transparency within 0.6s
//});
});
</script>
<body>
<div id= "div" style= "width:300px; height:300px; ">1234</div>
<input type= "button" name= "name" value= "Operation Animation" id= "btn"/>
</body>
Animation methods
6. Multi-line text box application-height change
Copy Code code as follows:
<script src= "Script/jquery-1.7.1.min.js" ></script>
<style>
Input:focus,textarea:focus {
border:1px solid #f00;
}
</style>
<script>
$ (function () {
var comment = $ ("#comment");
$ (". Bigger"). Click (function () {
if (Comment.height () < 500) {
Comment.height ($ ("#comment"). Height () + 100); Increased by 100 on the basis of the original height
}
});
$ (". smaller"). Click (function () {
if (Comment.height () > 100) {
Comment.height ($ ("#comment"). Height ()-100); Reduced by 100 on the basis of the original height
}
});
})
</script>
<body>
<form action= "#" method= "POST" id= "RegForm" >
<div class= "msg" ><span class= "bigger" > Enlarge </span><span class= "Smaller" > Shrink </span></ Div>
<div style= "" data-mce-style= "color: #800000;" > "><textarea rows=" 8 "cols=" id= "comment" > Haiheihei </textarea></div>
</form>
</body>
The above operation realizes the click to enlarge the time, the height of the textarea is enlarged, the area becomes larger when the click reduces time textarea, namely realizes the animation effect.
7. check box application
Copy Code code as follows:
<script src= "Script/jquery-1.7.1.min.js" ></script>
<script>
$ (function () {
$ ("#checkall"). Bind ("click", Function () {
$ (": CheckBox"). each (function () {
$ (this). attr ("Checked", "checked"); Click the button time to select All
});
});
$ ("#checkno"). Bind ("click", Function () {
$ (": CheckBox"). attr ("checked", false); Click on the button time to all do not select
});
$ ("#checkRev"). Bind ("click", Function () {
$ (": CheckBox"). each (function () {
if ($ (this). attr ("checked") = = "Checked") {
$ (this). attr ("checked", false);
}
else {
$ (this). attr ("Checked", true); Click on the button time to select the Purge, unchecked selected
}
});
});
Or:
$ (this). attr ("Checked",!$ (This). attr ("checked"));
});
</script>
<body>
<form> The sport you love? <br/>
<input type= "checkbox" name= "names" value= "football"/> Soccer <br
<input type= "checkbox" name= "names" value= "basketball"/> Basketball <br
<input type= "checkbox" name= "names" value= "Volleyball"/> Volleyball <br/>
<input type= "checkbox" name= "names" value= "Badminton"/> Badminton <br/>
<input type= "button" id= "Checkall" value= "Select All"/><br/>
<input type= "button" id= "Checkno" value= "all do not choose"/><br/>
<input type= "button" id= "Checkrev" value= "anti-election"/><br/>
<input type= "button" name= "send" value= "submit"/><br/>
</form>
</body>
It is important to note here that the check box is checked or unchecked, it must be achieved by controlling the checked property of the element, if the property checked true, the description is selected, or False if it is not selected.
8. The application of the dropdown box
Copy Code code as follows:
<script src= "Script/jquery-1.7.1.min.js" ></script>
<script>
$ (function () {
$ ("#add"). Click (function () {
var selectoption = $ ("#select1 option:selected");
Selectoption.remove ();
Selectoption.appendto (' #select2 '); Add the selected item to the Aelect box on the right
});
$ ("#addAll"). Bind ("click", Function () {
var options = $ ("#select1 option");
Options.appendto (' #select2 ');
});
});
</script>
<body>
<div class= "center" >
<select multiple= "multiple" id= "Select1" style= "width:100px"; height:160px ">
<option value= "1" > Options 1</option><option value= "2" > Option 2</option> <option "3" > option 3 </option>
<option value= "4" > Options 4</option><option value= "5" > Option 5</option><option value= "6" > option 6 </option>
<option value= "7" > Options 7</option><option value= "8" > Option 8</option><option value= "9" > Option 9 </option>
</select>
<div>
<span id= "Add" > Add to Right </span>
<span id= "AddAll" > All add to Right </span>
</div>
</div>
<div class= "center" style= "Float:right" >
<select multiple= "multiple" id= "Select2" style= "width:100px"; height:160px ">
</select>
</div>
The above operation is implemented in the left click on the selected item, and then added to the right box, you can add one by one, you can add all at once.
9. Application of the table
Copy Code code as follows:
<script src= "Script/jquery-1.7.1.min.js" ></script>
<style>
. even {
}
. Odd {
Background-color: #ffffee;
}
</style>
<script>
$ ("#table tr:odd"). AddClass ("odd"); Select the number of rows with an odd index
$ ("#table Tr:even:not (: A)"). AddClass ("even"); Select an even number of rows in addition to index 0
$ ("Table tr"). each (function () {
$ (this). Click (function () {
$ (this). CSS ("BackgroundColor", "Red"). Siblings (). CSS ("BackgroundColor", "");
});
})
</script>
<body>
<table border= "1" id= "table" >
<thead><tr><th> name </th><th> sex </th><th> Temporary Residence </th></tr></ Thead><tbody>
<TR class= "Parent" id= "Row1" ><td colspan= "3" > Foreground Design Group </td></tr>
<tr class= "Child1" ><td> John </td><td> man </td><td> Zhejiang Ningbo </td></tr>
<tr class= "Child1" ><td> dick </td><td> women </td><td> Zhejiang Hangzhou </td></tr>
<TR class= "Parent" id= "Row2" ><td colspan= "3" > Foreground Development Group </td></tr>
<tr class= "Child2" ><td> Harry </td><td> male </td><td> Hunan Changsha </td></tr>
<tr class= "child2" ><td> Zhao Liu </td><td> male </td><td> hunan Changsha </td></tr>
<TR class= "Parent" id= "row3" ><td colspan= "3" > Background Development Group </td></tr>
<tr class= "child3" ><td> Sun seven </td><td> male </td><td> Hunan Changsha </td></tr>
<tr class= "child3" ><td> week eight </td><td> male </td><td> Hunan Changsha </td>
</tr>
</tbody>
</table>
</body>
I hope this article will help you with your jquery programming.
