zepto.js
1.概述
针对现代浏览器的JSDOM库 (IE10+)
比起jquery:
更轻量
兼容性更小
通常用作移动端浏览器上
文档:
https://www.html.cn/doc/zeptojs_api/
2.选择器
语法和jquery一模一样,但不支持jquery原创选择器
$(“div:odd”)
$(“div:even”)
$(“div:first”)
$(“div:last”)
$(“div:eq(0)”)
$(“div:lt(0)”)
$(“div:gt(0)”)
但支持css3选择器
$(“div:first-of-type”)
$(“div:nth-of-type(2n+1)”)
$(“div:last-of-type”)
也就是说,zepto底层调用的是document.querySelectAll()方法
3.常用方法属性
html()
$(“div”).html(“zepto”)
parents(),children(),find()
关系类函数
<body>
<ul>
<li>
<div class="box"></div>
</li>
<li></li>
<li></li>
</ul>
</body>
<script>
$("ul").find(".box")
$("ul").children("li")
$("li").parents("ul")
</script>
offset(),position()
位置类函数
获取偏移量,返回一个对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dJN8Byia-1571308886098)(C:\Users\z\AppData\Roaming\Typora\typora-user-images\1571302226044.png)]
appendTo(),append(),prepend(),prependTo()
DOM类函数
后面有To的,是在这个元素的前面/后面加,不加To的,是在元素内部的最前面/最后面添加元素
若想在元素内部中间加元素,就找到中间的子元素并使用appendTo和prependTo
4.动画
zeptojs为了让库尽量小,把部分模块剔除了,
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GlmpONze-1571308886099)(C:\Users\z\AppData\Roaming\Typora\typora-user-images\1571302639506.png)]
只有勾选为勾的部分才在下载的zepto中出现
如果要添加插件,直接在官网点击,得到源代码后添加到zepto.js的最后即可
$(“div”).animate({},timer,linear,()=>{
//做完之后的回调
})
原理是过渡,与jquery完全不同(jquery用的动画)
jquery不支持transform动画,而zepto支持
5.事件
原生事件都支持(移动端点击事件有一定问题 有300ms的延迟)
还有一个封装了tap swipeLeft等事件的包(touch),但是不好用,还是原生的touch事件方便
在移动端中,touch才是真正的点击事件
触发touchstart事件 不触发touchmove事件,同时在多少毫秒之内触发touchend事件,这个过程称为移动端的点击事件-tap
总结
生的touch事件方便
在移动端中,touch才是真正的点击事件
触发touchstart事件 不触发touchmove事件,同时在多少毫秒之内触发touchend事件,这个过程称为移动端的点击事件-tap
总结
zepto和jQuery区别不大,但是zepto不支持jq的自带选择器,并且zepto部分模块需要自己引入,zepto的动画比jquery更加强大.
846
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
