zepto入门

时间:2020-05-01

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style type="text/css">
        #test {
            touch-action: none;
            width: 200px;
            height: 300px;
            border: 10px solid red;
            padding: 5px;
        }
    </style>
</head>
<body>
<div id="test"></div>
<script src="zepto.min.js"></script>
<script src="touch.js"></script>
<script>
    // 使用方式同jQuery
    $(function () {
        // 给test id选择器赋值
        $('#test').text('hello world');

        // 遍历数组
        var arr = [1, 2, 3];
        $.each(arr, function (index, item) {
            // index 索引数字,item 值
            console.log(index, item);
        });

        // 遍历对象
        var obj = {'name': '张三', 'age': 28};
        $.each(obj, function (key, value) {
            console.log(key, value);
        });

        // 遍历字符串
        var str = 'hello world';
        $.each(str, function (index, item) {
            console.log(index, item);
        });

        // 创建一个p标签,并添加id、class属性,添加到div中去
        var pObj = $('<p>pp</p>', {
            'id': 'pid',
            'class': 'pclass'
        });
        pObj.appendTo($('#test'));

        // 给p绑定一个touch事件
        $('#test').on('touchstart', 'p', function () {
            alert('p touchstart事件');
        });

        // 获取div宽高
        console.log($('#test').width());
        console.log($('#test').height());

        // 获取offset
        console.log($('#test').offset());

        // 给div绑定单击、双击、滑动事件
        $('#test').singleTap(function () {
            alert('单击事件');
        });

        $('#test').doubleTap(function () {
            alert('双击事件');
        });

        $('#test').longTap(function () {
            alert('长按事件');
        });

        $('#test').swipe(function () {
            alert('滑动事件');
        });
    });
</script>
</body>
</html>