一.自定义插件

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

格式: $.方法名()

2. $.fn.extend({ 方法名:function (){} })

注：

使用$.fn.extend({ 方法名:function (){} })

它的格式:$().方法名()

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

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="jquery-3.5.1.js"></script></head><body><script>// 用中文给大家演示一下，在我们平常时还是使用英文let 小蓝={"逃课":function(){console.log("正在逃课中......");}}let 小粉={"吃饭":function(){console.log("正在吃饭中");}}// 对象继承 $.extend(对象1，对象2)  对象1继承对象2// 小蓝继承小粉的方法  小蓝也具备了吃饭的方法$.extend(小蓝,小粉);小蓝.吃饭();// jquery继承小蓝的方法// 因为小蓝继承了小粉具备了吃饭和逃课的方法  所以jquery具备了该两种方法$.extend($,小蓝);$.吃饭();$.逃课();// $.fn.extend() 对象方法$.fn.extend({test:()=>{console.log("哈哈哈哈");}})// $ 是jquery// $("xx") 是jquery对象// 对象.方法$("a").test();</script></body>
</html>

写一个让jquery具备一个拿到一个数组中的最大值的方法，大家可以自己写一下，下方提供代码给到大家。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="jquery-3.5.1.js"></script></head><body>                     <script>$.extend({// ...is具备都个参数 相当于一个数组max:(...is)=>{let max=-Infinity;//-Infinity:负无穷大 Infinity无穷大for(let i of is){// 三元运算符max=max<i?i:max;}return max;}})console.log($.max(1,2,3,4,5,6));</script></body>
</html>

二.第三方插件

该插件名叫做JQuery Validation,jQuery Validation插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，简化我们的代码。

1.如何下载jquery插件验证库?

大家点击该链接到官网 https://jqueryvalidation.org/

1.点击链接后我们会跳转到该官网

2.跳转到官网后，往下滑,找到这里点击Download

3.点击Download我们会进到该界面

4.往下滑，滑到最底下，点击jquery-validation-1.19.3.zip

这串蓝色这里点击，就可以下载啦

2.如何使用插件

1.将下好的插件引入页面

2.两种方式使用验证

HTML标签属性

JS方式(推荐)

3.JS方式：

验证及错误信息：

格式: $("表单元素").validate({

          rules:{

                字段验证规则

                        }

          messages:{

                 字段错误信息

                        }

                        })

错误样式:label.error{

样式
       }

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="jquery-3.5.1.js"></script><!--表单验证插件是基于jquery的 再导入插件之前需要先导入jquery-->
<script src="jquery-validation-1.19.0/dist/jquery.validate.js"></script><!-- 这一步是修改提示语是什么语言--><script src="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="userPwd" placeholder="密码"></p><p><button>登录</button><!-- reset 点击按钮时会清空输入框的值 --><button type="reset">取消</button></p></form><script>$("form").validate({// 字段验证规则rules:{userName:{required: true,//必须填写字段rangelength:[5,10],//必须填写5-10},userPwd:{required: true,//必须填写字段rangelength:[5,10],//必须填写5-10}},// 更改原本的错误提示语句messages:{userPwd:{required:"密码为空",}}})</script></body>
</html>

好啦今天的课程到此结束，下次见啦。

JQuery 如何使用插件如何安装插件(详细讲解)相关推荐

jquery插件分类与编写详细讲解
1. 插件种类插件其实就是对现有的方法(或者叫函数)做一个封装,方便重用提高开发效率. jQeury主要有2种类型 1)实例对象方法插件开发能让所有的jquery实例对象都可以调用的方法. ...
防暴力营销/论坛群发注册机的插件、安装方法详细
每天看见一波一波的暴力注册删的手酸,经历过的站长相信都"痛不欲生"啊.经网络搜索.研究暂取一法,双重验证加算法可杜绝暴力营销注册.部分CODE和思想参考:犍为真人插件要素: 1- ...
jekins 下载插件、安装插件报错
jenkins 下载插件失败,提示: java.io.IOException: Downloaded file /app/jenkins_home/plugins/jacoco.jpi.tmp doe ...
Mysql出现问题：如何查询插件，安装插件解决方案
❤️作者主页:小虚竹 ❤️作者简介:大家好,我是小虚竹.Java领域优质创作者
Mysql 集群双主双从安装使用详细讲解
文章目录下载Mysql 安装单机Mysql 配置Mysql集群双Master配置 master1配置 master2配置配置说明双Slave配置 Slave1配置 Slave2配置双 Mas ...
【Ubuntu 20.04 LTS】如何安装软件详细讲解
文章目录一.Ubuntu软件商店二.apt命令安装三.snap命令安装四.dpkg命令安装deb包五.源码安装一.Ubuntu软件商店我们可以直接打开Ubuntu自带的软件商店,进行搜索 ...
服务器没有plugin文件,服务器上安装插件
服务器安装插件可以通过fs的插件管理完成,或者手动拷贝jar包和文件夹.下面分别介绍. 1.1服务器上fs插件管理安装插件更新2016-5-31号及以后的jar,服务器上可以通过fs的插件管理来对服 ...
HBuilderX及其插件的安装
uni-app 是一个使用 Vue.js 开发所有前端应用的框架.开发者编写一套代码,可发布到 iOS.Android.H5.以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝).快应用等多个 ...
dokuwiki安装插件主题设置
最近部门考虑搭建一个集成人员权限管理,媒体文件共享,版本可追朔,修改等记录等功能的知识&文件共享平台,最开始考虑用svn,但是文件的每次提交和更新太过繁琐,并且每次更新需要下载到本地才能看,所 ...
求生之路linux服务器架设,3、插件平台安装_求生之路2怎么搭建服务器_服务器架设教程(Linux限定)_3DM单机...
3.插件平台安装插件少的话,选最新版也没关系哦.记得下载linux版然后要下载VDF文件 Make your VDF 选择Left 4 Dead 2 把得到的VDF文件放在addons文件夹内覆 ...

JQuery 如何使用插件如何安装插件(详细讲解)

一.自定义插件

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

2. $.fn.extend({ 方法名:function (){} })

二.第三方插件

1.如何下载jquery插件验证库?

2.如何使用插件

JQuery 如何使用插件如何安装插件(详细讲解)相关推荐

最新文章

热门文章

JQuery 如何使用插件如何安装插件(详细讲解)

一.自定义插件

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

2. $.fn.extend({ 方法名:function (){} })

二.第三方插件

1.如何下载jquery插件验证库?​​​​​​​

2.如何使用插件

JQuery 如何使用插件如何安装插件(详细讲解)相关推荐

最新文章

热门文章

1.如何下载jquery插件验证库?