An article on the common methods and functions of jQuery to keep the memo.

JQuery Common Operation Implementation method

$ ("tag name")//Fetch HTML element document.getElementsByTagName ("")

$ ("#ID")//Take a single control document.getElementById ("")

$ ("div #ID")//Fetch controls in a control

$ ("#ID #ID")//controls that are taken from the control ID



$ ("tag. Class style name")//Use class to fetch control

$ ("#ID"). Val (); Take value

$ ("#ID"). Val (""); Assign value

$ ("#ID"). Hide (); Hide

$ ("#ID"). Show (); Show

$ ("#ID"). Text (); Equivalent to taking innertext

$ ("#ID"). Text (""); Equivalent to innertext= ""

$ ("#ID"). html (); Equivalent to taking innerHTML

$ ("#ID"). HTML (""); Equivalent to Innerhtml= ""

$ ("#ID"). CSS ("Properties", "values")//Add CSS style

$ ("form# form ID"). Find ("#所找控件id"). End ()//Traverse form

$ ("#ID"). Load ("*.html")//Load a file

For example:

$ ("Form#frmmain"). Find ("#ne"). CSS ("Border", "1px solid #0f0"). End ()//End () return form

. Find ("#chenes"). CSS ("Border-top", "3px dotted #00f"). End ()


$.ajax ({url: "result.aspx",//URL of the data request page

Type: "Get",//data transfer mode (GET or POST)

DataType: "HTML",//data format expected for data return (e.g. "XML", "HTML", "script", or "JSON")

Data: "Chen=h",//parameter string to pass the date, only for Get mode

timeout:3000,//Set time delay Request time

Success:function (MSG)//Trigger function when request succeeds
{
$ ("#stats"). Text (msg);
},
Error:function (msg)//function triggered when a request fails
{
$ ("#stats"). Text (msg);
}
});

$ (document). Ready (function () {});
$ ("#description"). MouseOver (function () {});

Ajax methods

$.get ("result.aspx",//URL of the data request page
{chen: "Test", Age: "25"},//parameter string for passing data
function (data) {alert ("Data Loaded:" + data);} Post-Trigger function
);
});
});

Gets the selected value of the drop-down menu

$ (#testSelect option:selected '). Text (); Fetch text value
or $ ("#testSelect"). Find (' option:selected '). Text ();
or $ ("#testSelect"). Val ();

------

Summary of function methods commonly used in jquery

Event handling

Ready (FN)

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

Role: It can greatly improve the responsiveness of Web applications. By using this method, you can immediately invoke the function you are bound to when the DOM loading is ready to be read and manipulated, and 99.99% of the 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 handler function for each matching element's specific event (like click). Play the role of event monitoring.

Toggle (FN,FN)
Code:

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

Action: Toggles the function to be called each time the click is clicked. 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, which may be used in the dynamic implementation of certain functions.

(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 a style for the specified element to achieve a dynamic style effect, which implements the code of the mouse move two-color table in the above instance.

CSS (Name,value)

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

Function: It is simple to set the value of a style property in a 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 that provides several dynamic effects that are commonly used 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]])

Role: The function used to make the animation effect, the function is very powerful, you can use this function continuously.

Find Filters

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://www.fufuok.com/>
</form>
JQuery Code:
$ ("P"). Append ($ ("input"). Map (function () {
return $ (this). Val ();
}). Get (). Join (","));
Results:
[<p>john, Password, http://www.fufuok.com/</p>]

Function: Converts a set 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, a property, a CSS style, or some other special form. This can be easily built with ' $.map () '.

Find (expr)

HTML Code:

<p><span>hello</span> how is 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 out the descendant elements of the element being processed.

Document processing

attr (Key,value)
HTML Code:

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

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

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, with the same type of method as 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 content.

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 with a structured tag 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>

Function: Deletes all child nodes in the matching element collection.

Ajax processing

Load (Url,[data],[callback])
URL (String): The URL of the HTML page to be loaded in.
Data (MAP): (optional) Key/value data sent to the server.
Callback (callback): (optional) callback function when loading succeeds.

Code:

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

Function: Loads the remote HTML file code and inserts it into the DOM. This is also the most common and effective way for jquery to operate 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 to a string. Used 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-purpose example of a method that can be used to sample 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
First

Function: Converts a class array object to an object that is a group. Allows us to flexibly convert between arrays and objects.

Jquery.trim (str)
Role: This should be familiar, is to remove the beginning and end of the string space.