大概思路是这样的:通过判断传过来的参数是什么类型,如果是对象,那这里就是this(因为封装是自己用的,肯定不会随便乱传一个对象过来),如果是一个函数(匿名函数),那就是Dom加载(这里先不讲),如果是字符串,那就是CSS选择器,通过判断是否存在空格,没有就是单一CSS选择器,有就是后代选择器。然后再通过判断是ID选择器,类选择器还是元素选择器来执行具体的操作:
这里创建一个构造函数实现基础库Jr :
function Jr(){
}
在其原型上添加方法:
//获取ID节点
Jr.prototype.getId = function(id){
return document.getElementById(id);
}
//获取CLASS节点数组
Jr.prototype.getClass = function(className, parentNode){
var node = null; //存放父节点
var temps = [];
if(parentNode != undefined){ //存在父节点时
node = parentNode;
} else { //不存在则默认document
node = document;
}
var all = node.getElementsByTagName('*');
for(var i = 0; i < all.length; i++){
//遍历所有节点,判断是否有包含className
if((new RegExp('(\\s|^)' + className + '(\\s|$)')).test(all[i].className)){
temps.push(all[i]);
}
}
return temps;
}
//获取元素节点数组
Jr.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;
}
接下来就是在构造函数里通过传参来进行一系列选择器操作:
//基础库
function Jr(args){
//创建一个数组,用来保存获取的节点或节点数组
this.elements = [];
//当参数是一个字符串,说明是常规css选择器,不是this,或者function
if(typeof args == 'string'){
//css模拟,就是跟CSS后代选择器一样
if(args.indexOf(' ') != -1){
//把节点拆分开并保存在数组里
var elements = args.split(' ');
//存放临时节点对象的数组,解决被覆盖问题
var childElements = [];
var node = []; //用来存放父节点用的
for(var i = 0; i < elements.length; i++){
//如果默认没有父节点,就指定document
if(node.length == 0) node.push(document);
switch(elements[i].charAt(0)) {
//id
case '#' :
//先清空临时节点数组
childElements = [];
childElements.push(this.getId(elements[i].substring(1)));
node = childElements; //保存到父节点
break;
//类
case '.' :
childElements = [];
//遍历父节点数组,匹配符合className的所有节点
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;
} 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;
}
} else if(typeof args == 'function'){
//这里不讲
this.ready(args);
}
}
最后,我们调用该基础库:
//调用
var $ = function(args){
return new Jr(args);
}
现在,我们就可以实现如下选择器等效果了:
$(this)
$('#box')
$('.box')
$('div')
$('#box div .nav')
$('.box .nav p')