【JavaScript框架封装】实现一个类似于JQuery的属性框架的封装

【JavaScript框架封装】实现一个类似于JQuery的属性框架的封装

版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123810
// 属性框架
(function (xframe) {
    // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)
    xframe.extend({
        /**
         * 获取/设置某一个元素的属性信息
         * @return {*}
         */
        attr: function () {
            // 获取属性信息:两种格式,1. 取值模式 2.设置模式
            var args = arguments;
            if (args.length === 0) {
                // 没有参数的话,就直接返回本身
                return this;
            } else if (args.length === 1) {
                // 一个参数的话需要进行判断
                if (typeof args[0] === 'string') {
                    // 取值模式
                    return this[0].getAttribute(args[0]);
                } else if (typeof args[0] === 'object') {
                    // json对象的话也算是一个设置模式
                    for (var item in args[0]) {
                        Array.prototype.slice.call(this).each(function () {
                            this.setAttribute(item, args[0][item]);
                        });
                    }
                }
            } else if (args.length === 2) {
                Array.prototype.slice.call(this).each(function () {
                    this.setAttribute(args[0], args[1]);
                });
            }

            // 注意这里的this实际上返回的是一个xframe实例对象,但是xframe.eatend(xframe, {})这里的this实际上是一个xframe(selector, context)函数, 还没有实例化呢
            return this;
        },
        /**
         * 判断DOM元素节点是不是拥有某一个属性
         * @param val
         * @return {boolean}
         */
        hasClass: function (val) {
            if (!this[0]) {
                return false;
            }
            // 默认只会获取第一个元素的相关信息
            return this[0].className === val.trim() ? true : false;
        },
        /**
         * 添加一个class class='xiugang 18 nan'
         * @param val
         */
        addClass: function (val) {
            // 处理传进来的字符串两边的空格
            val = val.trim();
            [].slice.call(this).each(function () {
                // 只要原来的DOM节点上面没有这个属性的话,就直接添加上去
                if (val !== this.className) {
                    this.className += ' ' + val;
                }
            })
            return this;
        },
        /**
         * 注意熟练掌握replace()函数的使用
         * @param val
         */
        removeClass: function (val) {
            val = val.trim();
            [].slice.call(this).each(function () {
                if (val === this.className) {
                    // 使用后面替换前面的
                    this.className = this.className.replace(val, '');
                }
            })
            return this;
        },
        /**
         * 如果有的话就直接删除,没有的话就添加一个
         * @param val
         * @return {toggleClass}
         */
        toggleClass: function (val) {
            val = val.trim();
            [].slice.call(this).each(function () {
                if (val === this.className) {
                    // 如果有的话就直接删除
                    this.className.replace(val, '');
                } else {
                    // 没有的话就添加一个
                    this.className += ' ' + val;
                }
            });
            return this;
        }
    });

    // 不需要参与链式访问的
    xframe.extend(xframe, {});
})(xframe);

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/101537.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 常用端口大全[通俗易懂]

    常用端口大全[通俗易懂]端口说明0无效端口,通常用于分析操作系统1传输控制协议端口服务多路开关选择器2管理实用程序3压缩进程5远程作业登录7回显9丢弃11在线用户13时间17每日引用18消息发送协议19字符发生器…

  • win10应用商店错误代码0x8000FFFF_错误代码0xc000007b

    win10应用商店错误代码0x8000FFFF_错误代码0xc000007b控制面板内打开网络和Internet Internet选项 连接 设置 自动检测设置

  • NSGA2理解

    NSGA2理解NSGA-II算法学习什么是支配:支配就是统治,在各方面都优于其余个体如个体i支配个体j,就说明个体i在所有目标函数的表现上都不差于个体j,并且至少在一个目标上优于个体j;什么是非支配:非支配就是个体在种群中是最优秀的,它们在该种群中不受其余个体支配。快速非支配排序,将种群中的个体进行分层,最优秀的个体处于第一层,然后除了第一层,再从其余个体中找出非支配个体,以此类推…

  • Spring Boot – Mybatis 缓存

    Spring Boot – Mybatis 缓存mybatis提供查询缓存,用于减轻数据压力,提高数据库性能。mybaits提供一级缓存和二级缓存。一级缓存一级缓存是sqlSession级别的缓存。在操作数据库时需要构造sqlSession对象,在对象中有一个(内存区域)数据结构(HashMap)用于存储缓存数据。不同的sqlSession之间的缓存数据区域(HashMap)是互相不影响的。一级缓存的作用域是同一个SqlSession,在同一个sqlSession中两次执行相同的sql语句,第一次执行完毕会将数据库中查询的数据写到缓存(内存

  • 隐马尔可夫模型有哪些模型参数_隐马尔可夫

    隐马尔可夫模型有哪些模型参数_隐马尔可夫隐马尔可夫模型(HiddenMarkovModel,HMM)是统计模型,它用来描述一个含有隐含未知参数的马尔可夫过程。其难点是从可观察的参数中确定该过程的隐含参数。然后利用这些参数来作进一步的分析,例如模式识别。是在被建模的系统被认为是一个马尔可夫过程与未观测到的(隐藏的)的状态的统计马尔可夫模型。http://bluewhale.cc/2016-06-02/hidden-markov-mod

  • Canavs arcTo方法的理解

    Canavs arcTo方法的理解

    2021年11月13日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号