JQuery common operation methods and common functions

This article mainly summarizes jQuery's common operation methods and common functions. If you need them, refer to the next document on jQuery's common methods and functions.

Common jQuery operations

$ ("Tag name") // obtain the html element document. getElementsByTagName ("")

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

$ ("P # ID") // retrieves controls in a control

$ ("# ID") // obtain the control from the Control ID

$ ("Tag. class style name") // use class to retrieve controls

$ ("# ID"). val (); // obtain the value

$ ("# ID"). val (""); // assign a value

$ ("# ID"). hide (); // hide

$ ("# ID"). show (); // display

$ ("# ID"). text (); // equivalent to taking innerText

$ ("# ID"). text (""); // equivalent to innerText = ""

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

$ ("# ID" ).html (""); // equivalent to innerHTML = ""

$ ("# ID" ).css ("attribute", "value") // Add a CSS style

$ ("Form # form id"). find ("# Control id"). end () // traverse the form

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

For example:

$ ("Form # frmMain "). find ("# ne" ).css ("border", "1px solid #0f0 "). end () // end () returns the form. find ("# chenes" ).css ("border-top", "3px dotted # 00f "). end () $. ajax ({url: "Result. aspx ", // urltype of the data request page:" get ", // data transmission method (get or post) dataType:" html ", // The format of the data to be returned (for example, "xml", "html", "script", or "json") data: "chen = h ", // The parameter string for data transmission. It is only applicable to the get method timeout: 3000. // you can specify the success: function (msg) of the time delay request) // trigger the function {$ ("# stats") when the request is successful "). text (msg) ;}, error: function (msg) // function triggered when the request fails {$ ("# stats "). text (msg) ;}}); $ (document ). ready (function () {}); $ ("# description "). mouseover (function () {}); // ajax method $. get ("Result. aspx ", // url of the data request page {chen:" test ", age:" 25 "}, // function (data) {alert ("Data Loaded:" + data) ;}// triggered function );});}); // obtain the selected value from the drop-down list $ (# testSelect option: selected '). text (); // get the text value or $ ("# testSelect "). find ('option: selected '). text (); or $ ("# testSelect "). val ();

------

Summary of Common Function Methods in jQuery

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 personal feeling is a bit similar to the above addClass (class.

Slide (), hide (), fadeIn (), fadeout (), slideUp (), slideDown ()

Code:

$("#btnShow").bind("click",function(event){ $("#pMsg").show() });$("#btnHide").bind("click",function(evnet){ $("#pMsg").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://www.fufuok.com/

]

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

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

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 the object });

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

JQuery. makeArray (obj)
HTML code:

First
Second
Third
Fourth

JQuery code:

var arr = jQuery.makeArray(document.getElementsByTagName("p"));

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)

Purpose: You should be familiar with this, that is, remove the spaces at the beginning and end of the string.