Home > Developer > Web Develop
Hey, today learned the events of jquery and animation, feel about to learn jquery, in memory of the last week to learn the JavaScript, feel a lot of just learning the knowledge points are vague, this is very disappointing, here only a point, the lesson is heard, But there is no good practice, so the knowledge of the new learning to speed up the forgotten strength. In a week of time to learn JavaScript, that time did not feel the rhythm quickly, now suddenly found that the class is really fast, I need to take seriously, good practice in practicing, and write found the recent attitude also has a lot of problems, always in the task of learning today, Found that there is no more time to review the knowledge of the previous study, feeling still a little distressed. The matter needs to be solved quickly. Well, let's summarize today's knowledge.
A. Simple Click event
This is the click event implemented in jquery, which, in contrast to the Click event in JavaScript, uses the onclick to implement its Click event.
two. Bind Event
<script src= "Script/jquery-1.7.1.min.js" ></script> <script>$ (function () {$ ("#divid h5.head"). Bind ("click", Function () {//bind event, which contains three parameters, the first is an event, the second is an event Alert ($ (this). text ()); }); $ ("#divid h5.content"). CSS ("display", "none"); CSS method is the ability 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 () {//Contents display and hide var content = $ ("#divid. Content" ); F (content.is (": Visible" )) {content.hide (), $ (this). Val ("display" );} else {content.show (); $ (this). Val ( "Hide" ); } }); }); </script><body> <div id= "divID" >
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, for example: Click,dbclick,mouseover, and so on, the second parameter is data, that is passed over the event object, the third parameter is a method, That is, the event function that handles the binding. This is one of our special events, and here is an example of an animation, that is, the display or hiding of text information, before we have learned show () and hide () we generally follow the first way to write, The definition of a variable of type bool, it is still very simple to write, but in the write Show hidden time processing button is quite annoying, so after learning Show () and hide () is much simpler, is directly can hide and display. Can be compared, obviously in the code to deal with the simple.
three. Toggle events and Event bubbling, etc.
<script>$ (function () {$ ("Input[type=button]"). Toggle (function () {//toggle Two parameters are all events and call $ (this). CS S ("BackgroundColor", "Red"); }, Function () {$ (this). CSS ("BackgroundColor", "Yellow"); }); }); $ (function () {$ ("div"). each (function () {$ (this). Bind ("MouseUp", function (e) {alert (E.pagex); Outputs the X-direction position of the mouse alert (e.pagey); Outputs the Y-direction position 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-tag link alert (e.keycode);//keyboard get its Ask code }); }); $ (function () {$ ("#ouuerdiv" ). Click (function () {alert (this ). text ());}); $ ("#div" ). Click ( function () {Alert ($ (this ). text ());}); $ ("#innerdiv"). Click (function () {///Here is a bubbling phenomenon that writes an event, 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 a second event when the mouse leaves the element. Switching between two events triggers; In addition to the event bubbling, event bubbling is simply understood as: there can be multiple events on a page, or multiple elements corresponding to an event. Assuming that there are two elements in the page, one of the DIV elements nested within another div element and bound to a click event, then when you click inside the div element time, the external Div will also be displayed, which is the event bubbling. It is important to note that there is an event that is bound to occur, and it is easy to assume that only the inside of the Click event occurs.
four. Removing events and adding multiple events consecutively
<script> $ (function () {$ ("RemoveAll" ). Click (function () { $ ("#btn"). Unbind (); Implement remove Event }); $ ("#btn"). Bind ("click", Function () {//can add multiple events $ ("#text") consecutively. Append ("<p> I was the first to add the event </p> ;" )}). bind ("click" , Function () {$ ("#text"). Append ("< P> I am the second added event </p> ")}". Bind ("click" , Function () {$ ("#text"). Append ("<p> I am the third event added </p > ")})}); </script><body> <button id= "BTN" > Click me </button><button id= "RemoveAll" > Delete all Events </ button> <div id= "text" >div text message </div></body> above we learned the bind event, is to add an event, and Unbind is to remove the event, we can compare, hey, and for the continuous addition of multiple events is actually when you add to play an event after the continuation. Bind add event.
five. Simulation Events
The above-mentioned bind event, click event, and so on, are usually triggered by clicking a button, but there is a time when you need to simulate a user action to achieve the effect of a click, for example: When the user enters and buys a year, it triggers the Click event without the user having to click Then we will use the trigger () method to complete the simulation operation.
Six. A number of other events
<script> $ (function () {$ ("#btn" ). Click (function () {//$ ("#div"). Hide (2000); Hides the//$ ("#div") within 2 seconds. Show (2000); Displays//$ ("#div") within 2 seconds. FadeIn (2000); Enhances the opacity of the element until the element fully displays//$ ("#div"). FadeOut (2000); Reduce the opacity of the element until the element disappears completely $ ("#btn" ). Toggle (function () {$ ("div"). Slidedown (2000 ); Changes the height of the element from top to bottom display $ (this). Val ("Display" )}, function () {$ ( "Div"). Slideup (2000); Change the height of the element from bottom to top to hide $ (this). Val ("Hide" )}); }); $ ("#btn"). Click (function () {//$ ("div"). FadeTo (600,0.2);//fadeto method is suitable for 0.6s transparency is 0.2//}); }); </script><body> <div id= "div" style= "width:300px; height:300px; ">1234</div> <input type=" button "name=" name "value=" Action animation "id=" BTN "/></body>
Seven. Animation Methods
eight. Multi-line text box application-height Change
<script src= "Script/jquery-1.7.1.min.js" ></script> <style>Input:focus,textarea:focus {border:1px solid #f00; background- color: #fcc; } </style> <script> $ (function () {var comment = $ ("#comment" ); $ (". Bigger" ). Click (function () {if (Comment.height () < $ ) {Comment.height ($ ("#comment "). Height () + 100); Increased by up to the original height of }}); $ (". smaller" ). Click (function () {if (Comment.height () > + ) {comment.height ($ ("#comment"). Height ()- 100); To reduce the original height of the base of the }}); }) </script><body> <form action= "#" method= "POST" id= "RegForm" > <div class= "MSG" ><span class= "bigger" > Zoom in </span><span class= "smaller" > Zoom out </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 becomes high namely the area becomes bigger, when the click shrinks the time textarea the area to become smaller, namely realizes the animation effect.
Nine. check box apply
<script src= "Script/jquery-1.7.1.min.js" ></script> <script>$ (function () {$ ("#checkall"). Bind ("click", function () {$ (": CheckBox"). each (function () {$ (this). attr ("Checked", "checked"); Click button time to select All}); }); $ ("#checkno"). Bind ("click"), function () {$ (": CheckBox"). attr ("checked", false); Click on the button time to leave all unchecked}); $ ("#checkRev"). Bind ("click"), Function () {$ (": CheckBox" ). each (function () {if ($ (). attr ("checked") = = "Checked" ) {$ (this). TR ("Checked", False ),} else {$ (this). attr ("Checked", true);//Click on the button time to select the clear, unchecked selected }); }); Or: $ (this). attr ("Checked",!$ (This). attr ("checked" );}); </script><body> <form> your favorite sport? <br/> <input type= "checkbox" name= "names" value= "soccer"/> 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 not selected"/><br/> & Lt;input type= "button" id= "Checkrev" value= "Reverse selection"/><br/> <input type= "button" name= "Send" value= "commit"/>&L T;BR/></form></body>
It should be noted 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 is true, the description is selected, and if False, the description is not selected.
10. Application of drop-down box
<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 "> Options 2</option> <option Value= "3" > Options 3</option> <option value= "4" > Options 4</option><option value= "5" > Options 5</option ><option value= "6" > Options 6</option> <option value= "7" > Options 7</option><option value= "8" > Option 8</option><option value= "9" > Options 9</option> </select> <div> <span id= "Add" > Add to Right </span> <span id= "AddAll" > Add all to the right </span> </div> </div> <div class= "center" style= " Float:right "> <select multiple=" multiple "id=" Select2 "style=" width:100px; height:160px "> </select> </div>
the above action is implemented in the left click on the selected item, and then added to the right of the box, you can add one by one, or you can add all at once.
11. Application of Forms
<script src= "Script/jquery-1.7.1.min.js" ></script> <style>. even {background-Color: #fff38f; }. Odd {background-Color: #ffffee; } </style> <script>$ ("#table tr:odd"). AddClass ("odd"); Select the number of rows with an odd index of $ ("#table Tr:even:not (: First)"). AddClass ("even"); Select an even number of rows with an index of 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 accommodation </th></tr></thead><tbody> <tr class= "parent" id= " Row1 "><td colspan=" 3 "> Foreground Design Group </td></tr> <tr class=" Child1 "><td> Zhang San </td><td > Men </td><td> zhejiang Ningbo </td></tr> <tr class= "Child1" ><td> John Doe </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> men </td><td> Hunan Changsha </td ></tr> <tr class= "child2" ><td> Zhao Liu </td><td> men </td><td> Hunan Changsha </td> </tr> <tr class= "parent" id= "row3" ><td colspan= "3" > Background Development Group </td></tr> <TR class= " Child3 "><td> Sun VII </td><td> men </td><td> Hunan Changsha </td></tr> <TR class= "child3" ><td> week eight </td><td> men </td><td> Hunan Changsha </td> </tr> </ Tbody> </table></body>
The above mainly learn the simple operation of the table, hehe, today summed up here, the simple learning animation operation or to be flexible grasp, in fact, these are simple examples, we in the actual operation of course will not be such a simple, to refuel.
Events and animations in jquery
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
