插件
常用插件网站
-
jquery官网插件
https://plugins.jquery.com/
-
百度—CSDN
-
swiper
https://www.swiper.com.cn
-
github
-
jq22
使用过程
- 找
- 用:
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>
区别
- jquery: width height: 内容的宽高
zepto: width height: 内容 + 内边距 + 边框
- jquery: offset: left top
zepto: offset: left top width height
- jq: innerWidth outerWidth
console.log($('div').width(), $('div').height());
console.log($('div').offset());
console.log($('div').innerWidth(), $('div').outerWidth());
移动端事件
- 点击: tap
- 双击: doubleTap
- 长按: longTap >=750ms
- 滑动事件: 在元素内按下,滑动距离超过30px, 才会去触发滑动事件
滑动距离不限制在元素内
swipe: 滑动事件
swipeUp: 向上滑动
swipeDown: 向下滑动
swipeLeft: 向左滑动
swipeRight: 向右滑动
$('div').on('tap doubleTap longTap swipe swipeUp swipeDown swipeLeft swipeRight', function(ev){
console.log(ev.type);
});