Jquery李炎恢——33，34插件

最新推荐文章于 2021-07-05 16:48:53 发布

pugongyingyangyue

最新推荐文章于 2021-07-05 16:48:53 发布

阅读量285

点赞数

学习要点：
1.插件概述
2.验证插件
3.自动完成插件
4.自定义插件

插件也成为jquery扩展，是一种遵循一定规范的应用程序接口编写出来的程序。目前jquery插件已经超过几千种，由来自世纪各地的开发者共同编写、验证和完善。而对于jquery开发者而言，直接使用这些插件将快速稳定架构系统，节约项目成本。
一、插件概述
插件是以jquery的核心代码为基础，编写出复合一定规范的应用程序。也就是说，插件也是jquery代码，通过js文件引入的方式植入即可。
插件的种类很多，主要大致可以分为：UI类、表单及验证类、输入类、特效类、Ajax类、滑动类、图形图像类、导航类、综合工具类、综合工具类、动画类等等。
引入插件是需要一定步骤的，基本如下：
1.必须插先引入Jquery.js文件，而且在所有插件之前引入；
2.引入插件
3.引入插件的周边，不如皮肤、中文包等。

二、验证插件
Validate.js是jquery比较优秀的表单验证插件之一。这个插件有两个js文件，一个是主文件，一个是中文包文件。使用的时候，可以使用.mim版本。
验证插件包含的两个文件分别为：jquery.validate.js和jquery.validate.messages_zh.js。

//html内容
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<body>
<form action="123">
<p>用户名:<input type="text" class="required" minlength="2" name="user/">(*)</p>
<p>电子邮箱:<input type="text" class="required email" name="email/">(*)</p>
<p>网址:<input type="text" class="url" name="url/"></p>
<p><input type="submit" value="提交"/></p>
</body>

//jquery代码
$(function(){
$("form").validate();
});

只要通过form元素的jquery对象调用validate（）方法，就可以实现“必填”、“不能小于两位”、“单子邮件不正确”、“网址不正确”等验证效果。除了js端的validate（）方法调用，表单处也需要相应设置才能最终得到验证效果。
1.必填项：在表单设置class="required";
2.不得小于两位：在表单设置minlength="2";
3.电子邮件：在表单中设置class="email";
4.网址：在表单中设置class="url".

三、自动完成插件

所谓自动完成，就是当用户输入部分字符的时候，智能的搜索出包含字符的全部内容。比如：输入a，把匹配的内容列表展示出来。
//html内容

//jquery代码

var user=["about","family","but","black"];

$("form input[name=username]").aboutcomplete(user,{

minChar:0; //双击显示全部数据

})；

四、自定义插件
前面我们使用了别人提供好的插件，使用起来非常的方便。如果世面上找不到自己满意的插件，并且想自己封装一个插件提供给别人使用。那么就需要自己编写一个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进去。

按照以上的要点，我们开发一个局部或全局的导航菜单的插件。只要导航的<h>标签内部嵌入要下拉的<ul>，并且class为nav，即可完成下拉菜单。
//HTML部分
<ul class="list">
<li>导航列表

</ul>

</li>

<li>

</ul>

</li>

</ul>

//jquery.nav.js部分

;function($){

$.fn.extend({

"nav":function(color){

//这里是插件的方法

//在插件里的this，经过了一些封装处理，this就是表示jquery对象，而不需要再次使用$()包装

this.find("nav").css({

listStyle:"none",

margin:0,

padding:0,

display:"none",

color:color

});

this.find("nav").parent().hover(function(){

//这里是普通的匿名函数

//alert(this);

$(this).find("nav").slideDown("normal");

},function(){

$(this).find("nav").stop().slideUp("normal");

});

return this;

}

})(jQuery);

}

pugongyingyangyue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery李炎恢——33，34插件

学习要点：1.插件概述2.验证插件3.自动完成插件4.自定义插件插件也成为jquery扩展，是一种遵循一定规范的应用程序接口编写出来的程序。目前jquery插件已经超过几千种，由来自世纪各地的开发者共同编写、验证和完善。而对于jquery开发者而言，直接使用这些插件将快速稳定架构系统，节约项目成本。一、插件概述插件是以jquery的核心代码为基础，编写出复合
复制链接

扫一扫