Jquery15 插件

学习要点:

  • 1.插件概述
  • 2.验证插件
  • 3.自动完成插件
  • 4.自定义插件

 插件(Plugin)也成为 jQuery 扩展(Extension),是一种遵循一定规范的应用程序接口编写出来的程序。目前 jQuery 插件已超过几千种,由来自世界各地的开发者共同编写、验证和完善。而对于 jQuery 开发者而言,直接使用这些插件将快速稳定架构系统,节约项目成本。

一.插件概述

插件是以 jQuery 的核心代码为基础,编写出符合一定规范的应用程序。也就是说,插件也是 jQuery 代码,通过 js 文件引入的方式植入即可。插件的种类很多,主要大致可以分为:UI 类、表单及验证类、输入类、特效类、Ajax类、滑动类、图形图像类、导航类、综合工具类、动画类等等。引入插件是需要一定步骤的,基本如下:

  • 1.必须先引入 jquery.js 文件,而且在所有插件之前引入;
  • 2.引入插件;
  • 3.引入插件的周边,比如皮肤、中文包等。

二.验证插件

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

//HTML 内容
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="jquery.validate.messages_zh.js"></script>
<form>
  <p>用 户 名:<input type="text" class="required" name="username" minlength="2" /> *</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>
</form>//jQuery 代码
$(function () {
  $('form').validate();
});

只要通过 form 元素的 jQuery 对象调用 validate()方法,就可以实现“必填”、“不能小于两位”、“电子邮件不正确”、“网址不正确”等验证效果。除了 js 端的 validate()方法调用,表单处也需要相应设置才能最终得到验证效果。

  • 1.必填项:在表单设置 class="required";
  • 2.不得小于两位:在表单设置 minlength="2";
  • 3.电子邮件:在表单中设置 class="email";
  • 4.网址:在表单中设置 class="url"。

三.自动完成插件

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

//HTML 内容
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>
<link rel="stylesheet" href="jquery.autocomplete.css" type="text/css" />
//jQuery 代码
var user = ['about', 'family', 'but', 'black'];
$('form input[name=username]').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 部分
<ul class="list">
  <li>导航列表
    <ul class="nav">
      <li>导航列表 1</li>
      <li>导航列表 1</li>
      <li>导航列表 1</li>
      <li>导航列表 1</li>
      <li>导航列表 1</li>
      <li>导航列表 1</li>
    </ul>
  </li>
  <li>导航列表
    <ul class="nav">
      <li>导航列表 2</li>
      <li>导航列表 2</li>
      <li>导航列表 2</li>
      <li>导航列表 2</li>
      <li>导航列表 2</li>
      <li>导航列表 2</li>
    </ul>
  </li>
</ul>
//jquery.nav.js 部分
(function ($) {
  $.fn.extend({
    'nav' : function (color) {
      $(this).find('.nav').css({
        listStyle : '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);

 

posted @ 2018-10-09 08:22  Mr.Aaron  阅读(181)  评论(0编辑  收藏  举报