第 34
34
34
34 章 项目 1-
1-
1-
1- 博客前端:封装库 --CSS
--CSS
--CSS
--CSS 选择器 [
[
[
[ 下 ]
]
]
]
学习要点:
1. 问题所在
2. 设置代码
主讲教师:李炎恢
官方博客: http://blog.yc60.com
http://blog.yc60.com
http://blog.yc60.com
http://blog.yc60.com
合作 网站: http://
http://
http://
http:// www.ibeifeng.com
www.ibeifeng.com
www.ibeifeng.com
www.ibeifeng.com
本节点 , 我们准备使用模拟 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 :
评论0