3.JQuery第三天

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一起实现页面加载功能

4.今日练习

5.今日总结