jq爲何能用$操做

jq對dom節點的操做相信你們都很熟悉，

$("input").val("value");

直接用$來獲取dom節點的方式也很是便捷方便，那麼他是怎麼實現的呢？

在沒看源碼以前，個人猜測是這樣的

            function Dom(selector){
                this.dom = document.querySelector(selector);
                this.val = function (content) {
                    if(content){
                        this.dom.value = content
                    }else{
                        return this.dom.value;
                    }
                }
            }
            function $(selector) {
                return new Dom(selector);
            }
            
            $("input").val("value")

$()是一個function，這個function會返回一個new Dom的對象，這個new Dom的對象裏寫一些方法，就達到jq的這樣效果了。

 

以後看了jq源碼的寫法，果真與衆不同……

            (function(window, undefined) {
                jQuery = function(selector, context) {
                    return new jQuery.fn.init(selector, context);
                }
                jQuery.fn = jQuery.prototype = {
                    init: function(selector, context) {
                        this.dom = document.querySelector(selector)
                    },
                    val: function(content) {
                        if(content) {
                            this.dom.value = content
                        } else {
                            return this.dom.value;
                        }
                    }
                }
                jQuery.fn.init.prototype = jQuery.fn;
                window.$ = jQuery;
            })(window);
            $("input").val("value")

首先，將jq的代碼寫在一個匿名函數裏，這樣避免了重複命名對變量的影響，經過window.$ = jQuery;把$掛在windo下，實現域外使用$的操做。

其次，調用jQuery這個方法，return 一個jQuery.fn.init()的對象，jQuery.fn.init()本質上是一個構造函數，這樣$("input")的時候其實至關於已經new了一個對象。

可是怎麼使用.val()方法呢，如今new出來的對象只有一個dom屬性（固然在我這個例子裏是這樣的）。

因此，最後jQuery.fn.init.prototype = jQuery.fn;這句話格外關鍵，這句讓jQuery.fn.init也能使用val()這個方法，固然也能使用init方法了，

因此$("input").init("select").val("value")這種寫法也是正確的，而這種寫法的效果就是改變了select的值而沒有改變input的值。