仿Jquery查詢 ...
<!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>
