JavaScript库,编写$()和getElementsByClassName()方法

背景:

JavaScript库是一组预先编写好的JavaScript代码集合,旨在简化常见的网页开发任务。这些库通常包含了许多函数和方法,可以帮助开发人员处理各种任务,比如DOM操作、事件处理、动画效果、AJAX请求等等。使用JavaScript库可以节省开发时间,并提供了一种标准化的方法来解决常见的编程问题。

举个例子,假设你需要在网页中实现一个图片轮播的功能。如果你从头开始编写代码,需要处理图片的切换、定时器的设置、按钮的事件绑定等等,这会耗费大量的时间和精力。但是如果你使用一个现成的JavaScript库,比如jQuery或者React等,你只需要调用库中提供的轮播函数,并按照文档进行简单的配置,就可以快速地实现图片轮播功能,大大提高了开发效率。

总的来说,JavaScript库就像是开发人员的工具箱,提供了各种各样的工具和功能,可以帮助他们更快速、更轻松地构建网页和Web应用。

$()方法:

(function(){//这是一个立即执行函数表达式(Immediately Invoked Function Expression,IIFE)的开始
    window['IC'] = {};//创建一个空对象IC并将其赋值给全局对象window的属性
    function $() {//定义一个名为$的函数
        var elements = [];//创建一个空数组elements
        for(var i = 0; i < arguments.length; i++) {//使用for循环遍历传入的参数数组
            var element = arguments[i];//获取当前参数并赋值变量element
            if(typeof element === 'string') {//检查当前参数是否为字符串类型
                element = document.getElementById(element);//如果是字符串类型,则将其作为元素的id,并使用document.getElementById方法获取对应元素对象
            }//结束if语句
            if (arguments.length === 1) {//检查参数的数量是否为1
                return element;//如果参数的数量为1,则直接返回获取的元素对象
            }//结束if语句
            elements.push(element);//将获取到的元素对象添加到elements中
        }//结束for循环
        return elements;//返回获取到的元素数组
    }//结束$函数的定义
    window['IC']['$'] = $;//将$函数添加到全局对象IC中
    function getElementsByClassName() {//定义一个名为getElementsByclassName的函数
    }//结束getElementsByClassName 函数的定义
    window['IC']['getElementsByClassName'] = getElementsByClassName;//将getElementsByClasName函数添加到全局对象IC中
})();//结束立即执行函数表达式

getElementsByClassName()方法 

function getElementsByClassName(className, tag) {//定义一个名为getElementsByClassName的函数,它接受两个参数:className和tag  
    var allTags = document.getElementsByTagName(tag); //获取文档中所有指定标签名的元素集合
    var matchingElements = []; //创建一个空数组matchingElements
    var regex = new RegExp('(^|\\s)' + className + '(\\s|$)'); //创建一个正则表达式,用于匹配类名是否符合要求
  
    for (var i = 0; i < allTags.length; i++) {  //使用for循环遍历所有标签元素。
        var currentElement = allTags[i];  //获取当前遍历的标签元素
        if (regex.test(currentElement.className)) {  //检查当前元素的类名是否匹配正则表达式
            matchingElements.push(currentElement);  //如果匹配,则将元素添加到matchingElements数组中
        }  //结束if语句
    }  //结束for循环
    return matchingElements;  //返回匹配的元素数组
} //结束getElementsByClassName函数的定义
if (!window.IC) {  //结束getElementsByClassName函数的定义
    window.IC = {};  //如果不存在,则创建一个空对象IC
}//结束if语句
window.IC.getElementsByClassName = getElementsByClassName; //将getElementsByClassName函数添加到全局对象IC中。
 

HTML调用JS库及结果

调用:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
//文档类型声明(Document Type Declaration,DTD),指示浏览器使用HTML4.01Transitional文档定义来解析页面
<html>
//HTML文档的根元素
<head>
//包含了文档的元数据,比如文档的标题、字符编码等信息
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
//这是一个元标签(meta tag),指定了文档的字符编码为gb2312,以确保浏览器正确地解析和显示页面内容
<title></title>
//定义网页的标题,显示在浏览器的标题栏或标签页上
<script type="text/javascript" src="IC.js"></script>
//引入一个javaScript文件,文件路径IC.js,这个文件可能包含一些JavaScript函数或变量
<script type="text/javascript">
//开始JavaScript代码块
function testClick(){
//定义了一个名为testClick的JavaScript函数,该函数在点击按钮时执行。
   var testInput =IC.getElementsByClassName("testme","input");
   //调用了名为IC的JavaScript文件,文件路径为IC.Js,这个文件可能包含一个JavaScript函数或变量
   for(var i=0;i<testInput.length;i++){
   //使用for循环遍历testInput数组中的每个元素
       alert(testInput[i].value);
	   //在每次循环中,没弹出一个警告框,显示当前遍历到的输入框(<input>)的value值
   }
}
</script>
//结束JavaScript代码块
</head>
//head元素的结束标签
<body>
//HTML文档的主题部分
<input type="text" value="test" class="testme"id="testId"/>
//创建一个文本框输入框,初始值为"test",并且拥有类名为"testme"和id为"testId"
<input type="text" value="test3" class="testme" id= "testId3"/>
<input type="button" value="clickme" onclick="testClick()"/>
//创建一个按钮,点击该按钮时会调用testClick函数
</body>
//body元素的结束标签
</html>
//HTML文档的结束标签

