Summary of Common Function Methods in jQuery

JQuery provides us with a lot of useful methods and attributes, and some common functions and methods we have summarized. I personally think it will be quite common in development and it is only for your learning and reference. Event processing ready (fn) code: $ (document) ready (function () {Yourcode jQuery provides us with a lot of useful methods and attributes, and summarizes some common functions, method. I personally think it will be quite common in development and it is only for your learning and reference. 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://ejohn.org/%3C/p>] function: converts a group of elements into other arrays (whether or not an array of elements) 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: FirstSecondThirdFourth jQuery 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.