有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Zepto.js

javascript cat 10个月前 (12-15) 45次浏览 已收录 0个评论 扫描二维码

zepto

Zepto 是移动端开发框架,是 jQuery 的轻量级代替品;API 及语句同 jQuery 相似,但文件更小(可压缩至 8KB)。是目前功能完备的库中最小的一个。随着移动端的愈加火爆,目前很多 HTML5 的框架都在支持移动方向,Zepto 就是 jQuery 的移动端版本, 可以看做是一个轻量级的jQuery。*如果你会用jQuery,那么你也会用Zepto*, Zepto的设计目的是提供 jQuery的类似的 API,但并不是 100%覆盖 jQuery 。Zepto 有一个 5-10k 的通用库、下载并快速执行、有一个熟悉通用的 API,所以你能把你主要的精力放到应用开发上。

Zepto.js 中文文档:https://zeptojs.bootcss.com/

、Zepto.js 介绍

1)Zepto.js 特点

1、针对的是移动端

2、轻量级,压缩版本只有 9.6KB

3、语法大部分同 jQuery 一样,学习成本低,上手快

2)jQuery 和 Zepto 的区别在哪里

1、jQuery 更多是在 PC 端被应用,因此,考虑了很多低级浏览器的的兼容性问题;而Zepto.js 则是直接抛弃了低级浏览器的适配问题,显得很轻盈;

2、Zepto.js 在移动端被运用的更加广泛;

3、jQuery 的底层是通过 DOM 来实现效果的,Zepto.js 是用 css3 来实现的;

4、Zepto.js 可以说是轻量级版本的 jQuery

2、zepto模块

为了保持原码的精简,Zepto 默认只加载一些模块,当你需要某些模块时,可以把对应的模块加载进来。

3、zepto的使用

<script src="js/zepto.min.js"></script>
<script src="js/touch.js"></script>
<script src="js/fx.js"></script>
<script>
    $('#box').on('tap', function () {
        console.log('哥们,点我了');

        $(this).animate({
            width: 300,
            height: 300,
            background: 'yellow'
        }, 3000, function () {
            console.log('哥们,我运动完成了');
        })
    });

</script>

4、zepto的特点

1、获取元素宽高
var box = $('#box');

// Zepto 的 width()、height()是根据盒模型决定的,包含 padding 和 border 的值。而jq仅仅返回元还给的宽高
// Zepto 中没有 innerWidth()和 outerWidth()系列

console.log(box.width()); // jq 100   zepto 122
console.log(box.height()); // jq 100   zepto 122

console.log(box.innerWidth()); // jq 120
console.log(box.outerWidth()); // jq 122
2、offset
var box3 = $('.box3');

// jq: {top: 108, left: 88}
// zepto: {left: 88, top: 108, width: 199, height: 100}

// jq的offset只返回元素的位置
// zepto的offset队了返回元素的位置,还返回元素的宽高,但是宽高包含padding+border
console.log(box3.offset());

// 同jq中的position,返回元素离它最近的有定位属性的父级的距离
console.log(box3.position());
3、touch事件

原生事件

touchcancel (事件被打断)

touchend (触摸结束)

touchmove (触摸中)

touchstart (触摸开始)

以下均为zepto模拟出来的移动端事件

var box = $('#box');

// 点击
box.on('tap', function () {
    console.log('tap');
})

// singleTap 和 doubleTap 这一对事件可以用来检测元素上的单击和双击。(如果你不需要检测单击、双击,使用 tap 代替)
// 单击
box.on('singleTap', function () {
    console.log('singleTap');
})

// 双击
box.on('doubleTap', function () {
    console.log('doubleTap');
})

// 长按: 当一个元素被按住超过 750ms 触发
box.on('longTap', function (ev) {
    console.log('longTap');
});

// 滑动 : 当元素被划过(同一个方向滑动距离大于 30px)时触发
box.on('swipe', function () {
    console.log('swipe');
});

box.on('swipeLeft', function () {
    console.log('swipeLeft');
});

box.on('swipeUp', function () {
    console.log('swipeUp');
});

box.on('swipeRight', function () {
    console.log('swipeRight');
});

box.on('swipeDown', function () {
    console.log('swipeDown');
});
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址