您的位置:首页 > Web前端 > JQuery

Jquery前端封装 自定义高度CSS模拟 类似于jquery库的写法

2016-02-12 21:28 633 查看
在上一边博客,是通过find找找子类

l例如

<div id="a">

<p>

<span class="b">span</span>

</p>

</div>

$('#a').find('p').find('.a').css('color','red');

这次是要模拟

$('#a p .a').css('color','red');      这个很像jquery的写法吧

//基础类

function Base(args){//创建一个类
//创建一个数组来获取一个节点和节点数组
this.elements=[];
if(typeof args=='string'){
//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; //保存父节点,因为childElements要清理,所以node要创建

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;
}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;
}
}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息