首页 >

分享jQuery插件的学习笔记【jquery】

web前端|js教程分享jQuery插件的学习笔记【jquery】
jQuery,插件
web前端-js教程
插件(Plugin)也成为 jQuery 扩展(Extension),是一种遵循一定规范的应用程序接口编写出来的程序。目前 jQuery 插件已超过几千种,由来自世界各地的开发者共同编写、验证和完善。而对于jQuery开发者而言,直接使用这些插件将快速稳定架构系统,节约项目成本。
易买网项目源码,vscode怎么发布网页,ali ubuntu 源,tomcat7.0api,爬虫缺钙,php des密钥,赤峰seo排名优化,国内出售源码网站,示爱html模板码源lzw
一. 插件概述
基于ssm的管理系统源码,ubuntu树莓派连接,爬虫脚本怎么获得,php 了解redis,seo网站加词lzw
插件是以 jQuery 的核心代码为基础,编写出复合一定规范的应用程序。也就是说,插件也是 jQuery 代码,通过 js 文件引入的方式植入即可。
易语言互联网浏览器取网页源码,ubuntu更改紫色壁纸,tomcat响应变慢了,爬虫查询网页,php安装apk库,荔湾区一站式seo优化价格多少lzw
插件的种类很多,主要大致可以分为:UI 类、表单及验证类、输入类、特效类、Ajax类、滑动类、图形图像类、导航类、综合工具类、动画类等等。

引入插件是需要一定步骤的,基本如下:

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

比如最常用到的表单验证插件: validate ,除了最基本的插件文件 jquery.validate.min.js 之外,还有着 messages_zh.js 等等各国的语言包可以供你使用。

如何使用该插件在这里就不进行描述了,可以去看看慕课网上的视频 jQuery插件——Validation Plugin ,里面详细的描述了这个插件的各种配置项,以及扩展。

触类旁通,一个优秀的插件,详细的说明文档必不可少,详细的看说明文档能,并且在本地进行测试能让你快速的入门各种插件的使用。

还有各种各样的别人编写好的插件可以供你使用:比如管理cookie的插件–cookie等等。

插件可以去jQuery官网的插件模块进行查找 The jQuery Plugin Registry

二. 自定义插件

前面我们使用了别人提供好的插件,使用起来非常的方便。如果市面上找不到自己满意的插件,并且想自己封装一个插件提供给别人使用。那么就需要自己编写一个 jQuery 插件了。

1、插件种类

按照功能分类,插件的形式可以分为一下三类:

封装对象方法的插件;(也就是基于某个 DOM 元素的 jQuery 对象,局部性,使用最多)
封装全局函数的插件;(全局性的封装)
选择器插件。(类似与.find(),例如: color(red) 来选择所有的红色元素之类)

2、插件的基本要点

主要用以以解决各种因为插件导致的冲突、错误等问题,包括如下:

插件名推荐使用 jQuery.[插件名].js,以免和其他 js 文件或者其他库相冲突(可以使用alert( $.[插件名] )验证是否存在该全局方法);
局部对象附加 jQuery.fn 对象上,全局函数附加在 jQuery对象本身上(可以使用alert( $(selector).[插件名] )验证是否存在该局部方法);
插件内部,this 指向是当前的局部对象(通过选择器获取的jQuery对象);
可以通过 this.each 来遍历所有元素;
所有的方法或插件,必须用分号结尾,避免出现问题(为了更稳妥,可在插件头部先加上一个分号);
插件应该返回的是 jQuery 对象,以保证可链式操作;
避免插件内部使用$,如果要使用,使用闭包把传递 jQuery 进去,使插件内部继续使用$作为jQuery的别名。

