jQuery 插件

今天呢，给大家带来的是关于jQuery插件的分享，我们先根据思维导图做一个简单的了解

插件分为自定义插件和第三方插件，自定义插分为$.extend和$.fn.extend，而第三方插件,我只给大家带来一个官方的表单验证插件。

一、自定义插件

1、$.extend:

$.extend有两个作用，【作用1】对象继承： $.extend(对象1，对象2)---->对象1继承对象2

代码块：

我们先来看看继承之前的效果图：

 我们可以看见在没有继承之前s1的name值和sex值都为undefined，而s2的name值和sex值都可以出来，那我们再来看看继承后的效果

 因为s1是s2的子类，所以会出现两次。现在我们再来看看作用2

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

代码块：

getMax和getMin可以随便定义aabb都可以的，由于我函数里面用的是return，所以我们需要接收，不然的话效果会出不来。

效果图： 

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

在这里呢我给大家带来了一个案例就是全选功能

代码块：

    全选
    追剧
    听歌
	玩游戏

效果图：

         

由于没有GIF动图，所以效果不是很明显，还请见谅

 以上就是自定义插件的内容，现在我们开始讲解第三方插件

二、第三方插件

表单验证插件：

插件名：jQuery Validation

下载地址：jQuery Validation Plugin |使用 jQuery 进行表单验证https://jqueryvalidation.org/

因为官方单独给表单验证做了一个页面，所以我给了一个链接供大家去下载。 

 使用步骤：【1】下载jQuery插件验证库：jquery.validate.js 【2】将类库引入页面【3】它有两种方式使用验证：1.HTML标签验证 2.js方式验证(推荐)

js方式验证又分为验证及错误信息和错误样式

代码块：

    

	    用户名:

	    密码:

	    确认密码:

	    邮箱:

	    年龄:

	    网址:

	    
	

效果图： 

官方的提示原本是黑色的英语，因为我加了样式，所以我才是红色的， 而中文呢是因为我们上面在错误信息提示部分写了。

更改样式代码块：

为什么要用label去点，是因为官方的提示标签用的是label，所以我们这边才需要用label去点error来更改它的样式 。不过前面需要加上form表单的id。

注意事项：一定先引入jQuery类库再去引入插件