CSS选择器
2017-01-04 本文已影响13人
duJing
<!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实现真的很简单。但是，我们用js实现css选择器该如何实现呢？
第一步，我们先实现不带层次的css选择器，例如：
$("#box").css("color", 'red');
$("span").css('color', 'red');
$(".a").css('color', 'red');分别通过通过id、标签和class来选取元素，并设置他们的样式
下面是代码实现部分
// 前台调用
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字符串的父节点
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]要查找的节点的父节点
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;
};虽然我们可以实现单个的选择器查找，但是没有层次感，例如：
$("div").find('.b').css('color', 'red');
$("p").find('span').css('color', 'red');
$("p").find('#span').css('color', 'red');我们在实现查找了第一个节点之后，用find（）方法继续进行查找，然后设置样式
下面是find（）方法的实现代码
// 通过find查找子元素
Base.prototype.find = function (str) {
var childElement = []; // 存放子节点
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(" "); // 选择器的层次数组
var node = []; // 父节点
var childElement = []; // 子节点数组
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 = [];
// 遍历父节点
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;
}
}
}
