<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
</head>
<body>
<div>
<span class="a">span</span>
<span class="a">span</span>
<span class="b">span</span>
</div>
<div id="div">
<span>span</span>
<span class="a">span</span>
<span class="a">span</span>
</div>
<p id="p">
<span class="a">span</span>
<span class="a">span</span>
<span id="span">span</span>
</p>
<script src="../tool.js"></script>
<script src="../base.js"></script>
<script src="dome.js"></script>
</body>
</html>在上面的html中，由兩個div和一個p組成采缚，而三個標簽又各自包含了帶有或沒有帶有class的span。
假設我們要用css的方法選取id為div中的所有class為a的span元素票灰，將他們的color設置為red注簿，我們該怎么做契吉？
#div .a {
color : red;
}當然，用css實現(xiàn)真的很簡單滩援。但是栅隐，我們用js實現(xiàn)css選擇器該如何實現(xiàn)呢？
第一步玩徊，我們先實現(xiàn)不帶層次的css選擇器租悄，例如：
$("#box").css("color", 'red');
$("span").css('color', 'red');
$(".a").css('color', 'red');分別通過通過id、標簽和class來選取元素恩袱，并設置他們的樣式
下面是代碼實現(xiàn)部分
// 前臺調(diào)用
var $ = function (args) {
return new Base(args);
}
// 基礎庫
function Base (args) {
this.elements = [];
if(typeof args === 'string') {
switch (args.charAt(0)) {
case "#":
this.elements.push(this.getId(args.substring(1)));
break;
case ".":
this.elements = this.getClass(args.substring(1));
break;
default :
this.elements = this.getTagName(args);
}
} else if (typeof args === 'object') {
if(args !== undefined) {
this.elements[0] = args;
}
}
}通過id查找
// 通過id查找元素
Base.prototype.getId = function (id) {
return document.getElementById(id);
}通過class查找
// 通過className查找元素
// className [string]要查找的name字符串
// parentNode [DOM Node]要查找的ame字符串的父節(jié)點
Base.prototype.getClass = function (className, parentNode) {
var node = null;
var temps = [];
if (parentNode !== undefined) {
node = parentNode;
} else {
node = document;
}
var all = node.getElementsByTagName("*");
for (var i = 0; i < all.length; i++) {
if (all[i].className === className) {
temps.push(all[i]);
}
}
return temps;
}通過tagName查找
// 通過TagName查找元素
// tag [string]要查找的標簽字符串
// parentNode [DOM Node]要查找的節(jié)點的父節(jié)點
Base.prototype.getTagName = function (tag, parentNode) {
var node = null;
var temps = [];
if (parentNode !== undefined) {
node = parentNode;
} else {
node = document;
}
var tags = node.getElementsByTagName(tag);
for (var i = 0; i < tags.length; i++) {
temps.push(tags[i]);
}
return temps;
}設置css部分
// 設置CSS樣式
Base.prototype.css = function (attr, value) {
for (var i = 0, len = this.elements.length; i < len; i++) {
if (arguments.length == 1) {
getStyle(this.elements[i], attr);
}
this.elements[i].style[attr] = value;
}
return this;
};雖然我們可以實現(xiàn)單個的選擇器查找泣棋，但是沒有層次感，例如：
$("div").find('.b').css('color', 'red');
$("p").find('span').css('color', 'red');
$("p").find('#span').css('color', 'red');我們在實現(xiàn)查找了第一個節(jié)點之后畔塔，用find（）方法繼續(xù)進行查找潭辈，然后設置樣式
下面是find（）方法的實現(xiàn)代碼
// 通過find查找子元素
Base.prototype.find = function (str) {
var childElement = []; // 存放子節(jié)點
for (var i = 0; i < this.elements.length; i++) {
switch (str.charAt(0)) {
case "#":
childElement.push(this.getId(str.substring(1)));
break;
case ".":
var all = this.elements[i].getElementsByTagName("*");
for (var j = 0; j < all.length; j++) {
if (all[j].className === str.substring(1)) {
childElement.push(all[j]);
}
}
break;
default :
var tags = this.elements[i].getElementsByTagName(str);
for (var j = 0; j < tags.length; j ++) {
childElement.push(tags[j]);
}
}
}
this.elements = childElement;
return this;
}雖然這樣我們可以不停的通過find方法來查找自己想要的元素，但是它不夠簡潔和靈活澈吨，我們需要像css選擇器那樣查找元素把敢，例如：
$("#div .a").css("color", 'red');
$("div span").css("color", 'red');
$("#div span").css("color", 'red');因此，我們需要對Base構造器進行升級
function Base (args) {
this.elements = [];
if(typeof args === 'string') {
if (args.indexOf(" ") !== -1) {
// CSS選擇器查找
var elements = args.split(" "); // 選擇器的層次數(shù)組
var node = []; // 父節(jié)點
var childElement = []; // 子節(jié)點數(shù)組
for (var i = 0, len = elements.length; i < len; i ++) {
if (node.length === 0) {
node.push(document);
}
switch (elements[i].charAt(0)) {
case "#":
childElement = [];
childElement.push(this.getId(elements[i].substring(1)));
node = childElement;
break;
case ".":
childElement = [];
// 遍歷父節(jié)點
for(var j = 0; j < node.length; j ++) {
var temps = this.getClass(elements[i].substring(1), node[j]);
for (var k = 0; k < temps.length; k ++) {
childElement.push(temps[k]);
}
}
node = childElement;
break;
default :
childElement = [];
for (var j = 0; j < node.length; j ++) {
var temps = this.getTagName(elements[i], node[j]);
for (var k = 0; k < temps.length; k ++) {
childElement.push(temps[k]);
}
}
node = childElement;
}
}
this.elements = childElement;
} else {
// find查找
switch (args.charAt(0)) {
case "#":
this.elements.push(this.getId(args.substring(1)));
break;
case ".":
this.elements = this.getClass(args.substring(1));
break;
default :
this.elements = this.getTagName(args);
}
}
} else if (typeof args === 'object') {
if(args !== undefined) {
this.elements[0] = args;
}
}
}