有时候在写一些练习或者小的项目时，我们可能只想用用jquery的$选择器，好用的hide、show等等一些基础的API，那么我们又不想因为这么几个API来引入一个jquery的js文件，那么自己封装一个最好不过了。

(function (document) {    function DomObject(dom) {        this.dom = dom;    }    function $(selector) {        return new DomObject(document.querySelector(selector));    }    DomObject.prototype.get = function () {        return this.dom;    }    DomObject.prototype.on = function(eventName, eventHandler) {        this.get().addEventListener(eventName, eventHandler);        return this;    }    DomObject.prototype.css = function(styleKey, styleValue) {        this.get().style[styleKey] = styleValue;        return this;    };    DomObject.prototype.hide = function() {        this.get().style.display = 'none';        return this;    };    DomObject.prototype.show = function() {        this.get().style.display = 'block';        return this;    }    $('.main #btn-hide').on('click', function() {        $('h2').hide();    });    $('.container #btn-show').on('click', function() {        $('h2').show().css('color','red');    });})(document);

首先创建一个构造函数，传入一个dom对象作为参数，在构造函数的原型对象上就可以绑定各种事件，比如on，show甚至是jquery中没有的css等等，如果想实现链式调用，即返回this对象即可。利用querySelector来封装$，上面的示例只是简单的封装，并没有实现兼容性的写法，比如on对于IE的处理。事件侦听可以更加丰富：只是对于jquery的实现原理进行的简单的模拟。

简单的封装一下，就可以愉快的写东西啦。