jquery Common practical events [more easily overlooked method]

Source: Internet
Author: User

                     Common practical events for jquery

Note: Because more jquery fragments are not inserted with insert code text, please forgive me!
JQuery Event Handling
Ready (FN)
Code:
$ (document). Ready (function () {
});
Role: It can greatly improve the responsiveness of Web applications. By using this method, the DOM loading is ready to be read and manipulated.
Immediately call the function you are bound to, and 99.99% of the JavaScript function needs 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 on each click. If a matching element is clicked, the first specified function is triggered, and when the

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

jquery appearance effect
AddClass (Class) and Removeclass (Class)
code:
$ (". stripe tr "). MouseOver (function () {



can also be written like this:
$ (". Stripe tr"). MouseOver ( Function () {$ (this). addclass ("Over")});
$ (". Stripe tr"). Mouseout (function () {$ (this). Removeclass ("Over")}
Span style= "font-size:15px;" > effect: Adds or removes a style for the specified element, enabling a dynamic style effect that implements the
code

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 and the above addclass (class) have
Point similar.

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]) with excellent
Ya's animation displays all matching elements and optionally triggers a callback function after 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 (expr)
HTML Code:
< span>hello</span>

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:
< img>< img>

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>
Hello

</div>
JQuery Code:

$ ("div"). html ();

Results:

Hello

Function: Gets or sets the HTML content of the matching element, with the same type of method as text () and Val (). The former is to get all the matching elements within the
Capacity. , which is the current value for the matching element. The three have similar places commonly used in the operation of content.


callback function at work time.

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:

Results:

< form>
< Select Name=single > < OPTION selected>single</option>
< Option>single2 </option> </select>
< Select multiple Name=multiple> < OPTION selected>multiple</option>
< Option>multiple2 </option> < OPTION selected>multiple3</option> </select>

< INPUT value=check1 Type=checkbox name=check> check1
< INPUT Value=check2 Type=checkbox Name=check
checked= "Checked"/> Check2
< INPUT value=radio1 Type=radio Name=radio
checked= "Checked"/> Radio1
< INPUT Value=radio2 Type=radio name=radio> 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:

First
< div>second</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.

Summary: In the actual development we may use other methods and properties, the above is only a personal think novice beginner jquery, must palm
Grip of some methods. A reference for everyone to learn. What's wrong with the expert advice.

jquery Common practical events [more easily overlooked method]

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.