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]