zoukankan      html  css  js  c++  java
  • 编写JQuery插件-3

    该了解我们也知道的差不多了,接下来编写我们第一个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"));
  • 相关阅读:
    京东白条
    Linux命令(40)rm 命令
    Linux命令(39)rmdir 命令
    Linux命令(38)pstree命令
    Linux命令(37)type命令
    Linux命令(36)help命令
    Linux命令(35)du命令
    CentOS7修改主机名
    Linux命令(34)tac命令
    Linux命令(33)cat命令
  • 原文地址:https://www.cnblogs.com/pangzi666/p/5885669.html
Copyright © 2011-2022 走看看