脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-自己动手JQuery插件开发，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 最近在复习jquery，发现自己还没写过一个插件。在写插件之前，觉得开发插件是高端上档次的事，跟我这种小菜不搭边啊。不过在网上查了相关资料，发现开发插件其实是很简单的。
在这里我将说明JQuery插件常用的写法，以及这些插件的常用场景。 希望对大家有所帮助。
先准备了自己以前写过的一个火车票列表的页面，点击"设置样式与事件"出现以下效果。
这页面效果直接用Js代码实现的，那么在这里我们用插件的方法实现以上效果。
页面表格代码如下：
复制代码
1 <body>
2 <input tyPE="button" id="BTnshow" value="加载数据" />
3 <input type="button" id="setStyle" value="设置样式与事件" />
4 <table id="tb1" border="1px solid whITe" cellpadding="0" cellspacing="0">
5 <tr>
6 <th rowspan="2">
7 序号
8 </th>
9 <th rowspan="2">
10 车次
11 </th>
12 <th colspan="2">
13 查询区间
14 </th>
15 <th colspan="3">
16 区间运行时刻
17 </th>
18 <th colspan="5">
19 余票信息
20 </th>
21 <th>
22 列车信息
23 </th>
24 </tr>
25 <tr>
26 <th>
27 发站
28 </th>
29 <th>
30 到站
31 </th>
32 <th>
33 发时
34 </th>
35 <th>
36 到时
37 </th>
38 <th>
39 历时
40 </th>
41 <th>
42 商务座
43 </th>
44 <th>
45 特等座
46 </th>
47 <th>
48 一等座
49 </th>
50 <th>
51 二等座
52 </th>
53 <th>
54 硬座
55 </th>
56 <th>
57 等级
58 </th>
59 </tr>
60 </table>
61 </body>
复制代码
一、插件的几种写法
1.对JQuery自身的扩展插件
这种插件是对JQuery自身的方法库进行扩展的。在使用的时候通过$.扩展函数名()的方式直接使用。
格式如下:
$.extend({
函数名:function(data){};
})
调用方式
$.函数名();
示例代码:
复制代码
1 $.extend({
2 testJs: function (table) {
3 VAR tb = table;
4 //背景图片
5 $(tb).find("tr:lt(2)").css({ "color": "#055A78", 'background-image': 'url("bg.png")' });
6
7 //文字居中
8 $(tb).find("td,th").css({ "text-align": "center" });
9 //奇偶变色
10 $(tb).find("tr:gt(1):odd").css("backgroundColor", "white");
11 $(tb).find("tr:gt(1):even").css("backgroundColor", "#E5f2F8");
12
13 //tr事件
14 $(tb).find("tr").mouseover(function () {
15 $(this).css("cursor", "default");
16 }).mouseout(function () {
17 $(this).find("td:eq(1)").css("color", "black");
18 }).click(function () {
19 $(tb).find("tr:gt(1):odd").css("backgroundColor", "white");
20 $(tb).find("tr:gt(1):even").css("backgroundColor", "#E5F2F8");
21 $(this).css("backgroundColor", "#9AC2E5");
22 })
23 //车次所在列每个td的事件
24 $(tb).find("tr td:eq(1)").wrapInner('<a style="color:black;text-decoration:none"></a>').children().mouseover(function () {
25 $(this).css("color", "red");
26 }).mouseout(function () {
27 $(this).css("color", "black");
28 })
29
30 }
31 });
复制代码
通过此种方式我们就可以定义JQuery自己的扩展方法，而且这个方法可以在web页面通过智能提示显示出来。页面中调用的代码如下：
复制代码
<script type="text/javascript">
$(function () {
$("#setStyle").click(function () {
//extend 扩展插件
$.TestJs("#tb1");
})
});
</script>
复制代码
2.对HTML标记或页面元素进行扩展
这种方法需要引用经过JQuery包装的页面元素。如：$("#tb").Method();
代码示例:
复制代码
(function ($) {
$.fn.HelpTest = function (options) { //要改变的就是HelpTest,这是你的jquery函数的名称[在你的htML中要调用这个函数的时候就得用到这个名称]，
//其他的就不需要进行改变了。
var defaults = { //var defaults{ 这里面是你的这个函数的参数的默认值 }
helptext: "default help",
tmpWidth:"200px"
}
var options = $.extend(defaults, options); //这句话是死的，它的意思就是说，若你在html中调用这个插件的时候，若是没有传入参数的值得话，
//那么我就用defalut里面定义好的参数，否则就用你传入的参数的值，[注意]：下面若是要用到参数的话，
//就得使用[options.参数名]如：options.helpText
$(this).mouseover(function (e) { //添加this的mouSEMove事件，就是说，哪个html元素调用了我的这个插件，那么我就给他添加mousemove事件
alert(";mouser over");
})
}
})(jQuery);
复制代码
当要对页面元素进行JQuery扩展时，需要采用(function($){...})(JQuery);的方式进行开发。在“...”处，定义我们自己的方法，定义方式是：$.fn.自定义方法名 = function(参数){...};
页面中调用代码如下:
<script type="text/javascript">
$(function () {
$("#tb1").HelpTest();
});
</script>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-自己动手JQuery插件开发全部内容，希望文章能够帮你解决javascript代码实例教程-自己动手JQuery插件开发所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。