<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>仿Jquery查询</title>
</head>
<body>
<div id="box" class="box">
<ul id="ulBox" class="ulBox" >
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript" src="DomUtil.js"></script>
<script type="text/javascript">
function $(str){
/*#box .ulBox li*/
/*
var currentEle=document;
先取到#box 然后得到#box元素
保存在currentEle中
然后在#box元素下取到.ulBox
考虑到类不是一个 所以一般取第一个操作就行
$(".box")[0]
保存在currentEle中
然后在ul.box 下取到 li
保存在currentEle中
每次查到元素 都要保存在一个变量中以便下次搜索时用
符串是用空格分开的
所以可以用 str.split(" ")分成好几个在遍历操作;
*/
currentEle=document;//保存每次查询的元素节点
var arr=str.split(" ");//把字符串按空格分开变成数组
var len=arr.length;
for(var i=0;i<len;i++)
{
var firstSign = arr[i].substr(0,1);
if(firstSign!="." && firstSign!="#" )
{
var name=arr[i].substr(0);
}
else{
var name =arr[i].substr(1);
}
switch(firstSign)
{
case "." : currentEle=getElementsByClassName(name)[0];
break;
case "#" : currentEle=currentEle.getElementById(name);
break;
default : currentEle=currentEle.getElementsByTagName(name);
}
}
return currentEle;
}
console.log($(".box .ulBox li"));
</script>
</body>
</html>