前 言
絮叨絮叨
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
那么这次，我就和大家来分享一下JQuery中的一个强大的功能——自定义插件。当我们在去实现一个小功能的时候，比如说banner图的滚动，插件的使用会让我们省去大量的代码。那又当我们会经常使用一个功能然而又懒得每次都去写怎么办？那当然就需要我们自己写一个属于自己的插件，用的时候直接拿我们自定义的插件用就可以了。
| JQuery插件类型 |
广义上分为三类：实例对象方法插件 、全局函数插件 、选择器插件
1实例对象插件
开发能让所有的jquery实例对象都可以调用的方法。也就是说，只要通过$()获得 的jquery实例对象，都可以调用我们开发的方法。
本质上来说,是一个对象级别的插件,这类插件首先通过jQuery选择器获取对象,并为对象添加方法,然后,将方法进行打包,封闭成一个插件,这种类型的插件编写简单,极易调用,也很方便地使用了jQuery中功能强大的选择器
例如：
$.fn.setBgColor = function(bgColor){ ???//在$.fn声明的插件函数中，可以使用this代指调用这个插件的对象节点。 ???//而且this是一个JQUery对象 ???bgColor = bgColor? bgColor:"#ccc"; ??//设置背景色的默认值 ???this.css("background-color",bgColor);}$("#div1").setBgColor("red");2全局函数插件
可以将独立的函数添加到jQuery命名空间中了。那么调用的时候就可以使用 $.函数名称() 或者jQuery.函数名称()来调用了。可以理解为静态方法。
全局函数插件是一个类级别的插件,这类插件最大的特点,就是可以直接给jQuery添加静态方法,并且可以将函数置于jQuery命名空间中.
全局函数插件是一个类级别的插件,这类插件最大的特点,就是可以直接给jQuery添加静态方法,并且可以将函数置于jQuery命名空间中.
例如：
$.extend({ ???func : function(){} ????//func --> 插件名 });| JQuery自定义插件要点 |
分，如插件名
2. 如果是对象级别插件，所有的方法都应依附于jQuery.fn主体对象，如果是类级别插件，所有的方法都应依附干jQuery对象
因此在编写对象级别的插件时，使用jQuery.fn.extend()方法进行功能扩展;而针对类级别的插件，则使用jQuery.extend()方法进行扩展
3. 无论是对象级别还是类级别插件，结尾都必须以分号结束，否则，在文件被压缩时，会出现错误提示信息
4. 在插件内部的代码中，如果要访问每个元素，可以使用this.each方法来遍历全部元素
5. 需要说明的是在插件的内部，this所代表的是通过jQuery选择器所获取的对象，而非传统意义上的对象的引用
6. 由jQuery代码在调用方法时，可以采用链写的方法同时调用多个方法，因此，为了保证这个功能的实现，插件本身必须返回一个JQueryl对象
7. 虽然“$’‘符号，可以与jQuery字符相代替，但在编写插件的代码中，尽量不要使用“$”符号，以避免与别的代码冲突
为方便使用，也可以用一个自执行函数包裹所有代码，在自执行函数中传入一个形参“$”符号，再传入一个实参JQuery，这样就可以放心大胆的使用“$”符号，而不用担心与别的代码发生冲突
| banner图的滚动实例 |
html代码
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title>自定义插件实现banner滚动</title> ???????<script src="js/jquery-3.1.1.js" type="text/javascript"></script> ?????<!--导入JQuery--> ???????<script src="js/jquery.scrollBanner.js" type="text/javascript"></script> ????<!--导入自定义插件 ?“jquery.scrollBanner.js”--> ???</head> ???<body> ???????????????<div id="banner"> ???????????????????</div> ???????<script type="text/javascript"> ???????????$("#banner").scrollBanner({ ???????????????images : [ ?{src:"img/banner11.png",title:"banner1",href:"http://www.baidu.com"}, ???????????????????????????{src:"img/banner22.png",title:"banner2",href:"http://www.sina.com"}, ???????????????????????????{src:"img/banner33.png",title:"banner3",href:"http://www.qq.com"}, ???????????????????????????{src:"img/banner44.png",title:"banner4",href:"http://www.zealer.com"}, ????????????????????????] ???????????}); ???????</script> ???</body></html>自定义插件代码
/* 该插件实现了Banner图的滚动效果。 * ?* 一、插件的属性： * images : 接受数组类型，数组的每个值应为对象。对象具有属性： src->图片的路径 title->图片指上后的文字 ??href->点击图片跳转的页面 * ?* scrollTime : 每张图片的停留时间，单位毫秒。 2000 * bannerHeight : Banner图的高度. ?500px * ?* iconColor : 提示图标的颜色。默认 white * iconHoverColor : 提示图标指上之后的颜色。 ?默认 orange * iconPosition : 提示图标的位置，可选值left/center/right。 默认center * ?*/!function($){ ???$.fn.scrollBanner = function(obj){ ???????// 声明各个属性的默认值 ???????var defaults = { ???????????images : [], ???????????scrollTime : 2000, ???????????bannerHeight : "500px", ???????????iconColor : "white", ???????????iconHoverColor : "black", ???????????iconPosition : "center", ???????} ???????// 将默认值与传入的对象比对，如果传入的对象有未赋值属性，则使用默认对象的属性 ???????obj = $.extend(defaults,obj); ??????????????
// 组建DOM布局 ???????$("body").css({"padding" : "0px","margin" : "0px",}); ???????????????this.empty().append("<div class=‘scrollBanner-banner‘></div>"); ???????$.each(obj.images,function(index,item){ ???????????$(".scrollBanner-banner").append("<div class=‘scrollBanner-bannerInner‘><a href=‘"+item.href+"‘ target=‘_black‘><img src=‘"+item.src+"‘ title=‘"+item.title+"‘ /></a></div>"); ???????}); ???????$(".scrollBanner-banner").append("<div class=‘scrollBanner-bannerInner‘><a href=‘"+obj.images[0].href+"‘ target=‘_black‘><img src=‘"+obj.images[0].src+"‘ title=‘"+obj.images[0].title+"‘ /></a></div>"); ???????????????????????this.append("<div class=‘scrollBanner-icons‘></div>"); ???????$.each(obj.images,function(index,item){ ???????????//data-* 属性是H5允许用户自行在HTML标签上保存数据的数据 ???????????//保存在data-*中的数据，可以使用JS读取调用 ???????????$(".scrollBanner-icons").append("<span class=‘scrollBanner-icon‘ data-index=‘"+index+"‘></span>"); ???????}); ???????????????????????//设置各种css ???????this.css({ ???????????"width" : "100%", ???????????"height" : obj.bannerHeight, ???????????"overflow" : "hidden", ???????????"position" : "relative", ???????}); ???????????????$(".scrollBanner-banner").css({ ???????????"width" : obj.images.length +1+"00%", ???????????"height" : obj.bannerHeight, ???????????????????}); ???????????????$(".scrollBanner-bannerInner").css({ ???????????"width" : 100/(obj.images.length +1)+"%", ???????????"height" : obj.bannerHeight, ???????????"overflow" : "hidden", ???????????"float" : "left" ???????}); ???????????????$(".scrollBanner-bannerInner img").css({ ???????????"width" : "1920px", ???????????"height" : obj.bannerHeight, ???????????"position" : "relative", ???????????"left" : "50%", ???????????"margin-left" : "-960px", ???????}); ???????????????$(".scrollBanner-icons").css({ ???????????"width": 35*obj.images.length+"px", ???????????"height": "7px", ???????????"position" : "absolute", ???????????"bottom" : "40px",// ???????????"left" : "0px", ???????????"z-index": "100", ???????}); ???????switch (obj.iconPosition){ ???????????case "left": ???????????????$(".scrollBanner-icons").css({ ???????????????????"left" : "40px", ???????????????}); ???????????????break; ???????????case "right": ???????????????$(".scrollBanner-icons").css({ ???????????????????"right" : "40px", ???????????????}); ???????????????break; ???????????case "center": ???????????????$(".scrollBanner-icons").css({ ???????????????????"left" : "50%", ???????????????????"margin-left" : "-"+15*obj.images.length+"px", ???????????????}); ???????????????break; ???????} ???????????????$(".scrollBanner-icon").css({ ???????????"width": "20px", ???????????"height": "7px", ???????????"background-color": obj.iconColor, ???????????"display": "inline-block", ???????????"margin": "0px 5px", ???????????????????}); ???????$(".scrollBanner-icon:eq(0)").css({ ???????????"background-color":obj.iconHoverColor, ???????}); ???????????????????????????????????????//实现Banner滚动功能 ???????var count = 1; ???????var icons = $(".scrollBanner-icon"); ???????setInterval(function(){ ???????????????????????$(".scrollBanner-banner").css({ ???????????????"margin-left" : "-"+count+"00%", ???????????????"transition" : "all .5s ease", ???????????}); ???????????$(".scrollBanner-icon").css("background-color",obj.iconColor); ???????????$(".scrollBanner-icon:eq("+count+")").css("background-color",obj.iconHoverColor); ???????????????????????if(count>=obj.images.length) $(".scrollBanner-icon:eq("+0+")").css("background-color",obj.iconHoverColor); ???????????????????????if(count>obj.images.length){ ???????????????????????????????count = 0; ???????????????$(".scrollBanner-banner").css({ ???????????????????"margin-left" : "0px", ???????????????????"transition" : "none", ???????????????}); ???????????} ???????????count++; ???????},obj.scrollTime); ???????????????????????????????//小图标指上以后变色并且切换banner图 ???????$(".scrollBanner-icon").mouseover(function(){ ???????????$(".scrollBanner-icon").css("background-color",obj.iconColor); ???????????//↓由span触发mouseover事件，则this指向这个span。 ???????????//↓但是，这this是JS对象，必须使用$封装成JQuery对象。 ???????????$(this).css("background-color",obj.iconHoverColor);// ???????????console.log($(this).attr("data-index")); ???????????var index = $(this).attr("data-index"); ???????????count = index;//将计数器count修改为index的值，让banner滚动的定时器能够刚好滚到所指图片的下一张。 ???????????$(".scrollBanner-banner").css({ ???????????????"transition" : "none", ???????????????"margin-left" : "-"+index+"00%", ???????????????????????????}); ???????}); ???????????????????????????}}(jQuery);效果图如下：
你的专属定制——JQuery自定义插件
原文地址：http://www.cnblogs.com/realsdg/p/7587160.html