首页 > Web开发 > 详细

编写JQuery插件-3

时间:2016-09-19 17:48:47      阅读:167      评论:0      收藏:0      [点我收藏+]

该了解我们也知道的差不多了,接下来编写我们第一个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"));

 

编写JQuery插件-3

原文:http://www.cnblogs.com/pangzi666/p/5885669.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!