jQuery插件：编写技巧_H5之家 - 中国HTML5教程资源分享第一站

jQuery插件：编写技巧

　　用了这长时间的jQuery,一直也没怎么写过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>

相关文章关键词：jQuery插件,.NET,微软技术

责任编辑：valen

专题推荐

原创文章

微博互动

白皮书