function methods commonly used in jquery summarize __ function

jquery provides us with a number of useful methods and attributes, and summarizes some of the commonly used functions, methods. Personally think that in the www.21kaiyun.com of the purple micro-bucket constellation in the online disk development will be more commonly used, only for everyone to learn and reference.

Event Handling

Ready (FN)

Code :
$ (document). Ready (function () {
Your code here ...
})；

role : it can greatly improve the response speed of Web applications. By using this method, you can immediately call the function you are binding when DOM loading is ready to be read and manipulated, 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 : Bind an event handler function to a specific event (like click) for each matching element. Play the role of event monitoring.

Toggle (FN,FN)
Code:

$ ("TD"). Toggle (
function () {
$ (this). AddClass ("selected");
},
function () {
$ (this). Removeclass ("selected");
}
);

function: Switch the functions you want to call each time you click. If a matching element is clicked, the first specified function is triggered, and when the same element is clicked again, the specified second function is triggered. A very interesting function that may be used when implementing certain functions dynamically.

(Like click (), focus (), KeyDown () such events are not mentioned here, those are more commonly used in development. )

appearance effect

addclass (Class) and Removeclass (class)

Code :
$ (". 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 ')});

Action : Adds or removes styles for the specified element to achieve a dynamic style effect, which implements the code for the mouse to move the Two-color table in the above instance.

css (name,value)

Code:
$ ("P"). CSS ("Color", "red");

function : It is very simple to set the value of a style attribute in the matching element. This personal feeling is somewhat similar to the AddClass (class) above.

slide (), Hide (), FadeIn (), fadeout ( ), Slideup (), Slidedown ()

Code :

$ ("#btnShow"). Bind ("click", Function (event) {$ ("#divMsg"). Show ()});
$ ("#btnHide"). Bind ("click", Function (evnet) {$ ("#divMsg"). Hide ()});

role : A function of the more commonly used dynamic effects provided in jquery. You can also add Parameters: Show (Speed,[callback]) displays all matching elements in an elegant animation, and optionally triggers a callback function when the display is complete.

animate (Params[,duration[,easing[,callback]])

function: Make animation effect to use functions, the function is very powerful, you can use this function continuously.

Find Filter

Map (callback)
HTML Code:
<p><b>values: </b></p>
<form>
<input type= "text" name= "name" value= "John"/>
<input type= "text" name= "password" value= "password"/>
<input type= "text" name= "url" value= "http://ejohn.org/%22/>
</form>
JQuery Code:
$ ("P"). Append ($ ("input"). Map (function () {
return $ (this). Val ();
}). Get (). Join (","));
Results:
[<p>john, Password, http://ejohn.org/%3c/p>]

Action : Converts a set of elements into other arrays, whether or not an element array, you can use this function to create a list, whether it's a value, a property, a CSS style, or some other special form. This can be used ' $.map () ' to facilitate the establishment.

Find (expr)

HTML Code:

<p><span>hello</span>, how are you?</p>
JQuery Code:

$ ("P"). FIND ("span")
Results:

[<span>Hello</span>]

function : Searches for all elements that match the specified expression. This function is a good way to find the descendant elements of the element being processed.

Document Processing

attr (Key,value)
HTML Code:

JQuery Code:
$ ("img"). attr ("src", "test.jpg");

function : Gets or sets the property value of the matching element. This method makes it easy to get the value of a property from the first matching element. Returns undefined if the element does not have a corresponding property. is an essential tool for controlling HTML tags.

HTML ()/html (Val)
HTML Code :
<div><p>Hello</p></div>
JQuery Code :
$ ("div"). html ();
Results:
<p>Hello</p>

function : Gets or sets the HTML content of the matching element, and the same type of method has text () and Val (). The former is the content that gets all the matching elements. , which is the current value for the matching element. The three have similar places commonly used in the operation of the contents.

Wrap (HTML)
HTML Code:
<p>test paragraph.</p>
JQuery Code:
$ ("P"). Wrap ("<div class= ' wrap ' ></div>");
Results:
<div class= "Wrap" ><p>test paragraph.</p></div>

function : Wrap all matching elements in a structured notation of other elements.
This wrapper is most useful for inserting additional structured markup into a document, and it does not break the semantic quality of the original document. We have the flexibility to modify our DOM.

Empty ()
HTML Code:
<p>hello, <span>Person</span> <a href= "#" >and person</a></p>
JQuery Code:
$ ("P"). empty ();
Results:
<p></p>

Action : Deletes all child nodes in a matching set of elements.

Ajax Processing

Load (Url,[data],[callback])
URL (String): To be loaded into the HTML Web site.
Data (MAP): (optional) Key/value to the server.
Callback (callback): (optional) callback function when successfully loaded.

Code:

$ ("#feeds"). Load ("Feeds.aspx", {limit:25}, function () {
Alert ("The last entries in the feed have been loaded");
});

function : Loads the remote HTML file code and inserts it into the DOM. This is also the most common and effective method of jquery operation Ajax.

Serialize ()
HTML Code:
<p id= "Results" ><b>results: </b> </p>
<form>
<select name= "single" >
<option>Single</option>
<option>Single2</option>
</select>
<select name= "multiple" multiple= "multiple" >
<option selected= "Selected" >Multiple</option>
<option>Multiple2</option>
<option selected= "Selected" >Multiple3</option>
</select><br/>
<input type= "checkbox" name= "Check" value= "Check1"/> Check1
<input type= "checkbox" name= "Check" value= "Check2"
checked= "Checked"/> Check2
<input type= "Radio" name= "Radio" value= "Radio1"
checked= "Checked"/> Radio1
<input type= "Radio" name= "Radio" value= "Radio2"/> Radio2
</form>
JQuery Code:
$ ("#results"). Append ("<tt>" + $ ("form"). Serialize () + "</tt>");

function : Serializes the contents of a table as a string. For Ajax requests.

Tools

Jquery.each (obj,callback)

Code :
$.each ([0,1,2], function (i, n) {
Alert ("Item #" + i + ":" + N);
});//traversal array
$.each ({name: "John", Lang: "JS"}, function (i, n) {
Alert ("Name: + i +", Value: "+ n")//Traverse Object
});

function : A general method of routine, which can be used for the example of objects and arrays.

Jquery.makearray (obj)
HTML Code:
<div>first</div><div>second</div><div>third</div><div>fourth</div >
JQuery Code:
var arr = Jquery.makearray (document.getElementsByTagName ("div"));
Results:
Fourth
Third
Second
The

function : Converts an Array object of a class to an object. Allows us to make flexible conversions between arrays and objects.

Jquery.trim (str)

Role : This should be very familiar to you, is to remove the beginning and end of the string space.

Summary: In the actual development, we may find that the 21st century transport network to use other methods and attributes, the above is only a personal thought of the novice when jquery, must master some of the methods. Only for everyone to learn the reference. What is wrong with the expert advice.