一、自定义插件

1、$.extend

对象继承：$.extend(对象1,对象2)

扩展jQuery类方法：$.extend({ 方法名:function(){方法体} })

对象继承：

<script src="js/jquery-3.5.1.js"></script>
<script>let 对象一={"吃饭":function(){console.log("正在吃饭")}}let 对象二={"睡觉":function(){console.log("正在睡觉")}}对象一.吃饭() //正在吃饭对象二.睡觉() //正在睡觉$.extend(对象一,对象二) //对象一继承对象二对象一.睡觉() //对象一继承了对象二睡觉的方法  正在睡觉
</script>

扩展jQuery类方法：

<script src="js/jquery-3.5.1.js"></script>
<script>//拓展jQuery//让jQuery具备可以拿出多个数字中最大数字的方法$.extend({max:(...is)=>{//...is具备多个参数，而且是个数组let max=-Infinity // Infinity是无穷大// -Infinity是无穷小for(let i of is){max = max < i ? i : max}//返回最大值return max}})console.log($.max(1,3,2,7,43,5,34,23)) //输出为43
</script>

2、$.fn.extend

拓展jQuery对象：$.fn.extend({ 方法名:function(){} })

<script src="js/jquery-3.5.1.js"></script>
<script>$.fn.extend({test:()=>{console.log("(#^.^#)")}})$("a").test() // 输出为 (#^.^#)
</script>

$ 是jquery
$("xx") 是jquery对象

二、第三方插件

1、下载jQuery插件验证库

官网链接：https://jqueryvalidation.org/

进入官网是以下图片的样子

找到Files，点击Download下载

然后会跳转到下面这个界面

翻到最下面，点击链接就可以下载了

2、使用插件

先把下载好的jQuery插件库导入项目中

两种方式使用验证，一是HTML标签属性方式，二是js方式，推荐使用js方式，以下是js方式

验证及错误信息

$("表单元素").validate({

rules:{

字段验证规则

},

messages:{

字段错误信息

}

})

错误样式

label.error{
样式
}

下面我们写一个表单验证，在写表单验证之前，给大家普及一下常用的验证规则

以下是一个简单的表单验证的代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 表单验证插件是基于jQuery的，在导入插件之前需要先导入jQuery --><script src="js/jquery-3.5.1.js "></script><!-- 表单插件 --><script src="js/jquery-validation-1.19.0/dist/jquery.validate.js"></script><!-- 更换文字 --><script src="js/jquery-validation-1.19.0/dist/localization/messages_zh.js"></script><style>label.error{color: red;}</style></head><body><form action=""><p><input type="text" name="username" placeholder="用户名" /></p><p><input type="text" name="password" placeholder="用户密码" /></p><p><button>登录</button><button type="reset">取消</button><!-- type="reset" 将按钮的type设置成reset是重置内容，还可清空内容 --></p></form><script type="text/javascript">$("form").validate({rules:{username:{required:true,   //必填rangelength:[5,10]  //长度是5-10之间}, password:{required:true,  //必填rangelength:[6,10]  //长度是6-10之间}}})</script></body>
</html>

上述代码只用了一点点的验证规则，想要添加更多可根据以上验证规则敲

运行起来就是以下图片

今天的内容就讲到这里啦

jQuery插件以及插件下载相关推荐

jQuery中文手册, jQuery API, jQuery UI, 分页插件下载
jQuery 库最新版下载 : jquery-1.3.2 最新版.rar 中文手册下载地址(超酷版): jQuery1.2API.rar API 文档下载(最新1.32CHM版): jQueryAPI ...
强大的jQuery幻灯片播放插件支持全拼、拖拽和下载等功能
强大的jQuery幻灯片播放插件支持全拼.拖拽和下载等功能在线演示本地下载 posted @ 2018-11-29 11:30 栖息地阅读(...) 评论(...) 编辑收藏
Lazy Line Painter – 很有趣的 jQuery 路径动画插件
Lazy Line Painter 是基于 Raphaël(一个用于在网页中绘制矢量图形的 Javascript 库)的 jQuery 路径动画插件,能够把线条图案转换为吸引眼球的路径动画模式. 您可 ...
我的jQuery动态表格插件二
本篇博客是我写在离职后,昨天刚辞职和交接完任务,准备离开.其实我有很多不舍,但是最终还是选择了离开,许多苦楚都埋在我的心底.哎,趁回成都找工作的机会是该好好休息一下了. 在上篇我的jQuery动态表格 ...
jQuery 图片剪裁插件初探之 Jcrop
主页:http://deepliquid.com/content/Jcrop.html 官方下载地址:http://deepliquid.com/content/Jcrop_Download.html ...
15个非常棒的jQuery无限滚动插件【瀑布流效果】
现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布流).如果你碰巧观察Pinterest的网站,如Facebook,Twitter和deviantART的,你会发现无限滚动的动作,当旧的 ...
jQuery幻灯片skitter-slider插件学习总结
@(关键词)[skitter|jquery|网页幻灯片|slider] Skitter 是一个非常酷炫的jQuery网页幻灯片插件,支持非常多种酷炫幻灯片切换方式,下载前往官网,另有参考文档下面简单 ...
jQuery Form Plugin (jquery表单插件)
jQuery表单插件 jQuery.form 这是一个全面支持表单的jQuery插件,支持文件上传,包含以下一些方法: -ajaxForm -ajaxSubmit - formToArray - fo ...
jQuery 人脸识别插件，支持图片和视频
jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标.它跟踪人脸并输出人脸模型的坐标位置为一个数组.我们相信,面部识别技术能够给我们的 Web 应用带 ...
jquery.autocomplete.js 插件的自定义搜索规则
这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足! 问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下 ...

jQuery插件以及插件下载

一、自定义插件

1、$.extend

2、$.fn.extend

二、第三方插件

1、下载jQuery插件验证库

2、使用插件

jQuery插件以及插件下载相关推荐

最新文章

热门文章