12 jquery notes Worth collecting

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
$ ("div"). Get (2). InnerHTML; 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>new content</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 of B
$ ("#msg"). Text (); Returns the text content of an element node with an ID of MSG.
$ ("#msg"). Text ("<b>new content</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 CSS height of the element with ID msg to 300
$ ("#msg"). width (); Returns the CSS width of an element with an ID of MSG
$ ("#msg"). Width ("300"); Set the width of the element with ID msg to 300
$ ("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
The same Blur,focus,select,submit event can have two methods of invocation

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]})//set a different font color for the P-elements indexed 0,1,2 respectively.
$ ("tr"). each (function (i) {this.style.backgroundcolor=[' #ccc ', ' #fff '][i%2]})//implements the interlaced color effect of the table
$ ("P"). Click (function () {Alert ($ (this). html ())})//Added the Click event for each P element, and clicking on a P element pops 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 Min,max two methods for jquery using extended methods (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
The main methods include the following:
$ ("#msg"). CSS ("background"); Returns the background color of an element
$ ("#msg"). CSS ("Background", "#ccc")//Set element CSS background is gray
$ ("#msg"). Height (300); $ ("#msg"). Width ("200"); Set width and height
$ ("#msg"). CSS ({color: "Red", Background: "Blue"});//Set style in the form of a name value pair
$ ("#msg"). AddClass ("select"); Adds a class with the name select for the element
$ ("#msg"). Removeclass ("select"); Remove the class with the element name of select
$ ("#msg"). Toggleclass ("select"); Delete (Add) class with Name Select if present (not present)

9. Perfect Event Handling function
jquery has provided us with a variety of event handling methods, and we do not need to write events directly on HTML elements, but we can add events directly to the objects acquired through jquery.

Such as:
$ ("#msg"). Click (function () {alert ("good")})
Added a click event for an element
$ ("P"). Click (function (i) {this.style.color=[' #f00 ', ' #0f0 ', ' #00f '] [i]})
Set different processing for three different P-element click events, respectively

A few custom events in jquery:
(1) Hover (FN1,FN2):
A method that mimics the hover event (moving the mouse over an object and moving out of the object). The first function that is specified is triggered when the mouse moves over a matching element. When the mouse moves out of this element, the specified second function is triggered.

When the mouse is placed on a line in an HTML table, the class is set to over, leaving the time to out.

$ ("tr"). Hover (function () {
$ (this). addclass ("Over");},
Function () {$ (this). AddClass ("Out");
});

(2) Ready (FN):
Binds a function to execute when DOM loading is ready to be queried and manipulated.

$ (document). Ready (function () {alert ("Load Success")})
The page loads and prompts "load Success", which is equivalent to the OnLoad event. Equivalent to $ (FN)

(3) Toggle (EVENFN,ODDFN):
Toggles the function to be called each time it is clicked.

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. Each subsequent click repeats the call to the two functions. Rotate each Click to add and remove class named selected.

$ ("P"). Toggle (function () {
$ (this). AddClass ("selected");
},function () {
$ (this). Removeclass ("selected");
});

(4) Trigger (EventType):

Triggers a class of events on each matched element. For example:
$ ("P"). Trigger ("click"); Trigger Click event for all P elements

(5) Bind (EVENTTYPE,FN), Unbind (EventType):

The binding of the event is tied to the binding event that is removed 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 the Click event on all P elements

10. Several practical effect functions

where the toggle () and Slidetoggle () methods provide state switching functionality.

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 the detection is Ie:$.browser.isie, ie browser returns TRUE.

$.each (obj, fn): A general-purpose iterative function. Can be used to iterate objects and arrays approximately (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;i<temparr.length;i++) {
Alert ("Item #" +i+ ":" +temparr[i]);
}

You can also work with JSON data,

Such as
$.each ({name: "John", Lang: "JS"},
function (i, N) {alert ("Name:" + i + ", Value:" + N);});

The result is:
Name:name, Value:
Johnname:lang, Value:js
$.extend (TARGET,PROP1,PROPN): Extends an object with one or more other objects, returning the extended object. This is how the jquery implementation inherits.

Such as:
$.extend (settings, options); Merge settings and options, and return the merge results to settings, equivalent to the options inheritance setting and save the inherited results in setting.

var settings = $.extend ({}, defaults, options);
Merges defaults and options, and returns the merge results to setting without overwriting the default content. can have multiple parameters (merge multiple items and return)

$.map (Array, fn): array mapping. Saves an item in an array (after processing the transform) 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 removes duplicate items from them.

Such as:
$.merge ([0,1,2], [2,3,4])//return [0,1,2,3,4]
$.trim (str): Removes whitespace characters at both ends of a string.

Such as:
$.trim ("Hello, how is You?"); Back to "Hello,how is you?" "

12. 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").

Such as:

Jquery.noconflict ();
Get started with jquery
JQuery ("div p"). Hide ();
Use $ () for other libraries
$ ("content"). Style.display = ' None ';

12 jquery notes Worth collecting