jQuery——插件

1.首先jQuery是什么呢？

        简单来说：“jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互

 简单了解一下jQuery是什么，就让我们来了解一下他的插件中的自定义插件与表单验证吧！

 2.自定义插件（补充一下：$这个符号其实是jQuery的缩写）

        2.1：$.extend

[作用1]：对象继承：$.extend(对象1,对象2)---->对象1继承对象2

语法格式：$.extend(对象1,对象2)，对象1继承对象2中的属性。

var p1 = {};var p2 = {"name":"大锤","age":18};console.info("继承前p1:"+p1.name+","+p1.age);console.info("继承前p2:"+p2.name+","+p2.age);$.extend(p1,p2);console.info("继承后:"+p1.name+","+p1.age);console.info("继承后:"+p2.name+","+p2.age);

在输出继承前的内容时 很明显p1中是空的 什么都没有，$.extend(p1,p2);

之后，p1继承了p2中的内容。再次输出就会输出继承后的属性。

 那么假如说，我们有三个对象呢？一个对象继承了另外两个对象该怎么写？我们来看一下代码

var p1 = {};var p2 = {"name":"大锤","age":18};var p3 = {"sex":"男"};console.info("继承前p1:"+p1.name+","+p1.age+","+p1.sex);console.info("继承前p2:"+p2.name+","+p2.age+","+p2.sex);console.info("继承前p3:"+p3.name+","+p3.age+","+p3.sex);$.extend(p3,p1,p2);console.info("继承后p1:"+p1.name+","+p1.age+","+p1.sex);console.info("继承后p2:"+p2.name+","+p2.age+","+p2.sex);console.info("继承后p3:"+p3.name+","+p3.age+","+p3.sex);

p1对象继承p2,也就是p1里面有了两个属性。然后p3对象继承p1对象，p3中本来有一个sex属性，现在继承到p1继承到p2的两个属性。现在p3中有三个属性。​​​​​​

【作用2】扩展jQuery类方法：$.extend({方法名:function(){方法体}})注意，多个方法之间用逗号隔开

上面继承了对象的属性，那么方法可以继承吗？哎，来看一下

$.accd();请问现在有效果吗？报错 对吧。应该根本就没有这个方法。看我怎么写 他就不报错了。

$.extend({abcd:function(){console.info("你好呀.这个是我们自己写的方法");}})$.abcd();

现在我们在来刷新一下页面看效果，是不是输出了一句话。

案例：扩展$.max()和$min()方法

$.extend({min:function(a,b){return a>b?b:a;},max:function(a,b){return a>b?a:b;}})console.info($.min(10,20));//求两个数字的最小值console.info($.max(10,20));//求两个数字的最大值

其实有点类似java中的静态方法定义，使用的时候类似静态方法调用

【其次】$.fn.extend

上面我们说给jQuery类扩展方法，类似于java中的静态方法是$. 来直接使用。而我们之前用的很多方法是由元素来调用的。接下来 我们学习一下怎么扩展元素的方法

​​​​​​​​​​​​​​        【作用】扩展jQuery对象方法：$.fn.extend({方法名:function(){方法体}})注意多个方法之间用逗号隔开

案例：扩展复选框的全选和取消全选功能【升级之前的版本】

$.fn.extend({//全选check: function() {$(this).each(function() {this.checked = true;})},//全不选uncheck: function() {$(this).each(function() {this.checked = false;})}})$("#checkAll").click(function() {$(".hobby").check();//使用全选方法})$("#checkNoAll").click(function(){$(".hobby").uncheck();//使用全不选方法})现在我们可以直接用元素来调用我们自定义的方法了

 3.表单验证：

首先：要使用插件所以我们需要先把插件下载下来。validate插件下载路径：https://jqueryvalidation.org

注意：validate插件下载路径不在jQuery官网

下面呢，先详细介绍一下具体步骤

1. 使用步骤：【1.2】下载jQuery插件验证库 jQuery.validate.js

validate插件下载路径：https://jqueryvalidation.org

​​​​​​​​​​​​​​        【1.2】将类库引入页面

下载完成后是一个压缩包文件，解压找到dist目录下的jquery.validate.js文件，就是我们要用的插件类

​​​​​​​​​​​​​​        案例：演示表单验证(用户名、密码、确认密码、年龄、邮箱、网址)

页面示例代码：

用户名:
密码:
确认密码:
邮箱:
网址:
年龄:
语法格式：以验证用户名不能为空为例：$(function(){$("#myForm").validate({rules:{//用户名不能为空uname:"required"},messages:{uname:"用户名不能为空"}})})

rules:里面写要验证的属性，以及验证

messages:里面写对应属性验证的提示信息，如果没有写messages就会默认使用插件提供的信息。上面的例子只有一个不能为空验证。如果不能为空的同时，要求长度必须在5--10之间。又该怎么写。

$("#myForm").validate({rules:{/* 用户名不能为空，并且长度:5--10 */uname:{required:true,rangelength:[5,10]}},messages:{uname:{required:"用户名不能为空",rangelength:"用户名长度必须在5-10之间"}}})

注意：在添加多个验证时，一定要注意语法格式，用用大括号把验证括起来。验证信息也是一样

现在我们的验证信息都是黑色字体，有人说了，验证的提示信息不应该都是红色的字体吗？怎么设置红色字体呢？这个简单，不过需要我们写在样式里面了

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！