jQuery 類似一個(gè)封裝好的函數(shù)，提供給我們各種方法，同樣的需求下，使用 jQuery 讓開發(fā)者少敲很多代碼并且解決不同瀏覽器兼容性的問題。
補(bǔ)全以下代碼

window.jQuery = ???
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可將所有 div 的 class 添加一個(gè) red
$div.setText('hi') // 可將所有 div 的 textContent 變?yōu)?hi

細(xì)節(jié)
封裝函數(shù)

function getSiblings(node){
    // write some code...
}

命名空間

命名空間可以防止污染全局變量。

var jQuery = {}
jQuery.getSiblings = function(node){ 
    // write some code...
}
jQuery.setText = function(node){
    // write some code...
}

// 調(diào)用函數(shù)時(shí)
jQuery.getSiblings(node)
jQuery.setText(node)

把node提前

// 調(diào)用函數(shù)時(shí)
node.getSiblings()
$node.getSiblings()

事實(shí)上， jQuery 的屬性和方法保存于 jQuery.prototype。不過這里不采用這種方法。

方法一：擴(kuò)展 Node 接口。直接在 Node.prototype 上加函數(shù)?？赡艿娘L(fēng)險(xiǎn)是覆蓋原生的屬性和方法。

Node.prototype.getSiblings = function(){
    // write some code...
}

方法二：添加新的接口。這叫做「無(wú)侵入」。

window.jQuery = function(nodeOrString){
            let nodes = {};
            if (typeof nodeOrString === 'string'){
                var tmp = document.querySelectorAll(nodeOrString);
                for (var i = 0; i < tmp.length; i++) {
                    nodes[i] = tmp[i];
                }
                nodes.length = tmp.length;
            } else if (nodeOrString instanceof node){
                nodes = {
                    0: nodeOrString,
                    length: 1
                }
            }
            nodes.addClass = function(classes){
                for(var i = 0; i < nodes.length; i++) {
                    nodes[i].classList.add(classes);
                }
            }
            nodes.setText = function(text){
                for(var i = 0; i < nodes.length; i++) {
                    nodes[i].textContent = text;
                }
            }
            return nodes;
        }
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可將所有 div 的 class 添加一個(gè) red
$div.setText('hi') // 可將所有 div 的 textContent 變?yōu)?hi