zepto: 专门给移动端使用的javascript库

深拷贝合集

1. JSON.parse(JSON.stringify(数据))

   var res = JSON.parse(JSON.stringify(obj));
   console.log(res);
   console.log(res == obj); // false

2. extend(true, ...data);

   var res1 = $.extend(true, {}, obj);
   console.log(res1);
   console.log(res1 == obj); // false

3. 使用原生js的递归函数实现深拷贝

   深拷贝: Object Array

   在内存中再划分一块内存

   // 获取数据的类型
   function getType(data) {
       return Object.prototype.toString.call(data).slice(8, -1);
   };
   ​
   // 实现递归拷贝
   function deepClone(data) {
       // data: 需要实现深拷贝的数据
       // 声明对应的数据类型
       // console.log(getType(data));
       if(getType(data) == 'Object'){
           var res = {};
       } else if(getType(data) == 'Array'){
           var res = [];
       } else {
           return data;
       }
   ​
       // console.log(res);
   ​
       // 将data数据中的每一个属性名和属性值存储到res中
       for(var key in data){
           // console.log(key, data[key]);
           // 判断要存储的是否是Array或者Object  如果是 调用deepClone
           // console.log(getType(data[key]));
           if(getType(data[key]) == 'Object' || getType(data[key]) == 'Array'){
               res[key] = deepClone(data[key]);
           } else {
               res[key] = data[key];
           }
       }
   ​
       // console.log(res);
       // 设置返回值
       return res;
   }
   ​
   var r = deepClone(obj);
   console.log(r);
   console.log(r == obj);

ready

onload:

等待页面结构和资源加载完成后在执行的代码

后面的会覆盖前面

ready:

等待页面结构加载完成

叠加执行

可以简写

window.onload = function () {
    console.log(1);
}
$(document).ready(function () {
    console.log(2);
});
$().ready(function () {
    console.log(3);
});
​
$(function () {
    console.log(4);
});

插件拓展

类级别: $.extend({方法名: 函数, 方法名: 函数})

$.each $.map

$.extend({
    lunbo: function (sel, wait, time) {
        wait = wait ? wait : 5000;
        time = time ? time : 400;
        // console.log($(sel));
        var n = 0;
        var cw = $(sel).find('ul > li').width();
        // console.log(cw);
        function auto() {
            n++;
            if(n == $(sel).find('ul > li').length){
                n = 0;
                $(sel).find('ul').css({
                    left: -n * cw
                });
                n = 1;
            }
            $(sel).find('ul').stop().animate({
                left: -n * cw
            }, time);
            // 设置小圆点
            $(sel).find('p > span').eq(n == $(sel).find('ul > li').length - 1 ? 0 : n).addClass('active').siblings().removeClass('active');
        }
        // 1. 每隔3s换一张图
        $(sel)[0].timer = setInterval(auto, wait);
​
​
        // 划上sel清除定时器
        // 划下sel开启定时器
        $(sel).hover(function () {
            console.log(1, $(sel)[0].timer);
            clearInterval($(sel)[0].timer);
        }, function () {
            $(sel)[0].timer = setInterval(auto, 3000);
        });
​
    }
});
​
// 调用
// $.lunbo('.wrap');
$.lunbo('.wrap', 3000, 100);

对象级别: $.fn.extend({方法名: 函数, 方法名: 函数})

jq对象.css jq对象.animate

// 轮播图
$.fn.extend({
    lunbo: function (wait, time) {
        console.log(this);
        wait = wait ? wait : 5000;
        time = time ? time : 400;
        var n = 0;
        var cw = $(this).find('ul > li').width();
        // console.log(cw, n);
        // console.log($(this).find('ul'));
        var that = $(this);
        function auto() {
            n++;
            if(n == that.find('ul > li').length){
                n = 0;
                that.find('ul').css({
                    left: -n * cw
                });
                n = 1;
            }
            that.find('ul').stop().animate({
                left: -n * cw
            }, time);
            // 设置小圆点
            that.find('p > span').eq(n == that.find('ul > li').length - 1 ? 0 : n).addClass('active').siblings().removeClass('active');
        }
        // 1. 每隔3s换一张图
        this[0].timer = setInterval(auto, wait);
​
​
        // 划上sel清除定时器
        // 划下sel开启定时器
        $(this).hover(function () {
            console.log(1, $(this)[0].timer);
            clearInterval($(this)[0].timer);
        }, function () {
            $(this)[0].timer = setInterval(auto, 3000);
        });
​
        // 设置返回值
        return $(this);
    }
});
​
// 调用
var d = $('.wrap').lunbo(3000).css({
    border: '10px solid #aaa'
});
console.log(d);

Zepto

介绍

zepto: 专门给移动端使用的javascript库

核心: $

zepto的方法与jq中是一致的

官网: Zepto.js: 轻量且兼容 jQuery API 的 JavaScript 工具库 | Zepto.js 中文网

\1. 下载zepto文件: 一定通过上面的官网 或者是 cdn服务器下载完整文件

zepto form ie ajax event

\2. 使用zepto

<script src="./js/zepto.min.js"></script>
<!-- <script src="./js/jquery.min.js"></script> -->
<script>
    // 1. jq有 zepto没有
    // console.log($('div').innerWidth(), $('div').innerHeight());
    // console.log($('div').outerWidth(), $('div').outerHeight());
​
    // 2. position offset
    console.log($('div').offset()); // jq: {top: 40, left: 48} zepto: {left: 48, top: 40, width: 380, height: 380}
​
    // 3. zepto的宽高直接求得是占位宽高
    console.log($('div').width());
</script>

区别

1. jq有 zepto没有

2. offset

3. zepto的宽高直接求得是占位宽高

touch事件

tap: 单击

doubleTap: 双击

longTap: 长按 >750ms

swipe: 滑动

swipeUp swipeDown swipeLeft swipeRight

touch事件只支持移动端使用
下载压缩包后 解压出来的文件夹中只需要使用src 
但是注意: src中的zepto模块不要使用
<div></div>
<!-- 1. 引入zepto -->
<script src="./js/zepto.min.js"></script>
<!-- 2. 引入模块 -->
<script src="./js/touch.js"></script>
<!-- 3. 写自己的js -->
<script>
  /* 
      tap: 单击
      doubleTap: 双击
      longTap: 长按 >750ms
      swipe: 滑动
      swipeUp swipeDown swipeLeft swipeRight
  */
  $('div').on('tap doubleTap longTap swipe swipeUp swipeDown swipeLeft swipeRight',function (ev) {
      console.log(ev.type);
  });
</script>