一、自定义插件
前提：引入jquery-3.3.1.js
<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
1、$.extend(对象1，对象2) 对象1继承对象2
/*自定义插件*/$(function(){//$extend(对象1,对象2) 对象1继承对象2//定义一个人类对象,属性;name sexvar person={"name":"东方不败","sex":"女"};var stu={};console.log($.type(stu));// //为stu继承person的所有属性$.extend(stu,person);console.log(stu);console.log("----------------------------");//三个参数var person={"name":"东方不败","sex":"女"};var stu={"age":18};var sb={};console.log(person);console.log(stu);console.log(sb);// $.extend(sb,stu,person);// console.log(person);// console.log(stu);// console.log(sb);
2、$.extend() 扩展jQuery类方法
$.extend({"sb":function(){console.log("这是我定义的方法");},"nb":function(){console.log(123);}});// $.sb();// $.nb();//求最大值(最小值)$.extend({//最大值"myMax":function(a,b){return a>b?a:b},"myMax2":function(){// console.log(arguments.length);// 打擂台的思想var max = arguments[0];//假设这个arguments数组中的第一个值为最大值// console.log(arguments[0]);for(var i = 0;i<arguments.length;i++){if(max < arguments[i]){max = arguments[i];}}return max;"myMin":function(){// console.log(arguments.length);// 打擂台var min = arguments[0];//假设这个arguments数组中的第一个值为最大值// console.log(arguments[0]);for(var i = 0;i<arguments.length;i++){if(min > arguments[i]){min = arguments[i];}}return min;}});// console.log($.myMax2(12,2,3,56));// console.log($.myMax2(1));// console.log($.myMax2());// console.log($.myMax2(1,2,3,4,5,6,6,7));// console.log($.myMin(22,3,2));
3、$.fn.extend() 扩展jQuery对象方法
//实现全选效果$.fn.extend({// 扩展jQuery对象方法"mydemo":function(){console.log("这是jQuery对象方法");// alert(123);}})// 如何调用jQuery对象方法// $.fn.extend() 存储在加载函数内 作用域// $.fn.mydemo();// console.log($("#oDiv").mydemo());$.fn.extend({// 全选的对象方法"demo1":function(){// 在对象方法中，$(this)代表将来谁调用了，就代表谁// console.log($(this));// $(this).each(function(){// $(this).prop("checked",true);// });// jQuery的特性中有一个隐式迭代器$(this).prop("checked",true);},"demo2":function(){$(this).prop("checked",false);}});$("#checkall").click(function(){//获取到复选框 调用对象方法demo1 设置所有复选框选中$("input:checkbox").demo1();});$("#qxcheckall").click(function(){//获取到复选框 调用对象方法demo1 设置所有复选框选中$("input:checkbox").demo2();});})
二、第三方插件：表单验证
插件名：jQuery Validation
该插件捆绑了一套有用的验证方法，包括URL和电子邮件验证，同时提供了一个用来编写用户自定义方法的API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成起37种语言。
如何使用jQuery Validation？
1、下载jQuery插件验证库----jquery.validate.js
2、将类库引入页面
<script src="js/jquery.validate.js" type="text/javascript"></script>
3、两种方式使用验证
案例：表单验证
$(function(){// 获取表单标签调用插件激活的方法$("#formRegister").validate({rules:{// 账号必须有，不能为空username:{required:true,minlength:10},email:{required:true,email:true}},// 编写自定义错误信息messages:{// 账号必须有，不能为空username:{required:"账号不能为空",minlength:"账号必须10以上"},email:{required:"必填",email:"邮箱格式不正确"}}});
<h2>表单验证</h2><form id="formRegister" action="index.html" method = "get">账号：<input type="text" name = "username"><br>密码 <input type="password" name = "password"/><br>邮箱 <input type="text" name = "email"><br><!-- 网上 搜索日期插件 --><input type="date"><br><input type="submit" value = "注册"></form>
