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

news2024/10/7 18:27:29

背景:

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.coloradmin.cn/o/1563714.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何借助AI工具轻松绘制思维导图

前言 思维导图是一种将思维可视化的工具&#xff0c;它可以帮助我们理清思路、提高效率、促进记忆。传统的思维导图绘制方法需要一定的时间和技巧&#xff0c;而借助AI工具&#xff0c;我们可以轻松绘制思维导图&#xff0c;并将更多时间和精力集中在内容本身。 借助AI工具把…

网络以太网之(2)VLAN协议

网络以太网之(1)VLAN协议 Author: Once Day Date: 2024年4月1日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文档可参考专栏&#xff1a;通信网络技术_Once-Day…

输出100~200之间的素数(C语言)

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>//实现素数判断函数&#xff1b; int Prime(int number) {//初始化变量值&#xff1b;int divided 2;int JudgementCondition 0;//循环判断素数&#xff1b;wh…

基于SpringBoot+微信小程序的外卖跑腿点餐(订餐)系统设计与实现+毕业论文(12000字)

介绍 Spring Boot是由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置&#xff0c;从而使开发人员不再需要定义样板化的配置。通过这种方式&#xff0c;Spring Boot致力于在蓬勃发展的快速应…

美联储,非必要,不降息

美联储“没必要、没空间、没动力”降息&#xff0c;也会尽量避免货币政策干扰大选&#xff0c;用“口头降息”代替实际调整是现实选择&#xff0c;市场降息预期将继续推迟和下调。 前言&#xff1a; 当前美国经济从各个方面看均并未表现出疲态——新增就业持续修复&#xff0c;…

俄罗斯Yandex广告推广如何开户及费用?

作为俄罗斯首屈一指的搜索引擎&#xff0c;Yandex凭借其超过60%的市场份额&#xff0c;成为企业进入俄罗斯、触及俄语消费者的关键入口。然而&#xff0c;对于不熟悉当地市场环境与网络营销规则的企业而言&#xff0c;成功开户并高效运营Yandex广告并非易事。云衔科技凭借专业的…

大模型量化技术-AWQ

大模型量化技术-AWQ 在2023年6月,Ji Lin等人发表了论文AWQ:Activation-aware Weight Quantization for LLM Compression and Acceleration。 这篇论文详细介绍了一种激活感知权重量化算法,可以用于压缩任何基于 Transformer 的语言模型,同时只有微小的性能下降。关于 AWQ 算…

2024 年云繁荣:驾驭人工智能驱动转型浪潮

在人工智能革命的核心&#xff0c;2024 年见证了云计算应用的空前激增。云计算的繁荣不仅仅是异地存储数据&#xff0c;而是创建动态的智能基础设施&#xff0c;推动人工智能的指数级增长。让我们深入探讨推动这一现象的关键因素和趋势。 01 人工智能和云&#xff1a;共生关系…

Mac上怎么合并多张图片?

Mac上怎么合并多张图片&#xff1f;上班过的小伙伴都应该知道&#xff0c;合并拼接图片是一件非常重要且经常需要使用到的图片处理技术&#xff0c;将多张图片合并拼成一张之后能够展现出更多的图片内容。在Mac电脑上&#xff0c;合并多张图片是一项常见的任务&#xff0c;无论…

鸿蒙OS开发实例:【ArkTS类库多线程@Concurrent装饰器校验并发函数】

在使用TaskPool时&#xff0c;执行的并发函数需要使用该装饰器修饰&#xff0c;否则无法通过相关校验。从API version 9开始&#xff0c;该装饰器支持在ArkTS卡片中使用。 装饰器说明 Concurrent并发装饰器说明装饰器参数无。使用场景仅支持在Stage模型的工程中使用。装饰的函…

2024最新软件测试【测试理论+ 接口测试】面试题(内附答案)

