专栏首页小康的自留地jQuery原理(属性操作相关方法)

jQuery原理(属性操作相关方法)

attr方法

设置或者获取元素的属性节点值

//属性操作相关的方法
kjQuery.prototype.extend({
    attr: function (attr, value) {
        //    1. 判断是否是字符串
        if (kjQuery.isString(attr)) {
            if (arguments.length == 1) {
                return this[0].getAttribute(attr);
            } else {
                this.each(function (key, ele) {
                    ele.setAttribute(attr, value);
                });
            }
        }
        //    2. 判断是否是对象
        else if (kjQuery.isObject(attr)) {
            var $this = this;
            // 遍历取出所有属性节点的名称和对应值
            $.each(attr, function (key, value) {
                //    遍历取出所有的元素
                $this.each(function (k, ele) {
                    ele.setAttribute(key, value);
                });
            });
        }
        return this;
    },
});

prop方法

设置或者获取元素的属性值

prop: function () {
    //    1. 判断是否是字符串
    if (kjQuery.isString(attr)) {
        if (arguments.length == 1) {
            return this[0][attr];
        } else {
            this.each(function (key, ele) {
                ele[attr] = value;
            });
        }
    }
    //    2. 判断是否是对象
    else if (kjQuery.isObject(attr)) {
        var $this = this;
        // 遍历取出所有属性节点的名称和对应值
        $.each(attr, function (key, value) {
            //    遍历取出所有的元素
            $this.each(function (k, ele) {
                ele[key] = value;
            });
        });
    }
    return this;
},

与attr方法相似。

css方法

设置获取样式

css: function (attr, value) {
    //    1. 判断是否是字符串
    if (kjQuery.isString(attr)) {
        if (arguments.length == 1) {
            return kjQuery.getStyle(this[0], attr);
        } else {
            this.each(function (key, ele) {
                ele.style[attr] = value;
            });
        }
    }
    //    2. 判断是否是对象
    else if (kjQuery.isObject(attr)) {
        var $this = this;
        // 遍历取出所有属性节点的名称和对应值
        $.each(attr, function (key, value) {
            //    遍历取出所有的元素
            $this.each(function (k, ele) {
                ele.style[key] = value;
            });
        });
    }
    return this;
},

val方法

val: function (content) {
    if (arguments.length == 0) {
        return this[0].value;
    } else {
        this.each(function (key, ele) {
            ele.value = content;
        });
        return this;
    }
},

addClass方法

给元素添加一个或多个指定的类

addClass: function (name) {
    if (arguments.length == 0) {
        return this;
    } else {
        // 1. 对传入的类名进行切割
        var names = name.split(" ");
        // 2. 遍历取出所有的元素
        this.each(function (key, ele) {
            // 遍历数组取出每一个类名
            $.each(names, function (k, value) {
                // 判断指定元素中是否包含指定的类名
                if (!$(ele).hasClass(value)) {
                    ele.className = ele.className + " " + value;
                }
            });
        });
        return this;
    }
},

removeClass方法

删除元素中一个或多个指定的类

removeClass: function (name) {
    if (arguments.length == 0) {
        this.each(function (key, ele) {
            ele.className = "";
        });
    } else {
        // 1. 对传入的类名进行切割
        var names = name.split(" ");
        // 2. 遍历取出所有的元素
        this.each(function (key, ele) {
            // 遍历数组取出每一个类名
            $.each(names, function (k, value) {
                // 判断指定元素中是否包含指定的类名
                if ($(ele).hasClass(value)) {
                    ele.className = (" " + ele.className + " ").replace(
                        " " + value + " ",
                        ""
                    );
                }
            });
        });
    }
    return this;
},

toggleClass方法

没有则添加,有则删除

toggleClass: function (name) {
    if (arguments.length == 0) {
        this.removeClass();
    } else {
        // 1. 对传入的类名进行切割
        var names = name.split(" ");
        // 2. 遍历取出所有的元素
        this.each(function (key, ele) {
            // 遍历数组取出每一个类名
            $.each(names, function (k, value) {
                // 判断指定元素中是否包含指定的类名
                if ($(ele).hasClass(value)) {
                    // 删除
                    $(ele).removeClass(value);
                } else {
                    // 添加
                    $(ele).addClass(value);
                }
            });
        });
    }
    return this;
},

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jQuery原理(DOM操作相关方法)

    删除所有的元素或指定元素。判断是否传入参数,如果传入参数,则删除指定元素,否则删除全部。

    Dreamy.TZK
  • Hexo关于Butterfly的一些小修改

    注:大多css没有提供可以直接引用的链接,大家可以自行创建css,然后放到博客目录进行引用。

    Dreamy.TZK
  • Hexo博客之butterfly主题优雅魔改系列(持续更新)

    相信在这之前,大家肯定看过网上的各种魔改教程。但是这些魔改教程基本上千篇一律,都是一种方式,大量修改模板(主题源文件)。这种方式的好处就是简单快速且直接,缺点就...

    Dreamy.TZK
  • 简单的实现Javascript的MVC

    最近看了一篇文章,“30行代码实现Javascript中的MVC”,原文链接:http://www.jqsite.com/notes/1603205925.ht...

    IMWeb前端团队
  • 简单的实现Javascript的MVC

    最近看了一篇文章,“30行代码实现Javascript中的MVC”,原文链接:http://www.jqsite.com/notes/1603205925.ht...

    IMWeb前端团队
  • 【scrapy】scrapy爬取京东商品信息——以自营手机为例

    http://blog.csdn.net/qqxx6661/article/details/56017386

    后端技术漫谈
  • Spring注解式编程

    相比较XML配置来说,当项目过大的时候难以维护。Spring还有一种支持0配置的注解式编程。

    OPice
  • ICLR论文:让AI学会恐惧

    在迎合你的口味上,人工智能可能比你父母都了解你。我们可以完全信赖人工智能推荐的饭店、小说、电影。但当涉及到人身财产安全的场景时,人工智能就显得没那么值得信赖了。

    新智元
  • 移动端css解决图片高度无法百分比问题妙用

    用户7413032
  • RIST –可靠的互联网流传输

    本文来自Broadcast focus的技术文章,主题是RIST-可靠的互联网流传输。

    用户1324186

扫码关注云+社区

领取腾讯云代金券