javascript 仿jQuery的無new構造函數

/* 匿名函數 傳入 window 值全局變量成爲局部變量 */
    (function(window,undefined) {
        /* 申明一個名爲jQuery 的函數*/
        function jQuery(selector) {
            /* 返回 jQuery 實例 */
            return new jQuery.prototype.init(selector);
        }
        /* 爲jQuery函數原型添加一個初始化 init 方法 */
        jQuery.prototype.init=function (selector) {
            this.el=document.querySelectorAll(selector)[0];
        };
        /* 爲jQuery函數原型添加一個 html 方法 */
        jQuery.prototype.html=function(str){
            if(str){
                this.el.innerHTML=str;
            }else {
                return this.el.innerHTML;
            }
            return this;
        };
        /* 爲jQuery函數原型添加一個 color 方法 */
        jQuery.prototype.color=function(rgb){
            if(rgb){
                this.el.style.color=rgb;
            }
            return this;
        };
        /* 將jQuery的原型 賦值給初始化方法的原型*/
        jQuery.prototype.init.prototype = jQuery.prototype;
        /* 設置jQuery函數的別名 $ 並設置爲window全局對象的屬性 */
        window.$=window.jQuery=jQuery;
    })(window,undefined);

<!-- html -->
<div id="div1">123</div>
 
<!-- js -->
$("#div1").html('<h1>helang.love@qq.com</h1>').color("#ff0000");


運行效果:

相關文章
相關標籤/搜索