调用的第二方法,举例来说明。

结果: 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/511547.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python 与机器学习,在服务器使用过程中,常用的 Linux 命令包括哪些?

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 本博客旨在分享在实际开发过程中&#xff0c;开发者需要了解并熟练运用的 Linux 操作系统常用命令。Linux 作为一种操作系统&#xff0c;与 Windows 或 MacOS 并驾齐驱&#xff0c;尤其在服务器和开发环…

Redis缓存设计与性能优化【缓存和数据库不一致问题,解决方案:1.加过期时间这样可以一段时间后自动刷新 2.分布式的读写锁】

Redis缓存设计与性能优化 缓存与数据库双写不一致 缓存与数据库双写不一致 在大并发下&#xff0c;同时操作数据库与缓存会存在数据不一致性问题 1、双写不一致情况 2、读写并发不一致 解决方案&#xff1a; 1、对于并发几率很小的数据(如个人维度的订单数据、用户数据等)&a…

Spring中BeanFactoryPostProcessor详解

目录 功能与作用 使用案例 spring提供的常见BeanFactoryPostProcessor 1.EventListenerMethodProcessor 2.BeanDefinitionRegistryPostProcessor 功能与作用 使用案例 spring提供的唯一BeanDefinitionRegistryPostProcessor 总结 功能与作用 参考BeanFactoryPostProce…

FebHost:人工智能时代的新宠儿.AI域名

近年来,人工智能技术在各行各业迅猛发展,正在深刻改变着我们的生活。作为AI领域的专属域名,.AI域名正成为越来越多企业和个人的首选。 那么,.AI域名到底是什么呢?它是一种特殊的顶级域名(Top-Level Domain, TLD),于2013年由 安哥拉政府正式退出。与其他通用顶级域名如.com、.…

springboot之MybatisPlus

文章目录 一、ORM二、mybatis实际操作三、mybatis-plus 一、ORM 简单来说ORM就是一个能够帮我们把java中Bean类映射到数据库中。 使用mybatis-plus。 配置架包 <!-- MyBatisPlus依赖 --><dependency><groupId>com.baomidou</groupId><art…

能源照明运作机制与智能调控技术实现途径

随着城市化进程的加速&#xff0c;智慧城市已成为现代城市发展的重要方向。能源照明作为城市基础设施的重要组成部分&#xff0c;其运作机制与智能调控技术的实现对于提高城市能源利用效率、促进可持续发展具有重要意义。 能源照明是一个涵盖广泛、错综复杂的领域&#xff0c;它…

元宇宙虚拟空间的场景构造(二)

前言 该文章主要讲元宇宙虚拟空间的场景构造&#xff0c;基本核心技术点&#xff0c;不多说&#xff0c;直接引入正题。 场景的构造 使用引入的天空模块 this.sky new Sky(this); 在Sky模块里&#xff0c;有设置对其中的阳光进行不同时间段的光线处理。而天空又是怎么样的…

时序分解 | Matlab实现GSWOA-VMD改进鲸鱼优化算法优化变分模态分解时间序列信号分解

时序分解 | Matlab实现GWO-CEEMDAN基于灰狼算法优化CEEMDAN时间序列信号分解 目录 时序分解 | Matlab实现GWO-CEEMDAN基于灰狼算法优化CEEMDAN时间序列信号分解效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab实现GSWOA-VMD改进鲸鱼优化算法优化变分模态分解时间序…

Vue3:用Pinia的storeToRefs结构赋值store数据

一、情景描述 我们学习了Pinia之后&#xff0c;知道&#xff0c;数据是配置在Pinia的state里面的。 那么&#xff0c;如果有多个字段需要取出来使用&#xff0c;并且不丢失数据的响应式&#xff0c;如何优雅的操作了&#xff1f; 这里就用到了Pinia的storeToRefs函数 二、案…

【信贷后台管理系统之axios的二次封装(四)】

