Today, an old friend just chatted about jQuery source code. He didn't know the source code. I explained the core implementation to him with the attitude of learning and communication. (it seems that I have been pigeoning for a long time.)

By the way, which CDN service provider can find a jQuery file to open. I use version 1.2.3 as an example. The latest version is similar, with only two or three changes

Source code analysis

17-20 lines Pass in the selector and return the init method of its own new. I guess you haven't used it $() The second parameter is omitted here

 var jQuery = window.jQuery = function(selector) {
    return new jQuery.prototype.init(selector);

Lines 26-27 This is why it always starts with $and is mounted under the window object, which is a global variable

 // Map the jQuery namespace to the '$' one
window.$ = jQuery;

Lines 36-547 Get rid of what we don't need, keep the core, stay init Method, the internal judge of jQuery instance and selector is made. Here we ignore and simplify

 JQuery. FN = jQuery. Prototype = {init: function (selector) {var nodes = document. Queryselectorall (selector); 
 for (VaR I in nodes) {this [i] = nodes [i]; 
} return this; 
 / / omit 100000 words 

549 lines In the previous paragraph, the jQuery prototype chain is passed to the init method prototype under the jQuery prototype. Looking back at the new code, it is very clear

 jQuery.prototype.init.prototype = jQuery.prototype;

Complete implementation

If you continue to add functions to the jQuery prototype, it will be very close to the original version of jQuery. Here I will simply implement it text() method

 var jQuery= function (selector) {
        return new jQuery.fn.init(selector);

    jQuery.fn = jQuery.prototype = {
        init: function (selector) {
            var nodes = document.querySelectorAll(selector);
            for (var i in nodes) {
                this[i] = nodes[i];
            return this;
         element: function (callback) {
            for (var i = 0; i < this.length; i++) {
        text: function (content) {
            if (content == '' || content) {
                this.element(function (node) {
                    node.innerHTML = content;
                 return content;
            } else {
                return this[0].innerHTML;

    jQuery.prototype.init.prototype = jQuery.prototype;

    window.$ = jQuery;


In fact, the core is not complicated at all. I like the implementation of plug-ins. I think most of their functions are implemented by plug-ins. The ingenious design of the tool itself and the convenience.

In the traditional page production, jQuery is very comfortable to use, but the emergence of MVVM has changed our way of thinking. We only need to pay attention to business logic, do not need to manually operate DOM, and do not need to pay attention to the synchronization of data status. It is much easier for project management.

If there are simple requirements on a single page, jQuery still has a place to use, MVVM can only be added to the trouble.

label: Goo Goo Goo , jquery

There have been five comments

  1. I've written jQuery for many years. Now react, Vue and other frameworks are popular, but I still like jQuery

  2. Non technical passing by.

  3. Vue, I can't read a few pages of basic course I'd better continue with JQ

    1. Vue is very simple to start with. The simple single page application is very good. If you use jQuery to do it, it will test the project planning ability

Add a new comment