前端学习-jQuery高级

最新推荐文章于 2023-05-07 17:23:45 发布

a听闻

最新推荐文章于 2023-05-07 17:23:45 发布

阅读量251

点赞数 1

分类专栏： Web前端文章标签： jquery ajax pace.js 前端

本文链接：https://blog.csdn.net/LuKeliyy/article/details/113459004

版权

Web前端专栏收录该内容

16 篇文章 2 订阅

订阅专栏

1. jQuery经典插件

1.1 表单验证插件jQuery-validation

这个jQuery插件使简单的客户端表单验证变得容易，同时还提供了大量的定制选项

官网： https://jqueryvalidation.org

1.2 下载并安装插件

下载地址：https://github.com/jquery-validation/jquery-validation/releases/tag/1.19.2

导入插件js文件即可，需要注意：因为该插件是基于jQuery开发的，所以它必须在jQuery的后面引入

jquery.validate文件是插件的核心文件

additional-methods文件是插件为我们预设的一些校验规则

<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="./lib/jquery-validation-1.19.2/jquery.validate.min.js"></script>
<script type="text/javascript" src="./lib/jquery-validation-1.19.2/additional-methods.min.js"></script>

1.3 插件方法(Plugin Methods)

相应链接：https://jqueryvalidation.org/category/plugin/

表单验证的测试模板代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery表单验证插件：jQuery-validation</title>
    <style rel="stylesheet" type="text/css">
        .ipt-box label > span {
            display: inline-block;
            width: 70px;
            text-align: justify;
            overflow: hidden;
            height: 1.2em;
            vertical-align: middle;
            margin-right: 10px;
        }

        .ipt-box label > span::after {
            content: '';
            display: inline-block;
            width: 100%;
        }

        .ipt-box label > .ipt {
            vertical-align: middle;
            outline: none;
        }

        .ipt-box label + p {
            margin: 5px 0 0 0;
            font-size: 14px;
        }

        .ipt-box label > .ipt.invalid {
            border: 1px solid red;
        }

        .ipt-box label > .ipt.success {
            border: 1px solid green;
        }

        .ipt-box label + p.invalid {
            color: red;
        }
    </style>
</head>
<body>
<form class="login-form">
    <div class="ipt-box">
        <label>
            <span>账号</span>
            <input type="text" class="ipt" name="account" />
        </label>
    </div>
    <div class="ipt-box">
        <label>
            <span>密码</span>
            <input type="password" class="ipt" name="password" />
        </label>
    </div>
    <div class="ipt-box">
        <label>
            <span>确认密码</span>
            <input type="password" class="ipt" name="password2" />
        </label>
    </div>
    <div class="ipt-box">
        <label>
            <span>邮箱地址</span>
            <input type="text" class="ipt" name="email" />
        </label>
    </div>
    <div class="operation">
        <button>登录</button>
    </div>
</form>
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="./lib/jquery-validation-1.19.2/jquery.validate.min.js"></script>
<script type="text/javascript" src="./lib/jquery-validation-1.19.2/additional-methods.min.js"></script>
<script type="text/javascript" src="./js/01-jquery-validation.js"></script>
</body>
</html>

1.3.1 .validate(options)

用于制定表单验证的一些基本逻辑

1.3.1.1 debug（了解）

是否开启调试模式，开启后，表单不会被提交（用于初期测试用，调试完毕后，一定要关闭）【默认值为false】

$(".login-form").validate({
  debug: true
});

1.3.1.2 submitHandler（熟记）

当表单整体验证通过后的回调函数，可以获取表单元素节点对象以及submit事件

$(".login-form").validate({
  submitHandler: (form, event) => {
      console.log(form);	//表单元素节点对象
      console.log(event);	//submit事件
  }
});

1.3.1.3 invalidHandler（熟记）

表单验证失败时的回调函数。第一个参数是事件对象，第二个参数是验证器

$(".login-form").validate({
  invalidHandler: (event, validator) => {
      console.log(event);
      console.log(validator);
  }
});

1.3.1.4 ignore （用的比较少）

在验证时需要忽略的元素

ignore只能配置选择器，因此，我们自定义一个用于忽略的类样式名就可以了，比如下面的.ignore

$(".login-form").validate({
  ignore: ".ignore"
});

1.3.1.5 rules（熟记）

用key/value键值对的形式，定义验证规则。这里的key对应表单元素中的name属性，而value则用于配置对应的规则

我们将在后面讲解插件提供的内置校验规则以及自定义校验规则的方法

