Summary of common operation methods and common functions of jQuery

An article about jQuery methods and functions.

JQuery is a common implementation of operations

$(" tag ") / / take elements of an HTML document. The getElementsByTagName (" ")

$("#ID") // takes a single control document.getelementbyid ("")

$("div #ID") // takes a control in a control

$("#ID #ID") // gets the control from the control ID

$(" tag.class style name ") // gets the control through class

$(" # ID "). Val (); / / the value value

$(" # ID "). Val (" "); / / assignment

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

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

$(" # ID "). The text (); // is the same thing as taking innerText

$(" # ID "). The text (" "); // is the same thing as innerText=""

$(" # ID "). The HTML (); // is the same thing as taking innerHTML

$(" # ID "). The HTML (" "); // is the same thing as innerHTML=""

$("#ID").css(" properties "," values ") // add CSS style

$("form# form id").find(" control id").end() // traverses the form

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

Such as:

$("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", //The url of the data request page

type:"get", //Data transfer mode (get or post)

dataType:"html", //The format in which the data is expected to be returned (such as "XML "," HTML ", "script", or "json")

data: "chen=h", //The parameter string that passes the data, suitable only for the get mode

timeout:3000, //Sets the time to delay the request

success:function(msg)//The function fires when the request succeeds
{
$("#stats").text(msg);
},
error:function(msg) //The function that fires when a request fails
{
$("#stats").text(msg);
}
});

$(document).ready(function(){});
$("#description").mouseover(function(){});

//Ajax method

$.get( "Result.aspx", //The url of the data request page
{ chen: " test ",age:"25"}, //The parameter string that passes the data
function(data){ alert("Data Loaded: " + data); } //The triggered function
);
});
});

//Gets the selected value of the drop-down menu

$(#testSelect option:selected').text(); //Get the text value
 or $("#testSelect").find('option:selected').text();
 or $("#testSelect").val();

------

Summary of the commonly used function methods in jQuery

The event processing

Ready (fn)

Code:

$(document).ready(function(){
// Your code here...
}) ; 

What it does: it can greatly improve the responsiveness of web applications. Using this method, you can call your bound function as soon as the DOM is loaded and 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() );
});

Action: binds an event handler function to a specific event (like click) for each matched element. To 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 with each click. If a matching element is clicked, the specified first function is fired, and when the same element is clicked again, the specified second function is fired. It's an interesting function that you might use when you implement something dynamically.

(events like click(),focus(), and keydown() are not mentioned here, which are commonly used in development.)

appearance

AddClass (class) and removeClass (class)

Code:

$(".stripe tr").mouseover(function(){ 
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
});

It can also be written:

$(".stripe tr").mouseover(function() { $(this).addClass("over") });
$(".stripe tr").mouseout(function() { $(this).removeClass("over") });

Action: adds or removes styles to a specified element to achieve a dynamic style effect. In the example above, the code to move the mouse over a two-color table.

CSS (name, value)

Code:
$(" p "). The CSS (" color ", "red");

Action: simply sets the value of a style attribute in the matched element. This individual feels a bit like addClass above.

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

Code:

$("#btnShow").bind("click",function(event){ $("#divMsg").show() });
$("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() });

Effects: several of the more commonly used dynamic effects functions provided in jQuery. You can also add parameters: show(speed,[callback]) to show all matched elements in an elegant animation and optionally trigger a callback function when the display is complete.

The animate (params [, duration, much [, callback]]])

Effect: animation effects used in the function, the function is very powerful, you can continue to use this function.

Look for screening

The map (the 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>]

Converts a set of elements to another array (whether an array of elements or not) you can use this function to create a list of values, attributes, CSS styles, or other special forms. This can all be easily set up using '$.map()'.

Find (expr)

HTML code:

< P> < Span> Hello< / span> How you & # 63; < / p>
JQuery code:

$(" p "). The find (" span ")
Results:

[< span> Hello< / span>]

Effect: searches for all elements that match the specified expression. This function is a good way to find the descendants of the elements you are working with.

Document processing

Attr (key, value)
HTML code:
< Img / > < Img / >
JQuery code:
$(" img "). Attr (" SRC ", "test. JPG");

Gets or sets the attribute value of the matching element. This method makes it easy to get the value of an attribute from the first matched element. If the element has no corresponding attributes, undefined is returned. It is an essential tool for controlling HTML markup.

HTML ()/HTML (val)
HTML code:
< Div> < P> Hello< / p> < / div>
JQuery code:
$(" div "). The HTML ();
Results:
< P> Hello< / p>

Action: gets or sets the HTML content of a matching element, as well as text() and val(). The former is the content that gets all the matching elements. , which is to get the current value of the matched element. The similarities between the three are often found in the manipulation of content.

Wrap (HTML)
HTML code:
< P> The Test com.lowagie.text.paragraph. < / p>
JQuery code:
$(" p "). Wrap (" < Div class = 'wrap' > < / div>" );
Results:
< Div class = "wrap" > < P> The Test com.lowagie.text.paragraph. < / p> < / div>

Action: wraps all matched elements in a structured tag of other elements.
This wrapper is most useful for inserting additional structural markup into the document, and it does not break the semantic quality of the original document. We can modify our DOM flexibly.

The empty ()
HTML code:
< P> Hello, < Span> Person< / span> < A href = "#" > And person< / a> < / p>
JQuery code:
$(" p "). The empty ();
Results:
< P> < / p>

Action: deletes all child nodes in the set of matched elements.

Ajax handling

Load (url, [data], [callback])
Url (String) : HTML web address to load.
Data (Map) : (optional) key/value data sent to the server.
Callback: (optional) the callback function loads successfully.

Code:

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

Action: loads the remote HTML file code and inserts it into the DOM. This is also the most common and effective way Jquery works with 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>" );

Effect: serializes the table contents as a string. Used for Ajax requests.

tool

JQuery. Each (obj, callback)

Code:

$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});//Through the array
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );//Traverse object
});

Role: general example traversal method, can be used to example over 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
The Second
First

Effect: converts a class array object to an array object. Allows us to flexibly convert between arrays and objects.

JQuery. Trim (STR)

Action: this should be familiar to you, is to remove the beginning and end of the string space.