编写自己的jQuery插件简单实现代码

190 阅读 0 评论 126 点赞

我是靠谱客的博主缥缈自行车，最近开发中收集的这篇文章主要介绍编写自己的jQuery插件简单实现代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

这里只阐述如何编写自己的插件，至于要实现什么功能，要因人而异了...好了，下面开始...
jQuery插件主要分为三种
1、封装对象方法的插件
2、封装全局函数的插件
3、扩展选择器的插件
这里只编写前俩种，即比较常见的..
大多数插件都是已这种形式编写的：

复制代码代码如下:

(function ($) { 
/* 这里放置代码 */ 
})(jQuery); 

这样的好处是函数内部依然可以使用$作为jQuery的别名，而不影响到其他库使用$
jQuery提供了俩个扩展用于编写插件
$.fn.extend({});用于扩展第一种
$.extend({});用于扩展第二种
以下为实现效果截图和代码

复制代码代码如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title></title> 
<style type="text/css"> 
li { border: 1px solid #000; cursor: pointer; width: 200px; display: block; } 
</style> 
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
(function ($) { 
　　　　$.fn.extend({ 
　　　　　　"chgSC": function (options) { 
　　　　　　　　 options = $.extend({ FontSize: "100px", Color: "red" }, options); //这里用了$.extend方法，扩展一个对象 
return this.hover(function () { //return为了保持jQuery的链式操作 
　　　　　　　　　　 $(this).css({ "fontSize": options.FontSize, "color": options.Color }); 
　　　　　　　　　　 }, function () { 
　　　　 $(this).css({ "fontSize": "", "color": "" }); 
　　　　　　　　　　 }); 
} 
}); 
$.extend({ 
　　　　　　　　"urlParam": function () { 
　　　　　　　　　　 var pageUrl = location.search; 
　　　　　　　　　　　　 if (pageUrl != "") 
　　　　　　　　 return pageUrl.slice(1); 
　　　　　　　　　　 else 
　　　　　　　　　　 return "没有参数"; 
　　　　　　　　　　 } 
　　　　　　　　}); 
})(jQuery); 
$(function () { 
　　　　$("li").chgSC({ FontSize: "130px" }); 
　 alert($.urlParam()); 
}); 
</script> 
</head> 
<body> 
<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
</ul> 
</body> 
</html> 