锋利的jQuery-7--一个$.fn.color插件的编写过程

浏览数：35 / 时间：2015年06月09日

编写一个设置和获取元素的color的插件：

首先实现第一个功能，设置：

　　　　;(function($){
            $.fn.extend({
                color:function(value){
                    return this.css("color",value);   //css方法本身就是返回当前元素的jQuery对象
                }
            });
        })(jQuery);

　　　　 $("span").color("red");  //调用

然后实现第二个功能，获取：如果没传入value就是获取

　　　　;(function($){
            $.fn.extend({
                color:function(value){
                    if(value == ‘undefined‘){     //如果没传入值就是获取
                        return this.css("color");
                    }else{
                        return this.css("color",value);  //css方法本身具有返回第一个匹配元素的样式值的功能，此处无需通过eq()来获取第一个元素
                    }
                }
            });
        })(jQuery);

实际上，css方法内部已经有判断value值是否为undefined的机制，所以才可以根据传递参数的不同返回不同值。因此可以：

　　　　;(function($){
            $.fn.extend({
                color:function(value){
                    return this.css("color",value); //传值就是设置，没传就是取值
                }
            });
        })(jQuery);

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

锋利的jQuery-7--一个$.fn.color插件的编写过程