Zepto
HelloWorld
- 什么是zepto.js
概念: 移动端开发框架;API及语句同jQuery相似,但文件更小(可压缩至8KB)。
是目前功能完备的库中,最小的一个 - zepto.js特点
1、针对的是移动端
2、轻量级,压缩版本只有8KB
3、语法大部分同jQuery一样,学习成本低,上手快。
4、响应,执行快。
5、同jQuery一样都是以$为核心函数。
Zepto_与jQuery不同的API
-
attr和prop
-
<select style="font-size:25px;"> <option value="">科比</option> <option value="">韦德</option> <option value="" selected="selected">邓肯</option> <option value="">吉诺比利</option> <option value="" selected="selected">艾弗森</option> </select>
-
jQuery
1、prop多用在标签的固有属性,布尔值属性。比如:a标签的href,class,selected,checked等。
2、attr多用在自定义属性上。
3、jquery中用attr获取布尔值属性且布尔值属性在标签体内没有定义的时候会得到 undefined;
$(function () { $('option').each(function (index,item) { //console.log($(this).attr('selected'));//2undefined selected undefined selected console.log($(this).prop('selected'));//4false true }) })
-
Zepto
在zepto中用attr也可以获取布尔值属性;
prop在读取属性的时候 优先级 高于attr,布尔值属性的读取还是建议用prop;
坑!------zepto中 removeProp()的方法。在1.2+版本才支持。$(function () { $('option').each(function (index,item) { console.log($(this).attr('selected'));//2false selected false selected //console.log($(this).prop('selected'));//4false true }); });
-
-
DOM操作
-
jQuery
jquery中插入DOM元素的时候添加配置对象(比如:id,class等。。。)不起作用。
style type="text/css"> #insert{ background: #ffff00; } </style> <script type="text/javascript"> $(function () { var $p=$('<p>我是新添加的元素',{ id: 'insert' });//添加配置对象(插入一个元素并添加各个属性) 这个在jQuery中不行 $('#box').append($p); }) </script>
-
Zepto
插入DOM元素的时候添加配置对象(id,class等。。)的时候可以添加进去,并且会直接显示在标签属性内,可以操作,影响DOM元素。
$(function () { var $p=$('<p>我是新添加的元素',{ id: 'insert', class:'insert' });//添加配置对象(插入一个元素并添加各个属性) 这个在jQuery中不行 $('#box').append($p); })
-
-
each方法
-
jQuery
$.each(collection, function(index, item){ … })
可以遍历数组,以index,item的形式,
可以遍历对象,以key-value的形式
不可以遍历字符串。也就是不能遍历json的对象$(function () { var arr=[12,3,4,5]; $.each(arr,function (index,item) { console.log(index,item); }); var obj={username:'xuefeng',age:12}; $.each(obj,function (key,value) { console.log(key,value); }) })
-
Zepto
$.each(collection, function(index, item){ … })
可以遍历数组,以index,item的形式,
可以遍历对象,以key-value的形式可以遍历字符串。
遍历json对象以字符串的形式遍历。*
$(function () { var str='abcd'; $.each(str,function (a,b) { console.log(a,b); }); var objJson=JSON.stringify({username:'tianjinfeng'}); $.each(objJson,function (a,b) { console.log(a,b); }) });
-
-
offset()
-
jQuery
offset();
1、获取匹配元素在当前视口的相对偏移。
2、返回的对象包含两个整型属性:top 和 left。此方法只对可见元素有效。<style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 200px; height: 200px; position: relative; left: 100px; top: 100px; background: #ff0; text-align: center; line-height: 200px; } </style> <script type='text/javascript'> $(function () { var $offset=$('#box').offset(); console.log($offset); }); </script>
-
Zepto
offset()
1、获得当前元素相对于视口的位置。
2、返回一个对象含有: top, left, width和height(获取到的width,height都是包含padding和border的值)<style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 200px; height: 200px; position: relative; left: 50px; top: 50px; text-align: center; line-height: 200px; background: #f00; padding:10px; border:2px solid yellow; } </style> <script type='text/javascript'> $(function () { var $offset=$('#box').offset(); console.log($offset); }); </script>
-
-
width(),height()区别
-
jQuery
jquery获取宽高的方法
1、width(),height()—content内容区的宽高,没有单位px
2、.css(‘width’)----可以获取content内容区的宽高、padding、border的值,有单位px;
3、innerHeight(),innerWidth()—outerHeight(),outerWidth()来获取<style type="text/css"> #box{ width: 200px; height: 200px; background: #f00; margin: 10px; padding: 10px; border: 3px solid #f0f; } </style> <script type="text/javascript"> $(function(){ //jquery中width(),height(),.css()返回的始终是content区域的宽高 console.log($('#box').width());//200 console.log($('#box').height());//200 console.log($('#box').css('width'));//200px //可以通过css()获取padding,border的值 console.log($('#box').css('padding'));//10px console.log($('#box').css('border-width'));//3px //也可以利用innerHeight(),outerHeight(),innerWidth(),outerWidth()等来获取padding和border的值 console.log($('#box').innerHeight());//220 console.log($('#box').outerHeight()+'outerHeight');//226outerheight }) </script>
-
Zepto
zepto中的width(),height()是根据盒模型来取值的,包含补白和border的值。且不带单位px
.css获取的width,height是内容区的宽高,包含单位。
zepto中没有innerHeight(),innerWidth()—outerHeight(),outerWidth()
通过.css()获取padding,border的值<style type="text/css"> #box{ width: 200px; height: 200px; background: #f00; margin: 10px; padding: 10px; border: 3px solid #ff0; } </style> <script type="text/javascript"> $(function(){ console.log($('#box').width());//226 console.log($('#box').height());//226 //用.css('width')获取的是content的宽高。 console.log($('#box').css('width'));//200px //* 单独获取padding,border的值 console.log($('#box').css('padding'));//10px console.log($('#box').css('border-width')+'border');//3pxborder })
-
-
隐藏元素宽高
<style type="text/css"> #box{ display: none; width: 200px; height: 200px; border: 1px solid #ff0; background: #ff0; } </style>
-
jQuery
jquery可以获取隐藏元素的宽高。
<script type="text/javascript"> $(function () { console.log($('#box').width());//200 console.log($('#box').height());//200 }); </script>
-
Zepto
zepto无法获取隐藏元素宽高
<script type="text/javascript"> $(function () { console.log($('#box').width());//0 console.log($('#box').height());//0 }); </script>
-
-
事件委托
-
jQuery
$('#box').on('click','.a',function () { alert('a触发的事件'); $(this).removeClass().addClass('b'); }); $('#box').on('click','.b',function () { alert('b触发的事件'); $(this).removeClass().addClass('a'); }); $('#box').append('<p class="a">我是新添加的</p>');
-
Zepto
坑!!!!
—在zepto中事件委托
委托的事件先被依次放入数组队列里,然后由自身开始往后找直到找到最后,期间符合条件的元素委托的事件都会执行。
1、委托在同一个父元素,或者触发的元素的事件范围小于同类型事件(冒泡能冒到自身范围)
2、同一个事件 如click
3、委托关联 操作的类要进行关联
4、绑定顺序—从当前的位置往后看$('#box').on('click','.a',function () { alert('a触发的事件'); $(this).removeClass().addClass('b'); }); $('#box').on('click','.b',function () { alert('b触发的事件'); $(this).removeClass().addClass('a'); }); $('#box').append('<p class="a">我是新添加的</p>');
上面的代码正好满足四个要求,然后在页面上
点击a的事件委托会执行
alert('a触发的事件');
和alert('b触发的事件');
但样式却不会变,也就是说样式改变被跳过了点击b的事件委托会执行
alert('b触发的事件');
然后样式会变成class为a的样式。这中变化是因为
alert('b触发的事件');
所在事件在alert('a触发的事件');
后面,所以alert('b触发的事件');
样式会变化,而alert('a触发的事件');
所对应的样式不变
-