初识Zepto

  小组安排的成员轮流讲课，昨天刚好是我，讲了Zepto的一些知识，在这里总结一下吧。因为是刚尚硅谷视频粗略学的，照搬的他的讲解，很多地方可能还不太懂，欢迎大佬指正啊。嘿嘿。

什么是Zepto

  Zepto是轻量级的JavaScript库，是专门为移动端定制的框架。它与jQuery有着相似的API，俗称：会jQuery就会Zepto。

Zepto的特点

1. 针对移动端，是目前API完善的框架中体积最小的一个。
2. 轻量级，压缩版本只有8kb左右。
3. 语法、API大部分同jQuery一样，学习难度低，上手快。
4. 响应、执行快。

引入Zepto.js文件

<script type="text/javascript" src="../js/zepto.js"></script>

引入touch.js文件

<script type="text/javascript" src="../js/touch.js"></script>

  touch.js主要提供滑动（swipe）与点击（tap）的事件封装，是移动设备上的手势识别和事件库。

触摸事件

  大家可以敲一下下面的代码来感受一下触摸事件。

<script type="text/javascript">
    $(document).ready(function(){
    
        //手指触摸屏幕时触发事件
        $('#btn').on('touchstart', function () {
            $(this).css({'background': '#f00'});
            console.log("用户手指触摸到屏幕...");
        });

        //手指在屏幕上移动时触发
        $('#btn').on('touchmove', function (even) {
            $(this).css({'background': '#0f0'});
            console.log("用户手指在屏幕上移动...");
        });

       // 手指离开屏幕时触发
        $('#btn').on('touchend', function () {
            $(this).css({'background': '#00f'});
            console.log("用户手离开屏幕...");
        });
    });
</script>

如$.isArray()、addClass()等Zepto同样具有

<script type="text/javascript">
    $(document).ready(function () {

        var arr = [1,2,3];
        console.log($.isArray(arr));

        $.each(arr,function (index,item) {
            console.log(index,item);// 下标  值
        });

        $('.box1').on('touchstart',function () {
            $(this).addClass('box2');
        });

        $('.box2').on('touchstart',function () {
            $('#dis').show();
        });

        $('.box3').on('touchstart',function () {
            $(this).find('p').css('background','red');
        })
    });
</script>

列举一些区别

1. attr和prop
     公共html代码

<select>
    <option value="name">唐僧</option>
    <option value="name" selected="selected">孙悟空</option>
    <option value="name">猪八戒</option>
    <option value="name" selected="selected">沙和尚</option>
</select>

如果是jQuery：

<script type="text/javascript">
    $(document).ready(function () {
        $('option').each(function (index, item) {
            console.log(index, item.innerHTML);
            console.log($(this).attr('selected'));//没有定义获取到的是undefined
            console.log($(this).prop('selected'));//3false  1true
        });
    })
</script>

如果是Zepto：

<script type="text/javascript">
    $(document).ready(function () {
    
        $('option').each(function (index, item) {
            console.log(index, item.innerHTML);
            console.log($(this).attr('selected'));   // false   selected  false   selected
            console.log($(this).prop('selected'));   // 3false   1true
        });
    })
</script>

通过对比我们会发现：

1、在jquery中如果用attr去获取布尔值属性且该布尔值属性在标签体内没有定义的时候，会返回undefined
2、在zepto中用attr也可以获取布尔值属性.

2. Zepto插入DOM元素时添加配置对象时可以添加进去，并且添加的配置对象的内容会直接反应在标签属性内，且可以操作，影响对应的DOM元素。

$(document).ready(function () {

        var insert = $('<p>我是新添加的p标签</p>', {
            id: 'insert',
            class: 'insert'
        });
        $('#box').append(insert);

    });

3. $.each(collection, function(index, item){ … })的区别
   ① jQuery可以遍历数组,以index，tiem的形式，可以遍历对象，以key-value的形式，不可以遍历字符串。
   ②Zepto可以遍历数组,以index，tiem的形式，可以遍历对象，以key-value的形式，可以遍历字符串。
   附上Zepto代码，可以自己敲敲看：

