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

空白_d

已于 2024-04-02 20:30:33 修改

阅读量444

点赞数 8

文章标签： javascript 前端开发语言

于 2024-04-02 20:25:59 首次发布

本文链接：https://blog.csdn.net/weixin_59272777/article/details/137286213

版权

背景:

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文档的结束标签

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

结果:

空白_d

关注

8
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript库，编写$()和getElementsByClassName()方法

JavaScript库是一组预先编写好的JavaScript代码集合，旨在简化常见的网页开发任务。这些库通常包含了许多函数和方法，可以帮助开发人员处理各种任务，比如DOM操作、事件处理、动画效果、AJAX请求等等。使用JavaScript库可以节省开发时间，并提供了一种标准化的方法来解决常见的编程问题。举个例子，假设你需要在网页中实现一个图片轮播的功能。如果你从头开始编写代码，需要处理图片的切换、定时器的设置、按钮的事件绑定等等，这会耗费大量的时间和精力。
复制链接

扫一扫