Just beginning to learn the JQuqery, many of the $ get (), ... and so on symbols already set my dizzy. Temporarily give up.
Later, learning ASP.NET AJAX, under the leadership of Microsoft, gradually shift from server-side client-side programming. Aroused my interest in client-side programming,
remembered learning about the Jquery.
With the rapid development of communication WEB2.0 and ajax ideas on the Internet, has been found in some excellent Js framework, one of the more famous are Prototype, YUI, jQuery, mootools, Bindows and domestic JSVM frameworks, through these JS framework applied to our project enables programmers to design and freed from JS writing complex applications, the focus turned to functional requirements rather than on implementation details , thereby increasing the speed of development of the project.
jQuery is the second prototype of another excellent Javascript framework. It was created in early 2006 by the John Resig, which helps to simplify the JavaScript ™ and Ajax programming. Some people use such a metaphor to compare prototype and jQuery: prototype like Java, jQuery like ruby and it is a simple and fast and flexible JavaScript framework that allows you to simply operate on your web page documents, handle events. and add Ajax interactions to achieve special effects for Web pages.
It has some of the following characteristics:
1, the code concise, easy to understand semantic, learning fast, rich document.
2, jQuery is a lightweight script, its code is very small, the latest version of JavaScript package is only about 20K.
3, jQuery support CSS1-CSS3, and basic xPath.
4, jQuery is a cross-browser, which supports browsers including IE 6.0+, FF 1.5+, Safari 2.0+ , Opera 9.0+.
5, jQuery can be easily extended to other functions.
6, the HTML code and JS code can completely separate, and easy to maintain and modify the code.
7, plug-rich, in addition to jQuery itself with some special effects, you can achieve more functionality through plug-ins, such as form validation, tab navigation, drag and drop effects, table sorting, DataGrid, Tree Menu, ajax uploading images and special effects.
jQuery is designed to change the way you write JavaScript code, you learn to use JS to reduce the complexity of operating pages, web JS improve development efficiency, both for beginners and experts js, jQuery will be your first choice.
jQuery is suitable for designers, developers, and those who fortunately, is also suitable for commercial development, it can be said for anywhere in the jQuery JavaScript applications, it can be used for different Web applications.
Official site: http: //jquery.com/ Chinese site: http: //jquery.org.cn/
1.2 Objective
Through this document, be able to have a simple understanding of understanding of jQuery, clearly different from the other JQuery and JS framework jQuery grasp of grammar common, tips and precautions.
Second, the use
introducing JQuery js file to the page need to use JQuery in.
For example: <script type = "text / javascript" src = "js / jquery.js"> </ script>
After the introduction you can use the jQuery syntax provided anywhere in the page.
Third, tutorial and reference information
, refer to "jQuery Chinese API Manual" and http://jquery.org.cn/visual/cn/index.xml
recommended two good jquery tutorial: "jQuery tutorials starting point" and "Use simplify Ajax development with jQuery "
Fourth, the syntax summary and notes
1, quoted on page elements
refer to elements including the method by id, class, element names and hierarchical relationships of elements and dom or xpath condition by jquery's $ (), the object and returns to jquery object (a collection of objects) can not be directly dom-defined method call.
2, the conversion jQuery object dom object
only to use jquery jquery object definition. Note jquery dom objects and objects are different, when you call the method of operation is to pay attention to jquery dom object or objects.
Common dom objects may generally be converted into an object by jquery $ ().
Such as: $ (document.getElementById ( "msg" )) , compared with jquery object, you can use jquery methods.
Because jquery object is a collection itself. So if dom jquery object to be converted to the object must be removed at any of those generally be removed by an index.
Such as: $ ( "# msg") [0], $ ( "div") eq (1) [0], $ ( "div") get () [1], $ ( "td") [5.. ] these objects are dom, dom methods may be used, but can not use the Jquery methods.
The following versions are correct:
$ ( "# msg") HTML ();.
$ ( "# Msg") [0] .innerHTML;
$ ( "# msg") EQ (0) [0].. the innerHTML;
$ ( "# msg") GET (0) .innerHTML.;
3, how to obtain a particular set of jQuery
for acquisition of a collection of elements, wherein an item is acquired (specified by an index) may be used eq or get (n) or index number acquisition method, to be noted that, eq returns jquery object , and get (n) and returns the index element object dom. A method for using jquery jquery object only, and are only allowed dom dom methods, such as to obtain a third content <div> element. There are two methods:
$ ( "div") EQ (2) .html (); // call jquery object method.
$ ( "Div") GET (2) .innerHTML; // method invocation dom properties.
4, to achieve the same function set and get
a lot of methods Jquery is true, mainly includes the following:
$ ( "# msg") HTML (); // returns the id html content of the element node msg.
$ ( "# msg") html ( "<b> new content </ b>" );.
// the "<b> new content </ b>" as html element node id string written in the contents msg , page display bold new content
$ ( "# msg") text ();. // returns the id of the text content of the element node msg.
$ ( "# msg") text ( "<b> new content </ b>" );.
// the "<b> new content </ b>" is written as a plain text string id element node content of msg , the page display <b> new content </ b >
$ ( "# msg") height ();. // Returns the id of the element height msg
$ ( "# msg") height ( "300");. // set the id to the height of the element msg 300
$ ( "# msg") width ();. // returns the id of the width of the element msg
$ ( "# msg") width ( "300");. // set the id to the width of the element msg 300
$ ( "input") val ( ");. // return the form input box value value
$ (" input ") val. (" test "); // The value value form input box to the test
$ ( "# msg") click ();. // trigger an id msg the click event
$ ( "# msg") click (fn);. // add the function to the click event for the element msg id
Similarly blur, focus, select, submit events can be had two ways of calling methods
5, a set of processing functions
for a collection of content jquery returned without having our own loop through each object separately and do processing, jquery has provided us with a very convenient way to process collection.
Two forms:
. $ ( "P") each (function (I) = {this.style.color [ '# F00', '# 0f0', '# 00F']})
// index were 0 , p elements 1 and 2 are set different font color.
$ ( "TR"). each (function (I) {this.style.backgroundColor = [ '# CCC', '# FFF'] [% I 2]})
// achieve the effect of color change form interlacing
$ ( "p"). click (function () {Alert ($ (the this) .html ())})
// increase the click events for each element of p, p click on a pop-up element of its content
6, we need to extend the functionality of
$ .extend ({
min: function (A, B) {return A <B A: B;},?
Max: function (A, B) {return A> B A:? B; }
}); // for the extended jquery min, max two methods
using the extended process (the "$ method name." call):
Alert ( "a = 10, B = 20 is, max =" $ + max (. 10,20) + ", min =" + $ min (10,20)).;
7, support for ligatures method of
so-called ligatures, which can be continuous calls to a variety of different ways a jquery object.
For example:
. $ ( "P") the Click (function () {Alert ($ (the this) .html ())})
.mouseover (function () {Alert ( 'over Mouse Event')})
.each (function ( i) {this.style.color = [ '# f00', '# 0f0', '# 00f']});
8, operating style elements
include the following ways:
$ ( "# msg") CSS ( "background"); // Returns the background color of the element.
$ ( "# Msg") CSS ( "background",. " #ccc ") // set elements on a gray background
$ (" # msg ") height (300);. $ (" # msg ") width (." 200 "); // set the aspect
$ (" # msg ".) css ({color :" red ", background:" blue "};) // set pattern in the form of name-value pairs
".) addClass ( "$ ( " # msg select "); // is select the name of the element to increase class
$ ( "# msg") removeClass ( "select");. // delete the element name to select the class
$ ( "# msg") toggleClass ( "select");. // If there (does not exist) delete (add) the name of the class select
9, perfect event handling
Jquery has provided us with a variety of event-handling method, we do not need to write events directly on the html element, and the object can be obtained directly by jquery to add an event.
Such as:
$ ( "# msg") the Click (function () {Alert ( "Good")}) // add a click event for the element.
$ ( "The p-") the Click (function (i) {this.style. = .color [ '# F00', '# 0f0', '# 00F']})
// p three different elements are different click event setting processing
events jQuery several custom:
(1 ) hover (fn1, fn2): a mimic hover event (mouse to move an object above and out of the object) method. When the mouse moves to a matching element of the above, it will trigger the first function specified. When the mouse out of this element, it will trigger the second specified function.
// When the mouse is placed on the table when a row is set to the class over, is set to leave out.
$ ( "TR") hover (function () {.
$ (the this) .addClass ( "over");
},
function () {
$ (the this) .addClass ( "OUT");
});
(2) READY (fn): bind a function to be executed when the DOM is ready to query and manipulate.
$ (document) .ready (function ( ) {alert ( "Load Success"
)}) // page is loaded prompt "Load Success", the equivalent of the onload event. And $ (fn) equivalent
(3) toggle (evenFn, oddFn ): each time you switch the function to be called when clicked. If you click on the elements of a match, then trigger the first function specified when you click on the same element again, triggering the second specified function. Subsequent clicks continue to take turns calling these two functions.
// add and delete each rotation of the selected class called when clicked.
$ ( "P") Toggle (function () {.
$ (the this) .addClass ( "Selected");
}, function () {
$ (the this) .removeClass ( "Selected");
});
(. 4) Trigger (eventtype): trigger a type of event on every matched element.
For example:
. $ ( "P") the Trigger ( "click"); // trigger the click event for all p elements
(5) bind (eventtype, fn ), unbind (eventtype): Bind and unbind events
from each elements of a matching (add) event deletion binding.
For example:
. $ ( "P") the bind ( "the Click", function () {Alert ($ (the this) .text ());}); // Add click events 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, the function of several practical effect
wherein Toggle () and slideToggle () method provides a state switching function.
The Toggle () method comprising the hide () and show () method.
slideToggle () method comprising the slideDown () method and slideUp.
11, several useful jQuery method
$ .browser browser type: Detect browser type. Effective parameters: safari, opera, msie, mozilla . Such as detecting whether ie:. $ Browser.isie, return true ie the browser.
$ .each (obj, fn): generic iterator function. Iteration may be used to approximate the object and the array (instead of circular).
The
$ .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);
}
may json data processing, such as
$ .each ({name: "John", lang: "JS "}, function (i, n) {alert ( "name:" + i + ", Value:" + n);});
result:
the name: name, the Value: John
the name : lang, the Value: the JS
$ .extend (target, the prop1, propN): with one or more other objects to extend an object, returns the object is expanded. This is the inheritance jquery to achieve.
Such as:
$ .extend (Settings,
// Merge settings and options, and combine the results to return settings, the equivalent of setting options inheritance and succession save the result in the setting.
Settings .extend $ = var ({}, defaults, Options);
// defaults were combined and options, and the combined results are returned to the default setting contents without cover.
You can have multiple parameters (number of merger and return)
$ .map (Array, the Fn): Array mapping. The items in an array (post-processing conversion) to another to save the new array, and returns a new array generated.
Such as:
var = $ tempArr Map ([0,1,2], function (I). 4 + I {return;});.
TempArr content: [4,5,6]
var = $ tempArr Map ([0. , 1,2], function (I) {return I> 0 I +. 1:? null;});
tempArr content: [2,3]
$ .merge (of arr1, arr2 is): merge two arrays and delete duplicate items.
Such as:. $ Merge ([0,1,2] , [2,3,4]) // returns [0,1,2,3,4]
$ .trim (str): Delete both ends of the string of blank characters .
Such as:.; "? Hello, how are you" $ trim ( "? Hello, how are you") // returns
12, troubleshoot custom methods or other libraries with jQuery conflicts
often our own definition of $ (id) method to get an element, or some other js libraries such as prototype also defines the $ method, if both these content together will cause variable method defined conflict, Jquery this expertise to provide a method for solving this problem.
Use jQuery.noConflict jquery in (); method to the variable $ a give control of the first $ method before it the library or a custom implementation. After applying Jquery time as long as all of the $ jQuery can be replaced, such as the original reference object method $ ( "# msg") replaced jQuery ( "# msg").
Such as:
jQuery.noConflict ();
// start using jQuery
jQuery ( "the p-div") hide ();.
// other libraries using $ ()
$ ( "Content"). Style.display = 'none';.