码迷,mamicode.com
首页 > 其他好文 > 详细

39 插件、zepto

时间:2021-05-24 00:54:18      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:wip   idt   out   loaded   bsp   etl   ref   opera   focus   

39 插件、zepto

插件

常用插件网站

  1. jquery官网插件

    https://plugins.jquery.com/

  2. 百度---CSDN

  3. swiper

    https://www.swiper.com.cn

  4. github

  5. jq22

使用过程

  1. 用:

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: 内容 + 内边距 + 边框

  1. jquery: offset: left top

zepto: offset: left top width height

  1. 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);
});

 

39 插件、zepto

标签:wip   idt   out   loaded   bsp   etl   ref   opera   focus   

原文地址:https://www.cnblogs.com/xue666888/p/14742878.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!