当前位置：首页 > news >正文

东安网站建设顺德网站建设原创

news 2025/9/16 7:26:00

东安网站建设,顺德网站建设原创,网站流量排名全球,网站推广任务 ip点击今天是jquery的最后一节课，小编教大家如何使用插件，也算是一个jquery的一个扩展，大家有不懂的在下方评论或者私信小编噢。目录一.自定义插件 1.$.extend(对象1,对象2) ------->对象1继承对象2 2. $.fn.extend({ 方法名:function (…

今天是jquery的最后一节课，小编教大家如何使用插件，也算是一个jquery的一个扩展，大家有不懂的在下方评论或者私信小编噢。

一.自定义插件

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

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

二.第三方插件

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

2.如何使用插件

一.自定义插件

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>