您的位置：首页 > Web前端 > JQuery

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

2011-04-19 00:00 981 查看
这里只阐述如何编写自己的插件，至于要实现什么功能，要因人而异了...好了，下面开始...
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航