A summary of the daily usage techniques of jquery

Introduction of jquery daily practical skills, hope to be helpful to everyone.

1. References to page elements
The $ () reference element in jquery includes methods such as ID, class, element name, and hierarchy of elements and Dom or XPath conditions, and the returned object is a jquery object (a collection object) that cannot directly invoke the DOM-defined method.

2. The conversion of jquery object and Dom object
Only jquery objects can use the method defined by jquery. Note that there is a difference between a DOM object and a jquery object, and the method is invoked with a DOM object or a jquery object in mind.
Ordinary DOM objects can generally be converted to jquery objects by $ ().
such as: $ (document.getElementById ("MSG") is a jquery object, you can use the method of jquery.
Because the jquery object itself is a collection. So if the jquery object is to be converted to a DOM object, one of these items must be removed, which is generally accessible through the index.
such as: $ ("#msg") [0],$ ("div"). EQ (1) [0],$ ("div"). get () [1],$ ("TD") [5] These are DOM objects, you can use the methods in DOM, but you can no longer use the jquery method.
The following are the correct ways to do this:
$ ("#msg"). html ();
$ ("#msg") [0].innerhtml;
$ ("#msg"). EQ (0) [0].innerhtml;
$ ("#msg"). Get (0). InnerHTML;

3, how to get a jquery collection of an item
For an acquired collection of elements, getting an item (specified by index) can be obtained by using an EQ or get (n) method or an index number, noting that the EQ returns a jquery object, while get (n) and the index return the DOM element object. For jquery objects, only jquery can be used, and DOM objects can only use the DOM method, such as to get the contents of the third

element. There are two ways to:
$ ("div"). EQ (2). html (); Methods to invoke the JQuery object
$ ("div"). Get (2). InnerHTML; Method properties that call the DOM

4, the same function to implement set and get
This is true of many of the methods in jquery, including the following:
$ ("#msg"). html (); Returns the HTML content of an element node with the ID MSG.
$ ("#msg"). HTML ("new content");
Writes "new content" as an HTML string to the element node content with the ID msg, and the page displays the bold new content

$ ("#msg"). Text (); Returns the textual content of the element node with the ID MSG.
$ ("#msg"). Text ("new content");
To write "new content" as an ordinary text string to the element node content with the ID msg, the page displays the new content

$ ("#msg"). Height (); Returns the height of an element with the ID msg
$ ("#msg"). Height ("300"); Set the height of the element with ID msg to 300
$ ("#msg"). width (); Returns the width of an element with the ID msg
$ ("#msg"). Width ("300"); Set the width of the element with ID msg to 300

$ ("input"). Val ("); Returns the value of the form's input box
$ ("input"). Val ("Test"); Set the value value of the form input box to test

$ ("#msg"). Click (); Click event that triggers the element with the ID msg
$ ("#msg"). Click (FN); Click event Add function for element with ID msg
The same Blur,focus,select,submit event can have two methods of calling

5. Set Processing function
jquery has provided a convenient way for us to handle collections that are returned by jquery without having to iterate over each of them and do the processing for each object separately.
Includes two different forms:
$ ("P"). each (function (i) {this.style.color=[' #f00 ', ' #0f0 ', ' #00f ' [i]})
Set different font colors for the P element for the index, respectively, for 0,1,2.

$ ("tr"). each (function (i) {this.style.backgroundcolor=[' #ccc ', ' #fff '][i%2]})
To achieve the alternate color effect of the table

$ ("P"). Click (function () {Alert ($ (this). html ())})
Add the Click event for each P element, and click a P element to eject its contents

6, expand the functions we need
$.extend ({
Min:function (A, b) {return a < b?a:b;},
Max:function (A, b) {return a > b?a:b;}
}); Expanded the Min,max two methods for jquery
Using the extended method (called by the "$. Method Name"):
Alert ("a=10,b=20,max=" +$.max (10,20) + ", min=" +$.min (10,20));

7, support method of ligatures
The so-called ligatures, that is, a jquery object can be continuously invoked in a variety of different methods.
For example:
$ ("P"). Click (function () {Alert ($ (this). html ())})
. MouseOver (function () {alert (' Mouse over event ')})
. each (function (i) {this.style.color=[' #f00 ', ' #0f0 ', ' #00f ' [i]});

8, the style of manipulating elements
Mainly include the following ways:
$ ("#msg"). CSS ("background"); Returns the background color of an element
$ ("#msg"). CSS ("Background", "#ccc")//Set element background to Gray
$ ("#msg"). Height (300); $ ("#msg"). Width ("200"); Set width high
$ ("#msg"). CSS ({color: "Red", Background: "Blue"});//Set style as a name-value pair
$ ("#msg"). AddClass ("select"); Add a class with the name select to the element
$ ("#msg"). Removeclass ("select"); Delete class with element name as Select
$ ("#msg"). Toggleclass ("select"); Delete (Add) class with Name Select if present (not present)

9, the perfect event handling function
jquery has provided us with a variety of event-handling methods where we do not have to write events directly on HTML elements, but we can add events directly to objects obtained through jquery.
Such as:
$ ("#msg"). Click (function () {alert ("good")})//Add a clicked event to the element
$ ("P"). Click (function (i) {this.style.color=[' #f00 ', ' #0f0 ', ' #00f ' [i]})
Set different processing for three different P-element click events
Several custom events in jquery:
(1) Hover (FN1,FN2): A method that mimics a hover event (the mouse moves over an object and removes the object). When the mouse is moved above a matching element, the first specified function is triggered. When the mouse moves out of this element, the specified second function is triggered.
When the mouse is placed on a row of the table, the class is set to over and left out.
$ ("tr"). Hover (function () {
$ (this). addclass ("over");
},
function () {
$ (this). AddClass ("Out");
});
(2) Ready (FN): Binds a function to be executed when the DOM is loaded ready to be queried and manipulated.
$ (document). Ready (function () {alert ("Load Success")})
Page loading prompts "load Success", equivalent to the OnLoad event. Equivalent to $ (FN)
(3) Toggle (EVENFN,ODDFN): Switch the function 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. Successive calls to the two functions are repeated on each subsequent click.
Rotate to add and remove class named selected on each click.
$ ("P"). Toggle (function () {
$ (this). AddClass ("selected");
},function () {
$ (this). Removeclass ("selected");
});
(4) Trigger (EventType): Triggers a class of events on each matching element.
For example:
$ ("P"). Trigger ("click"); Triggers the Click event for all P elements
(5) Bind (EVENTTYPE,FN), Unbind (EventType): Binding of events and bound
Deletes the bound event from each matching element (added).
For example:
$ ("P"). Bind ("click", Function () {Alert ($ (this). text ()); Add a click event for each P element
$ ("P"). Unbind (); Delete all events on all P elements
$ ("P"). Unbind ("click")//Delete click events on all P elements

10, several practical special effects function
where the toggle () and Slidetoggle () methods provide state switching capabilities.
such as the toggle () method includes the Hide () and show () methods.
The Slidetoggle () method includes the Slidedown () and Slideup methods.

11. Several useful jquery methods
$.browser. Browser type: detects browser type. Valid parameters: Safari, Opera, MSIE, Mozilla. If detection is Ie:$.browser.isie, ie browser returns TRUE.
$.each (obj, fn): a common iterative function. Can be used to approximate iterating over objects and arrays (instead of loops).
Such as
$.each ([0,1,2], function (i, N) {alert ("Item #" + i + ":" + N);});
Equivalent to:
var temparr=[0,1,2];
for (Var i=0;iAlert ("Item #" +i+ ":" +temparr[i]);
}
You can also process JSON data, such as
$.each ({name: "John", Lang: "JS"}, function (i, N) {alert ("Name: + i +", Value: "+ n";});
The results are:
Name:name, Value:john
Name:lang, Value:js
$.extend (TARGET,PROP1,PROPN): Extends an object with one or more other objects, returning the object that is being extended. This is how the jquery implementation inherits.
Such as:
$.extend (settings, options);
Merge settings and options, and return the merge results to the settings, equivalent to the options inheritance setting and saving the inheritance results in setting.
var settings = $.extend ({}, defaults, options);
Merges defaults and options, and returns the merge results to the setting without overwriting the default content.
can have multiple parameters (merging multiple items and returning)
$.map (Array, fn): array mappings. Saves an item in an array (after processing the transformation) to another new array and returns the resulting new array.
Such as:
var temparr=$.map ([0,1,2], function (i) {return i + 4;});
Temparr content is: [4,5,6]
var temparr=$.map ([0,1,2], function (i) {return i > 0 i + 1:null;});
Temparr content is: [2,3]
$.merge (ARR1,ARR2): Merges two arrays and deletes duplicate items.
such as: $.merge ([0,1,2], [2,3,4])//return [0,1,2,3,4]
$.trim (str): Deletes white space characters at both ends of the string.
such as: $.trim ("Hello, how to Are you?"); Return "Hello,how Are you?" "

12, solve the custom method or other class library and jquery conflict
Most of the time we define the $ (ID) method to get an element, or some other JS class libraries such as prototype also define the $ method, if the same content together will cause the variable method definition conflict, jquery specifically provides a way to solve this problem.
Using the Jquery.noconflict () method in jquery, you can transfer the control of a variable $ to the first library that implements it or the $ method that was previously customized. When you apply jquery, you can change all of the $ to jquery, such as the original Reference object method $ ("#msg") to jquery ("#msg").
Such as:
Jquery.noconflict ();
Start using jquery
JQuery ("div p"). Hide ();
Use a different library's $ ()
$ ("content"). Style.display = ' None ';