Common Function Methods in jQuery

Summary of Common Function Methods in jQuery Ajax processing load (url, [data], [callback]) url (String): HTML web site to be loaded. Data (Map): (optional) key/value data sent to the server. Callback (Callback): (optional) load... Syntax

Summary of Common Function Methods in jQuery

 

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 ");
});

Purpose: 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 () +"");

Purpose: serialize the table content as a string. Used for Ajax requests.

 

Tools

JQuery. 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); // traverses an object
});

Role: common case-over method, which can be used for case-over objects and arrays.

JQuery. makeArray (obj)
HTML code:
FirstSecondThirdFourth
JQuery code:
Var arr = jQuery. makeArray (document. getElementsByTagName ("div "));
Result:
Fourth
Third
Second
First

Purpose: convert a class array object to an array object. This allows us to flexibly Convert Between arrays and objects.

JQuery. trim (str)

 

 

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 ());
});

Purpose: bind 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 ");
}
);

Purpose: 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 .)

Appearance

AddClass (class) and removeClass (class)

Code:
$ (". Stripe tr"). mouseover (function (){
$ (This). addClass ("over") ;}). mouseout (function (){
$ (This). removeClass ("over ");})
});
You can also write it as follows:
$ (". Stripe tr"). mouseover (function () {$ (this). addClass ("over ")});
$ (". Stripe tr"). mouseout (function () {$ (this). removeClass ("over ")});

Purpose: add or remove styles for the specified elements to achieve dynamic style effects. The code for moving the two-color table with the mouse is implemented in the above example.

Css (name, value)

Code:
$ ("P" ).css ("color", "red ");

Purpose: set the value of a style attribute in the matching element. This 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 ()});

 

Purpose: several commonly used dynamic effects functions provided by 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])

Function: The function used to create an animation. It is very powerful and can be used continuously.

Search and filter

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>]

Purpose: convert a group of elements into other arrays (whether it is 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]

 

Purpose: search for all elements that match the specified expression.

 

Document Processing

Attr (key, value)
HTML code:

JQuery code:
$ ("Img"). attr ("src", "test.jpg ");

Purpose: Get or set 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" pai.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.