陕西 网站建设首选公司,重庆建设工程信息网官网入口30系统登录页面,沧州网站设计师招聘,wordpress vip 插件今天是jquery的最后一节课#xff0c;小编教大家如何使用插件#xff0c;也算是一个jquery的一个扩展#xff0c;大家有不懂的在下方评论或者私信小编噢。 目录
一.自定义插件 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
htmlheadmeta charsetutf-8title/titlescript srcjquery-3.5.1.js/script/headbodyscript// 用中文给大家演示一下在我们平常时还是使用英文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
htmlheadmeta charsetutf-8title/titlescript srcjquery-3.5.1.js/script/headbody script$.extend({// ...is具备都个参数 相当于一个数组max:(...is){let max-Infinity;//-Infinity:负无穷大 Infinity无穷大for(let i of is){// 三元运算符maxmaxi?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
htmlheadmeta charsetutf-8title/titlescript srcjquery-3.5.1.js/script!--表单验证插件是基于jquery的 再导入插件之前需要先导入jquery--
script srcjquery-validation-1.19.0/dist/jquery.validate.js/script!-- 这一步是修改提示语是什么语言--script srcjquery-validation-1.19.0/dist/localization/messages_zh.js/scriptstyle/* 表格元素 */label.error{color: red;}/style/headbodyform actionpinput typetext nameuserName placeholder用户名/ppinput typetext nameuserPwd placeholder密码/ppbutton登录/button!-- reset 点击按钮时会清空输入框的值 --button typereset取消/button/p/formscript$(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好啦今天的课程到此结束下次见啦。
