【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);
AI 代码解读

 

目录
打赏
0
0
0
0
1
分享
相关文章
深入浅出Node.js后端框架
【10月更文挑战第34天】在数字化时代,后端开发如同一座桥梁,连接着用户界面与数据处理的两端。本文将通过Node.js这一轻量级、高效的平台,带领读者领略后端框架的魅力。我们将从基础概念出发,逐步深入到实战应用,最后探讨如何通过代码示例来巩固学习成果,使读者能够在理论与实践之间架起自己的桥梁。
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
1890 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
163 14
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
245 41
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
150 2
Node.js进阶:Koa框架下的RESTful API设计与实现
【10月更文挑战第28天】本文介绍了如何在Koa框架下设计与实现RESTful API。首先概述了Koa框架的特点,接着讲解了RESTful API的设计原则,包括无状态和统一接口。最后,通过一个简单的博客系统示例,详细展示了如何使用Koa和koa-router实现常见的CRUD操作,包括获取、创建、更新和删除文章。
207 4
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问