An excellent JavaScript framework and an article on jQuery's common methods and functions are retained. Common jQuery operations $ (& quot; Tag Name & quot;) use the html element documentgetElementsByTagName (& quot;) $ (& quot; ID & quot ;) take a single control documentgetElem, an excellent JavaScript framework, and an article on jQuery's common methods and functions. Common jQuery operations $ ("tag name") // obtain the html element document. getElementsByTagName ("") $ ("# ID") // retrieve a single control document. getElementById ("") $ ("div # ID") // obtain the control in a control $ ("# ID ") // obtain the control $ ("tag. class style name ") // use class to obtain the control $ (" # ID "). val (); // get the value $ ("# ID "). val (""); // value $ ("# ID "). hide (); // hide $ ("# ID "). show (); // display $ ("# ID "). text (); // equivalent to taking innerHTML $ ("# ID "). text (""); // equivalent to innerHTML = "" $ ("# ID" ).css ("attribute", "value") // Add a CSS style $ (" M # Form id "). find ("# Control id "). end () // traverse the form $ ("# ID "). load ("*. html ") // load a file, for example, $ (" form # frmMain "). find ("# ne" ).css ("border", "1px solid #0f0 "). end () // end () returns the form. find ("# chenes" ).css ("border-top", "3px dotted # 00f "). end () $. ajax ({url: "Result. aspx ", // url type of the data request page:" get ", // data transmission method (get or post) dataType:" html ", // The format of the data to be returned (for example, "xml", "html", "script", or "json") data: "chen = h ", // The parameter string for data transmission. It is only applicable to the get method timeou. T: 3000, // set the request time delay success: function (msg) // trigger the function when the request is successful {$ ("# stats "). text (msg) ;}, error: function (msg) // function triggered when the request fails {$ ("# stats "). text (msg) ;}}); $ (document ). ready (function () {}); $ ("# description "). mouseover (function () {}); // ajax method $. get ("Result. aspx ", // url of the data request page {chen:" test ", age:" 25 "}, // function (data) {alert ("Data Loaded:" + data) ;}// triggered function );});}); // obtain the selected value from the drop-down list $ (# testSelect option: selec Ted '). text (); // get the text value or $ ("# testSelect "). find ('option: selected '). text (); or $ ("# testSelect "). val (); ------ Summary of commonly used Function Methods in jQuery event processing ready (fn) code: $ (document ). ready (function () {// Your code here ...}); function: it can greatly improve the response speed of web applications. By using this method, you can call the function you bind immediately when the DOM is ready to read and manipulate, and 99.99% of JavaScript functions need to be executed at that moment. Bind (type, [data], fn) code: $ ("p "). bind ("click", function () {alert ($ (this ). text () ;}); function: binds an event processor function to a specific event that matches an element, such as click. It serves as an event listener. Toggle (fn, fn) code: $ ("td "). toggle (function () {$ (this ). addClass ("selected");}, function () {$ (this ). removeClass ("selected") ;}); Role: Switch the function to be called each time you click. If a matching element is clicked, the specified first function is triggered. When the same element is clicked again, the specified second function is triggered. A very interesting function may be used to dynamically implement some functions. Events such as click (), focus (), and keydown () are not mentioned here. They are commonly used in development .) Code of addClass (class) and removeClass (class): $ (". stripe tr "). mouseover (function () {$ (this ). addClass ("over ");}). mouseout (function () {$ (this ). removeClass ("over") ;}}); can also be written as: $ (". stripe tr "). mouseover (function () {$ (this ). addClass ("over")}); $ (". stripe tr "). mouseout (function () {$ (this ). removeClass ("over")}); function: add or remove a style for the specified element to achieve dynamic style effect. In the above example, the code for moving the two-color table with the mouse is implemented. Css (name, value) code: $ ("p" ).css ("color", "red"); function: Very simple, that is, in the matching element, set the value of a style attribute. This personal feeling is a bit similar to the above addClass (class. Slide (), hide (), fadeIn (), fadeout (), slideUp (), slideDown () code: $ ("# btnShow "). bind ("click", function (event) {$ ("# divMsg "). show ()}); $ ("# btnHide "). bind ("click", function (evnet) {$ ("# divMsg "). hide ()}); Role: several commonly used dynamic effects functions provided in jQuery. You can also add the parameter show (speed, [callback]) to show all matching elements in an elegant animation, and trigger a callback function after the display is complete. Animate (params [, duration [, easing [, callback]): functions used to create animation effects. This function is very powerful and can be used continuously. Find and filter the map (callback) HTML code:
Values:
JQuery code: $ ("p "). append ($ ("input "). map (function () {return $ (this ). val ();}). get (). join (","); Result :[
John, password, http://www.fufuok.com/
] Function: converts a group of elements to other arrays (whether an array of elements or not). You can use this function to create a list, whether it is a value, attribute, CSS style, or other special form. You can use '$. map ()' to create a map. Find (expr) HTML code:
Hello, how are you?
JQuery code: $ ("p"). find ("span") Result: [Hello]: searches for all elements that match the specified expression. This function is a good way to find the child element of the element being processed. Document Processing attr (key, value) HTML code: jQuery code: $ ("img "). attr ("src", "test.jpg"); function: gets or sets the attribute value of the matching element. This method can be used to conveniently obtain the value of an attribute from the First Matching Element. If the element does not have a property, undefined is returned. It is a required tool for controlling HTML tags. Html ()/html (val) HTML code:
Hello
JQuery code: $ ("div" ).html (); Result:
Hello
Purpose: obtain or set the html content of the matching element. Methods of the same type include text () and val (). The former is used to obtain the content of all matching elements ., The latter is used to obtain the current value of the matching element. Similar to the three, they are often used in content operations. Wrap (html) HTML code:
Test Paragraph.
JQuery code: $ ("p"). wrap (""); Result:
Test Paragraph.
Purpose: wrap all matching elements with the structured tags of other elements. This packaging is most useful for inserting additional structured tags into a document and does not compromise the semantic quality of the original document. You can flexibly modify our DOM. Empty () HTML code:
Hello, Person and person
JQuery code: $ ("p"). empty (); Result:
Purpose: delete all child nodes in the matched element set. Ajax processing load (url, [data], [callback]) url (String): the url of the HTML webpage to be loaded. Data (Map): (optional) key/value data sent to the server. Callback (Callback): (optional) callback function when the load is successful. Code: $ ("# feeds "). load ("feeds. aspx ", {limit: 25}, function () {alert (" The last 25 entries in the feed have been loaded ");}); role: load the remote HTML file code and insert it into the DOM. This is also the most common and effective method for Jquery to operate Ajax. Serialize () HTML code:
Results:
JQuery code: $ ("# results"). append (" "+ $ (" Form "). serialize () +""); Function: serialize the table content as a string. Used for Ajax requests. JQuery tool. each (obj, callback) code: $. each ([0, 1, 2], function (I, n) {alert ("Item #" + I + ":" + n) ;}); // traverses the array $. each ({name: "John", lang: "JS"}, function (I, n) {alert ("Name:" + I + ", Value: "+ n); // traverse object}); Role: common sample method, which can be used for example object and array. JQuery. makeArray (obj) HTML code: FirstSecondThirdFourthjQuery code: var arr = jQuery. makeArray (document. getElementsByTagName ("div"); Result: FourthThirdSecondFirst converts an array object to an array object. This allows us to flexibly Convert Between arrays and objects. JQuery. trim (str): You should be familiar with this, that is, remove the spaces at the beginning and end of the string.
