Jquery插件、表单验证＜前端学习笔记＞

轮播图插件

jQuery 的轮播图 slick

<!-- 引入样式表  -->
<link rel='stylesheet' href="./slick.css">
<link rel='stylesheet' href="./slick-theme.css">

 <!-- 先导jQuery -->
<script src="./jquery-3.5.1.js"></script>
<!-- 再导插件 -->
<script src="./slick.min.js"></script>

<div class="your-class">
    <div>轮播元素一</div>
    <div>轮播元素二</div>
    <div>轮播元素三</div>
</div>

$('.your-class').slick()

slick插件的一些配置

1. autoplay – 轮播图效果自动执行 – false
2. arrows – 是否显示翻页按钮 – true
3. prevArrow – 自定义 上一页 按钮 – 无默认值 – （标签选择器）
4. nextArrow – 自定义 下一页 按钮 – 无默认值 – （标签选择器）
5. dots – 是否显示指示器 – false

// 调用插件方法初始化
$('.your-class').slick({
    autoplay:true,
    arrows:true,
    ...
})

懒加载插件

jQuery的懒加载插件lazyload

懒加载：图片用到了再去加载，常见于有大量网页的图片，比如电商

<!-- 先导入jQuery -->
<script src="./jquery-3.5.1.js"></script>
<!-- 再导入lazylaod插件 -->
<script src="./jquery.lazyload.min.js">

// 图片
<img class="my-lazyload" data-original="./images/1.png" alt="">

// 希望懒加载的图片调用lazyload方法
$('.my-lazyload').lazyload()

全屏滚动插件

jQuery的全屏滚动插件fullpage（类似于全屏轮播的广告 上下滚动）

<!-- 导入fullpage配套样式 -->
<link rel="stylesheet" href="./fullpage/jquery.fullpage.css" />
<!-- 先导入jQuery -->
<script src="./jquery-3.5.1.js"></script>
<!-- 再导入fullpage插件 -->
<script src="./fullpage/jquery.fullpage.js"></script>

<div id="fullpage" >
    <div class="section">第1屏</div>
    <div class="section">第2屏</div>
    <div class="section">第3屏</div>
</div>
<!-- 
    -- 父盒子可以是 id或者class
    -- 每个区域必须有 section 这个类名
 -->

$('#fullpage').fullpage({
    ...
})

fullpage插件的一些配置

1. navigation – 是否显示导航 – false
2. navigationPosition – 导航位置 – right – (left/right)
3. anchors – 每个区域的锚链接名 – [] – (在地址栏快速定位)
4. afterLoad – 区域加载完毕的 回调函数，有两个参数 – 无默认值 – (参数：锚链接、索引)

日期选择器

jQuery 的日期选择器插件 datepicker，让用户再不同的浏览器下可以用一致的方式来选择日期

<!-- 导入日期选择器样式 -->
<link rel="stylesheet" href="./datepicker.css"/>
<!-- 导入jQuery -->
<script src="./jquery-35.1.js"></script>
<!-- 导入日期选择器插件 -->
<script src="./datepicker.js"></script>

<!-- 准备html结构 -->
<input type="text" class="datepicker"/>

// 调用插件方法
$('.datepicker').datepicker({
    ...
})

datepicker插件配置

1. autoPick – 是否自动选择当前日期 – false
2. autoHide – 选择日期之后是否自动关闭 – false
3. language – 语言模式 – 默认为空 （需要结合语言包使用）

表单验证插件

jQuery 的表单验证插件 validate，验证用户表单中输入的内容

<!-- 导入jQuery -->
<script src="./jquery-3.5.1.js"></script>    
<!-- 导入validdate -->
<script src="./jquery-validate.js"></script>

<input type="password" 
       name="password"
       data-require
       data-pattern=".{6,}"
       data-describedby = "password-error"
       data-description = "password"/>

<span class="error" id="password-error"></span>
<!-- 
    表单元素必须在form里
 -->

input中的自定义属性

1. data-required --验证表单项不能为空 （不需要值）
2. data-pattern --基于正则表达式验证 （正则表达式）
3. data-describedby – 指定显示错误信息的标签 – （标签的id）
4. data-description – 指定错误信息的内容 – 和配置属性description对应

$('form').validate({
    //配置
    description:{
        password:{
            require:'密码不能为空！',
            pattern:'密码不能小于6位！'
        }
    }
})

validate配置

1. onBlur – 失去焦点时验证 – false
2. onSubmit – 提交表单时验证 – true
3. sendForm – 是否提交表单 – true
4. valid – 所有表单验证 通过 执行的 回调函数 – 无默认值 – （this是jQuery对象）
5. invalid – 至少一个表单项为通过验证时执行的 回调函数 – 无默认值 – （this是jQuery对象）
6. description – 错误提示信息 – 无默认值 – （Object）

---

克隆

jQuery中封装了克隆（复制），节点的方法

// 不带事件
.clone()
// 带事件(事件一起克隆)
.clone(true)

/* 
-- 方法返回的还是jQuery对象
-- 传入true事件也会一起克隆
*/

获取dom对象

jQuery并没有封装所有dom的方法

jQuery可以通过 trigger触发这些方法

// 播放视频
$('video').trigger('play')
// 暂停视频
$('video').trigger('pause')
// 重置表单
$('form').trigger('reset')

jQuery封装了获取内部dom对象的方法，可以使用dom对象调用这些方法

// get方法获取
.get(索引)
// 中括号获取
[索引]
/* 
-- 索引从0开始
-- 获取到的是DOM对象
*/

表单序列化

jQuery 中封装了快速获取表单数据的方法，叫做序列化

$('form').serialize()

/* 
-- 表单要有name属性才可以获取到value值
-- 获取到的数据格式是 name1=value1&name2=value2 的字符串
*/

插件机制

插件时jQuery提供的扩展机制，本质是往jQuery原型对象上添加方法

jQuery.fn.extend({
    插件名(参数){
        //逻辑
    }
})

jQuery是$的别名

jQuery内部也是通过这种方式添加方法,放入原型

工具方法

jQuery除了封装了大量的DOM操作外，还提供了一些工具方法，这些方法通过**$或jQuery**直接调用

// 遍历数组
$.each(数组,function(下标,值){})
// 遍历并返回新数组
$.map(数组,function(值){
    // 返回的新值
})
...没必要

版本差异

版本号 3.x
3: 大版本更新
.x： 小bug修复，小功能新增