首先我们先写一个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对象 也就是我们只要加一个返回值就可以了
- <SCRIPT LANGUAGE="JavaScript">
- $(function(){
- $.fn.alterColor = function(){
- $('tbody tr:odd', this).removeClass('even').addClass('odd');
- $('tbody tr:even', this).removeClass('odd').addClass('even');
- return this; //新增代码 }
- $('#cnjquery).alterColor().find("tr").click(function(){
- alert(1);//可以 链式操作 了。
- });
- })
- </SCRIPT>
现在我们看到可以链式操作了 到了这里我们的插件算是基本完成了,但是还有一个小小问题
也就是插件的参数都是死的 ,我们没有办法动态修改他的参数,这样应用起来就太不方便了,没有办法还需要继续改造
- $(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();
- })