Zepto-API知识梳理
Zepto
- 特点：
1、体积8kb
2、针对移动端的框架
3、语法同jquery大部分一样，都是$为核心函数
4、目前功能完善的框架体积最小的左右
同jquery相似的语法
核心：.each()
2、.ajax()
.post()
4、调用返回的就是 jquery对象/zepto对象 伪数组(有时候只有一个元素)
zepto同jquery不同的API
attr和prop
attr与prop的区别:
1、prop多用在标签的固有属性，布尔值属性。比如：a标签的href，class，selected，checked等。
- 2、attr多用在自定义属性上。
- 3、jquery中用attr获取布尔值属性且布尔值属性在标签体内没有定义的时候会得到 undefined；
在zepto中用attr也可以获取布尔值属性;
prop在读取属性的时候 优先级 高于attr，布尔值属性的读取还是建议用prop;
坑！------zepto中 removeProp()的方法。在1.2+版本才支持。
demo:
$(function(){
$('option').each(function(index,item){
//console.log(index,item)
//console.log($(this).attr('selected'))
console.log($(this).prop('selected'))
})
})
DOM操作
jquery中插入DOM元素的时候添加配置对象(比如：id，class等。。。)不起作用。
Zepto 插入DOM元素的时候添加配置对象（id，class等。。）的时候可以添加进去，并且会直接显示在标签属性内，可以操作，影响DOM元素。
$(function(){
var $p = $('<p> 这是新添加的p标签啊</p>',{
id:'insert',
class:'insert'
})
$('#box').append($p)
})
each方法:
jq:
.each(collection, function(index, item){ ... })
可以遍历数组,以index，item的形式，
可以遍历对象，以key-value的形式
可以遍历字符串。
遍历json对象以字符串的形式遍历。
offset()的区别
jq:
offset();
1、获取匹配元素在当前视口的相对偏移。
2、返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。
Z:
offset()
1、获得当前元素相对于视口的位置。
2、返回一个对象含有： top, left, width和height(获取到的width，height都是包含padding和border的值)
width(),height()区别:
jq:
jquery获取宽高的方法
1、width(),height()---content内容区的宽高，没有单位px
2、.css('width')----可以获取content内容区的宽高、padding、border的值，有单位px;
3、innerHeight(),innerWidth()---outerHeight(),outerWidth()来获取
Z:
zepto中的width(),height()是根据盒模型来取值的，包含补白和border的值。且不带单位。
zepto中没有innerHeight(),innerWidth()---outerHeight(),outerWidth()
.css获取的width，height是内容区的宽高，包含单位。
通过.css()获取padding，border的值
隐藏元素宽高:
jquery可以获取隐藏元素的宽高。
zepto无法获取隐藏元素宽高
事件委托:
原理：利用冒泡的原理将事件绑定到父元素/祖先元素身上，event.target指向的子元素
zepto：
1、委托同一个父元素身上
2、同一个世界
3、操作关联，操作对应的元素/类
4、顺序
5、谁操作的关联类就是谁触发的
在zepto中事件委托
委托的事件先被依次放入数组队列里，然后由自身开始往后找直到找到最后，期间符合条件的元素委托的事件都会执行。
1、委托在同一个父元素,或者触发的元素的事件范围小于同类型事件(冒泡能冒到自身范围)
2、同一个事件
3、委托关联 操作的类要进行关联
4、绑定顺序---从当前的位置往后看
touch Event:
- 1、同jquery类似事件:
on() 绑定事件处理程序
off() 方法移除用目标元素on绑定的事件处理程序。
bind() 为每个匹配元素的特定事件绑定事件处理函数，可同时绑定多个事件，也可以自定义事件。
one() 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。只执行一次。
trigger() 触发有bind定义的事件（通常是自定义事件）
unbind() bind的反向操作，删除匹配元素所绑定的bind事件。
$(function(){
$('#btn1').on('touchstart',function(){
alert('我是btn1');
});
// $('#btn1').off('click');
//bind
$('.btn2').bind('touchstart touchmove',function(){
$(this).toggleClass("btnSty")
});
//one
$('#btn3').one('click',function(){
alert('我是btn3')
});
//trigger 自动执行
$('#btn1').bind('myTouch',function(event,a,b){
alert('我是由trigger触发的btn');
console.log(a + ' ' + b);
});
$('#btn1').trigger('myTouch',['hello','world']);
//unbind
$('#btn2').unbind('touchmove');
})
- 2、zepto的touch event:
- tap点击事件
- singleTap()点击事件
- doubleTap()双击事件
- longTap()长按事件--连续作用750ms
- 滑动事件(浏览器的默认行为---翻页---touch-action)
1、swipe滑动事件 在同一个方向连续滑动30px才为滑动，否则就是点击
2、longTap长按事件 手指在目标对象上连续作用超过750ms算长按，否则算点击
- tap点击事件
<script type="text/javascript">
$(function () {
//tap()点击事件---真机测没问题
// $('#box').tap(function () {
// alert('tap事件');
// });
$('#box').on('tap',function () {
alert('tap事件');
});
//singleTap()单击事件
$('#box2').singleTap(function () {
alert('我单击了一下');
});
//doubleTap() 双击事件
$('#box2').doubleTap(function () {
alert('我双击了一下');
});
//longTap()长按事件----按住屏幕时间超过750ms触发
$('#box3').longTap(function () {
alert('我长按了一下box3');
});
//swipe()滑动事件---在同一个方向连续滑动超过30px
// $('#btn').swipe(function () {
// alert('我滑动了超过30px');
// });
$('#btn').swipeLeft(function () {
alert('我向左滑动了');
});
});
</script>
事件处理机制:
zepto有自己的一套事件机制，并且对不同的浏览器做了兼容的内部封装处理。
- 1、像新版本的zepto中已经舍弃了bind，delegate，die，同样jquery中舍弃了live，die等。
- 2、现在统一使用on，off标准事件来绑定事件。
$(function(){
//简单绑定
$('#box').on('touchstart',function(){
alert('ddd');
});
//事件委托
$('#box1').on('touchstart','p',function(){
alert($(this).text());
});
//解除绑定事件
//$('#box').off('touchstart');
//一次函数
$('#box2').one('touchstart',function(){
alert('我就执行一次');
});
})
z中的form：
1、serialize()
* 在Ajax post请求中将用作提交的表单元素的值编译成 URL-encoded 字符串。---key(name)/value
2、serializeArray()
* 将用作提交的表单元素的值编译成拥有name和value对象组成的数组。
* 不能使用的表单元素，buttons，未选中的radio buttons/checkboxs 将会被跳过。
3、submit()
* 为 "submit" 事件绑定一个处理函数，或者触发元素上的 "submit" 事件。
* 当参数function没有给出时，触发当前表单“submit”事件，并且执行默认的提交表单行为，除非阻止默认行为。
$(function(){
//serialize()
var list = $('form').serialize();
console.log(list);
//serializeArray()
var listArr = $('form').serializeArray();
console.log(listArr);
//submit()
$('form').submit(function(e){
e.preventDefault();
var data = $(this).serialize();
console.log(data);
})
})
Ajax:
如何废除一个ajax请求 ----abort()方法
- 需求：点击获取验证码的按钮，用户十秒时候可以再次获取，当十秒过后第一次请求没有返回，用户再次点击获取
- 然后因为网速好或者其他原因，两次请求同时返回，该怎么解决
- disabled属性 设置表单项或者按钮不可再点击或者操作；但是只是针对click事件，而并没有针对touch事件作出处理。
<script type="text/javascript">
$(function () {
var xmlHttp = null;//初始化xmlHttp对象
var isSend = false;//初始化判断按钮是否可以点击
$('#btn').on('touchstart', function () {
if(isSend === true){//如果不能点击，直接返回
return;
}
$(this).css('background', 'gray');
isSend = true;//修改为不能点击
if(xmlHttp === null){//如果用户首次点击，发送请求
xmlHttp = sendXmlHttp();
}else{
xmlHttp.abort();//再次点击的时候取消上一次请求
xmlHttp = sendXmlHttp();//再次发送最新的请求
}
setTimeout(function () {
$('#btn').css('background', 'red');
isSend = false;//2s以后用户可以再次点击
}, 2000);
});
//发送ajax请求的函数;
function sendXmlHttp() {
var xmlHttp = null;
xmlHttp = $.ajax({
type : 'GET',
url : 'http://localhost:3000/',
dataType : 'json',
success : function (msg) {
console.log(msg);
},
error : function (error) {
console.log(error);
}
});
return xmlHttp;
}
});
</script>