文章目录 一、axios的二次封装二、配置后端接口地址三、登录接口api联调四、贷款申请接口api编写联调 一、axios的二次封装 示例&#xff1a;pandas 是基于NumPy 的一种工具&#xff0c;该工具是为了解决数据分析任务而创建的。 src下新建utils,新建request.js用来封装axios 控…

用户体验:探讨Facebook如何优化用户体验

在数字化时代&#xff0c;用户体验是社交媒体平台成功与否的关键因素之一。作为全球最大的社交媒体平台之一&#xff0c;Facebook一直在努力优化用户体验&#xff0c;从功能设计到内容呈现再到隐私保护&#xff0c;不断提升用户满意度。本文将深入探讨Facebook如何优化用户体验…

解决GNU Radio+USRP实现OFDM收发在接收端存在误码问题

文章目录 前言一、OFDM 收发流程1、OFDM 收端流程2、OFDM 收端流程 二、问题所在1、find_trigger_signal 函数解读2、general_work 函数3、问题所在 三、修改源码四、运行结果1、频谱2、传输数据测试 五、调试小技巧六、资源自取 前言 在使用 GNU Radio 时使用官方例程搭建 GN…

游戏引擎中的物理系统

一、物理对象与形状 1.1 对象 Actor 一般来说&#xff0c;游戏中的对象&#xff08;Actor&#xff09;分为以下四类&#xff1a; 静态对象 Static Actor动态对象 Dynamic Actor ---- 可能受到力/扭矩/冲量的影响检测器 TriggerKinematic Actor 运动学对象 ---- 忽略物理法则…

华为审核被拒提示: 您的应用存在(最近任务列表隐藏风险活动)的行为,不符合华为应用市场审核标准

应用审核意见&#xff1a; 您的应用存在&#xff08;最近任务列表隐藏风险活动&#xff09;的行为&#xff0c;不符合华为应用市场审核标准。 修改建议&#xff1a;请参考测试结果进行修改。 请参考《审核指南》第2.19相关审核要求&#xff1a;https://developer.huawei.com/c…

【opencv】教程代码 —videoio(2)将两个视频的每一帧逐一读取并计算其PSNR 和MSSIM...

本教程开始介绍的源代码将对每一帧执行PSNR测量&#xff0c;并且只对PSNR低于输入值的帧进行SSIM测量。为了可视化的目的&#xff0c;我们在OpenCV窗口中展示两幅图像&#xff0c;并将PSNR和MSSIM值打印到控制台。期望看到如下内容&#xff1a; video-input-psnr-ssim.cpp 将两…

JeeSite Vue3:前端开发控制实现基于身份角色的权限验证

随着技术的飞速发展&#xff0c;前端开发技术日新月异。在这个背景下&#xff0c;JeeSite Vue3 作为一个基于 Vue3、Vite、Ant-Design-Vue、TypeScript 和 Vue Vben Admin 的前端框架&#xff0c;引起了广泛关注。它凭借其先进的技术栈和丰富的功能模块&#xff0c;为初学者和团…

IP代理检测:判断IP质量优劣要注意什么?

做跨境电商的用户们往往对IP代理这个词都不会感到陌生&#xff0c;那么如何去评判IP的优劣势以及再选择IP时需要注意什么呢&#xff1f; 首先要知道的是IP代理检测是确保网络安全、提高网络访问效率以及满足特定需求的重要步骤。在判断IP代理质量优劣时&#xff0c;有几个关键…

使用阿里云试用Elasticsearch学习:1.1 基础入门——入门实践

阿里云试用一个月&#xff1a;https://help.aliyun.com/search/?kelastic&sceneall&page1 官网试用十五天&#xff1a;https://www.elastic.co/cn/cloud/cloud-trial-overview Elasticsearch中文文档&#xff1a;https://www.elastic.co/guide/cn/elasticsearch/guide…

剑指Offer题目笔记24(集合的组合、排序)

面试题79&#xff1a; 问题&#xff1a; ​ 输入一个不含重复数字的数据集合&#xff0c;找出它的所有子集。 解决方案&#xff1a; ​ 使用回溯法。子集就是从一个集合中选出若干元素。如果集合中包含n个元素&#xff0c;那么生成子集可以分为n步&#xff0c;每一步从集合中…

数据可视化:智慧农业发展的催化剂

数据可视化在智慧农业中发挥着不可替代的作用。随着科技的不断进步&#xff0c;农业领域也在不断探索创新&#xff0c;以提高生产效率、优化资源利用&#xff0c;从而实现可持续发展。而数据可视化技术的应用&#xff0c;则成为了实现智慧农业目标的重要途径。下面我就从可视化…
最新文章