初識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的知識，期待大佬賜教。