用数组的方式来模仿jquery 的$选择器getClassName(ParId,S_ClassName)[i];

最新推荐文章于 2021-06-09 16:45:44 发布

lixp3

最新推荐文章于 2021-06-09 16:45:44 发布

阅读量2.8k

点赞数

分类专栏： javascript 文章标签： jquery class function div 文档

本文链接：https://blog.csdn.net/lxp1021/article/details/6634704

版权

javascript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

最近一直在研究jquery的一些实现原理，jquery选择器非常强大他们查找dom文档中的任何元素，而最近也是同个一数组的方法模拟这个通过类名来查找元素。

思路：

我们知道jquery的$("....dom...")能够查找页面的所有元素，而原生的js只提供了两种方法来查找dom元素，一直是我们熟知的getElementById(),另一个则是getElementsByTagName();返回的是一个结果数组，因此我们可以结合这两种方式加一个条件判断句来实现，类的查找。

语法：

getClassName(ParentEleID,NewClassName);//需要两个参数，第一个参数是父级id,第二个是要查找的类名

js代码：
<html>
<head>
<title>模仿jquery选择器</title>
<script language="javascript">
	function getClassName(ParentId,NewClassName){
		var AllClassElem = ParentId.getElementsByTagName("*");
		var AllClass = [];
		var i=0;
		for(var i=0; i<AllClassElem.length; i++){
			if(AllClassElem[i].className==NewClassName){
				AllClass.push(AllClassElem[i]);
			}
		}
		return AllClass;
	}
window.onload = function(){
	var PElementId=document.getElementById("div01");
	alert(getClassName(PElementId,"UlLi")[3].innerHTML);
}
</script>
</head>
<body>
<div id="div01">
    <ul>
	<li class="UlLi">js数组的管理[增,删,改,查]</li>

	<li class="UlLi">FusionCharts参数大全</li>
	
	<li class="UlLi">easyUI布局篇</li>
    </ul>
<p class="UlLi">解决自定义$(id)的方法与jquery选择器冲突的问题</p>
</div>
</body>
</html>

lixp3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
用数组的方式来模仿jquery 的$选择器getClassName(ParId,S_ClassName)[i];

最近一直在研究jquery的一些实现原理，jquery选择器非常强大他们查找dom文档中的任何元素，而最近也是同个一数组的方法模拟这个通过类名来查找元素。思路：我们知道jquery的$("....dom...")能够查找页面的所有元素，而原生的js只提供了两种方法来查找dom元素
复制链接

扫一扫