$(".login-form").validate({
  rules: {
      name: {
          required: true,
          rangelength: [3,7]
      },
      password: {
          required: true,
          myCustomMethods: true,      //自定义的规则
      }
  }
});

1.3.1.6 messages（熟记）

用key/value键值对的形式，定义对应验证规则在验证不通过时的提示内容。【这里的key必须与rules中的key对应才可以生效，如果没有配置成功，那么对应规则将默认以自带的英文消息作为提示】

应为消息是字符串，因此我们可以使用模板字符串，同时里面甚至可以写HTML结构代码

$(".login-form").validate({
  rules: {
      name: {
          required: true,
          rangelength: [3,7]
      },
      password: {
          required: true,
      }
  },
  messages: {
      account: {
          required: '账号不能为空',
          rangelength: '账号的长度由3~7位任意字符组成'
      },
      password: {
          required: '<span style="color: red">密码不能为空</span>'
      }
  }
});

1.3.1.8 errorClass（了解）

用于设置错误消息元素以及表单元素的class类样式名，默认值为"error"

$(".login-form").validate({
  errorClass: "invalid"
});

1.3.1.9 validClass（了解）

用于设置表单元素在验证成功后的class类样式名，默认值为"valid"

$(".login-form").validate({
  validClass: "success"
});

1.3.1.10 errorElement（了解）

用于指定错误消息的元素类型，默认为"label"

$(".login-form").validate({
  errorElement: "p"
});

1.3.1.11 errorPlacement（熟记）

用于控制错误消息元素的创建位置。第一个参数为错误标签，第二个参数为验证的表单元素（它们两个都是jQuery对象）

$(".login-form").validate({
  errorPlacement: (error, element) => {
      //将错误消息元素添加到对应表单元素组合label的后面
      element.parent().after(error);
  }
});

1.3.1.12 success（熟记）

用于控制验证成功时，对于错误消息元素的处理。可以传入字符串(设定类样式名)也可以传入函数（推荐用第二种，更加灵活）

//字符串方式，设定验证成功时，错误消息元素的类样式名
$(".login-form").validate({
  success: 'success'
});

//传入函数的方式，可以接受一个参数（错误消息元素）
$(".login-form").validate({
  success: errorElement => {
      errorElement.addClass('success').text('验证通过了');
  }
});

1.3.2 valid（熟记）

检查所选表单或者所选元素是否有效（其会执行对应的表单验证同时返回布尔值）

//校验整个表单
$('.login-form').valid();

//校验并返回单个校验结果
console.log($('input[name="account"]').valid());

1.3.3 内置校验规则(了解)

校验规则相关链接：https://jqueryvalidation.org/documentation/