;(function($){//这里将$符作为匿名函数的形参/*在此处编写代码,可使用$作为jQuery的缩写别名*/})(jQuery);//这里将jQuery作为实参传递给匿名函数了
3、编写一个插件

假设我们的插件需求是:实现一个下拉菜单,在移入该元素时,把对应的下拉列表展现出来,移出时收回。并且可以设置其展开时的文字颜色。

根据惯例,我们在编写插件时,可以对于html结构有所约束。现在假设我们的页面上有如下HTML结构:

 导航列表1     导航列表1   导航列表2   导航列表3   导航列表4   导航列表5   导航列表6    导航列表2     导航列表1   导航列表2   导航列表3   导航列表4   导航列表5   导航列表6   
在这里,我们就对我们的插件实现效果有了第一个要求,必须在 对于需要hover展现的元素 内部下面建立 ul 列表,且 className 必须为 nav 。(插件内部都是根据该条件来做文章)

下面就可以开始编写我们的插件了。保存为 jQuery.nav.js ,(符合上面所说的要求,默认已经导入)

;(function($){ $.extend({ //插件定义在全局方法上  "nav" : function (color){//传参,这里只是抛砖引玉,在您编写的时候,参数选项可以更加丰富,例如传入json对象等等   $('.nav').css({//对展开的下拉列表设置样式,此处在下面进行详细说明    "list-style" : "none",    "margin" : 0,    "padding" : 0,    "display" : "none",    "color":color//由用户控制hover时,展现出来列表的文字颜色   });   $('.nav').parent().hover(//这里用到了.nav的父节点(就是hover到的元素)    //因为我们只能在插件要求的范围内进行设定,若是使用了外部的选择器,就违背了这个原则    function (){     $(this).find(".nav").stop().slideDown("normal");//注意我们在这里使用了jquery的动画方法    },function (){     $(this).find(".nav").stop().slideUp("normal");//注意stop()的使用,不然会有类似手风琴效果的出现,但那并不是我们需要的    });  } });})(jQuery);
注意:这里使用css方法只是为了方便,在真实插件编写过程中,若存在如此大量的css样式编写时,推荐在外部定义css样式,例如可改写为:

插件依赖的css,需和插件一起导入html中

.hover{/*插件必须样式*/ list-style: none; margin:0; padding: 0; display: none;}
在插件内部修改。

$('.nav').addClass("hover");//将CSS与jQuery分离开来$('.nav').css("color",color);//存在用户设置时启用,不存在就不用了(进行判断)
刚刚说的都是插件的js文件,最后要起到效果,别忘了页面的js中加上那么一句话(当前插件定义在全局方法上)

$(function (){ $.nav("#999");//调用插件实现的全局方法,并且设置其展现背景颜色为#999。});
就这样,我们的全局插件就编写,而且调用完成了,在你的页面刷新看看,是不是已经有了效果呢?

但是,因为我们的方法定义在全局上,现在只要页面中出现了我们插件所规定的结构,就会存在hover展现效果,但是有时我们往往想要的不是这样,我们希望它在局部,在我指定的元素调用。所以我们需要对其进行一些改造,让其变成局部方法,其实也很简单:

;(function($){ $.fn.extend({//定义为局部方法  "nav" : function (color){   $(this).find('.nav').addClass('hover');//上面已经说过了,此时this指向调用该方法的元素   $(this).find('.nav').css("color",color);//在当前元素下,增加了一次find筛选,实现在对应的元素中执行。   $(this).find('.nav').parent().hover(    function (){     $(this).find(".nav").stop().slideDown("normal");    },function (){     $(this).find(".nav").stop().slideUp("normal");    });   return this;//返回当前的对象  } });})(jQuery);
我们去刷新一下浏览器。你会发现,咦,怎么没效果? 当然因为原来的代码是直接在全局调用的,现在变成局部方法了,显然就不能这样做了,需要做一点改变:

我这里就不贴html代码了,但是希望您在实践时能把上面的html代码在其下复制几份,以达到思考其实现的效果

$(function (){//这里的eq(0)代表只对第一份起到效果,复制后的没有效果。 //(你可以把上面的find筛选删除之后再试试,您会发现,他又对余下的几份起效果了) $(".list").eq(0).nav("red");//调用局部方法});
现在回过头再把我们写的插件代码对应上面写的 插件编写的要点 ,思考一下,我们还有哪些没有做到?就会发现,基本已经能对应上了。现在我们就完成了一个下拉菜单的插件。

其实编写插件并不难,最主要的是在我们编写插件的时候,一定要时刻注意这样的要点,每一个细节都遵循在大家实践过程中总结出来的最佳实现,才能自定义实现一个良好的插件。

代码首先是写个人看的,再然后才是给机器看的。


  • 暂无相关文章
  • Posted in 未分类