【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)


相关推荐

  • 安卓手机转移数据到iOS_如何把旧电脑的资料转移到新电脑

    安卓手机转移数据到iOS_如何把旧电脑的资料转移到新电脑很多小白对“转移到iOS”应用程序不是非常熟悉,当购买了新iPhone之后不清楚如何从旧Android转移数据,那么一般来说分为几个步骤呢?现在从Android智能手机转移到iPhone比以前容易多了,这要归功于苹果早前发布的“转移到iOS”应用程序。下面小编带来如何把旧Android数据转移到iOS上,把旧Android数据转移到iOS教程。一起来看看吧!前期准备1、首先,…

  • iOS 用UIScrollView不能获取到touchesBegan

    iOS 用UIScrollView不能获取到touchesBegan网上查了一下 原来UIScrollView是没有继承touchesBegan方法的所以要自己重写UIScrollView然后继承 touchesBegan等方法才可以用重写UIScrollView很简单代码下.h//// myScrollView.h// WFClient//// Createdby屎壳郎情调on1

  • App测试面试题_手机软件测试

    App测试面试题_手机软件测试1.Web端测试和App端测试有何不同(常见)系统结构方面Web项目,b/s架构,基于浏览器的;Web测试只要更新了服务器端,客户端就会同步会更新;App项目,c/s结构的,必须要有客户端;App修改了服务端,则客户端用户所有核心版本都需要进行回归测试一遍;兼容方面Web项目:a.浏览器(火狐、谷歌、IE等)b.操作系统(Windows7、Windows10、Linux等)App项目:a.设备系统:iOS(ipad、iphone)、Android(三星、华为、联想等)、

  • html表格菜鸟教程_exls表格

    html表格菜鸟教程_exls表格HTML基础之表格文章目录HTML基础之表格1.表格的定义2.表格的标签3.单元格边框(border)4.合并单元格4.1合并行单元格(colspan)4.2合并列单元格(rowspan)5.表格格式设置5.1单元格的对齐(align)(居中,左对齐,右对齐)5.2.背景色&图片(bgcolor&background)5.2.1单元格背景色&图片5.2.2表格背景色&图片5.3单元格的边距(cellpadding)5.4单元格间的距离(cel

  • C# ACCESS数据库操作类

    这个是针对ACCESS数据库操作的类,同样也是从SQLHELPER提取而来,分页程序的调用可以参考MSSQL那个类的调用,差不多的,只是提取所有记录的数量的时候有多一个参数,这个需要注意一下!推荐:

    2021年12月27日
  • 在线用户数与并发用户数的区别和比例关系[通俗易懂]

    在线用户数与并发用户数的区别和比例关系[通俗易懂]在线用户数与并发用户数的区别和比例关系在线用户数:用户同时在一定时间段的在线数量并发用户数:某一时刻同时向服务器发送请求的用户数一般而言,我们习惯以5-20的比率来推算并发用户与在线用户之间的关系。即,并发与在线的比例约为5%-20%比如,某网站存在注册用户数为10W人,但同时在线最多1W人,但这1W个人,可能只有500人会浏览帖子,500人会进行发帖,只有这1000个人对服务

发表回复

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

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