JavaScript - 封裝簡(jiǎn)單版 jQuery

  • 模塊化
(function(){
    ......            
})()
  • 聲明一個(gè) jQuery 函數(shù)
(function(){
    // 聲明一個(gè) jQuery函數(shù)
    function jQuery(){
                
    }

    // 給 window 對(duì)象添加一個(gè) jQuery 函數(shù)
    window.$ = window.jQuery = jQuery;
})()
  • 實(shí)現(xiàn)功能:$("div").css("color", "red")
(function() {
    function jQuery(selector) {
        return new jQuery.prototype.init(selector);
    }

    window.$ = window.jQuery = jQuery;

    jQuery.prototype = {
        constructor:jQuery,
        init:function(selector) {
            var elements = document.querySelectorAll(selector);
                
            for (var i=0; i<elements.length; i++) {
                this[i] = elements[i];
            }

            this.length = elements.length;
        }
    }

    jQuery.prototype.init.prototype = {
        constructor:jQuery.prototype.init,
        css:function(name, value) {
            for (var i=0; i<this.length; i++) {
                this[i].style[name] = value;
            }
        }
    }
})()

  • 測(cè)試
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>

    <script>
        (function() {
            function jQuery(selector) {
                return new jQuery.prototype.init(selector);
            }

            window.$ = window.jQuery = jQuery;

            jQuery.prototype = {
                constructor:jQuery,
                init:function(selector) {
                    var elements = document.querySelectorAll(selector);
                
                    for (var i=0; i<elements.length; i++) {
                        this[i] = elements[i];
                    }

                    this.length = elements.length;
                }
            }

            jQuery.prototype.init.prototype = {
                constructor:jQuery.prototype.init,
                css:function(name, value) {
                    for (var i=0; i<this.length; i++) {
                        this[i].style[name] = value;
                    }
                }
            }
        })()

        $("div").css('color', 'red');
    </script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,770評(píng)論 1 45
  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,789評(píng)論 0 3
  • 一.什么是jQuery jQuery是一個(gè)JavaScript庫(kù),它通過(guò)封裝原生的JavaScript函數(shù)得到一整...
    love2013閱讀 630評(píng)論 0 4
  • 請(qǐng)參看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon閱讀 7,743評(píng)論 2 19
  • 前端開發(fā)面試題 面試題目: 根據(jù)你的等級(jí)和職位的變化,入門級(jí)到專家級(jí),廣度和深度都會(huì)有所增加。 題目類型: 理論知...
    怡寶丶閱讀 2,669評(píng)論 0 7

友情鏈接更多精彩內(nèi)容