zepto模块理解

core模块

构造器$():

与jQuery的$()几乎一样,但zepto的选择器是直接使用的原生querySelectorAll(),所以,一些jQuery自定义的选择器是不支持的。

$()选择器有五种用法:

$(选择器,[可选的上下文环境,默认document])

$("#id");/*document.getElementById("id")*/
$("#id time");/*document.querySelectorAll("#id time")*/
$("#id", $("head"));/*如果$('head')只有一个元素,那么就按head[0].querySelectorAll("#id")来取,否则循环$('head')取,返回的都是Zepto对象,可以传入DOM对象*/
$("<span>hello world</span>");/*将会创建一个span标签,*/
$("<span>",{text:'hello',id:'span-ele',css:{color:'red'}})/*创建一个id为span-ele,显示值为hello,红色的span标签*/
/*以上为作为选择器的使用方法*/
$(function () {
     //do...用过jQuery的应该都知道,这是绑定的DOMContentLoaded 事件
})

事件模块

绑定自定义事件

$(document).bind('abc',function(){console.log(1)})
//触发
$(document).trigger('abc');

推荐使用on和off

var elem = $('#content')
// observe all clicks inside #content:
elem.on('click', function(e){ ... })
// observe clicks inside navigation links in #content
elem.on('click', 'nav a', function(e){ ... })
// all clicks inside links in the document
$(document).on('click', 'a', function(e){ ... })
// disable following any navigation link on the page
$(document).on('click', 'nav a', false)

zepto.js的Touch模块
Touch events

/*
top 手按下再轻抬起
singleTap 单击
doubleTap 双击
//如果你不需要检测单击、双击，使用 tap 代替
longTap 长按(当一个元素被按住超过750ms触发)
swipe, swipeLeft, swipeRight, swipeUp, swipeDown 
当元素被划过时触发。(可选择给定的方向)
*/
<style>.delete { display: none; }</style>
<ul id=items>
  <li>List item 1 <span class=delete>DELETE</span></li>
  <li>List item 2 <span class=delete>DELETE</span></li>
</ul>

<script>
// show delete buttons on swipe
$('#items li').swipe(function(){
  $('.delete').hide()
  $('.delete', this).show()
})
// delete row on tapping delete button
$('.delete').tap(function(){
  $(this).parent('li').remove()
})
</script>