插件(Plugin)也成为jQuery扩展(Extension),是一种遵循一定规范的应用程序接口编写出来的程序。目前jQuery插件已超过几千种,由来自世界各地的开发者共同编写、验证和完善。而对于jQuery开发者而言,直接使用这些插件将快速稳定架构系统,节约项目成本。
插件概述
插件是以jQuery的核心代码为基础,编写出复合一定规范的应用程序。也就是说,插件也是jQuery代码,通过js文件引入的方式植入即可。
插件的种类很多,主要大致可以分为:UI类、表单及验证类、输入类、特效类、Ajax类、滑动类、图形图像类、导航类、综合工具类、动画类等等。
引入插件是需要一定步骤的,基本如下:
1.必须先引入jquery.js文件,而且在所有插件之前引入
2.引入插件
3.引入插件的周边,比如皮肤、中文包等
验证插件
validate.js是jQuery比较优秀的表单验证插件之一。这个插件有两个js文件,一个是主文件,一个是中文包文件。使用的时候,可以使用min版本;在这里,为了教学,我们未用压缩版本。
起初,插件.html为:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>插件</title> <script type="text/javascript" src="demo.js"></script> </head> <body> <form action="123.html"> <p>用户 名:<input type="text" name="user" /></p> <p>电子邮件:<input type="text" name="email" /></p> <p>网 址:<input type="text" name="url" /></p> <p><input type="submit" value="提交" /></p> </form> </body> </html>
引入表单验证插件validate.js的步骤:
1.引入jQuery文件:
<script type="text/javascript" src="jquery-1.12.3.js"></script>
2.引入validate.js文件或者中文包文件(即提示文字为中文)
<script type="text/javascript" src="jquery.validate.js"></script>
或
<script type="text/javascript" src="jquery.validate.js"></script> <script type="text/javascript" src="jquery.validate.messages_zh.js"></script>
插件.html即为:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>插件</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="jquery.validate.messages_zh.js"></script> <script type="text/javascript" src="demo.js"></script> </head> <body> <form action="123.html"> <p>用户 名:<input type="text" name="user" />(*)</p> <p>电子邮件:<input type="text" name="email" />(*)</p> <p>网 址:<input type="text" name="url" /></p> <p><input type="submit" value="提交" /></p> </form> </body> </html>
3.加载validate:(jQuery代码)
$(function () { $('form').validate(); });
4.只要通过form元素的jQuery对象调用validate()方法,就可以实现“必填” 、 “不能小于两位” 、 “电子邮件不正确” 、 “网址不正确”等验证效果。除了js端的validate()方法调用,表单处也需要相应设置才能最终得到验证效果。
(1)必填项:在表单设置class="required"
<p>用户 名:<input type="text" class="required" name="user" />(*)</p> <p>电子邮件:<input type="text" class="required" name="email" />(*)</p>
(2)不得小于两位:在表单设置minlength="2"
<p>用户 名:<input type="text" class="required" minlength="2" name="user" />(*)</p>
(3)电子邮件:在表单中设置class="email"
<p>电子邮件:<input type="text" class="required email" name="email" />(*)</p>
(4)网址:在表单中设置class="url"
<p>网 址:<input type="text" class="url" name="url" /></p>
网址还必须以http://开头。
注意:本章就简单的了解插件的使用,并不针对某个功能的插件进行详细讲解。比如验证插件validate.js,它类似于jQuery一样,同样具有各种操作方法和功能,需要进行类似手册一样的查询和讲解。所以,我们会在项目中再去详细讲解使用到的插件。
自动完成插件
所谓自动完成,就是当用户输入部分字符的时候,智能的搜索出包含字符的全部内容。比如:输入a,把匹配的内容列表展示出来。
引入自动完成插件jquery.autocomplete.js和向下兼容插件jquery-migrate-1.2.1.js:
<script type="text/javascript" src="jquery.autocomplete.js"></script> <script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>
记得还要引入自动完成插件样式:
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
jQuery代码:
var user = ["about", "auto", "but", "black"]; $("form input[name=user]").autocomplete(user, { minChars:0 //双击显示全部数据 });
注意:这个自动完成插件使用的jQuery版本较老,用了一些已被新版本的jQuery废弃删除的方法,这样必须要向下兼容才能有效。所以,去查找插件的时候,要注意一下它使用的版本。
自定义插件
前面我们使用了别人提供好的插件,使用起来非常的方便。如果市面上找不到自己满意的插件,并且想自己封装一个插件提供给别人使用,那么就需要自己编写一个jQuery插件了。
按照功能分类,插件的形式可以分为以下三类:
1.封装对象方法的插件(也就是基于某个DOM元素的jQuery对象,局部性)
2.封装全局函数的插件(全局性的封装)
3.选择器插件(类似与.find())
经过日积月累的插件开发,开发者逐步约定了一些基本要点,以解决各种因为插件导致的冲突、错误等问题,包括如下:
1.插件名推荐使用jquery.[插件名].js,以免和其他js文件或者其他库相冲突
2.局部对象附加jquery.fn对象上,全局函数附加在jquery上
3.插件内部,this指向的是当前的局部对象
4.可以通过this.each来遍历所有元素
5.所有的方法或插件,必须用分号结尾,避免出现问题
6.插件应该返回的是jQuery对象,以保证可链式连缀
7.避免插件内部使用$,如果要使用,请传递jQuery进去
按照以上的要点,我们开发一个局部或全局的导航菜单的插件。只要导航的<li>标签内部嵌入要下拉的<ul>,并且class为nav,即可完成下拉菜单。
导航菜单插件.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>插件</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <ul class="list"> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> </ul> </body> </html>
导航菜单插件.css:
.list { list-style: none; margin: 0; padding: 0; font-size: 13px; color: #fff; width: 500px; margin: 50px auto; } .list li { float: left; width: 100px; height: 30px; line-height: 30px; text-align: center; background: #333; cursor: pointer; }
jQuery代码:
$(function() { alert($.nav); //undefined });
发现返回undefined,所以可以遵守基本要点——①插件名推荐使用jquery.[插件名].js,以免和其他js文件或者其他库相冲突——来给插件名取名为jquery.nav.js。
先在demo.js中写入jQuery代码,然后再移植到我们的插件中
jQuery代码:
$(function() { $(".nav").css({ "list-style":"none", "margin":0, "padding":0, "display":"none" }); $(".nav").parent().hover(function() { $(this).find(".nav").slideDown("normal"); }, function() { $(this).find(".nav").stop().slideUp("normal"); }); });
遵循基本要点:
⑤所有的方法或插件,必须用分号结尾,避免出现问题
⑦避免插件内部使用$,如果要使用,请传递jQuery进去
;(function() { //前面加一个;,可以和前面所使用插件代码分离 jQuery.xxx() //避免插件内部使用$,如果要使用可以直接使用jQuery }); //所有的方法或插件,必须用分号结尾,避免出现问题
或传递jQuery进去:
;(function($) { //用$接收 $.xxx()... })(jQuery); //传递jQuery进去
遵循基本要点②——局部对象附加jquery.fn对象上,全局函数附加在jquery上
(1)全局函数:
jquery.nav.js代码:
;(function($) { //全局函数 $.extend({ "nav":function(color) { $(".nav").css({ "list-style":"none", "margin":0, "padding":0, "display":"none" }); $(".nav").parent().hover(function() { $(this).find(".nav").slideDown("normal"); }, function() { $(this).find(".nav").stop().slideUp("normal"); }); } }); })(jQuery);
导航菜单插件.html引入自定义插件:
<script type="text/javascript" src="jquery.nav.js"></script>
jQuery代码:
$(function() { $.nav(); });
(2)局部函数
导航菜单插件.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>插件</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="jquery.nav.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <ul class="list"> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> </ul> <p>1</p><p>1</p><p>1</p> <ul class="list"> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>子导航列表1</li> <li>子导航列表2</li> <li>子导航列表3</li> <li>子导航列表4</li> <li>子导航列表5</li> <li>子导航列表6</li> </ul> </li> </ul> </body> </html>
jQuery代码:
$(function() { $(".list").eq(0).nav(); });
以上代码只是想让第一个<ul>执行,第二个<ul>不执行,发现两个都可以执行相同的效果,这是在插件中使用了全局函数的缘故。现在将jquery.nav.js代码修改为:
;(function($) { //局部函数 $.fn.extend({ "nav":function(color) { $(this).find(".nav").css({ "list-style":"none", "margin":0, "padding":0, "display":"none" }); $(this).find(".nav").parent().hover(function() { $(this).find(".nav").slideDown("normal"); }, function() { $(this).find(".nav").stop().slideUp("normal"); }); } }); })(jQuery);
此时才算达到效果。
当然了,还可以进行传参,jquery.nav.js代码:
;(function($) { //局部函数 $.fn.extend({ "nav":function(color) { $(this).find(".nav").css({ "list-style":"none", "margin":0, "padding":0, "display":"none", "color":color }); $(this).find(".nav").parent().hover(function() { $(this).find(".nav").slideDown("normal"); }, function() { $(this).find(".nav").stop().slideUp("normal"); }); } }); })(jQuery);
jQuery代码:
$(function() { $(".list").eq(0).nav("orange"); });
遵守基本要点⑥——插件应该返回的是jQuery对象,以保证可链式连缀。
jquery.nav.js代码:
;(function($) { //局部函数 $.fn.extend({ "nav":function(color) { $(this).find(".nav").css({ "list-style":"none", "margin":0, "padding":0, "display":"none", "color":color }); $(this).find(".nav").parent().hover(function() { $(this).find(".nav").slideDown("normal"); }, function() { $(this).find(".nav").stop().slideUp("normal"); }); return this; } }); })(jQuery);
jQuery代码:
$(function() { alert($(".list").eq(0).nav("orange")); //[object Object] });
补充:关于this
html(部分)代码:
<input type="button" />
jQuery代码:
$("input").click(function() { //普通情况下,this表示原生的DOM alert(this); //[object HTMLInputElement] $(this).val("按钮"); });
而jquery.nav.js代码又可写为:
;(function($) { //局部函数 $.fn.extend({ "nav":function(color) { //这里是插件的方法 //在插件里的this,经过了一些封装处理,this就是表示jQuery对象 //而不需要再次使用$()包装 //alert(this); //[object Object] this.find(".nav").css({ "list-style":"none", "margin":0, "padding":0, "display":"none", "color":color }); this.find(".nav").parent().hover(function() { //这里是普通的匿名函数 //alert(this); //this指代this.find(".nav").parent()元素 [object HTMLLIElement] $(this).find(".nav").slideDown("normal"); }, function() { $(this).find(".nav").stop().slideUp("normal"); }); return this; } }); })(jQuery);