$(document).ready(function () {
        //可以遍历数组,以index，item的形式，
        var arr = [1,14,0,3,5];
        $.each(arr,function (index,item) {
            console.log(index + '-' + item);
        });
        //可以遍历对象，以key-value的形式
        var obj = {username:'杨紫',age:27};
        $.each(obj,function (key,value) {
            console.log(key + '-' + value);
        });
        //可以遍历字符串。
        var str = 'wang';
        $.each(str,function (a,b) {
            console.log(a,b);
        });
    });

4. offset()的区别
   ①jQuery返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。
   ②返回一个对象含有： top, left, width和height(获取的宽高是盒模型可见区域的宽高)。
5. 获取宽高
   css样式：

        #box{
            width: 200px;
            height: 200px;
            background: red;
            color: white;
            margin: 10px;
            padding: 10px;
            border: 8px solid black;
        }

html：

<div id="box">我是一个div</div>

①在jQuery中：

$(document).ready(function () {
        //width(),height()---content内容区的宽高，没有单位px;
        console.log($('#box').width());
        console.log($('#box').height());

        //.css('width')----可以获取content内容区的宽高，padding，border的值，有单位px;
        console.log($('#box').css('width'));
        console.log($('#box').css('padding'));
        console.log($('#box').css('border-width'));

        //也可以利用innerHeight(),outerHeight(),innerWidth(),outerWidth()等来获取padding和border的值
        console.log('innerWidth' + '=' + $('#box').innerWidth());  //220  包含padding
        console.log('outerWidth' + '=' + $('#box').outerWidth());  //236  包含padding + border
        console.log('innerHeight' + '=' + $('#box').innerHeight());
        console.log('outerHeight' + '=' + $('#box').outerHeight());
    });

②在Zepto中：

 $(document).ready(function () {
        console.log($('#box').width());  //236  包含padding的值,border的值
        console.log($('#box').height());//236  包含padding的值,border的值

        //.css('width')----可以获取content内容区的宽高，padding，border的值，有单位px;
        console.log($('#box').css('width'));  //200px  不包含padding的值,border的值，有单位
        console.log($('#box').css('padding'));
        console.log($('#box').css('border-width'));
        
        //zepto中没有innerHeight(),innerWidth()---outerHeight(),outerWidth()
        console.log('innerHeight' + '=' + $('#box').innerHeight());   //没有
        console.log('outerHeight' + '=' + $('#box').outerHeight());   //没有
    });

6. 能否获取隐藏元素的宽高
   ①jQuery可以
   ②Zepto不可以

Zepto的touch方法

1. tap()点击事件 利用在document上绑定touch事件来模拟tap事件的，并且tap事件会冒泡到document上。
2. singleTap() 点击事件
3. doubleTap() 双击事件
4. longTap() 当一个元素被按住超过750ms触发。
5. swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过(同一个方向滑动距离大于30px)时触发。(可选择给定的方向)在一个方向滑动大于30px即为滑动。否则算点击。

html的：

<div id="box1" class="box">按钮1</div>
<div id="box2" class="box">按钮2</div>
<div id="box3" class="box">按钮3</div>
<button id="btn" class="btn">button</button>

zepto的：

 $(document).ready(function () {
        //tap()点击事件
        $('#box1').tap(function () {
             alert('tap点击事件');
        });

        //singleTap()单击事件
        $('#box2').singleTap(function () {
            alert('我单击了一下');
        });

        //doubleTap()  双击事件
        $('#box2').doubleTap(function () {
            alert('我双击了一下');
        });

        //longTap()长按事件----按住屏幕时间超过750ms触发
        $('#box3').longTap(function () {
            alert('我长按了一下box3');
        });

        // $('#btn').swipe(function () {
        //     alert('我滑动了一下');
        // });

        $('#btn').swipeLeft(function () {
            alert('我向左滑动了');
        });

只执行一次事件

  one() 为每一个匹配元素的特定事件绑定一个一次性的事件处理函数。只执行一次。

$('#btn3').one('touchstart',function(){
            alert('我只执行一次');
        });

  以上就是我跟着尚硅谷视频学的关于Zepto的知识，期待大佬赐教。