A summary of common operation implementations and common function methods in JQuery _jquery

How jQuery common operations are implemented

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

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

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

$ ("#ID #ID")//control by Control ID

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

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

$ ("#ID"). Val (""); assigning values

$ ("#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", "value")//Add CSS Styles

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

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

For example:

$ ("Form#frmmain"). Find ("#ne"). CSS ("Border", "1px solid #0f0"). 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",//expecting data to be returned in data format (e.g. "XML", "HTML", "script", or "JSON")

Data: "Chen=h",///pass parameter string for the datum, only for Get way

timeout:3000,//Set time delay request

Success:function (MSG)//Trigger function when request is successful
{
$ ("#stats"). Text (msg);
},
Error:function (MSG)//functions that are 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"},///pass parameter string of data
function (data) {alert ("Data Loaded:" + data);} The function after the trigger
);
});
});

Get the selected value of the dropdown menu

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

Summary of common function methods in jquery

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

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.