JQuery第三天
1.学习目标
PC端特效 移动端特效 后台特效 特效插件
2.知识讲解
1.插件库
Jquery插件库的使用
2.swiper轮播图插件
swiper.js: 可以实现网页中所有的滑动效果.(tab菜单,轮播图,单滚动) 官网:https://www.swiper.com.cn/ https://www.swiper.com.cn/demo/index.html 所有的演示页,可以抄代码 模拟滚动条,上拉刷新,下拉刷新
3.Bootstrap特效
Bootstrap依赖于Jquery
4.validform.js 表单验证
bootstrapvalidator:https://www.cnblogs.com/landeanfen/p/5035608.html https://github.com/nghuuphuoc/bootstrapvalidator 第一步:引入文件 第二步: 根据文档去实现功能 第三步: 修改样式并调整功能 了解:validform.js:http://validform.club/document.html
<!-- 引入bootstrap的css文件 --> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <!-- 引入validate表单验证的css文件 --> <link rel="stylesheet" href="./validate/css/bootstrapValidator.css"> <!-- 引入Jquery文件 --> <script src="./jquery/jquery-3.4.0.js"></script> <!-- 引入bootstrap.js文件 --> <script src="./bootstrap/js/bootstrap.js"></script> <!-- 引入validate的js文件 --> <script src="./validate/js/bootstrapValidator.js"></script>
$(function() { $('.box form').bootstrapValidator({ message: '数据不合法', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { username: { message: '用户名验证失败', validators: { notEmpty: { message: '用户名不能为空' } } }, password: { validators: { notEmpty: { message: '密码不能为空' }, stringLength: { min: 6, max: 18, message: '密码长度必须在6到18位之间' }, } } } }); })
5.Moment.js 时间格式化
使用说明:https://www.jianshu.com/p/5715f4bad95c 1.引入moment.js 2.设置配置文件为中文,不然是英文 3.直接使用moment方法
moment(new Date()).format('MM月DD日'); // 09月01日 moment(new Date()).format('MMM'); // 9月 moment(new Date()).format('MMMM'); // 九月 moment(new Date()).format('dd'); // 六 moment(new Date()).format('ddd'); // 周六 moment(new Date()).format('dddd'); // 星期六 moment(new Date()).isoWeekday(); // 6 moment(new Date()).isoWeekYear(); // 2018 moment(new Date()).format('LT'); // 16:56 moment(new Date()).format('LTS'); // 16:56:34 moment(new Date()).format('L'); // 2018-09-01 moment(new Date()).format('LL'); // 2018年09月01日 moment(new Date()).format('LLL'); // 2018年09月01日下午4点56分 moment(new Date()).format('LLLL'); // 2018年09月01日星期六下午4点56分 moment(new Date()).format('l'); // 2018-9-1 moment(new Date()).format('ll'); // 2018年9月1日 moment(new Date()).format('lll'); // 2018年9月1日 16:56 moment(new Date()).format('llll'); // 2018年9月1日星期六 16:56 moment(new Date()).format('A'); // 下午 moment(new Date()).format('a'); // 下午 moment(new Date()).format('ALT') // 下午17:09 // subtract 减法 、 add 加法 moment().add(7, days).format('LL'); // 7天后的日期 2018年09月08日 moment().subtract(7, 'days').format('LL'); // 7天前的日期 2018年08月25日 moment().add(9, 'hours').format('HH:mm:ss'); // 9小时后 01:56:34 moment().add(1, 'week').format('LL'); // 1周后 2018年09月08日 // fromNow 时差 (之前) ; fromNow(true) 去除前或者内字 moment([2017, 0, 29]).fromNow(true); // 2年 moment([2017, 0, 29]).fromNow(); // 2年前 moment([2019, 0, 29]).fromNow(true); // 5个月 moment([2019, 0, 29]).fromNow(); // 5个月内 moment("20120901", "YYYYMMDD").fromNow(); // 6年前 moment(+new Date() - 1000 * 300).fromNow(); // 5分钟前 moment(+new Date() - 1000 * 3).fromNow(); // 几秒前 moment(+new Date() - 3 * 24 * 60 * 60 * 1000).fromNow(); // 3天前 moment(+new Date() - 30 * 24 * 60 * 60 * 1000).fromNow(); // 1个月前 moment(+new Date() - 365 * 24 * 60 * 60 * 1000).fromNow(); // 1年前 // toNow 时差 (之后 现在为基准) ; toNow(true) 去除前或者内字 moment([2007, 0, 29]).toNow() // 12年内 moment([2020, 0, 29]).toNow() // 1年前 moment([2020, 0, 29]).toNow(true) // 1年 // 时差 (之后) ; to(true) // 去除前或者内字 moment([2007, 0, 29]).to() // 12年内 moment([2020, 0, 29]).to() // 1年前 moment([2020, 0, 29]).to(true) // 1年 // 时差 (毫秒) moment([2007, 0, 29]).diff(moment([2007, 0, 28])); // 86400000 // 时差 (天) moment([2007, 0, 29]).diff(moment([2007, 0, 28]), 'days') // 1 // 天数 (月) moment("2012-02", "YYYY-MM").daysInMonth() // 29
6.scrollbar.js 模拟滚动条
1.引入jq 2.引入slimscrollbar 3.调用方法 $(function() { $(".box div").slimScroll({ height: '200px' }); }) 注意: 滚动内容需要单独给一个div盒子,方便进行移动,不然父盒子会100%宽度 详细说明文档:https://www.cnblogs.com/beyrl-blog/p/6678804.html
7.Echart.js 数据图表展示
1.下载文件并引入 2.看说明文档使用 https://echarts.baidu.com/api.html#action
8.wangEditor富文本编辑器
了解ueditor 我们使用:wangEditor 说明文档:https://www.kancloud.cn/wangfupeng/wangeditor3/335775 https://github.com/wangfupeng1988/wangEditor/ 下载地址:https://github.com/wangfupeng1988/wangEditor/releases
9.zepto.js
文档:https://www.html.cn/doc/zeptojs_api/# 注意:zepto的官网文档中下载只能下载zepto主要文件,其他的单独模块文件无法下载,所以得去github上下载 使用方法: 几乎跟jquery一致,增加了手势,触摸等常用事件 zepto将很多功能单独的剥离成单独的文件,需要就引用,避免整个文件过大. 移动端的tap点击事件 触摸事件的使用: https://www.cnblogs.com/0liaoyi/p/6110505.html
10.faskclick.js
在pc端,点击事件有默认的300毫秒的延迟,所以在手机端就会影响点击性能,所以要弥补这个问题. https://www.jianshu.com/p/67bae6dfca90 引入fastclick文件 $(function() { FastClick.attach(document.body); }); //优化原理:https://segmentfault.com/a/1190000015154809?utm_source=tag-newest
11.loding
css3loading动画: http://www.jq22.com/jquery-info4405 配合jquery一起实现页面加载功能