一、测试理论 3.1 你们原来项目的测试流程是怎么样的? 我们的测试流程主要有三个阶段&#xff1a;需求了解分析、测试准备、测试执行。 1、需求了解分析阶段 我们的 SE 会把需求文档给我们自己先去了解一到两天这样&#xff0c;之后我们会有一个需求澄清会议&#xff0c; …

【微信小程序】流量主-激励视频(激励广告)下发策略,每天三次免费体验,然后再次点击触发激励视频,当日不再触发。

如题&#xff1a; 允许用户有三次体验效果&#xff0c;然后弹出激励视频弹窗&#xff0c;之后当日不再弹出。 体验小程序&#xff1a; /*** 判断当前项目当天是否点击超过3次&#xff0c;触发广告效果。* 若&#xff0c;当天低于三次&#xff0c;则新增&#xff0c;若高于…

达梦数据库 优化

谁进行优化&#xff1f;优化什么&#xff1f; 优化不能仅从数据库方面考虑&#xff0c;比如&#xff0c;在存储达到数据库极限、应用涉及人员设计的代码稀巴烂的情况下&#xff0c;进行调优就是杯水车薪的效果。 涉及到优化人员&#xff1a; 数据库管理员应用程序架构师应用…

gulp的基本使用(二)

gulp的基本使用&#xff08;二&#xff09; 任务&#xff08;Tasks&#xff09;创建任务&#xff08;Tasks&#xff09;分类 series()和parallel()的区别series()parallel()代码运行命令结果series() 和 parallel()根据环境运行series() 和 parallel()相互深层嵌套当两个任务的…

C语言:二叉树的构建

目录 一、二叉树的存储 1.1 顺序存储 1.2 链式存储 二、二叉树的顺序结构及实现 2.1堆的概念及结构 2.2堆的构建 2.3堆的插入 2.4堆顶的删除 2.5堆的完整代码 三、二叉树的链式结构及实现 3.1链式二叉树的构建 3.2链式二叉树的遍历 3.2.1前序遍历 …

【Zblog搭建博客网站】windows环境搭建属于自己的博客并发布上线 – cpolar内网穿透

目录 1. 前言 2. Z-blog网站搭建 2.1 XAMPP环境设置 2.2 Z-blog安装 2.3 Z-blog网页测试 2.4 Cpolar安装和注册 3. 本地网页发布 3.1. Cpolar云端设置 3.2 Cpolar本地设置 4. 公网访问测试 5. 结语 1. 前言 想要成为一个合格的技术宅或程序员&#xff0c;自己搭建网…

论文精读--GPT4

现有的所有模型都无法做到在线学习&#xff0c;能力有限&#xff0c;而让大模型拥有一个tools工具库&#xff0c;则可以使大模型变成一个交互式的工具去协调调用API完成任务&#xff0c;同时GPT4还联网了&#xff0c;可以不断地更新自己的知识库 多模态模型&#xff0c;接受文…

docker容器之etcd安装

一、etcd介绍 1、etcd是什么 etcd是CoreOS团队于2013年6月发起的开源项目&#xff0c;它的目标是构建一个高可用的分布式键值(key-value)数据库。 2、etcd特点 简单的接口&#xff0c;通过标准的HTTP API进行调用&#xff0c;也可以使用官方提供的 etcdctl 操作存储的数据。…

鸿蒙开发岗位需求激增、鸿蒙迎来“薪”时代

随着科技的快速发展&#xff0c;智能操作系统已经成为科技巨头们争夺的焦点。近期&#xff0c;华为鸿蒙操作系统再次迎来重大突破&#xff0c;11家万亿市值的巨头纷纷宣布与华为达成合作&#xff0c;全面拥抱鸿蒙生态。 11家万亿市值巨头的签约涵盖了多个领域&#xff0c;包括…

yolov7代码 | model.named_models

文章目录 前言1. print(model)2. print(model.named_models)2.1 print(name)2.2 print(module)2.3 print(f"{name}:: {module}") 3. hasattr(module, weight) 前言 了解model.named_models&#xff0c;为剪枝做准备。 剪枝有一些层如果你不想剪掉&#xff0c;那就用…