Zepto.js 使用手册

Zepto.js 被誉为移动端的小型 jQuery， 用法和 jQuery 差不多。

一、AJAX

1、传统的字符串拼接方式

<script charset="UTF-8" type="text/javascript" src="js/zepto.min.js"></script>
<script>
    function bindHTML(data) {
        console.log(data);
        var str = '';
        // data是一个数组
        console.log(data instanceof Array); //true
        $.each(data, function (index, item) {
            str += '<li>';
            str += '<span>' + item.id + '</span>';
            str += '<span>' + item.name + '</span>';
            str += '<span>' + (item.sex == 1 ? '女' : '男') + '</span>';
            str += '<span>' + item.score + '</span>';
            str += '</li>';
        });
        $('.content > ul').html(str);

        // 或者 data.forEach()
    }

    $.ajax({
        url: 'data/data.json',
        type: 'get',
        dataType: 'json',
        cache: false,
        success: bindHTML
    });
    
</script>

 

2、使用EJS模板引擎，动态渲染的方式

 

<!-- HTML结构 -->
<section class="content">
    <ul>
        <!--<li>-->
        <!--<span>01</span>-->
        <!--<span>MJ</span>-->
        <!--<span>男</span>-->
        <!--<span>100</span>-->
        <!--</li>-->
    </ul>
</section>

<!-- EJS:模板引擎数据绑定 -->
<script charset="UTF-8" type="text/javascript" src="js/ejs.js"></script>


<!-- 制作模板 ，其他的模板引擎，也都是使用script制作模板 -->
<!-- 制作EJS渲染的模板： 在原有的HTML结构基础上把我们的数据嵌套进来，EJS语法规定了，
    我们需要编写的JS代码写在 <%%>即可，需要在模板中输出一些内容，把需要的输出的内容
    写在<%=%> ， 报错不用管 -->
<script charset="UTF-8" type="text/template" id="conTemplate">
    <% $.each(data, function (index, item) {%>
    <li>
        <span><%= item.id %></span>
        <span><%= item.name %></span>
        <span><%= item.sex ==1 ? '女' : '男' %></span>
        <span><%= item.score %></span>
    </li>
    <% }) %>
</script>

<script charset="UTF-8" type="text/javascript" src="js/zepto.min.js"></script>

<script>
    //->使用模板引擎渲染页面中的数据: EJS
    function bindHTML(data) {
        /*-- 1.把我们在HTML结构script中制作的模板字符串获取到 --*/
        var template = $('#conTemplate').html();
        /*-- 2.向模板中提供数据。 使用EJS中的render向指定模板中提供需要的数据 --*/
        var result = ejs.render(template, {data: data});
        console.log(result);

        /*-- 3.把拼接好的数据放入页面指定容器中 --*/
        $('.content >ul').html(result);
    }

    $.ajax({
        url: 'data/data.json',
        type: 'get',
        dataType: 'json',
        cache: false,
        success: bindHTML
    });

</script>

 

或者 使用for循环来遍历数据

<script charset="UTF-8" type="text/template" id="conTemplate">
    <% for(var i=0; i<data.length; i++ ) { %>
    <li>
        <span>01</span>
        <span>MJ</span>
        <span>男</span>
        <span>100</span>
    </li>
    <% } %>
</script>

 

二、点击事件

Zepto.js

tap() 方法，是不管双击还是单击都执行

而 singleTap() ,是单击的时候执行

如果Zepto.js 的tap方法失效，那么要引入 touch.js 库

Touch.js 下载地址： https://github.com/madrobby/zepto/blob/master/src/touch.js