Jquery study Note 2

Chapter 4 events and animations in jquery

Load Dom $ (window ). load (function () {// triggered when the handler is bound to all the content of the window object after loading. // triggered after the element content is loaded if it is bound to the element }) bind the event Bin (type [, data], FN); // This event merging event hover (enter, leave), such as click Mouseover mouseout ); // simulate cursor hover event move cursor to element trigger enter remove element trigger leavetoggle (fn1, FN2 ,... FNN); // trigger the FN2 event bubble by clicking the first trigger function fn1 continuously $ ("element "). BIND ("click", function (event) {// event object event. stoppropagation (); // stop the event bubble event. preventdefault (); // block the default action return false; // return false} is also available) event object attribute event. type () // obtain the event type event. preventdefault () // block the default event. stoppropagation () // stop event impersonate event.tar get () // gets the event element. relatedtarget () // event. pagex () // obtain the X and Y coordinates event of the cursor relative to the page. pagey () event. which () // right-click the event to get the right-click the event and right-click the event to get the event. metakey () // obtain the ctrl key event. originalevent () // point to the original event object to remove the event unbind ([type] [, data]) // The first parameter is the event type. The second parameter is the function to be removed $ ("Div "). unbind ("click"); trigger () $ ("# BTN "). trigger ("click") // simplify $ ("# BTN "). click () in jquery, the animation show () // slow normal fast1000 millisecond = 1 second hide () fadein () // Changes the transparency of the element fadeout () slideup () // adjust the original height slidedown () Custom Animation animate (Params, speed, callback); $ (function () {$ ("# panel "). click (function () {$ (this ). animate ({left: "500px", height: "500px"}, 3000); // move the element 500 pixels to the right in 3 seconds}) Stop () // stop the animation: Animate // obtain the animation element other animation Methods toggle (speed, [callback]) // hide slidetoggle (speed, [callback]) fadeto (speed, opacity, [callback])

　　

Chapter 2 jquery operations on form tables and more applications

 

Form application focus () // get focus blur () // lose focus keyup () // trigger find () // search element ATTR () when the keyboard is released () // element attribute $ (function () {$ (": Input "). focus (function () {$ (this ). addclass ("fucos ");}). blur (function () {$ (this ). removeclass ("fucos ");});}) apply the <form> <label> <input type = "checkbox" name = "items" value = ""/> soccer </label> <input type =" checkbox "name =" items "value =" basketball "/> basketball </label> <input type =" checkbox "name =" items "value =" badminton "/> badminton </label> <Label> <input type = "checkbox" name = "items" value = "ice hockey"/> ice hockey </label> <br/> <label> <input type = "checkbox ""Name =" checkedall "id =" checkedall "value =" "/> select all or not </label> <input type =" button "id =" checkedrev "value =" invert selection "/> <input type =" button "id =" send "value =" Submit "/> </form> <SCRIPT >$ (function () {$ ("# checkedall "). click (function () {If (this. checked) {$ ("[name = items]: checkbox "). ATTR ('checked', true);} else {$ ("[name = Items]: checkbox "). ATTR ('checked', false) ;}}); // reselect $ ("# checkedrev "). click (function () {$ ("[name = items]: checkbox "). each (function () {This. checked =! This. checked;}); // submit $ ("# Send "). click (function () {var STR = ""; $ ("[name = items]: checkbox: checked "). each (function () {STR + = $ (this ). val () + "\ n" ;}) alert (STR );});}) </SCRIPT> drop-down box <form> <select multiple = "multiple" id = "S1" name = "select" style = "height: 200px; width: 100px; "> <option value =" 1 "> option1 </option> <option value =" 2 "> option2 </option> <option value =" 3 "> option3 </Option> <option value = "4"> option4 </option> <option value = "5"> option5 </option> <option value = "6"> option6 </option> <option value = "7"> option7 </option> <option value = "8"> option8 </option> <option value = "9"> option9 </option> </SELECT> <input type = "button" id = "toright" value = ">"/> <input type = "button" id = "torightall" value = "All>> "/> <select multiple =" multiple "id =" S2 "name =" select "style =" height: 200px; width: 100px; "> </SELECT> <input type =" button "id =" toleft "value =" <"/> <input type =" button "id =" toleftall "value = "<all"/> </form> <SCRIPT >$ (function () {$ ("# toright "). click (function () {var $ option = $ ("# S1 option: Selected"); $ option. appendto ("# S2") ;}; $ ("# torightall "). click (function () {var $ option = $ ("# S1 option"); $ option. appendto ("# S2") ;}; $ ("# S1 "). dblclick (function () {var $ option = $ ("option: Selected", this); $ option. appendto ("# S2") ;}; $ ("# toleft "). click (function () {var $ option = $ ("# S2 option: Selected"); $ option. appendto ("# S1") ;}; $ ("# toleftall "). click (function () {var $ option = $ ("# S2 option"); $ option. appendto ("# S1") ;}; $ ("# S2 "). dblclick (function () {var $ option = $ ("option: Selected", this); $ option. appendto ("# S1") ;}}) </SCRIPT>