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;
}
}
}
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;
}
}
}
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android Manifest 用法
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- Web布局连载——两栏固定布局(五)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- javascript实现10进制转为N进制数
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- [div+css]晒晒最新制作专题推广页模板
- 小白观察:微软释放出其基于 Chromium 的 Edge 浏览器
- 2019年开发人员应该学习的8个JavaScript框架