zepto、jquery如何使用原型

最新推荐文章于 2021-10-07 18:48:50 发布

原创最新推荐文章于 2021-10-07 18:48:50 发布 · 205 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#原型

基础知识复习巩固专栏收录该内容

40 篇文章

订阅专栏

本文介绍了两种流行的轻量级JavaScript库Zepto和jQuery的使用方法，重点讲解了如何通过原型扩展来实现DOM操作功能，如css和html方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

zepto如何使用原型

(function (window) {

    var zepto = {}

    function Z(dom, selector) {
        var i, len = dom ? dom.length : 0
        for (i = 0; i < len; i++) {
            this[i] = dom[i]
        }
        this.length = len
        this.selector = selector || ''
    }

    zepto.Z = function (dom, selector) {
        return new Z(dom, selector)
    }

    zepto.init = function (selector) {
        var slice = Array.prototype.slice
        var dom = slice.call(document.querySelectorAll(selector))
        return zepto.Z(dom, selector)
    }

    var $ = function (selector) {
        return zepto.init(selector)
    }
    window.$ = $

    $.fn = {
        css: function (key, value) {
            alert('css')
        },
        html: function (value) {
            return '这是一个模拟的 html 函数'
        }
    }
    Z.prototype = $.fn
})(window)

jquery如何使用原型

(function (window) {

    var jQuery = function (selector) {
        return new jQuery.fn.init(selector)
    }

    jQuery.fn = {
        css: function (key, value) {
            alert('css')
        },
        html: function (value) {
            return 'html'
        }
    }

    var init = jQuery.fn.init = function (selector) {
        var slice = Array.prototype.slice
        var dom = slice.call(document.querySelectorAll(selector))

        var i, len = dom ? dom.length : 0
        for (i = 0; i < len; i++) {
            this[i] = dom[i]
        }
        this.length = len
        this.selector = selector || ''
    }

    init.prototype = jQuery.fn

    window.$ = jQuery

})(window)