Jquery practical tips page 1/2

1. Reference of page elements
The $ () referenced element of jquery includes methods such as ID, class, element name, element hierarchy, Dom or XPath conditions, and the returned object is a jquery object (set object ), you cannot directly call methods defined by the Dom.

2. Conversion between jquery objects and DOM objects
Only jquery objects can use methods defined by jquery. Pay attention to the differences between DOM objects and jquery objects. When calling methods, pay attention to DOM objects or jquery objects.
Common DOM objects can be converted to jquery objects through $.
For example, $ (document. getelementbyid ("MSG") is a jquery object. You can use the jquery method.
Because the jquery object itself is a set. Therefore, if a jquery object is to be converted to a DOM object, You must retrieve one of them. Generally, you can retrieve it through indexes.
For example: $ ("# MSG") [0], $ ("Div "). eq (1) [0], $ ("Div "). get () [1], $ ("TD") [5] are all DOM objects. You can use methods in Dom, but you cannot use jquery methods.
The following statements are correct:
Certificate (registry.msg;#.html ();
$ ("# MSG") [0]. innerhtml;
$ ("# MSG"). eq (0) [0]. innerhtml;
$ ("# MSG"). Get (0). innerhtml;

3. How to obtain a certain entry of the jquery set
For the obtained element set, you can use the EQ or get (n) method or index number to obtain one of the items (specified by the index). Note that the returned EQ is a jquery object, get (N) and index return Dom element objects. Jquery objects can only use jquery methods, while DOM objects can only use Dom methods. For example, to obtain the third

Element Content. There are two methods:
((”Div”).eq(2).html (); // call the method of the jquery object
$ ("Div"). Get (2). innerhtml; // call the DOM method attribute

4. Implement set and get for the same function
Many methods in jquery are like this, mainly including the following:
((”Msg”).html (); // return the HTML content of the element node whose ID is MSG.
Certificate (registry.msg;).html ("new content");
// Write "new content" as an HTML string to the element node content with the ID of MSG. the bold new content is displayed on the page.

$ ("# MSG"). Text (); // return the text content of the element node whose ID is MSG.
$ ("# MSG"). Text ("new content");
// Write "new content" as a common text string to the element node content with the ID of MSG. The page displays the new content

$ ("# MSG"). Height (); // returns the height of the element whose ID is MSG.
$ ("# MSG"). Height ("300"); // set the height of the element whose ID is MSG to 300
$ ("# MSG"). Width (); // return the width of the element whose ID is msg
$ ("# MSG"). Width ("300"); // set the width of the element whose ID is MSG to 300

$ ("Input"). Val ("); // return the value of the input box of the form.
$ ("Input"). Val ("test"); // set the value of the form input box to test

$ ("# MSG"). Click (); // trigger the click event of an element whose ID is msg
$ ("# MSG"). Click (FN); // click an event to add a function for an element whose ID is msg
Similarly, blur, focus, select, and submit events can all have two call methods.

5. Set Processing
For the set content returned by jquery, we do not need to iterate through it and process each object separately. jquery has provided us with a very convenient way to process the set.
There are two forms:
$ ("P "). each (function (I) {This. style. color = ['# f00',' #0f0 ',' # 00f'] [I]})
// Set different font colors for P elements whose indexes are 0, 1 and 2 respectively.

$ ("TR"). Each (function (I) {This. style. backgroundcolor = ['# CCC', '# fff'] [I % 2]})
// Implement the Color Changing Effect of the row separation of the table

Certificate (javasp00000000.click(function({{alert(+(this0000.html ())})
// Adds a click event for each P element. Click a P element to bring up its content.

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 ;}
}); // Added the min and Max methods for jquery.
Use an extended method (called by "$. Method Name ):
Alert ("A = 10, B = 20, max =" + $. Max (10, 20) + ", min =" + $. Min (10, 20 ));

7. method-based writing
The so-called continuous writing means that different methods can be called continuously for a jquery object.
For example:
Certificate (javasp00000000.click(function({{alert(+(this0000.html ())})
. Mouseover (function () {alert ('mouse over event ')})
. Each (function (I) {This. style. Color = ['# f00',' #0f0 ',' # 00f'] [I]});

8. Operation element styles
mainly include the following methods:
examples (?msg=}.css ("background "); // return the background color of the element
background ("#msg”).css ("background", "# CCC") // set the background color of the element to gray
$ ("# MSG "). height (300); $ ("# MSG "). width ("200"); // set the width and height
optional ("#msg”).css ({color: "red", Background: "blue "}); // set the style as a name-Value Pair
$ ("# MSG "). addclass ("select"); // Add a class named select for the element
$ ("# MSG "). removeclass ("select"); // Delete the class with the element name "select"
$ ("# MSG "). toggleclass ("select"); // if there is (does not exist), delete (ADD) the class named select