jquery 中為什么能用$操作, $功能實現原理是什么？

前言
jquery對dom節點的操作相信大家都很熟悉，

$('username').val('admin');

直接用$來獲取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的這樣效果了。

實際

之后看了jquery源碼的寫法，果然不同凡響……

        (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');

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

其次，調用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的值。