16.项目 1-博客前端：封装库--CSS 选择器[下]

学习要点：

1.问题所在
2.设置代码

本节点，我们准备使用模拟 CSS 选择器的方式来模拟 JS 选择节点对象的方法。以便在
之后的使用中更加的方便。

一．问题所在

在获取节点的时候，虽然上一节课我们采用了 find()方法来实现层次结构的选择，但这
个还是有些麻烦，我们希望能使用比如此类调用方式：$('#box p .a').css('color', 'red')。

二．设置代码

//模拟 CSS 选择器
if (args.indexOf(' ') != -1) {
var elements = args.split(' ');
var childElements = [];
var node = [];
for (var i = 0; i < elements.length; i ++) {
if (node.length == 0) node.push(document);
switch (elements[i].charAt(0)) {
case '#' :
childElements = [];
childElements.push(this.getId(elements[i].substring(1)));
node = childElements;
break;
case '.' :
childElements = [];
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 ++) {
childElements.push(temps[k]);
}
}
node = childElements;
break;
default :
childElements = [];
for (var j = 0; j < node.length; j ++) {
var temps = this.getTagName(elements[i], node[j]);
for (var k = 0; k < temps.length; k ++) {
childElements.push(temps[k]);
}
}
node = childElements;
}
}
this.elements = childElements;

感谢收看本次教程！