First, Introduction
1.1. Overview
With the rapid development of WEB2.0 and Ajax ideas on the Internet, there have been some excellent JS frameworks, among which the famous prototype, YUI, JQuery, MooTools, Bindows and the domestic JSVM framework, By applying these JS frameworks to our project, we can release the programmer from the complex JS application of design and writing, turn the focus to the functional requirements rather than the implementation details, thus improving the development speed of the project.
jquery is another excellent JavaScript framework after prototype. It was created by John Resig in early 2006 to help simplify JavaScript™ and Ajax programming. Someone uses such a metaphor to compare prototype and jquery:prototype like Java, and jquery is like Ruby. It's a simple, fast, flexible JavaScript framework that lets you simply manipulate documents, handle events, implement special effects, and add Ajax interactions to your Web pages.
It has some of the following characteristics:
Code concise, semantic understandable, fast learning, rich in documentation.
jquery is a lightweight script with very small code and the latest version of the JavaScript package is only about 20K.
jquery supports CSS1-CSS3, as well as basic XPath.
jquery is Cross-browser, and it supports browsers including IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+.
You can easily extend other features for jquery.
Can the JS code and HTML code completely separate, easy to code and maintenance and modification.
Plug-ins are rich, in addition to jquery itself with some special effects, you can implement more functions through plug-ins, such as form verification, tab navigation, drag and drop effects, table sorting, DataGrid, tree menu, image effects and Ajax upload.
jquery design will change the way you write JavaScript code, reduce the complexity of your learning to use JS to manipulate Web pages, improve the efficiency of the Web JS development, whether for JS beginners or senior experts, jquery will be your first choice.
jquery is suitable for designers, developers, and those who are good, and is also suitable for commercial development, and it can be said that jquery is suitable for any JavaScript application and can be used in different Web applications.
Official site: http://jquery.com/Chinese site: http://jquery.org.cn/
1.2. Purpose
By learning this document, you can have a simple understanding of jquery, understand the differences between jquery and other JS frameworks, and master jquery's common syntax, usage tips, and considerations.
Ii. methods of Use
Introduce jquery's JS file into a page that needs to use jquery.
For example: <script type= "Text/javascript" src= "Js/jquery.js" ></script>
Once introduced, the syntax provided by jquery can be used anywhere on the page.
Iii. Learning Tutorials and reference materials
Please refer to the jquery Chinese API manual and Http://jquery.org.cn/visual/cn/index.xml
Recommend two good jquery tutorials: The start of jquery tutorial and the use of jquery to simplify Ajax development
Iv. Summary of grammar and matters needing attention
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:
Copy Code code as follows:
$ ("#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 <div> element. There are two ways to:
Copy Code code as follows:
$ ("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:
Copy Code code as follows:
$ ("#msg"). html (); Returns the HTML content of an element node with the ID MSG.
$ ("#msg"). HTML ("<b>new content</b>");
Writes "<b>new content</b>" 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 ("<b>new content</b>");
To write "<b>new content</b>" as an ordinary text string to the element node content with the ID msg, the page displays the <b>new content</b>
$ ("#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 both of these invocation methods
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:
6, expand the functions we need
Copy Code code as follows:
$.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:
Copy Code code as follows:
$ ("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:
Copy Code code as follows:
$ ("#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:
Copy Code code as follows:
$ ("#msg"). Click (function () {alert ("good")})//Add a clicked event to the element
$ ("P"). Click (function (i) {this.style.color=[' #f00 ', ' #0f0 ', ' #00f '][i]})//For three different P-element click events to set different processing respectively
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.
Copy Code code as follows:
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.
Copy Code code as follows:
$ (document). Ready (function () {alert ("Load Success")})
Page loading prompts "load Success", unlike the OnLoad event, onload needs the page content loaded (pictures, etc.), and ready as long as the page HTML code download is triggered. 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.
Copy Code code as follows:
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:
Copy Code code as follows:
$ ("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:
Copy Code code as follows:
var temparr=[0,1,2];
for (Var i=0;i<temparr.length;i++) {
Alert ("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])//back [0,1,2,3,4]
$.trim (str): Deletes white space characters at both ends of the string.
Such as:
$.trim ("Hello, how 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:
Copy Code code as follows:
Jquery.noconflict ();
//start using jquery
jquery ("div p"). Hide ();
//Use other library $ ()
$ ("content"). Style.display = ' None ';
$ ("P"). each (function (i) {this.style.color=[' #f00 ', ' #0f0 ', ' #00f '][i]})
//////////////////for 0,1,2 P element for index respectively.
$ ("tr"). each (function (i) {this.style.backgroundcolor=[' #ccc ', ' #fff '][i%2]})
//To implement a table's Interlace effect
$ ("P"). Click (function () {Alert ($ (this). html ())})
//Add the Click event for each P element, and click a P element to eject its contents
