Jquery principles and learning skills, jquery principles and skills

Jquery principles and learning skills, jquery principles and skills

Everyone must be familiar with JQuery. Currently, many web projects, in the implementation process, take into account the compatibility of native JS APIs of various browsers, mostly choose JQuery or a framework similar to JQuery for webpage effect development. JQuery is easy to use and can be easily learned. Even developers who are new to JQuery can use development in projects with the help of the JQuery manual.

Although JQuery is relatively simple, it is not easy to master and use it quickly and flexibly. It provides many methods, including various aspects of web development, therefore, to fully master these knowledge points, I personally think that you still need to have a deep understanding of jquery and classify and remember these knowledge points so that you will not be confused when facing some JQuery code, in order to quickly use JQuery for project development, it is the best practice to know how to implement a special effect.

Simple JQuery Simulation

The code in JQuery is a famous hacker, and there are too many tricks in it. If you want to learn JQuery through the source code, it is difficult to do it without a certain skill. Therefore, we will write a very simple library to simulate JQuery for your convenience.
Overall code

(Function (window) {var doc = callback doc ument; // --------------- code segment 2 ------------------ var JQuery = function (selector) {return new JClass (selector );} // --------------- code segment 3 ---------------- JQuery.html = function (obj) {if (obj & obj. nodeType = 1) {return obj. innerHTML; }}// --------- code segment 1 -------------- var JClass = function (selector) {if (selector. nodeType) {// If the imported DOM element is this. length = 1;} else if (selector. charAt (0) ===' # ') {// If the input is '#.. 'format: this. length = 1; this [0] = doc. getElementById (selector. slice (1);} else if (typeof selector = 'string') {// The input string is assumed to be all html tags, for example, var nodes = doc for 'div ''p' and so on. getElementsByTagName (selector); this. length = nodes. length; for (var I = 0, len = nodes. length; I <len; I ++) {this [I] = nodes [I] ;}} if neither of else {// is true, this is not recognized. length = 0 ;}}; // ------------ code segment 4 -------------------- JQuery.prototype.html = function () {if (this [0]) {return JQuery.html (this [0]);} JClass. prototype = JQuery. prototype; // ------------ code segment 5 --------------- window. $ = window. JQuery = JQuery;} (window ));

First, let's first look at code snippet 1. We create a javascript reference type. We can create an instance object based on the reference type and input parameters. The input parameters simulate JQuery selection parameters, but JQuery is not powerful, some types are supported.

We know that we can use new JClass (...) it is okay to construct an instance object. However, JClass is also a function and can be called directly. Direct calling is not the expected result. To prevent JClass from being directly called by developers, we cannot expose JClass to developers, so we can only construct JClass instance objects through code snippet 2.

In code snippet 2, we can expose JQuery to developers, because both new JQuery () and JQuery () are returned as JClass instance objects. This is our result.

In the process of web development, for code reuse, we often provide some tools and methods to facilitate development. Since JQuery is completely exposed to developers, we can use these tools and methods as the static attributes of JQuery. For details, refer to Section 3. Of course, we can also add other tool methods such as text, val, attr, css ........

These tools and methods are indeed good. There are also some common methods for JClass instance objects (encapsulated DOM). These methods can also be implemented using tool methods. How can we create a public method for JClass instance objects? It can be implemented through code segment 4 (if you do not understand it here, please refer to Baidu JS's prototype inheritance concept ).

Finally, you can use code segment 5 to obtain an alias $ for JQuery and expose it as a global variable. Then introduce the code to the HTML file for testing. refer to the following code:

<Html> 
JQuery knowledge point Classification
Through the simulated JQuery library above, we should be able to probably know the main functions of JQuery: Get DOM elements through powerful selectors, and then encapsulate the daily operations of these DOM elements into corresponding methods, such as value, value assignment, modification, and deletion. JQuery also provides some tool methods for web development, such as each, ajax, isArray, and extend. In general, JQuery knowledge points can be divided into three categories:

 
 
 
  
JQuery Selector
 
 
  
Operations on JQuery objects, such as DOM operations and form operations
 
 
  
JQuery tool and Method
 
 
  
JQuery plugin writing (Knowledge extension)

 
JQuery is so popular that there are too many materials on the Internet, so many beginners do not know where to learn it. Here I read a blog, where I flipped through the source code and collected a lot of information, finally, I found that there was no time to learn. Even if I spent a lot of time learning, the learned JQuery could not be a system, and I forgot it all at the end. During development, I can only go through the manual. Can I write good code through the manual? Impossible.
Next, I will share some information that I personally think is better for beginners to learn. 

 
 
 
  
JQuery entry (Book + blog)
 
 
  
Sharp JQuery (second edition)
 
 
  
JQuery Design Philosophy
 
 
  
JQuery deep learning (excellent materials for JQuery and javascript)
 
 
  
JQuery Source Code Analysis System

 
JQuery concepts
Learning is never a memory. memories will be forgotten sooner or later. To learn a technology, the most basic principle is to understand it. Also, when learning JQuery knowledge points, you must first understand some concepts to help you understand these knowledge points. There are three main concepts in JQuery:JQuery (), JQuery object, and DOM object.
FirstDOM objectThis is simple. It defines a set of attributes, methods, and events for accessing HTML document objects. Before JQuery, we usually directly operate on DOM. The familiar APIs include getElementById and GetElementByTagName.
JQuery, which has an alias $ in JQuery. Through the simulated code in the above chapter (corresponding to JQuery in the simulated code), we can see that it is actually a function. A more detailed point is the factory method of the JQuery object, it can construct JQuery Objects Based on different input parameters, such:

 
 
 
  
String expression. For example, $ ('span '), $ ('span. class'), $ (' # id'), etc.
 
 
  
HTML code snippets. For example, $ ('<span> text </span> ')
 
 
  
DOM element. For example, $ (dom) // assume var dom = document. getElementById ('id ');
 
 
  
JS Function. For example, $ (function (...) {...}); is a common object or array. For example, {} and [...]

 
In addition to creating JQuery objects, JQuery also has many static methods, such as each, ajax, and trim. These tool methods are not only often used in web design, but also used as a Tool method to implement the prototype method of JQuery objects.
JQuery object is a very important concept. It is similar to a JClass instance in a simulated Code. It is usually an instance constructed through JQuery. In JQuery, we often see JQuery objects such as $ ('# id') and $ ('div. We need to understand the following points about JQuery objects:
1. The JQuery object inherits all attributes and methods of the JQuery prototype.
2. The JQuery object is not an array, but uses an array-like structure to store elements. The stored elements are DOM objects obtained by selector. Refer to the simulation code in the previous chapter (JClass Instance Object). The JQuery object has a length attribute, which indicates the number of DOM objects stored in the current object, is 0, 1, 2, 3... stored as an attribute name. Therefore, based on the above features, we can access elements in the following way:

Var objs = $ ('div '); for (var I = 0, len = objs. length; I <length; I ++) {var o = objs [I]; // get dom elements ......}
In general, the relationship between JQuery, JQuery objects, and DOM objects is: JQuery is a factory method used to construct JQuery objects; JQuery objects are class array objects, it stores DOM objects;
After understanding the relationship between the three, it is relatively easy to understand the following knowledge points:
How does one understand the filter selector? For example, $ ('div: first ').
If you understand the internal structure of JQuery objects, it is easy to understand JQuery's filter selector, such: first is actually an object whose JQuery object property is '0' (encapsulated as a JQuery object). Similarly, last is an element whose property is length-1, and eq (index) the element whose attribute is index is used.
In JQuery, how does one verify whether an element is null?
Var $ o = $ ('div. class '); if ($ = null) {// incorrect practice // nothing found ......} // correct practice if($o.html () = null) {// nothing found ......} // correct method if ($ o. length) {// nothing found ......}
How do I convert JQuery objects and DOM objects?
Var dom = document. getElementById ('id'); // convert the DOM object to the JQuery object var $ dom =$ (dom ); // refer to the JQuery object construction method. // convert the JQuery object to the DOM object for (var I = 0, len = $ dom. length; I <length; I ++) {var o = $ dom [I]; // get dom elements ......}
Summary
JQuery is easy to use, but if you want to use development efficiently and quickly, you still need to have a good understanding of JQuery. The above are just some of the insights and organization of the individual's learning process. It is recommended that you also form your own knowledge system based on your own habits, so as to facilitate future development, second, it is easy to read other people's code. Finally, I would like to add some interesting questions. If you are interested, let's think about it.
Question 1. Which of the following code methods do you think is better? Why?
// Method 1 var $ text = $ ("# text"); var $ ts = $ text. text (); // method 2 var $ text = $ ("# text"); var $ ts = $. text ($ text );
Question 2: What is this in the following code? What is the general implementation principle?
Select All copies and put them into notes $ ('# box'). click (function () {var obj = this ;......}
The above is an introduction to jquery's principles and learning skills. The content is very rich and the amount of information is very large. You need to learn it with patience. Hope you can get something from it.