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

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123820 ...
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123820

// 内容框架
(function (xframe) {
    // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)
    xframe.extend({
        /**
         * .html()用为读取和修改元素的HTML标签    对应js中的innerHTML
         * @return {html}
         */
        html: function () {
            var arg = arguments,
                len = arg.length,
                arr = Array.prototype.slice.call(this);
            if (this.length < 1) {
                return this;
            }

            // 分为取值模式和设置模式
            if (len === 0) {
                // 取值模式
                return this[0].innerHTML;
            } else if (len === 1) {
                // 设置模式
                arr.each(function () {
                    this.innerHTML = arg[0];
                });
            }

            return this;

        },
        /**
         * 用于获取文本信息
         * @return {*}
         */
        text: function () {
            var args = arguments,
                len = args.length;

            if (this.length === 0) {
                return this;
            }

            if (len === 0) {
                // 取值模式
                return this[0].innerText;
            } else if (len === 1) {
                // 设置模式
                this.each(function () {
                    this.innerText = args[0];
                });

            }
            return this;
        },
        /**
         * 用于获取表单中的数值(input, form)
         * @return {*}
         */
        val: function () {
            // val();设置或者获取表单字段的值(前提是表单设置了value属性);
            var args = arguments,
                len = args.length;

            if (this.length === 0) {
                return this;
            }

            if (len === 0) {
                return this[0].value;
            } else if (len === 1) {
                this.each(function () {
                    this.value = args[0];
                });
            }

            return this;
        }
    });

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

 

相关文章
|
4月前
|
前端开发 数据安全/隐私保护
crypto-js中AES的加解密封装
文章介绍了如何在前端使用crypto-js库进行AES加密和解密,提供了加解密的函数封装示例,并演示了如何加密和解密字符串或对象。
372 1
crypto-js中AES的加解密封装
|
2月前
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
77 14
|
3月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
87 3
|
4月前
|
JSON 安全 JavaScript
Web安全-JQuery框架XSS漏洞浅析
Web安全-JQuery框架XSS漏洞浅析
676 2
|
3月前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
46 0
|
4月前
|
设计模式 JavaScript
JS发布订阅模式封装(纯手工)
发布订阅模式是JS常用的设计模式,在面试中也会经常遇到,以下是我的手写实现方式,经测试效果不错,小伙伴们们可以直接拷贝使用。
|
3月前
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
28 0
|
3月前
|
JavaScript 前端开发
JavaScript三级联动jQuery写法
JavaScript三级联动jQuery写法
|
3月前
|
JavaScript 前端开发
JavaScript 树状菜单栏jQuery写法
JavaScript 树状菜单栏jQuery写法
|
3月前
|
JavaScript 前端开发 API
【前端基础篇】JavaScript之jQuery介绍
【前端基础篇】JavaScript之jQuery介绍
196 0