Zepto.js_开始

Posted 我即狂澜,且力不可挽

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Zepto.js_开始相关的知识,希望对你有一定的参考价值。

https://zeptojs.com

轻量级的 javascript 库,移动端优先框架

 

针对移动端,处理了一系列如 click 点击延迟 毫秒

响应执行快

目前 API 完善的框架中体积最小的一个(能用于项目的)

  • 与 jQuery 
  • 相同点: 语法与 jQUery 大部分一样,相当于 jQuery 的子集,都是以 $ 核心函数
  • 不同点: 
  • zepto 体积更轻,针对移动端,拥有独特的移动端事件,且以上特点 zepto 全部适用
  • 引入 zepto.js 核心库(zepto、ajax、event、form、ie)以后,还须引入相关附属库(如: touch.js)
  • jQuery 更重,也更重要,API 完善
    • 核心    $ / jQuery
    • 两大利器
      • jQuery 函数
        • $(function(){});
        • $("#box");
        • $(‘div‘);
        • $("<p>123456</p>");
      • jQuery 对象        
        • $.ajax();    $.get();    $.post();
        • $.isArray(obj)        // 判断是否为数组    
        • $.each(arr, function(index, each){});        // arr.forEach(each, index, self);        
        • $.trim("    Hello World   ");    // "Hello World"
        • $.find("div");    // 获取页面所有的 <div> 元素
          • var divPs = $("div").find("p");    // 获取页面所有父元素为 div 元素的 p元素
          • 链式调用的核心是,返回值为 目标对象
        • $.size();
        • $.length;
        • $.get();        $box.get(0);    $box[0]    转化为 DOM 对象
        • $.index();
  • jQuery 的 attr 与 prop

prop() 常用于布尔值属性的操作    checked seleted disabled enabled

attr() 常用于自定义属性,获取 布尔值属性 时如果无则返回 undefined,prop 则不会出现这个问题

  • zepto 的 attr 与 prop

在 zepto 中,用 attr() 也可以获取 布尔值属性,当未定义属性时,返回的是 false

prop 则与 jQuery 的 prop 完全相同

  • 布尔值属性的操作还是优先使用 prop,prop 的优先级高于 attr
  • 按钮延时可点击坑1. removeProp()    大于 zepto1.2  版本才可用。。。所以移除任何属性,都建议使用 removeAttr()
  • <!-- javascript 代码 -->
            <script type="text/javascript" src="./js/zepto/zepto.js"></script>
            <script type="text/javascript" src="./js/zepto/touch.js"></script>
            <script type="text/javascript" src="./js/index.js"></script>
            <script>
                $("#btn").on("touchstart", function(){
                    $("#btn").prop("disabled", true);
                    setTimeout(function(){
                        $("#btn").removeAttr("disabled");
                    }, 2000);
                });
            </script>

     

  • DOM 操作
  • 正常

$("#box").append("<p class="blue_line">Hello World</p>");

  • zepto 新用法( jQuery 不支持在增加 DOM 元素时,添加配置对象,影响 DOM 结构

$newEle = $("<p class="blue_line">Hello World</p>", {class:"blue_line red_font", id:"new_ele"});

$("#box").append($newEle);

 

  • $.each

正常

$.each(数组, function(index, eachValue, arr){});

$.each(对象, function(attr, eachValue, obj){});

不能遍历字符串、json 对象(本质也是字符串)

var jsonObj = JSON.stringify({name:"浩克", age:"31"});

zepto 可以使用 $.each() 遍历字符串、json

$.each(字符串, function(index, eachChar, str){});

$.each(jsonObj, function(attr, eachValue, obj){});

 

  • $("#box").offset();        // 正常,获取元素相对于视口的偏移量 {left: "200", top: "100"},只对占位的元素可用,否则返回(0, 0)
  • $("#box").offset();        // 在 zepto 中,返回的是一个对象,返回的的是一个对象 {left: "200", top: "100", width: "50", heigth: "50"}    其中 width、height 包含 padding、border

3

3

3

3

3

3

3

3

33

3

3

3

3

3

以上是关于Zepto.js_开始的主要内容,如果未能解决你的问题,请参考以下文章

移动端开发框架Zepto.js

zepto.js和jquery.js函数都差不多啊,zepto.js有啥优点呢?各位

11-移动端开发教程-zepto.js入门教程

Zepto.js

zepto.js touch怎么用

Zepto.js 不返回假?