Introduction to jquery principles and learning techniques _jquery

For jquery, presumably everyone is familiar with it. At present, many Web projects, in the implementation process, taking into account the browser native JS API compatibility, most will choose jquery or similar to jquery framework for Web page effect development. jquery is simple and easy to learn, and even developers who have just come into jquery can quickly use the development in their projects with the help of the jquery manual.

While jquery is relatively simple, but to fully grasp, and fast and flexible use of it is not so easy, it provides a lot of methods, including the various aspects of the development of the Web page, so to fully grasp these points of knowledge, personally think or need to have a deep understanding of jquery, these knowledge points do sorting memory, This way you will not be confused when you face some jquery code to know how to implement a specific effect is best practice to quickly use jquery for project development.

Simple simulation of jquery

jquery code is out of the name of the tricky, inside the Chine too much, if you want to learn through the source of jquery, no certain foundation is difficult to do. So let's write a very simple library to simulate jquery, easy to understand.
Overall code

(function (window) {var doc = window.document;
 -------------Code Snippet two------------------var JQuery = function (selector) {return new Jclass (selector);
   //---------------Code snippet three----------------jquery.html = function (obj) {if (obj && obj.nodetype = 1) {
  return obj.innerhtml; }//---------code snippet--------------var jclass = function (selector) {if (Selector.nodetype) {//If a DOM element is passed in thi
  S.length = 1; }else if (selector.charat (0) = = ' # ') {//If the incoming is ' # ... '
   form this.length = 1;
  This[0] = Doc.getelementbyid (Selector.slice (1)); }else if (typeof selector = = ' string ') {//incoming is a string, assuming all HTML tags, such as ' div ' ' p ', etc. var nodes = Doc.getelementsbytagname (sel
   Ector);
   This.length = Nodes.length;
   for (Var i=0,len=nodes.length;i<len;i++) {This[i] = nodes[i];
  }else {//are not, then do not recognize the this.length = 0;
 
 }
 }; ------------Code Snippet four--------------------JQuery.prototype.html = function () {if (This[0]) {return jquery.html
  [0]); }} JClAss.prototype = Jquery.prototype; ------------Code Snippet five---------------window.$ = window.
 
jquery = jquery;

 } (window));

First, look at code snippet one, we create a JavaScript reference type , you can create an instance object based on the reference type and the input parameters, and the input parameters simulate the jquery selection parameters, but there is no strong jquery and support for some types.

We know that we can go through the new Jclass (...) To construct an instance object, which is fine, but Jclass is also a function that can be called directly, and direct calls are not the result we want, and we can't expose jclass to developers to prevent Jclass from being called directly by developers, Then we can construct the Jclass instance object only by code snippet two.

In code snippet two, we can expose JQuery to developers, because either through new jquery () or jquery (), we return the Jclass instance object, which is the result we want.

In the Web development process, for code reuse, we often provide some tools to facilitate development, since jquery is completely exposed to developers to use, we can fully take these tools as the static properties of jquery. You can refer to code snippet three, of course, we can also add other tool methods such as text,val,attr,css ...

These tools are really good. The Jclass instance object (which encapsulates the DOM) also has some common methods that can be implemented using tool methods, so how do you create a common method for a Jclass instance object? Can be implemented through the code snippet four (if not understood here, please Baidu JS prototype inheritance concept).

Finally, through code snippet five, jquery takes the individual name $ and exposes it as a global variable. The code is then introduced into an HTML file for testing, which can be referenced in the following code:

The knowledge point classification of jquery

With the jquery library above, we should probably know the main features of jquery: Get DOM elements through a powerful selector, then encapsulate the day-to-day operations of these DOM elements into corresponding methods, such as values, assignments, modifications, deletions, jquery also provides tool-class methods for web development, such as each, Ajax, IsArray, extend, and so on. So in general, jquery knowledge points can be divided into three main categories:

• jquery Selector
• Operations of jquery objects, such as DOM operations, form operations, and so on
• The Tools method of jquery
• jquery Plugin Authoring (knowledge extension)

jquery is too popular, too much information on the web, so many beginners do not know where to learn from, here to see a blog, where turned over the source code, collected a lot of information, and finally found no time to learn, even if spent a lot of time to learn, to learn the jquery can not become a system, To the end all forget. The development of the time can only go to the manual, always turn the manual can write good code? It's impossible.

let me share some of the information that I think is better for beginners to learn step-by-step.

