zepto 入门
- 2017-03-17
- 文章来源:http://www.cnblogs.com/daysme
zepto 简介
- jq虽然有一些衍生的插件可用在移动端上,但它有点大。
- click 有,但有问题
- onmouseover 无
onmousemoser 无
touch
tap 像 pc 端的 click
300ms 用来判断点击有没有后续操作。
为了确认用户是单击还是双击。
由 iphone 也采用, android 后续采用。
移动端的所有 click 都要慢 300ms,
在移动端没有多少兼容问题,但 jq 有不少代码都是处理兼容的。
zepto 没有太多这些兼容代码,文件比较小。
zepto 本来的思想是让大家需要的功能自己加上去。所以核心代码只有7个模块。
- 然后也并不是谁都会封装的,封装也使 zepto 发展比较慢。
所以初学前期不建议去官网下载,而使用别人已经封装过其他功能的。
如果后期自己有了一些使用经验,感觉不够用时,再去 githup 下载源码,封装自己的版本。
实例
点击 tap
```
$(function(){
$(document).tap(function(){
alert(1);
})
})
```
触摸,按上去但没有松开手 touchstart
```
$(function(){
$(document).on('touchstart',function(){
console.log(1);
})
})
```
- 滑动,按住并移动 touchmove
离开屏幕,有时也用来代替点击 touchend
系统取消 touch 事件时。 touchcancel
- 安卓移动结束时触发 touchcancel 事件 ,
- 苹果正常触发 touchend 。
- 类似的兼容有表单输入时的输入法调用问题。
长按,750ms 时。 longTap
- 单击,和 tap 差不多。 singleTap
双击。 doubleTap
与 jquery 不同的, event 事件。在电脑上只有鼠标,在手机上有多个手指。
屏幕上的所有触点列表 e.touches
$(function(){ $(document).on('touchstart',function(e){ console.log(e.touches); }) })
触点一按下时的坐标 e.touches[0].clientX
```
$(function(){
$(document).on('touchstart',function(e){
console.log(e.touches[0].clientX);
})
})
```
- 位于 dom 上触点列表 e.targetTouches
涉及当前事件的触点列表 e.changedTouches
触点一离开时的坐标是多少?
- 因为手机和电脑不同,手机会有多个触点情况。所以不能直接通过 e.clientX 方式获取坐标。
- 移动端事件 event 里存在一个触点集合 touches 数组,通过获取数组的第一个元素来获取坐标位置,
- 也就是第一个触点的坐标。 e.touches[0].clientX e.touches[0].clientY 。
但是 touchend 事件代表触点离开屏幕,不存在触碰这一说。所以此时 e.touches 的长度是 0 。
- 也就是说不能再通过 touchend 的处理函数中获取坐标了。
- 需要通过 changedTouches 集合。
触点一离开时的坐标 e.changedTouches["0"].clientX
```
$(function(){
$(document).on('touchend',function(e){
console.log(e.touches); //长度为 0
console.log(e.changedTouches["0"].clientX);
})
})
```
如果需要获取 tap 的坐标,请使用 touchstart 。
```
$(function(){
$(document).on('touchstart',function(e){
console.log(e.changedTouches["0"].clientX);
})
})
```
从元素滑动 swipe
```
$(function(){
$(document).on('swipe',function(e){
console.log(1);
})
})
```
滑动方向, swipeUp/swipeRight/swipeDown/swipeLeft 如何斜着滑时,看哪边滑得多。
```
$(function(){
$(document).on('swipeUp',function(e){
console.log('swipeUp');
})
$(document).on('swipeRight',function(e){
console.log('swipeRight');
})
$(document).on('swipeDown',function(e){
console.log('swipeDown');
})
$(document).on('swipeLeft',function(e){
console.log('swipeLeft');
})
})
```
MD:
- 2017-03-17
- 文章来源:http://www.cnblogs.com/daysme
## zepto 简介 - jq虽然有一些衍生的插件可用在移动端上,但它有点大。
- click 有,但有问题
- onmouseover 无
- onmousemoser 无 - touch
- tap 像 pc 端的 click - 300ms 用来判断点击有没有后续操作。
- 为了确认用户是单击还是双击。 - 由 iphone 也采用, android 后续采用。
- 移动端的所有 click 都要慢 300ms, - 在移动端没有多少兼容问题,但 jq 有不少代码都是处理兼容的。
- zepto 没有太多这些兼容代码,文件比较小。 - zepto 本来的思想是让大家需要的功能自己加上去。所以核心代码只有7个模块。
- 然后也并不是谁都会封装的,封装也使 zepto 发展比较慢。
- 所以初学前期不建议去官网下载,而使用别人已经封装过其他功能的。 - 如果后期自己有了一些使用经验,感觉不够用时,再去 githup 下载源码,封装自己的版本。 ## 实例 **点击 tap** ```
$(function(){
$(document).tap(function(){
alert(1);
})
})
``` 触摸,按上去但没有松开手 touchstart ```
$(function(){
$(document).on('touchstart',function(){
console.log(1);
})
})
``` - 滑动,按住并移动 touchmove
- 离开屏幕,有时也用来代替点击 touchend - 系统取消 touch 事件时。 touchcancel
- 安卓移动结束时触发 touchcancel 事件 ,
- 苹果正常触发 touchend 。
- 类似的兼容有表单输入时的输入法调用问题。 - 长按,750ms 时。 longTap
- 单击,和 tap 差不多。 singleTap
- 双击。 doubleTap - 与 jquery 不同的, event 事件。在电脑上只有鼠标,在手机上有多个手指。 - 屏幕上的所有触点列表 e.touches ```
$(function(){
$(document).on('touchstart',function(e){
console.log(e.touches);
})
})
``` 触点一按下时的坐标 e.touches[0].clientX ```
$(function(){
$(document).on('touchstart',function(e){
console.log(e.touches[0].clientX);
})
})
``` - 位于 dom 上触点列表 e.targetTouches
- 涉及当前事件的触点列表 e.changedTouches - 触点一离开时的坐标是多少?
- 因为手机和电脑不同,手机会有多个触点情况。所以不能直接通过 e.clientX 方式获取坐标。
- 移动端事件 event 里存在一个触点集合 touches 数组,通过获取数组的第一个元素来获取坐标位置,
- 也就是第一个触点的坐标。 e.touches[0].clientX e.touches[0].clientY 。 - 但是 touchend 事件代表触点离开屏幕,不存在触碰这一说。所以此时 e.touches 的长度是 0 。
- 也就是说不能再通过 touchend 的处理函数中获取坐标了。
- 需要通过 changedTouches 集合。 触点一离开时的坐标 e.changedTouches["0"].clientX ```
$(function(){
$(document).on('touchend',function(e){
console.log(e.touches); //长度为 0
console.log(e.changedTouches["0"].clientX);
})
})
``` 如果需要获取 tap 的坐标,请使用 touchstart 。 ```
$(function(){
$(document).on('touchstart',function(e){
console.log(e.changedTouches["0"].clientX);
})
})
``` 从元素滑动 swipe ```
$(function(){
$(document).on('swipe',function(e){
console.log(1);
})
})
``` 滑动方向, swipeUp/swipeRight/swipeDown/swipeLeft 如何斜着滑时,看哪边滑得多。 ```
$(function(){
$(document).on('swipeUp',function(e){
console.log('swipeUp');
})
$(document).on('swipeRight',function(e){
console.log('swipeRight');
})
$(document).on('swipeDown',function(e){
console.log('swipeDown');
})
$(document).on('swipeLeft',function(e){
console.log('swipeLeft');
})
})
```
zepto 入门的更多相关文章
- Zepto入门
Zepto 的介绍 #什么是 Zepto zepto是轻量级的JavaScript库,专门为移动端定制的框架. 与jquery有着类似的API,俗称:会jquery就会用zepto #zepto的特点 ...
- http://www.imooc.com/video/4767 zepto教学视频笔记
一.介绍js移动端框架:zepto.js与jquery mobile 对比:zepto特点 1.与jquery相似度95%,会jquery基本会zepto: 2.API少,轻量级框架 3.移动端无缝接 ...
- 支持触屏的zepto轮播图插件
占个座,有时间再写,呵呵 关于zepto.js,官方标准版是不支持touch的.可以去github下载压缩包,里面有所有支持的模块.我用的zepto.js,是经过打包的,包括polyfill zept ...
- Zepto.js入门介绍
GitHub Zepto Zepto的一些可选功能是专门针对移动端浏览器的:因为它的最初目标在移动端提供一个精简的类似jquery的js库. Zepto不支持旧版本的Internet Explorer ...
- 11-移动端开发教程-zepto.js入门教程
Zepto.js是一个轻量级的针对现代浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. 1. Why Zepto.js? API类 ...
- zepto快速入门教程
* zepto* 特点:1.体积8kb2.针对移动端的框架3.语法同jquery大部分一样,都是$为核心函数4.目前功能完善的框架体积最小的左右* 同jquery相似的语法核心:$--作为函数使用参数 ...
- Javascript快速入门(下篇)
Javascript, cheer up. Ajax:其通过在Web页面与服务器之间建立一个额外的处理层,这个处理层就被称为Ajax引擎,它解释来自用户的请求,在后台以异步的方式处理服务器通信,其结构 ...
- Backbone入门
Backbone入门讲解 Backbone是一个实现了web前端mvc模式的js框架. 一种解决问题的通用方法,我们叫做模式. 设计模式:工厂模式,适配器模式,观察者模式等,推荐js设计模式这本书.设 ...
- 学习web前端怎样入门?初学者赶紧看过来!
web前端怎么样才能入门,首先我们要从什么是初级web前端工程师说起: 按照我的想法,我把前端工程师分为了入门.初级.中级.高级这四个级别, 入门级别指的是了解什么是前端(前端到底是什么其实很多人还是 ...
随机推荐
- maven build 的时候,卡死在Downloading metadata的解决方法
[INFO] [INFO] ------------------------------------------------------------------------ [INFO] Buildi ...
- redis的数据类型命令
存储sortedset: 存储:zadd key score menber1 score menber2 ... 升序排列:zrange key start end [withscores] 降序排列 ...
- linux java -version 和 javac -version 不一致
我是在6 的基础上又装了一个 8. 结果java -v 和 javac -v的 一个显示 6 一个显示8 解决方式: 再次source 一下配置文件 如: source ~/.bashrc 或者 ...
- bzoj1606
题目链接 反着循环就是每个东西只能选一次 #include<iostream> #include<cstdio> #include<cstdlib> #includ ...
- linux OS与SQL修改时区,系统时间
linux修改系统时间和linux查看时区.修改时区的方法 一.查看和修改Linux的时区 1. 查看当前时区命令 : "date -R" 2. 修改设置Linux服务器时区方法 ...
- ORCAl存储过程
1.存储过程结构 1.1 第一个存储过程 create or replace procedure proc1( para1 varchar2, para2 out varchar2, para3 in ...
- GoldenGate Logdump基本使用
Logdump是GoldenGate复制软件中附带的一个工具软件,在OGG的目录下可以找到.这个工具主要用于分析OGG生成的队列文件,查找记录.统计队列文件中的数据等. 在OGG安装目录下执行logd ...
- java中的关键字、保留字、标识符
Java关键字(KeyWord): 对Java的编译器有特殊的意义,他们用来表示一种数据类型或者表示程序的结构. Java保留字(Reserved Word):为Java预留的关键字,现在还没有用到 ...
- Always an integer UVALive - 4119
题目很简单,就是求表达式(P/D)的结果是不是整数.其中P是一个整系数的多项式,D是一个正整数. 把1-k(最高次)+1都试一次就好了.结论可以总结归纳得到.(k取 0, 1, 2 .... 的情况推 ...
- 4-20mA电流环路发送器入门(转)
4-20mA电流环路发送器入门 作者:Collin Wells, 德州仪器精密模拟应用工程师 在现代工业控制系统中,4-20 mA电流环路发送器一直是在控制中心和现场传感器/执行器之间进行数据传输最为 ...