编写JQuery插件-3

Posted 2020-08-09 月半的博客

该了解我们也知道的差不多了，接下来编写我们第一个jq插件吧

封装对象方法的插件

我们编写一个设置和获取颜色的插件，我们需要实现两个功能

1、设置匹配元素的颜色

2、获取匹配元素（元素集合的第一个）的颜色

我们采用jQuery.fn.extend()，代码如下：

;(function($){
    /* code */
})(jQuery)

这是最外层的架构，接下来；

   ;(function($){
        $.fn.extend({
            color:function(val){
                // code
            }
        });
    })(jQuery)

我在里面添加相应的代码

;(function($){
        $.fn.extend({
            color:function(val){
                console.log(val);
                if(val == undefined){
                    return this.css(‘color‘);
                }    
                else{
                    return this.css(‘color‘,val);
                }
            }
        });
    })(jQuery)

 

我们采用jq 的css()方法和获取颜色值；插件的this指向的是jq对象，如果插件不返回特定的值或字符串，应该使其具有可连性，为此直接返回this对象，由于css()方法定义了的返回对象，直接返回即可；

封装我们的jq.color.js

页面调用 该js

console.log($("div").color());

console.log($("div").color("red"));