• Getting Started with jquery (book + a blog)
• Sharp jquery (second edition)
• jquery Design Idea
• jquery Deep Learning (in-depth study of jquery and JavaScript good information)
• jquery Source Analysis System

Some of the concepts of jquery

Learning is never a memory, the memory of things will be forgotten sooner or later. To really learn a technology, the most basic principle is to understand it. Learning jquery is also the first thing you need to understand in order to help you understand the knowledge points of jquery. The concepts in jquery are mainly three: jquery (), jquery objects, and Dom objects.

First of all, the DOM object , which is simple, defines a set of properties, methods, and events to access an HTML document object, and we usually directly manipulate the DOM without jquery, and the more familiar APIs are getElementById, Getelementbytagname and so on.

jquery, which has a separate name in jquery $. The simulation code in the above section (corresponding to jquery in the simulation code) can be seen, in fact, is a function, the more detailed point is the jquery object of the factory method, it may be based on different parameters to construct jquery objects, such as:

• A string expression. such as $ (' span '), $ (' span. class '), $ (' #id ') , etc.
• HTML code fragment. such as $ (' <span>text</span> ')
• DOM element. such as $ (DOM)//assumed var dom = document.getElementById (' id ');
• JS Function. such as $ (function (...) { ... } ); a generic object or array. such as {}, [...] Wait

jquery has many static methods in addition to its ability to create jquery objects, or it can be called tool methods, such as each, Ajax, trim, and so on. These tool methods are often used not only in web design but also as tools to implement the prototype method of jquery objects.

The jquery object , a very important concept, is similar to the Jclass instance in the analog code, usually the instance that is constructed through jquery. In jquery, we often see jquery objects like this: $ (' #id '), $ (' div ') , and so on. We need to understand the following points about jquery objects:

1. The jquery object inherits all the properties and methods of the jquery prototype (prototype)
2. The jquery object is not an array, but uses an array-like structure to store the elements, and the stored elements are the DOM objects obtained by the selector. Referring to the simulation code in the above section (Jclass instance object), the jquery object has a length attribute that represents the number of DOM objects stored in the current object, and these are obtained by selecting the DOM object with subscript 0, 1, 2, 3 ... stored as the name of the property. So, based on the above features, we can access the elements in the following way:

var Objs = $ (' div ');
for (Var i=0,len=objs.length;i<length;i++) {
 var o = objs[i];//Get DOM element
 ...
}

In general, the relationship betweenjquery, jquery objects, and Dom objects is that jquery is a factory method for constructing jquery objects; A jquery object is a class array object that stores a DOM object ;

Understanding the relationship between the three, we understand the following points of knowledge, relatively easy:

How does a filter selector understand? such as $ (' Div:first ') .
If you understand the internal structure of the jquery object , it is easy to understand the filter selector for jquery, such as: the "One" is an object that takes the jquery object attribute of ' 0 ' (encapsulated as a jquery object), and similarly: last takes the attribute length-1 element: EQ (index) is an element that has an attribute of index.

In jquery, how do you verify that an element is empty?

var $o = $ (' div. class ');
if ($ = = NULL) {//Wrong approach
 //Nothing found
 ...
 } 
Correct procedure 
if ($o. html () = NULL) {
 //nothing found
 ...
 } 
Correct procedure 
if ($o. length) {
 //nothing found
...
 } 

How are jquery objects and Dom objects converted?

var dom = document.getElementById (' id ');
DOM objects convert to jquery object
var $dom = $ (DOM);//reference jquery object's construction

//Convert jquery object to DOM object for
(Var i=0,len= $dom. Length ; i<length;i++) {
 var o = $dom [i];//Get DOM elements
 ...
}

Summarize

As for jquery, it's easy to get started, but if you want to use development efficiently and quickly, you need to understand jquery. The above is just a personal learning process in some of the understanding and collation, suggest you in the study also in accordance with their own thinking habits to form a set of their own knowledge system, one to facilitate future development, and also easy to check other people's code. Finally note some interesting little questions that you are interested in thinking about.

Question one. Which of the following ways do you think the code is better? Why?

 Mode one
var $text = $ ("#text");
var $ts = $text. Text ();

Mode two
var $text = $ ("#text");
var $ts = $.text ($text);

Question two. What is this in the following code? What is the principle of realization?

Select all copies into Notes
$ (' #box '). Click (function () { 
 var obj = this;
 ... ...
}

The above is about the jquery principle as well as the learning technique introduction, the content is very substantial, the information quantity is very big, needs the schoolmate to study patiently, hoped that has the harvest.