1、什么是zepto.js
概念：Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。 同时也是移动端开发框架,是jquery的轻量级代替品；
2、zepto.js特点：
-
针对的是移动端
-
轻量级，压缩版本只有8KB
-
语法大部分同jquery一样，学习成本低，上手快。
-
响应，执行快。
-
同jquery一样以$作为核心函数和核心对象。
举个例子;
<div id="btn">我是一个按钮</div>
<script src="../js/zepto.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/touch.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#btn').on('touchstart',function(){
alert('我是zepto')
});
$('body').append($('<p>我是新添加的p标签</p>'));
})
</script>虽然zepto和jQuery类似但不完全相同：
3、zepto core
相同点：
jquery:
* 核心函数$
1、作为函数使用（参数）
1.function //$(function(){})
2.html字符串
3.DOM code
4.选择器字符串
2、作为对象调用(方法)
1.$.ajax() $.get() $.post()
2.$.isArray()
$.each()
$.isFunction()
$.trim()
......
* jquery对象
概念：jquery核心函数$()调用返回的对象就是jquery对象的数组（可能有只有一个）；
使用：
1.addClass()
2.removeClass()
3.show()//$('#dis').show();
4.find()zepto:以上jquery的特性zepto同样适用相同的API：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>common</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background:#FF0000;
}
.box2{
width: 200px;
height: 200px;
background:#FF00FF;
}
.box3{
width: 200px;
height: 200px;
background: green;
}
#dis{
display: none;
}
</style>
</head>
<body>
<div class="box1">我是box1</div>
<div class="box2">我是box2</div>
<div class="box3">
<p>111</p>
<p>222</p>
<p>333</p>
</div>
<div id="dis">隐藏的元素</div>
<script src="../../js/zepto.js"></script>
<script src="../../js/touch.js"></script>
<script type="text/javascript">
$(function () {
$('.box1').on('touchstart',function () {
$(this).addClass('box2');
});
$('.box2').on('touchstart',function () {
$('#dis').show();
});
$('.box3').on('touchstart',function () {
$(this).find('p').css('background','red');
})
})
</script>
</body>
</html>
区别：
1 attr与prop的区别jQuery：
1、prop多用在标签的固有属性，布尔值属性。比如：a标签的href，class，selected等。
2、attr多用在自定义属性上。
3、在jquery中如果用attr去获取布尔值属性且该布尔值属性在标签体内没有定义的时候，会返回undefined<body>
<select style="font-size: 25px;">
<option value="name">科比</option>
<option value="name">韦德</option>
<option value="name" selected="selected">邓肯</option>
<option value="name">吉诺比利</option>
<option value="name" selected="selected">艾弗森</option>
</select>
<script src="../../../js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('option').each(function (index, item) {
//console.log(index, item.innerHTML);
console.log($(this).attr('selected'));//undefined 、undefined、selected、undefined、selected
console.log($(this).prop('selected'));// false false fales false true ;只能有一个option默认选中，最后一个把第三个属性值覆盖了，第三个为false
});
});
</script>
</body>zepto:
在zepto中用attr也可以获取布尔值属性.
prop在读取属性的时候优先级高于attr，布尔值属性的读取还是建议用prop <script src="js/zepto.js"></script>
<script src="js/touch.js"></script>
<script>
$(function () {
$('option').each(function (index,ele) {
console.log($(this).attr('selected'));//false false selected false selected
console.log($(this).prop('selected'));//false false fales false true
})
});
</script>
<body>
<select style="font-size: 25px;">
<option value="name">科比</option>
<option value="name">韦德</option>
<option value="name" selected="selected">邓肯</option>
<option value="name">吉诺比利</option>
<option value="name" selected="selected">艾弗森</option>
</select>
</body>2 插入dom对象
jquery插入一些dom对象时，同时添加该对象的配置对象（id,class...)，配置对象所表示的信息不会显示出来
来个例子：
<style>
#insert{
background: red;
}
</style>
<script src="js/jquery-1.10.1.min.js"></script>
<script>
$(function () {
let m=$('<p>我是新加的</p>',{id:"insert"});
$('body').append(m);
console.log(1);
});
</script>页面加载后效果：p标签没有背景颜色 ，p标签元素也没有id属性
zepto则不同，会显示配置对象信息：
来个例子：
<script src="js/zepto.js"></script>
<script src="js/touch.js"></script>
<style>
#insert{
background: red;
}
</style>
<script>
$(function () {
// let m=$('<p id="insert">我是新加的</p>');
let m=$('<p>我是新加的</p>',{id:"insert"});
$('body').append(m);
console.log(1);
});
</script>加载后效果：有背景颜色 p标签有属性
3 each方法
jQuery：
$.each(collection, function(index, item){ ... })
可以遍历数组,以index，item的形式，
可以遍历对象，以key-value的形式
不可以遍历字符串。
不可以遍历json字符串<script>
$(function () {
let arr=[1,3,7,6];
$.each(arr,function (index,item) {
console.log(index,item); // 0 1; 1 3; 2 7; 3 6
});
let obj={name:'libufan',age:18}
$.each(obj,function (key ,value) {
console.log(key ,value);//name libufan ;age 18
})
let str="haohaoxuexi";
// 遍历报错
$.each(str,function (a,b) {
console.log(a,b)
})
})
</script>zepto:可以遍历字符串
let str="haohaoxuexi";
$.each(str,function (index,value) {
console.log(index,value)// 0 h;1 a;2 o;3 h;...
})4 offset的区别
jQuery：
offset:
1、获取匹配元素在当前视口的相对偏移。
2、返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="js/jquery-1.10.1.min.js"></script>
<!-- <script src="js/zepto.js"></script>-->
<!-- <script src="js/touch.js"></script>-->
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
position: relative;
left: 50px;
top: 100px;
font-size: 22px;
background: #ff0;
text-align: center;
line-height: 200px;
}
</style>
<script>
$(function () {
<!--
offset:
1、获取匹配元素在当前视口的相对偏移。
2、返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。
-->
let offset= $('#box').offset()
console.log(offset);//{top: 100, left: 50}
console.log(offset.height)//undefined
})
</script>
<body>
<div id="box">新年快乐，大吉大利</div>
</body>
</html>zepto:
offset()
1、获得当前元素相对于视口的位置。
2、返回一个对象含有： top, left, width和height(获取的宽高是盒模型可见区域的宽高)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>zepto_offset的区别</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid blue;
position: relative;
left: 50px;
top: 50px;
font-size: 22px;
background: #FF0000;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<!--
* offset()
1、获得当前元素相对于视口的位置。
2、返回一个对象含有： top, left, width和height(获取的宽高是盒模型可见区域的宽高)
-->
<div id="box">新年快乐，大吉大利</div>
<script src="../../../js/zepto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var $offset = $('#box').offset();
console.log($offset);//{left: 50, top: 50, width: 222, height: 222}
console.log($offset.left);//50
console.log($offset.width);//222
})
</script>
</body>
</html>
5 width()和height（）
jQuery：
jquery获取宽高的方法
1、width(),height()---content内容区的宽高，没有单位px;
2、.css('width')----可以获取content内容区的宽高、padding和border的值，有单位px;
3、innerHeight(),innerWidth()---outerHeight(),outerWidth()来获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="js/jquery-1.10.1.min.js"></script>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background: #f00;
margin: 10px;
padding: 2px;
border: 1px solid #f0f;
}
</style>
</head>
<script>
$(function () {
console.log($('#box').width())//200 没单位
console.log($('#box').css('width'))// 200px
//可以通过css（）获取padding，border的值
console.log($('#box').css('padding'))//2px
//也可以利用innerHeight(),outerHeight(),innerWidth(),outerWidth()等来获取padding和border的值
console.log($('#box').innerHeight())//204
console.log($('#box').outerHeight())//206
})
</script>
<body>
<div id="box"></div>
</body>
</html>zepto:
zepto用width(),height()是根据盒模型决定的，并且不包含单位PX,包含padding的值和border的值
zepto中没有innerHeight(),innerWidth()---outerHeight(),outerWidth()<script>
$(function () {
//zepto用width(),height()是根据盒模型决定的，并且不包含单位PX
console.log($('#box').width())// 206
//用.css('width')获取的是content的宽高。
console.log($('#box').css('width'))// 200px
//* 单独获取padding，border的值
console.log($('#box').css('padding'))//2px
})
</script>7 委托事件
jQuery：在jquery中事件委托只是找相应的event.target触发元素进行的回调函数执行,其他的并不关心。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>jquery_事件委托</title>
<style type="text/css">
#box{
width: 400px;
background: green;
}
.a{
width: 200px;
height: 100px;
background: #FF0000;
}
.b{
width: 100px;
height: 100px;
background: #F0f;
}
</style>
</head>
<body>
<div id="box">
<div class="a">a的事件委托</div>
<br />
<br />
<br />
<div class="b">b的事件委托</div>
<br />
<br />
<br />
<div id="a">#a事件委托</div>
<p>Click me!</p>
</div>
<script src="../../../js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
console.log($('.a').length);
//1.7以后已经不 支持live了。
// $('#a').live('click',function(){
// alert('a');
// })
// $('#box').delegate('.a','click',function(){
// alert('delegate');
// })
//在jquery中事件委托只是找相应的event.target触发元素进行的回调函数执行,其他的并不关心。
$('#box').on("click",'.a',function(){
alert('a事件');
$(this).removeClass('a').addClass('b');
});
$('#box').on("click",'.b',function(){
alert('b事件');
$(this).removeClass('b').addClass('a');
});
$('#box').append('<div class="a" style="font-size: 10px;">我是新添加的div</div>')
})
</script>
</body>
</html>
zepto:
在zepto中事件委托 有一个坑
委托的事件先被依次放入数组队列里，然后由自身开始往后找直到找到最后，期间符合条件的元素委托的事件都会执行。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>zepto_事件委托</title>
<style type="text/css">
#box{
width: 400px;
background: green;
}
.a{
width: 200px;
height: 200px;
background: #FF0000;
}
.b{
width: 100px;
height: 100px;
background: #F0f;
}
</style>
</head>
<body>
<div id="box">
<div class="a">a 的事件委托</div>
<br />
<br />
<br />
<div class="b">b的事件委托</div>
<br />
<br />
<br />
<div id="a">#a的事件委托</div>
<p>Click me!</p>
</div>
<script src="../../../js/zepto.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/touch.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//在zepto的官网表示已经废除了live，delegate等。
// $('.a').live('click',function(){
// alert('a')
// })
//* 坑！！！！
/*
* ---在zepto中事件委托
委托的事件先被依次放入数组队列里，然后由自身开始往后找直到找到最后，期间符合条件的元素委托的事件都会执行。
要同时满足下面这四个元素
* 1、委托在同一个父元素,或者触发的元素的事件范围小于同类型事件(冒泡能冒到自身范围)
2、同一个事件
3、委托关联 操作的类要进行关联
4、绑定顺序---从当前的位置往后看
*/
$('#box').on("click",'.a',function(){
alert('a事件');
$(this).removeClass('a').addClass('b');
});
$('#box').on("click",'.b',function(){
alert('b事件');
$(this).removeClass('b').addClass('a');
});
$('#box').append($('<p>我是新添加的p标签</p>',{class:'a'}));
})
</script>
</body>
</html>
8 .获取隐藏元素的宽高
jQuery：可以获取隐藏元素的宽高。
<style type="text/css">
#box{
display: none;
width: 200px;
height: 200px;
border: 1px solid #ff0;
}
</style>
<body>
<div id="box"></div>
<script src="../../../js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
console.log($('#box').width())//200
</script>
</body>zepto:无法获取隐藏元素宽高
$(function () {
console.log($('#box').width());//0
console.log($('#box').height());//0
});
632
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
