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

本文介绍了如何使用自定义的JavaScript函数实现类似jQuery的选择器功能,包括基于ID、类名和标签名的选择,并演示了如何应用CSS样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在上一边博客,是通过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;
}
}

}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wen's

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值