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前端工程师说起: 按照我的想法,我把前端工程师分为了入门.初级.中级.高级这四个级别, 入门级别指的是了解什么是前端(前端到底是什么其实很多人还是 ...
随机推荐
- 20165305 苏振龙《Java程序设计》第七周学习总结
第十一章 JDBC技术在数据库开发中占有很重要的地位,JDBC操作不同的数据库仅仅是连接方式上的差异而已,使用JDBC的应用程序一旦和数据库建立连接,就可以使用JDBC提供的API操作数据库. 当查询 ...
- maven 入门 (一)
纠结了好久,到底要不要写一份maven入门的所谓“教程”,有好几次想写一下,但是都放弃了,因为网上的太多了,而且都很好,但是现在决定了,还是要写出来,因为者有我自己的理解.所以我想写一份教程出来. 首 ...
- centos下搭建Jenkins持续集成环境(安装jenkins)
1.安装JDK yum install -y java 2.安装jenkins 添加Jenkins库到yum库,Jenkins将从这里下载安装. 1 wget -O /etc/yum.repos.d/ ...
- Python+OpenCV图像处理(十二)—— 图像梯度
简介:图像梯度可以把图像看成二维离散函数,图像梯度其实就是这个二维离散函数的求导. Sobel算子是普通一阶差分,是基于寻找梯度强度.拉普拉斯算子(二阶差分)是基于过零点检测.通过计算梯度,设置阀值, ...
- Django框架----Object Relational Mapping(ORM)
Django中的ORM Django项目使用MySQL数据库 1. 在Django项目的settings.py文件中,配置数据库连接信息: DATABASES = { "default&qu ...
- JavaScript 中禁止用户右键菜单,复制,选取,Ctrl,Alt,Shift. 获取宽高,清除浮动
//禁用右键菜单 document.oncontextmenu = function(){ event.returnValue = false; } //禁用选取内容 document.onselec ...
- SRTP参数及数据包处理过程(转)
源: SRTP参数及数据包处理过程
- django模型的crud操作
一个建立好的模型,django会生成一套完整的API,以便对对象进行crud操作,下面就详细介绍crud操作. 先说一下操作环境: python2.7, django1.11.8, win7系统,借助 ...
- Yii笔记:打印sql、Form表单、时间插件、Mysql的 FIND_IN_SET函数使用、是否是post/ajax请求
语句部分: yii1版本打印最后一条执行的SQL: $this->getDbConnection()->createCommand()->select()->from()-&g ...
- MySQL更改relay-bin名称导致同步停止的解决办法
今天在优化io的时候,移动了从库relay-bin的位置,并将hostname部分去掉了,启动后,从库slave状态如下: mysql> show slave status\G; ******* ...