jquery tips for the big 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 (); health.hrbfc120.com

$ ("#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, and Dom objects can only use the DOM method, for example, to get a third

The content of the 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 ("new content");

The "New content" is written as an HTML string in the element node content with the 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 ("New content"); rl.120hrb.com

Writes "New content" as a plain text string in the element node content with ID msg, and the page displays the new content

$ ("#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 300

$ ("#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 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]})

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]}) health.hljmlyfcyy.com

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 ({

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

To use the extended method (called by the "$. 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 background is gray

$ ("#msg"). Height (300); $ ("#msg"). Width ("200"); Set width 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")})//Add an clicked event for the element

$ ("P"). Click (function (i) {this.style.color=[' #f00 ', ' #0f0 ', ' #00f '] [i]})

Set different processing for three different P-element click events, respectively

Several custom events in jquery: rl.hljmlyfcyy.com

(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 row of the table, the class is set to over, leaving the time to be out.

$ ("tr"). Hover (function () {

$ (this). addclass ("over");

},

function () {

$ (this). AddClass ("Out");

});

(2) Ready (FN): Binds a function to execute when DOM loading is available for querying and manipulating.

$ (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): Event bindings and binding

Removes 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 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

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:john

Name: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. Health.120hrb.com

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.

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 ';

jquery tips for the big broadcast