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

（转）jquery傻瓜基础教程之教你如何制作jquery插架一

2008-12-20 20:08 786 查看

首先我们先写一个jquery的匿名函数

以下为引用的内容：

<SCRIPT LANGUAGE="JavaScript">

$(function(){

var alterColor = function(table){

$('tbody tr:odd',table).removeClass('even').addClass('odd');

$('tbody tr:even',table).removeClass('odd').addClass('even');

}

alterColor('#cnjquery);

})

</SCRIPT>

这是一个最基本的写法，还没有做成插件形式，主要就是让表格隔行换色。

这里我们可以发现这个函数几乎没有什么通用性，下面我们来对她进行扩展。

以下为引用的内容：

<SCRIPT LANGUAGE="JavaScript">

$(function(){

$.fn.alterColor = function(){

$('tbody tr:odd', this).removeClass('even').addClass('odd');

$('tbody tr:even', this).removeClass('odd').addClass('even');

}

$('#cnjquery').alterColor();

})

</SCRIPT>

$('#cnjquery').alterColor();

这样样子有点插件的意思了，但是我们会发现一个问题这样写，不能链式操作，

也就是 $('#cnjquery').alterColor().find("????")等

为什么呢？因为jquery在执行每个方法的时候都会返回一个jquery对象也就是我们只要加一个返回值就可以了

现在我们看到可以链式操作了到了这里我们的插件算是基本完成了，但是还有一个小小问题

也就是插件的参数都是死的，我们没有办法动态修改他的参数，这样应用起来就太不方便了，没有办法还需要继续改造

以下为引用的内容：

$(function(){

$.fn.alertColor = function(options) {

var defaults = {

odd : "red",

even : "blue"

};

var o = $.extend(defaults, options);

return this.each(function() {

$('tbody tr:odd', this).removeClass(o.even).addClass(o.odd);

$('tbody tr:even', this).removeClass(o.odd).addClass(o.even);

return this;

})

}

$('#cnjquery').alertColor({ odd : "cs"});

// 或者 $('#cnjquery').alertColor({ odd : "red" , even : "blue"});

// 或者 $('#cnjquery').alertColor();

})

哈哈哈我们的换色表格插件终于完成了，赶快动作做一下吧。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航