Its short, easy to use, efficient performance, can greatly improve development efficiency, is the development of Web applications, one of the best auxiliary tools. As a result, most developers choose jquery for Web development while abandoning prototype.
Some developers often encounter many problems when using jquery because they simply know how to use the jquery document and don't understand how jquery works. Most of these problems are caused by improper use, and very few are jquery bugs. If you do not understand its operating mechanism and core source code, we are also very difficult to write based on the jquery class library of high-performance programs out.
When debugging a jquery based program, we are most of the time tracking into the jquery object to analyze its running state, but the jquery code is not like Ext,yui, its code is a bit obscure and difficult to understand. Also say if you want to use good jquery, be sure to clear its source.
The design concept of jquery
Before using jquery, we all ask what is jquery? jquery is a class library that provides accessibility for web JavaScript development, just like the Prototype,mootools class library. So why do you choose jquery? Prior to the advent of jquery, Prototype,yui is a very mature JS framework, but each has its own characteristics. Why discard them and use the Up-and-comer jquery, what are the outstanding features that attract developers?
To answer this question, we need to understand the design concept of jquery. Recall or imagine how we used JavaScript in Web development? Most of the time is the use of getElementById in the DOM document to find the DOM element, and then value or set the value, using innerHTML to take it or set its contents, or to monitor the event (such as Click), in the control style, we will be the height, Width,display and other changes, to achieve visual effects, for Ajax, but also to take the data in the page of an element to add content.
In summary, we are working on the DOM elements. This element may be one or more. This element may be a Document,window or DOM element. So our task is two parts, one is to find the DOM elements, and the other is to manipulate the DOM elements.
For the use of proficiency, whether the use of direct lookup such as getElementById or the use of such as element.lastchild such as indirect lookup is not difficult, for DOM elements, Dom is also very rich in the operation, it is not difficult to use? So what does it take to be a class library? One of the hardest problems is the compatibility of browsers. All JavaScript frameworks solve this problem, while simplifying the JavaScript itself with its own operations.
Prototype can be said to create a JS class library of the precedent, give us a refreshing feeling. It solves the problem of the compatibility of most browsers. At the same time simplifying the original function name long difficult to remember the problem of often written errors (using $ (XX) instead of getElementById), providing access to Ajax, extending the Array,object,function,event and other JavaScript native objects.
But these still do not meet the needs of development, such as looking at DOM elements in the DOM tree, only through the ID of the element, but we want more convenient search methods, but also want to have a unified portal, not too extensive, learning curve too high or difficult to use.
This is where jquery starts, unifying everything in the jquery object. Using jquery is the use of jquery objects. In fact, jquery's groundbreaking work is just like its name: query. Its powerful search function has eclipsed all frameworks. jquery is essentially a query. It also provides the ability to manipulate the elements that are found on the basis of the query. So jquery is the unification of queries and operations. The query is the entry and the operation is the result.
jquery can also be divided into two parts in implementation, part of the static method of jquery, or a utility method or tool method, which is directly referenced through the jquery namespace of jquery.xxx (). The second part is a jquery instance method that generates a jquery instance through jquery (XX) or $ (xx), and then references the method through this instance. Most of the methods in this section are done from the static method proxy to complete the function. True functional operations are implemented in the static method of jquery. These features are subdivided into the following sections:
1, Selector, find elements. This lookup contains not only the CSS selector features based on CSS1~CSS3, but also some of the features it extends to direct lookup or indirect lookup.
2, the properties of the DOM element operation. Dom elements can be labeled as HTML, and actions on attributes operate on the properties of a label. This attribute operation contains additions, modifications, deletions, values, and so on.
3, the DOM elements of the CSS style operation. CSS is the effect of controlling the display of a page. To the CSS operation that must include the height, width, display and other commonly used CSS features.
4, the operation of Ajax. The function of Ajax is to fetch data from the server asynchronously and then do the related operations.
5, the operation of the event. The compatibility of the event was handled uniformly.
6, Animation (Fx) operation. Can be viewed as an extension on a CSS style.
the construction of jquery objects
Building or building a jquery object is actually constructing and running a query (selector). Since it's a query, you'll definitely find the results (DOM elements) before you can manipulate the results. So where are the results of these lookups stored? The best place, of course, is the inner face of this jquery object. The result of the lookup may be an element, or it can be multiple elements such as the form of a NodeSet collection. This means that the jquery object has a collection inside it. This collection holds a lookup to the DOM element.
But the jquery object mentioned in the previous section is a unified entry point for all operations, and its build cannot be limited to finding DOM elements from DOM documents, but also to DOM elements that are transferred from other collections, and possibly from HTML strings.
There are four ways in jquery documentation: jquery (expression, [context]), jquery (HTML), jquery (elements), jquery (callback) Four ways to find jquery objects. Where jquery can be substituted with $. These four kinds are often used. In fact, jquery parameters can be any element, can constitute a jquery object.
Give a few examples:
1, $ ($ ("P")) can be seen that its parameters can be a jquery object or a collection of arraylike.
2, $ () is a shorthand for $ (document).
3, $ (3) puts 3 into the collection of jquery objects.
For elements such as $ (3), such as elements of a arraylike collection, are not DOM elements, it is best not to build jquery objects, and the methods of jquery objects are for DOM objects. It is not clear how it is used, it is likely to lead to errors. The above said so much, still difficult to understand its principle, now from the point of view of the source carefully analysis:
The implementation of the call through jquery (XXX) does not generate an object, which is pointing to the Window object. So how do jquery's instance methods inherit from it? Take a look:
var jQuery = Window.jquery = window.$ = function (selector, context)
{Return to New JQuery.fn.init (selector, context);
};
This is the total entrance to jquery, and the jquery object does not actually inherit the method in its prototype through new jquery (). The jquery object is actually an object generated by the JQuery.fn.init function. In it we can see that the objects that add some function sets to jquery.prototype are of little significance. Because our new jquery () is OK, the resulting jquery object is discarded when return. So it's best not to use new jquery () to build jquery objects. The JQuery object is actually the new jQuery.fn.init. So JQuery.fn.init.prototype is the method of operation of the jquery object. Such as
JQueryjQuery.fn.init.prototype = Jquery.fn;
Have the time may worry in 589 line realizes the Jquery.fn function to put in the jQuery.fn.init.prototype to go up, then through JQuery.fn.extend method how to do? This is actually a reference to the Jquery.fn. When you extend JQuery, just extend the relevant functions to Jquery.fn. Now let's take a look at how JQuery.fn.init is doing the work:
Copy Code code as follows:
Init:function (Selector, context) {
Selectorselector = Selector | | document;//determine selector existence
The first case Handle $ (domelement) a single DOM element, ignoring the context
if (Selector.nodetype) {
This[0] = selector;
This.length = 1;
return this;
}
if (typeof selector = = "string") {//selector is string
var match = quickexpr.exec (selector);
if (Match && (match[1] | | |!context)) {
if (match[1])//second case processing $ (HTML)-> $ (array)
selector = Jquery.clean ([match[1]], context);
else {//third case: HANDLE: $ ("#id")//Processing $ ("#id")
var elem = document.getElementById (match[3]);
if (elem) {
IE returns the Name=id element, and if so, the Document.find (s)
if (elem.id!= match[3])
Return JQuery (). Find (selector);
Build a new jquery (Elem)
Return JQuery (Elem);
}
selector = [];
}
} else
Fourth: Processing $ (expr, [context]) ==$ (content). Find (expr)
return JQuery (context)-find (selector);
else if (jquery.isfunction (selector))//Fifth case: Processing $ (function) Seven shortcut for document ready
return JQuery (document) [JQuery.fn.ready? "Ready": "Load"] (selector);
Case sixth: processing $ (elements)
Return This.setarray (Jquery.makearray (selector));
}
