39 插件、zepto

39 插件、zepto

插件

常用插件网站

1. jquery官网插件

   https://plugins.jquery.com/

2. 百度---CSDN

3. swiper

   https://www.swiper.com.cn

4. github

5. jq22

使用过程

1. 找

2. 用：

2.1 下载

2.2 文件拷贝到用的地方

自定义插件

类级别

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

var str = '      123  435  345     ';
console.log('(' + str + ')');
$.extend({
    triml: function(string){
        console.log(string);
        var s = string.replace(/^\s+/, '');
        console.log(s);
        return s;
    },
    trimr: function(string){
        console.log(string);
        var s = string.replace(/\s+$/, '');
        console.log(s);
        return s;
    }
});
// 调用
var ss = $.triml(str);
console.log(ss);
var mm = $.trimr(str);
console.log(mm);

对象级别

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

调用的时候 前面必须是jq对象

/* 
    获取第一个子节点 返回jq对象
*/
$.fn.extend({
    getF: function(){
        // this --- > 调用方法的jq对象
        console.log(this);
        return $(this).children(':first');
    },
    getL: function(){
        // this --- > 调用方法的jq对象
        console.log(this);
        return $(this).children(':last');
    }
});
var li = $('ul').getF().css('background', 'red');
console.log(li);
​
var lil = $('ul').getL().css('background', 'blue');

zepto

轻量级

舍弃ie, 文件非常小 压缩之后是9.1kb

与jq有类似的api 顶级变量都是$

自带模块: zepto, Ajax, Event, Form, IE.

现代高级浏览器: 不考虑兼容ie 移动端的手势事件+手机端

已经自带的模块 不需要单独引入src

<script src="./zepto.min.js"></script>
<!-- 下面 引入 src文件下的---touch.js -->
<script src="./src/touch.js"></script>
<script>
    console.log($); // 函数
    console.log($('div'));
    $('div').on('tap', function(){
        console.log(1);
    });
</script>

区别

1. jquery: width height: 内容的宽高

zepto: width height: 内容 + 内边距 + 边框

2. jquery: offset: left top

zepto: offset: left top width height

3. jq: innerWidth outerWidth

console.log($('div').width(), $('div').height());
console.log($('div').offset());
console.log($('div').innerWidth(), $('div').outerWidth());

移动端事件

1. 点击: tap

2. 双击: doubleTap

3. 长按: longTap >=750ms

4. 滑动事件: 在元素内按下，滑动距离超过30px, 才会去触发滑动事件

滑动距离不限制在元素内

swipe: 滑动事件

swipeUp: 向上滑动

swipeDown: 向下滑动

swipeLeft: 向左滑动

swipeRight: 向右滑动

$('div').on('tap doubleTap longTap swipe swipeUp swipeDown swipeLeft swipeRight', function(ev){
    console.log(ev.type);
});