Common techniques for jquery-a great broadcast

1. References to page elements

The $ () reference element through jquery includes methods such as the ID, class, element name, and the hierarchy of elements and Dom or XPath conditions, and the returned object is a JQuery object (collection Object) and cannot be called directly by the DOM-defined method.

2. The conversion of JQuery objects to DOM objects

Only jquery objects can use the method defined by jquery. Note that DOM objects are different from jquery objects, and you should be aware of whether you are manipulating DOM objects or jquery objects when calling methods.
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 a jquery object is to be converted to a DOM object, it must take one of these items, which is generally available 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 the DOM, but you can't 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 an item of the jquery collection

For a collection of captured elements, getting one of these items (specified by index) can be obtained using the EQ or get (n) method or index number, note that the EQ returns the JQuery object, and the Get (n) and the index return the DOM element object.

jquery can only be used for jquery objects, whereas DOM objects can only use the DOM method, such as to get the contents of a third <div> element. There are two ways to do this:

$ ("div"). EQ (2). html ();    // methods for invoking jquery objects // invoking the Dom's method properties

4. The same function implements set and get

Many of the methods in jquery are the same, mainly including the following:

$ ("#msg"). html ();//returns the HTML content of an element node with an ID of MSG. $ ("#msg"). HTML ("<b>NewContent</b> ");//writes "<b>new content</b>" as an HTML string to the element node content with ID msg, and the page displays a bold new content$ ("#msg"). Text (); //returns the text content of an element node with an ID of MSG. $ ("#msg"). Text ("<b>NewContent</b> ");//writes "<b>new content</b>" as a plain text string in the element node content with ID msg, and the page displays <b>new content</b>$ ("#msg"). Height (); //Returns the height of an element with an ID of msg$ ("#msg"). Height ("300″");//set the height of the element with ID msg to$ ("#msg"). width ();//Returns the width of an element with an ID of msg$ ("#msg"). Width ("300″");//set the width of the element with ID msg to$ ("input"). Val (");//returns the value of the form input box$ ("input"). Val ("Test");//set the value of the form input box to test$ ("#msg"). Click ();//Trigger Click event for an element with ID msg$ ("#msg"). Click (FN);//add function for element with ID msg Click event

5. Set Processing function

For the collection content returned by jquery without our own loop traversal and processing of each object individually, jquery has provided a convenient way for us to handle the collection.
There are two different forms:

$ ("P"). each (function(i) {this. style.color=[' #f00 ', ' #0f0 ', ' #00f '][i]}    )//  sets a different font color for the P elements indexed by 0,1,2 respectively.  $ ("tr"). Each (function(i) {this. style.backgroundcolor=[' #ccc ', ' #fff '][i%2]})     // to implement a table's interlaced color change effect $ ("P"). Click (function() {alert (this). html ())}    ) // A Click event is added for each P element, and a P element pops up its contents

6, expand the functions we need

$.extend ({    function(A, b) {return a < b ) A:B; },    function(A, b) {return a > b?  // expanded the Min,max two methods for jquery.     Use the extended method (called by "$. Method Name"): Alert ("A=10,b=20,max=" +$.max (10,20) + ", min=" +$.min (10,20));

7. Ligatures of support methods

The so-called ligatures, that is, a jquery object can be continuously called 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. Style of Operation elements

$ ("#msg"). CSS ("background");    // returns the background color of an element // set element background is gray // Set the width high $ ("#msg"). CSS ({color: "Red", Background: "Blue"}); // styling in the form of a name value pair // adds a class with the name select for the element // remove the class with the element name of select // Delete (Add) class with Name Select if present (not present)

9. Resolving conflicts between custom methods or other class libraries and jquery

Many times we have defined the $ (ID) method to get an element, or some other JS class library such as prototype also defined the $ method, if you put together these elements will cause variable method definition conflict, jquery specifically provides a way to solve this problem.
Use the Jquery.noconflict () method in jquery to pass control of the variable $ to the first library that implements it or to the previously customized $ method. Then when applying jquery, just replace all of the $ with jquery, such as the original Reference object method $ ("#msg") to jquery ("#msg").
Jquery.noconflict ();
Get started with jquery
JQuery ("div p"). Hide ();
Use $ () for other libraries
$ ("content"). Style.display = ' None ';

　　

Common techniques for jquery-a great broadcast