A, jQuery development with the continuous development of javascript, extending a variety of JS libraries, the current popular js library has: 1) Prototype molding earlier, on the whole idea of object-oriented programming is not quite grasp in place . 2) Dojo steep learning curve, incomplete documentation, the most serious of APE is unstable, each upgrade an existing program can lead to failure. 3) YUI Yahoo company produced more perfect, preparation of specifications. 4) Ext JS is an extension of the original YUI, mainly for building front-end user interface, the late development can be used to develop rich gorgeous appearance of rich client applications, commercial use is not free. 5) MooTools lightweight, compact, modular and object-oriented JS library, very good. 6) jQuery library is also lightweight, has a strong selectors, DOM manipulation excellent and reliable event handling, improve compatibility and chain operations and other functions, but also we are going to learn focus.
Two, jQuery advantages : write less, do more. Unique jQuery selector, chain operation, event handling mechanism and improve packaging Ajax are unmatched by other JS library.
After 1) lightweight UglifyJS currently used to compress only about 30KB. 2) Powerful selector allows the use of CSS1-3 almost all of the selectors, as well as advanced and complex original jQuery selector. 3) Excellent package DOM operations. 4) Reliable event handling mechanism 5) complete Ajax jQuery Ajax operations all packaged into a function $ .ajax () inside, without caring about the creation and use of sophisticated browser compatibility and objects. 6) does not pollute top-level variable 7) Excellent browser compatibility. 8) 9 chaining mode) implicit iterative 10) and the layer separation behavior of the structural layer 11) rich plug support. 12) well documented 13) Open Source
Third, write jQuery code.
1) Visit the official website for the latest version of jQuery. http://jquery.com, right-saving links to get jquery library. jquery library is divided into two types: the production version and the development version jquery.min.js jquery.js.
2) environment configuration jQuery does not require installation, you can position the library file used when directly introduced in the html document. eg: <script src = "../ scripts / jquery.js" type = "text / javascript"> </ script>
3) write the code first jquery jQuery is $ shorthand. $ (Document) .ready (functiong () {}) similar to the traditional code of JS window.onload = function () {}, the difference between: 1 "window must only be performed after all loading, $ (document) it is after all the page's DOM structure finish drawing can be performed. 2 "window.onload = funciton () {} are not simultaneously a plurality of write, only the output of the last one, $ (function) .ready (funcitong () {}) to write a plurality of simultaneously. The output is repeatedly output. 3 "window.onload = funciton () {} is not abbreviated form, $ (document) .ready (function () {}) may be abbreviated to $ (funciton () {})
4) chaining style
eg $(" .level1>a").click(function(){
$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
return false;
})
Translation: When the mouse click to a level below the element to add the current class, then it will be displayed next to the back of the elements, while the interior of his father's siblings a child elements are removed class of a current and then close behind them are hidden elements. That is a key to complete the function of the navigation bar.
Recommended coding style:
$(".level1>a").click(function(){
$ (This) .addClass ( "current") // current element to increase the current style
.next (). show () // display the next element
.parent (). siblings (). children ( "a"). removeClass ( "current") // child element sibling of a parent element to remove current style
.next () hide ();. // next element of their hiding
return false;
})
Four, jQurey objects and DOM objects
. 1) i.e. target DOM Document Object Model document object DOM tree, child nodes of the model are constructed page DOM element nodes. Elements can be obtained in the node js getElementsByTagName and getElementById, DOM elements is thus obtained DOM object.
2) after jQuery object is packaged by jQuery DOM object generated. It is unique, if the object is a jQuery object, then you can use jQuery methods.
eg: $ ( "# fool") html () is equivalent to document.getElementById ( "fool") innerHTML DOM objects can not use any method in the jQuery object inside.... Similarly DOM objects can not use jQuery.
3) conversion jQuery DOM object and objects.
Before interconversion predetermined style requires a good definition of a variable, if the object is acquired jquery object, is preceded by the variable $ var $ varible = jQuery objects var varible = DOM object.
1 "jQuery convert the object into a DOM object. Using [index] or get (index) eg: var $ cr = $ ( "# cr") var cr = $ cr [0] or var cr = $ cr.get (0)
2 "DOM objects back into jQuery object, DOM objects packaged first, then get jQuery object eg: var cr = document.getElementById (" cr ") var $ cr = $ (cr) i.e. $ (DOM object)
Five, to resolve conflicts jQuery and other libraries in the way
1) jQuery library import behind other libraries, and can be used at any time jQuery.noConflict () function to hand over control of the $ variable to other js library.
2) carried out after importing other libraries, you can directly use "jQuery" jQuery to do the work, a shortcut to other libraries, compared with $ () without calling jQuery.noConflict () function.