规则	书写示例	描述
required:true	required: true	表示其必须填写(输入框)或者必须选择(单选按钮、多选框、select下拉菜单)
remote	remote: “check.php”	请求一个资源来进行校验
minlength	minlength: 10	要求输入的内容长度至少是x个（一个汉字算1个）
maxlength	maxlength: 5	要求输入的内容长度最多是x个（一个汉字算1个）
rangelength	rangelength: [5,10]	要求输入的内容长度在指定的范围内（一个汉字算1个）
min	min: 10	要求输入的值不能小于指定的值
max	max: 5	要求输入的值不能大于指定的值
range	range: [5,10]	要求输入的值在指定的范围内
step	step: 5	要求输入的值必须是指定的步数（也就是能够指定的数整除）
email	email: true	要求输入正确格式的电子邮件
url	url: true	要求输入正确格式的网址
dateISO	dateISO: true	要求输入正确ISO格式的日期，例如：2009-06-23，1998/01/22
number	number: true	要求输入合法的数字（负数、小数、整数）
digits	digits: true	要求输入正整数
equalTo	equalTo: "#field"	要求输入值必须和指定选择器的元素值相同
accept	*accept: "image/"**	要求传入的文件必须是指定的文件(专用于file)，默认值为image/*
extension	extension: "xls\|xlsx"	要求传入的文件必须是指定的扩展名，多个后缀使用\|进行分割，默认值为png\|jpe

1.3.4 Validator验证器

相关链接：https://jqueryvalidation.org/category/validator/

当我们使用.validate之后，就会返回一个validator验证器，我们可以对它执行一些逻辑

我们也可以使用jQuery.validator.方法或者简写方式$.validator.方法的方式指定通用的一些配置

1.3.4.1 Validator.destroy（了解）

销毁对应验证器实例，释放资源并取消事件注册

let validator = $('.login-form').validate({
    ...
});

//销毁验证器实例
validator.destroy();

1.3.4.2 jQuery.validator.methods(不推荐使用)

通过它来覆盖各个校验规则，同时保留原本的错误消息（修改原本的逻辑，不推荐使用，建议使用addMethod方法来自定义校验规则）

$.validator.methods.email = (value,element) => {
    return this.optional( element ) || /[a-z]+@[a-z]+\.[a-z]+/.test( value );
}

1.3.4.3 jQuery.validator.setDefaults（了解）

设定通用的配置（所有的validator均生效）

$.validator.setDefaults({
    debug: true
});

1.3.4.4 jQuery.validator.addMethod（熟记）

添加自定义校验规则，参数一为校验规则的名称，参数二为执行函数（注意该函数不要用箭头函数，否则this将会指向错误），参数三为默认的错误提示消息

$.validator.addMethod("pwd",function (value, element) {
    //this.optional(element)用于值不会空才触发验证，如果值为空也要验证，那么不要写它
    return this.optional(element) || /^[a-zA-Z0-9]{5,12}$/.test(value);
},"密码格式不正确");

1.3.4.5 Validator.resetForm（熟记）

重置表单校验结果（包括样式、错误消息等）

let validator = $('.login-form').validate({
    ...
});

validator.resetForm();

1.3.4.6 Validator.numberOfInvalids（了解）

返回目前还有多少个未验证通过的字段，注意，其需要表单执行过验证才能正确获取到值，否则会得到0

let validator = $('.login-form').validate({
    ...
    invalidHandler: (event, validator) => {
        console.log(`当前还有${validator.numberOfInvalids()}字段未验证通过`);
    },
});

1.3.4.7 Validator.form（熟记）

执行表单验证，如果所有字段通过那么返回true，否则false

let validator = $('.login-form').validate({
    ...
});

validator.form();

1.3.5 示例

$(function () {
    $.validator.addMethod("pwd",function (value, element) {
        return this.optional(element) || /^[a-zA-Z0-9]{5,12}$/.test(value);
    },"密码格式不正确");

    let validator = $('.login-form').validate({
        submitHandler: (form, event) => {
            console.log(form);
            console.log(event);
        },
        invalidHandler: (event, validator) => {
            console.log(event);
            console.log(validator);
        },
        rules: {
            account: {
                required: true,
                rangelength: [3,7]
            },
            password: {
                required: true,
                pwd: true
            },
            password2: {
                required: true,
                equalTo: 'input[name="password"]'
            },
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            account: {
                required: '账号不能为空',
                rangelength: '账号由3~7个任意字符组成'
            },
            password: {
                required: '密码不能为空'
            },
            password2: {
                required: '确认密码不能为空',
                equalTo: '两次密码不一致'
            },
            email: {
                required: '邮箱地址不能为空',
                email: '请输入有效的邮箱地址'
            }
        },
        errorClass: "invalid",
        validClass: "success",
        errorElement: "p",
        errorPlacement: (error, element) => {
            //将错误消息元素添加到对应表单元素组合label的后面
            element.parent().after(error);
        },
        success: errorElement => {
            errorElement.addClass('success').text('验证通过了');
        },
    });
    //初始就执行一次表单验证
    validator.form();
});

1.4 菜单插件(metismenu)

下载地址：https://www.bootcdn.cn/metisMenu/

API文档地址：https://github.com/onokumus/metisMenu

1.4.1 基本菜单结构

如果希望某个菜单初始就展开，那么可以为其添加mm-active类样式名

如果希望有子项的菜单旁边有箭头，那么可以给a元素添加has-arrow类样式名（推荐加上，但是其初始的样式有点问题，导致位置错位，可以适当的调整一下）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>metisMenu菜单插件</title>
    <link rel="stylesheet" type="text/css" href="./lib/metisMenu-3.0.6/metisMenu.min.css" />
</head>
<body>
<ul class="mine-menu">
    <li class="mm-active">
        <a href="#">数据报表</a>
        <ul>
            <li>IP明细</li>
            <li>安装明细</li>
        </ul>
    </li>
    <li>
        <a href="#">任务管理</a>
    </li>
    <li>
        <a href="#">任务审核</a>
    </li>
    <li>
        <a href="#">财务明细</a>
        <ul>
            <li>支出明细</li>
            <li>收入明细</li>
        </ul>
    </li>
    <li>
        <a href="#">消息中心</a>
        <ul>
            <li>系统消息</li>
            <li>任务消息</li>
        </ul>
    </li>
</ul>
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="./lib/metisMenu-3.0.6/metisMenu.min.js"></script>
<script type="text/javascript" src="./js/02-metisMenu.js"></script>
</body>
</html>

1.4.2 激活菜单

$(function () {
    //获取到菜单jQuery对象，然后执行metisMenu方法即可激活菜单功能
    $(".mine-menu").metisMenu();
});

1.4.3 销毁菜单实例（了解）

$(function () {
    $(".mine-menu").metisMenu();

    //5秒后销毁菜单实例
    setTimeout(() => {
        $(".mine-menu").metisMenu('dispose');
    },5000);
});

1.4.4 配置属性

1.4.4.1 toggle

设置是否开启自动折叠（默认值为true表示只能同时展开一个菜单，为false则表示允许同时展开多个菜单）

$(function () {
    $(".mine-menu").metisMenu({
        toggle: false
    });
});

1.4.4.2 preventDefault

是否阻止折叠下拉菜单的点击事件，默认为true（一般不会去操作它）

$(function () {
    $(".mine-menu").metisMenu({
        preventDefault: false,
    });
});

1.4.4.3 triggerElement

设定菜单触发的元素，填写的是选择器，这里主要用于兼容Bootstrap4的导航(Navs)组件

$(function () {
    $(".mine-menu").metisMenu({
        triggerElement: '.nav-link'
    });
});

1.4.4.4 parentTrigger

设定菜单触发的元素的父级元素，填写的选择器，这里主要用于兼容Bootstrap4的导航(Navs)组件

$(function () {
    $(".mine-menu").metisMenu({
        parentTrigger: '.nav-item'
    });
});

1.4.4.5 subMenu

设定菜单组合的元素，填写的选择器，这里主要用于兼容Bootstrap4的导航(Navs)组件（需要选中所有ul才可以）

$(function () {
    $(".mine-menu").metisMenu({
        subMenu: '.nav.flex-column'
    });
});

1.4.5 事件

事件类型	说明
show.metisMenu	菜单展开前触发的事件
shown.metisMenu	菜单展开后触发的事件
hide.metisMenu	菜单折叠前触发的事件
hidden.metisMenu	菜单折叠后触发的事件

$(".mine-menu").metisMenu({
    toggle: false,
}).on('show.metisMenu',e => {
    //菜单展开前执行一些逻辑
});

1.5 网页进度条插件(pace.js)（简单记忆）

下载地址：https://www.bootcdn.cn/pace/

API地址：https://github.com/CodeByZach/pace

pace插件是全自动的，其将自动监听ajax请求、事件循环滞后、文档就绪状态、元素加载等

1.5.1 引用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>pace.js进度条插件</title>
    <link rel="stylesheet" type="text/css" href="./lib/pace-1.2.3/pace-theme-default.min.css" />
</head>
<body>

<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="./lib/pace-1.2.3/pace.min.js"></script>
</body>
</html>

1.5.2 配置收集器

收集器是用来控制具体收集哪些信息的，因为是配置，因此我们需要在引入Pace之前进行配置才行

<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="./js/02-pace.js"></script>
<script type="text/javascript" src="./lib/pace-1.2.3/pace.min.js"></script>

window.paceOptions = {
    ajax: false,
    document: false,
    eventLag: false,
    elements: {
        selectors: ['.my-page']
    }
}

名称	描述
ajax	监视页面上的所有ajax请求
document	检查文档的就绪状态
eventLag	检查javascript正在执行的事件循环延迟信号
elements	检查页面上是否存在特定的元素

elements常用于判定，页面是否已经加载完毕，例如上面代码，如果选择器'.my-page'一直没有内容，那么进度条就一直不会消失

1.5.3 配置主题

$(function () {
    window.paceOptions = {
        className: 'barber-shop',
    }
});

1.5.4 API

方法名	说明
Pace.start	开启进度条，自动启动
Pace.restart	如果进度条隐藏，那么重新显示播放
Pace.stop	隐藏进度条（实际还是会闪一下）
Pace.track	跟踪一个或多个请求
Pace.ignore	忽略一个或多个请求

1.5.5 事件

事件名	说明
start	当pace最初启动时，或者作为重新启动的一部分
stop	当pace被手动停止，或者作为重新启动的一部分
restart	当pace重新启动
done	当pace完成时
hide	当pace被隐藏时

Pace.on(event,handler)：绑定对应的事件

Pace.off(event,[handler])：移除对应的事件

1.6 富文本编辑器插件(quill)

下载地址：https://www.bootcdn.cn/quill/

API文档：http://static.kancloud.cn/liuwave/quill/1409423

1.6.1 下载与安装说明

quill是插件的主库(不包含主题)

quill.core是插件的核心库（不包含主题、格式化和非必要模块）

quill.snow.css基本主题（包含了工具栏以及输入框）

quill.bubble.css（只有输入框，一般不会使用它）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery富文本框插件</title>
</head>
<body>

<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="./lib/quill-2.0.0-dev.4/quill.min.js"></script>
</body>
</html>

1.6.2 使用quill容器构建富文本框

HTML代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery富文本框插件</title>
    <link rel="stylesheet" type="text/css" href="./lib/quill-2.0.0-dev.4/quill.snow.min.css" />
</head>
<body>
<div id="editor"></div>
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="./lib/quill-2.0.0-dev.4/quill.min.js"></script>
<script type="text/javascript" src="./js/01-quill.js"></script>
</body>
</html>

JS代码：

$(function () {
    //在指定的元素下面，创建富文本框
    let quill = new Quill('#editor',{
        theme: 'snow'   //设置主题
    });
});

通过CSS设置富文本框的初始高度：

#editor > .ql-editor {
    min-height: 20vh;
}

1.6.3 选项

用于配置富文本框容器

属性名	默认值	说明
debug	warn	启用记录信息，可以填写的值有’error’、‘log’、‘info’
modules	-	需要引入的模块合集以及它们各自的选项
placeholder	None	当编辑器为空时显示的占位符文字
readOnly	false	是否将编辑器实例设置为只读模式
theme	-	主题名称，只能设置“bubble”或者“snow”，需要引入对应的主题样式

1.6.4 模块（modules）

1.6.4.1 工具栏（toolbar）

方式一：js配置方式，该方式最简单，但是无法做更多的扩展，仅限于配置有哪些工具（里面的内容可以任意取舍、组合，来实现专属于自己的工具栏）

//初始化富文本框
let quill = new Quill("#editor-container",{
    theme: 'snow',  //指定主题
    modules: {
        toolbar: [
            ['bold', 'italic', 'underline', 'strike'],        // 文字样式（加粗、斜体、下划线、删除线）
            ['blockquote', 'code-block'],                     // 引用、代码块
            [{ 'header': 1 }, { 'header': 2 }],               // 标题快捷方式(标题1、标题2)
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],     // 列表（有序列表、无序列表）
            [{ 'script': 'sub'}, { 'script': 'super' }],      // 下标、上标
            [{ 'indent': '-1'}, { 'indent': '+1' }],          // 缩进一格、推进一格
            [{ 'direction': 'rtl' }],                         // 左或右对齐
            [{ 'size': ['small', false, 'large', 'huge'] }],  // 字号（小、正常、大、超大）
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],        // 标题（一级、二级、三级、四级、五级、六级、正文）
            [{ 'color': [] }, { 'background': [] }],          // 颜色（文字颜色、背景颜色）
            [{ 'font': [] }],                                 // 字体
            [{ 'align': [] }],                                // 对齐方式
            ['clean']                                         // 清理样式
        ]
    }
});

方式二：html配置方式，该方式结构复杂，但是可以做更多的扩展，例如给每个工具添加一个鼠标移入提示的效果

<!-- 富文本组件-工具栏容器 -->
<div id="toolbar-container">
    <span class="ql-formats">
        <select class="ql-font" title="字体"></select>
        <select class="ql-size" title="字号"></select>
    </span>
    <span class="ql-formats">
        <button class="ql-bold" title="加粗"></button>
        <button class="ql-italic" title="斜体"></button>
        <button class="ql-underline" title="下划线"></button>
        <button class="ql-strike" title="删除线"></button>
    </span>
    <span class="ql-formats">
        <select class="ql-color" title="文字颜色"></select>
        <select class="ql-background" title="背景色"></select>
    </span>
    <span class="ql-formats">
        <button class="ql-script" value="sub" title="下标"></button>
        <button class="ql-script" value="super" title="上标"></button>
    </span>
    <span class="ql-formats">
        <button class="ql-header" value="1" title="标题1"></button>
        <button class="ql-header" value="2" title="标题2"></button>
        <button class="ql-blockquote" title="引用"></button>
        <button class="ql-code-block" title="代码块"></button>
    </span>
    <span class="ql-formats">
        <button class="ql-list" value="ordered" title="有序列表"></button>
        <button class="ql-list" value="bullet" title="无序列表"></button>
        <button class="ql-indent" value="-1" title="向后推进1格"></button>
        <button class="ql-indent" value="+1" title="向前推进1格"></button>
    </span>
    <span class="ql-formats">
        <button class="ql-direction" value="rtl" title="左/右对齐"></button>
        <select class="ql-align" title="水平对齐方式"></select>
    </span>
    <span class="ql-formats">
        <button class="ql-link" title="链接"></button>
        <button class="ql-image" title="图片"></button>
        <button class="ql-video" title="视频"></button>
        <button class="ql-formula" title="公式"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-clean" title="清除格式"></button>
    </span>
</div>
<div id="editor-container"></div>

//初始化富文本框
let quill = new Quill("#editor-container",{
    theme: 'snow',  //指定主题
    modules: {
        toolbar: {
            container: '#toolbar-container'
        }
    }
});

1.6.4.2 语法高亮

hightlightjs官方地址：https://highlightjs.org/

下载地址：https://highlightjs.org/download/

主题下载地址：https://highlightjs.org/static/demo/

引入highlightjs文件

...
<link rel="stylesheet" type="text/css" href="./lib/quill-2.0.0-dev.4/quill.snow.min.css" />
<!-- 引入指定高亮主题样式 -->
<link rel="stylesheet" type="text/css" href="./lib/highlight-10.5.0/agate.css" />
...
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<!-- 引入高亮js -->
<script type="text/javascript" src="./lib/highlight-10.5.0/highlight.min.js"></script>
<script type="text/javascript" src="./lib/quill-2.0.0-dev.4/quill.min.js"></script>
<script type="text/javascript" src="./js/04-quill.js"></script>

quill开启语法高亮

//初始化富文本框
let quill = new Quill("#editor-container",{
    theme: 'snow',  //指定主题
    modules: {
        syntax: true,       //开启语法高亮
        toolbar: {
            container: '#toolbar-container'
        }
    }
});

1.6.5 API

1.6.5.1 内容（contents）

方法名	说明	用法
getContents	返回编辑器的内容——包含格式数据的Delta数据	`let delta = quill.getContents();`
getLength	返回编辑器内容的长度。注意，当Quill为空时，仍然包含一个由’\n’解析成的空行，所以getLength将返回1	`let length = quill.getLength();`
setContents	用给定的内容覆盖原编辑器内容(注意需要是Delta数据)	`quill.setContents(delta)`

2. 什么是Ajax

参考网址: https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX

1.1 介绍

AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

1.2 特性

在不重新加载页面的情况下发送请求给服务器
接受并使用从服务器发来的数据。

1.3 参考书籍: Ajax in Action

1.4 原理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W5pdPs8W-1612060021215)( https://lao-jiu-jun.gitee.io/xuetang9-markdown-graph-bed/Java实训/jQuery/jQuery高级/ajax原理.png )]

1.5 Ajax客户端的MVC模式影射

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9UR5bYRb-1612060021217)( https://lao-jiu-jun.gitee.io/xuetang9-markdown-graph-bed/Java实训/jQuery/jQuery高级/ajax中的MVC.png )]

说明:

在这客户端有一个MVC模式：DOM对象是模型、HTML是视图、JavaScript是控制器。中间隐含了JavaScript通过XMLHttpRequest对象与服务端进行异步/同步通讯的细节

2. 使用原生Ajax

2.1 思路（熟记）

创建XMLHttpRequest 模板对象的对象，后续称请求对象
设置接收数据的类型，xml、html、script、json、jsonp、text
为请求对象准备 load(请求完成) 事件的监听函数
通过请求对象的open()方法准备请求方式，请求地址等基本信息
通过请求对象的setRequestHeader()方法需要向服务器写入的请求头信息。注意该步骤不是所有请求都需要
通过请求对象的send()方法向服务器发送请求

2.1.1 处理服务端响应

关键响应状态列表

完整的HTTP 响应码及其介绍： https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status

状态码	说明
0	当前请求未完成
200	当前请求成功响应
401	当前请求没有得到服务器授权
404	服务器没有找到请求资源,通常情况下是地址错误
500	服务端发生错误

2.2 示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>原生ajax</title>
    <style type="text/css">
        .code-box {
            display: inline-block;
            border: 1px solid black;
            cursor: pointer;
        }
    </style>
</head>
<body>
<form action="" method="post">
    <div>
        <label>
            <span>账号</span>
            <input type="text" name="account" placeholder="请输入账号" />
        </label>
    </div>
    <div>
        <label>
            <span>密码</span>
            <input type="password" name="pwd" placeholder="请输入密码" />
        </label>
    </div>
    <div>
        <label>
            <span>验证码</span>
            <input type="text" name="account" placeholder="请输入验证码" />
        </label>
        <span class="code-box"></span>
    </div>
    <input type="submit" value="登录" class="login-btn" />
</form>
<script type="text/javascript">
    let [code,codeUid] = ["",""];        //验证码与验证码唯一Id
    //获取验证码函数
    function getCode() {
        //1. 创建请求对象
        let req = new XMLHttpRequest();
        //2. 设置响应数据类型为JSON数据
        req.responseType = "json";
        //3. 请求完成时触发(这里需要用this，且this必须指向XMLHttpRequest，因此不能使用箭头函数）
        req.onload = function () {
            //获取服务端响应的数据
            let data = this.response;
            //服务器正常的响应了请求
            if(this.status === 200) {
                //记录验证码和唯一标识
                code = data.data.code;
                //将验证码显示在框中
                document.querySelector('.code-box').innerHTML = `${code}`;
                codeUid = data.data.codeUid;
            }else {
                console.log(data.message);
            }
        }
        //4. 设置请求方式、请求地址、是否开启异步async（默认为true，设置为false表示同步）
        req.open('GET','http://www.xxxxxxx',true);
        //5. 设置请求对象的 请求头信息
        req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        //6. 发送请求（可以传递数据或者不传递数据）
        req.send();
    }
    //初始立即请求一次验证码获取
    getCode();
    //给获取验证码框绑定点击事件
    document.querySelector('.code-box').addEventListener('click',e => getCode());

    //给登录按钮绑定点击事件
    document.querySelector('.login-btn').addEventListener('click',e => {
        e.preventDefault();
        //获取账号
        let account = document.querySelector('input[name="account"]').value;
        //获取密码
        let pwd = document.querySelector('input[name="pwd"]').value;

        //1. 创建请求对象
        let req = new XMLHttpRequest();
        //2. 设置响应数据类型为JSON数据
        req.responseType = "json";
        //3. 请求完成时触发
        req.onload = function () {
            if(this.status === 200) {
                let data = this.response;
                if(data.code === 10000) {
                    alert('登录成功！');
                }else {
                    console.log(data.message);
                }
            }
        }
        //4. 设置请求的方式、地址、异步
        req.open("POST","http://www.xxxxxxx");
        //5. 设置请求的头
        req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //6. 发送请求
        req.send(`account=${account}&code=${code}&codeUid=${codeUid}&password=${pwd}`);
    });
</script>
</body>
</html>

3.JQuery的Ajax（熟记）

中文API地址1：https://www.jquery123.com

中文API地址2：https://jquery.cuishifeng.cn/

3.1 serialize()方法

将表单的数据序列化为字符串

3.2 serializeArray()方法

将表单的数据序列化为JSON对象

3.3 ajax()

发起ajax请求，使用对象的方式赋值参数

3.3.1 参数表

参数	说明
url	发送请求的地址
type	请求方式 (“POST” 或 “GET”)，默认为 “GET”。注意:其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
async	是否为异步请求（默认为true，设置为false则为同步请求）
contentType	设置内容编码类型，默认值为"application/x-www-form-urlencoded"
data	向服务器发送的数据,可以给字符串（key/value格式）或者JSON对象
dataType	预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。(xml、html、script、json、jsonp、text)
error	请求失败之后的处理函数。error(XMLHttpRequest, textStatus, errorThrown)
success	请求成功之后的处理函数。success(data, textStatus, jqXHR)

3.3.2 示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery的Ajax方法</title>
    <style type="text/css">
        .code-box {
            display: inline-block;
            border: 1px solid black;
            cursor: pointer;
        }
    </style>
</head>
<body>
<form action="" method="post">
    <div>
        <label>
            <span>账号</span>
            <input type="text" name="account" placeholder="请输入账号" />
        </label>
    </div>
    <div>
        <label>
            <span>密码</span>
            <input type="password" name="password" placeholder="请输入密码" />
        </label>
    </div>
    <div>
        <label>
            <span>验证码</span>
            <input type="text" name="account" placeholder="请输入验证码" />
        </label>
        <span class="code-box"></span>
    </div>
    <input type="submit" value="登录" class="login-btn" />
</form>
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    let [code,codeUid] = ["",""];        //验证码与验证码唯一Id
    $(function () {
        //初始立即请求一次验证码获取
        getCode();
        //给获取验证码框绑定点击事件
        $('.code-box').click(e => getCode());
        //给登录按钮绑定点击事件
        $('.login-btn').click(e => {
            e.preventDefault();
            $.ajax({
                url: 'http://www.xxxxxxx',
                type: 'post',
                data: `${$('form').serialize()}&codeUid=${codeUid}`,
                async: true,
                contentType: 'application/x-www-form-urlencoded',
                dataType: 'json',
                error: (XMLHttpRequest,textStatus,errorThrown) => {
                    console.log('网络连接错误！')
                },
                success: (data,textStatus,jqXHR) => {
                    if(data.code === 10000) {
                        alert('登录成功！');
                    }else {
                        console.log(data.message);
                    }
                }
            });
        });
    });

    //获取验证码函数
    function getCode() {
        $.ajax({
            url: 'http://www.xxxxxxx',
            type: 'get',
            async: true,
            contentType: 'application/x-www-form-urlencoded',
            dataType: 'json',
            error: (XMLHttpRequest,textStatus,errorThrown) => {
                console.log('网络连接错误！')
            },
            success: (data,textStatus,jqXHR) => {
                //记录验证码和唯一标识
                code = data.data.code;
                //将验证码显示在框中
                $('.code-box').html(`${code}`);
                codeUid = data.data.codeUid;
            }
        });
    }
</script>
</body>
</html>

3.4 ajaxSetup()

设置全局ajax默认选项，具体参数与ajax()方法一致

//设置全局ajax默认值
$.ajaxSetup({
    type: 'get',
    async: true,
    contentType: 'application/x-www-form-urlencoded',
    dataType: 'json',
});

3.5 get()

发起一个简单的GET请求

3.5.1 参数表

$.get(url, [data], [callback], [type])

参数	说明
url	一个包含发送请求的URL字符串
data	发送给服务器的字符串或Key/value键值对
callback	当请求成功后执行的回调函数
type	从服务器返回的预期的数据类型

3.5.2 示例

//获取验证码函数
function getCode() {
    $.get('http://http://www.xxxxxxx',data => {
        //记录验证码和唯一标识
        code = data.data.code;
        //将验证码显示在框中
        $('.code-box').html(`${code}`);
        codeUid = data.data.codeUid;
    });
}

3.6 post()

发起一个简单的POST请求

3.6.1 参数表

$.post(url, [data], [callback], [type])

参数	说明
url	一个包含发送请求的URL字符串
data	发送给服务器的字符串或Key/value键值对
callback	当请求成功后执行的回调函数
type	从服务器返回的预期的数据类型

3.6.2 示例

//给登录按钮绑定点击事件
$('.login-btn').click(e => {
    e.preventDefault();
    $.post(
        'http://www.xuetang9.com:8881/user/login',
        `${$('form').serialize()}&codeUid=${codeUid}`,
        data => {
            if(data.code === 10000) {
                alert('登录成功！');
            }else {
                console.log(data.message);
            }
        }
    );
});

3.7 load()

从服务器载入HTML数据并插入至匹配的元素中

3.7.1 参数表

load(url, [data], [callback])

参数	说明
url	一个包含发送请求的URL字符串
data	发送给服务器的字符串或Key/value键值对
callback	当请求成功后执行的回调函数

注意：

可以直接请求本地的HTML文件

被加载的内容页面，不要出现 html 、 head 、body 等基础结构标签，直接书写内容即可。

3.7.2 示例

头部代码header.html：

<div class="container">
    <div class="left">
        <span>左侧内容</span>
    </div>
    <div class="right">
        <span>右侧内容</span>
    </div>
</div>

底部代码footer.html：

<div class="container">
    <div class="left">
        <span>左侧</span>
    </div>
    <div class="container">
        <span>中部</span>
    </div>
    <div class="right">
        <span>右侧</span>
    </div>
</div>
<div class="container">
    <span>其它信息</span>
</div>

页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery的load方法</title>
    <style type="text/css">
        .container {
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
<header></header>
<section>
    <h1>中部内容</h1>
</section>
<footer></footer>
<script type="text/javascript" src="./lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        //将header.html页面的内容加载到header中
        $('header').load('./header.html');
        //将footer.html页面的内容加载到footer中
        $('footer').load('./footer.html');
    });
</script>
</body>
</html>

a听闻

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习-jQuery高级

1. jQuery经典插件1.1 表单验证插件jQuery-validation这个jQuery插件使简单的客户端表单验证变得容易，同时还提供了大量的定制选项官网： https://jqueryvalidation.org1.2 下载并安装插件下载地址：https://github.com/jquery-validation/jquery-validation/releases/tag/1.19.2导入插件js文件即可，需要注意：因为该插件是基于jQuery开发的，所以它必须在jQuery
复制链接

扫一扫

专栏目录