zepto(移动端）学习

最新推荐文章于 2024-04-26 15:08:48 发布

qiao若huan喜

最新推荐文章于 2024-04-26 15:08:48 发布

阅读量782

点赞数

分类专栏： zepto 文章标签：前端

本文链接：https://blog.csdn.net/qq_46143850/article/details/108884222

版权

zepto 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

zepto有什么用？

多用于移动端开发，也就是为了智能手机而产生的，非常简洁而且功能强大。

zepto是什么？

Zepto是一个轻量级的JavaScript库，它的文件大小只有10K左右，兼容现代高级浏览器，主要用于移动端的开发，它有着与jQuery类似的API.

zepto的特点是什么？和jQuery的比较？

Zepto.js 是专门为现代智能手机浏览器推出的 Javascript 框架, 拥有和jQuery相似的语法, 但是和jQuery相比下来, 他有很多优点：
1、大小方面 , 压缩后的 zepto.min.js 大小只有21K, 使用服务器端 gzip 压缩后大小只有5~10K, 可以说非常的小。
2、虽然体积小，但是功能很齐全, 多出来了一些触摸屏的事件 ,用它来开发iPhone和Android网页是首选，但它不支持IE。
3、Zepto是jQuery的精简，针对移动端去除了大量jQuery的兼容代码。
4、因为精简，所以Zepto核心库的性能要比jQuery优秀。

zepto怎么使用呢？

和jQuery的语法差不多，会使用jQuery的对于zepto就很容易上手。但是需要注意的是jQuery具有的事件，有一些zepto是不具有的。

关于zepto的常见面试题。

面试原型之jQuery和zepto的简单使用
1.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)
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>zepto test 1</p>
    <p>zepto test 2</p>
    <p>zepto test 3</p>

    <div id="div1">
        <p>zepto test in div</p>
    </div>

    <script type="text/javascript" src="./my-zepto.js"></script>
    <script type="text/javascript">
        var $p = $('p')
        $p.css('font-size', '40px')
        alert($p.html())

        var $div1 = $('#div1')
        $div1.css('color', 'blue')
        alert($div1.html())
    </script>
</body>
</html>

2.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)
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>jquery test 1</p>
    <p>jquery test 2</p>
    <p>jquery test 3</p>

    <div id="div1">
        <p>jquery test in div</p>
    </div>

    <script type="text/javascript" src="./my-jquery.js"></script>
    <script type="text/javascript">
        var $p = $('p')
        $p.css('font-size', '40px')
        alert($p.html())

        var $div1 = $('#div1')
        $div1.css('color', 'blue')
        alert($div1.html())
    </script>
</body>
</html>

注：此处代码非小编所写，代码来源

qiao若huan喜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
zepto(移动端）学习

文章目录zepto有什么用？zepto是什么？zepto的特点是什么？和jQuery的比较？zepto怎么使用呢？关于zepto的常见面试题。zepto有什么用？多用于移动端开发，也就是为了智能手机而产生的，非常简洁而且功能强大。zepto是什么？Zepto是一个轻量级的JavaScript库，它的文件大小只有10K左右，兼容现代高级浏览器，主要用于移动端的开发，它有着与jQuery类似的API.zepto的特点是什么？和jQuery的比较？Zepto.js 是专门为现代智能手机浏览器推出的 J
复制链接

扫一扫