jQuery插件
自定义插件
| 方法名 | 描述 |
|---|---|
jQuery.extend(object) |
为jQuery函数对象扩展方法、属性 |
jQuery.fn.extend(object) |
为jQuery对象扩展方法、属性（this指向jQuery对象集合） |
在使用时最好使用闭包形式定义，以免污染顶级变量
(function($){
//code
})(jQuery);
官方插件
目前官网的插件库已经是只读模式，所有jQuery插件的发布都在npm官网上
从npm官网，以jquery-plugin为关键字搜索（大部分jQuery插件都是以jquery-为前缀的），即可搜索到大量的jQuery插件，因为是jQuery插件，依赖于jQuery，所以要在引入jQuery之后引入
validation表单验证插件
以jquery-validation为例，搜索jquery-validation关键字，使用npm install jquery-validation --save进行下载安装，在项目中引入插件即可
基本使用
<style>
/*在发生验证失败时，会生成一个label标签用来显示提示内容,并且在验证失败表单和生成的label标签上添加error类名*/
.error {color: red;}
</style>
<script src="./lib/jquery-3.5.1-dist/jquery.min.js"></script>
<script src="./lib/jquery-validation-1.19.2-dist/jquery.validate.min.js"></script>
<script src="./lib/jquery-validation-1.19.2-dist/additional-methods.min.js"></script>
<!-- jquery-validation插件扩展的一些验证方法，若不需要可以不引入 -->
<script src="./lib/jquery-validation-1.19.2-dist/localization/messages_zh.min.js"></script>
<!-- jquery-validation实现了国际化，所以还需要引入中文的国际化js文件 -->
<script>
/*基本使用，就是使用选中表单元素，声明规则*/
$("#form").validate({
debug: true, //设置为调试模式，表单不会提交
rules: {
username: { //使用的是表单元素name属性
required: true, //定义多个规则适用对象形式
minlength: 2
},
password: "required" //定义单个规则可以使用字符串形式
},
messages: { //也可以自定义提示信息
username: {
minlength: "必须大于2个字符"
}
}
})
</script>
其他验证规则
不包括jquery-validation插件扩展的验证方法
| 描述 | 描述 |
|---|---|
required:true |
必须输入的字段 |
remote:"url" |
使用ajax方法远程验证，服务端需要返回true或false |
email:true |
必须输入正确格式的电子邮件 |
url:true |
必须输入正确格式的网址（包括协议） |
creditcard:true |
必须输入合法的信用卡号 |
equalTo:"selector" |
输入值必须和选择器选中的表单内容相同 |
accept:true |
输入拥有合法后缀名的字符串（上传文件的后缀） |
maxlength:n |
输入长度最多是n的字符串 |
minlength:n |
输入长度最小是n的字符串 |
rangelength:[start,end] |
输入长度必须介于start和end之间的字符串 |
number:true |
必须输入合法的数字（负数，小数） |
digits:true |
必须输入整数 |
max:n |
输入值不能大于n |
min:n |
输入值不能小于n |
range:[start,end] |
输入值必须介于start和end之间 |
date:true |
必须输入正确格式的日期，规则比较宽泛，能被Date.parse()方法解析即可 |
dateISO:true |
必须输入正确格式的日期（ISO格式，YYYY-mm-dd或YYYY/mm/dd） |
自定义验证方法
$.validator.addMethod("myVerification", //自定义验证方法名
function (value, element, param) { //自定义验证方法实现
//value为要验证的表单元素中的内容
//element为要验证的表单元素
//param为接收定义规则中传入的参数
return this.optional(element) || false //返回true表示验证通过
//this.optional(element)表示当前元素不是必填元素
},
$.validator.format("错误提示消息，使用{0}、{1}形式，也可以接收定义规则中传入的参数"))
cookie插件
jquery-cookie官方已经不再维护了，取而代之的是js-cookie，他并不依赖jQuery，使用npm install js-cookie --save安装即可使用，他支持模块化
<script src="./lib/js-cookie-2.2.1-src/js.cookie.js"></script>
<!--
引入js-cookie，他会像jQuery一样有一个全局对象，即Cookies对象
同样像jQuery一样可使用Cookies.noConflict()方法解除对Cookies变量的占用
-->
<script>
Cookies.set("key", "value"); //设置cookie
Cookies.set("key", {
key: "val"
}); //设置cookie的value为对象，会自动转化为json
Cookies.set("key", "value", {
expires: 7,
path: ""
}); //设置cookie同时指定该cookie的其他属性
Cookies.get("key"); //获取指定cookie
Cookies.get(); //获取全部cookie
Cookies.getJSON("key"); //以js对象形式获取指定cookie
Cookies.getJSON(); //以js对象形式获取全部cookie
Cookies.remove("key"); //删除指定cookie，会返回cookie的值
</script>
lazyload懒加载插件
lazyload也可以不依赖jQuery，使用npm install lazyload --save安装，在页面引用即可
<img class="lazyload" src="占位符图片.jpg" data-src="真正图片.jpg">
<!--
若想依赖与jQuery则真正的图片使用data-original字段进行表示，然后使用jQuery选择器调用lazyload()方法
就像这样$("img").lazyload();
-->
<script src="./lib/lazyload-2.0.0-src/lazyload.min.js"></script>
<script>
window.onload=function(){
lazyload(); //一定要在页面加载完毕后调用懒加载初始化方法，会自动寻找所有lazyload类名的图片进行懒加载
//也可以使用lazyload(document.querySelectorAll(".自定义类名"));显示的传入要懒加载的图片们进行初始化
}
</script>
Comments NOTHING