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

jQuery的选择器原理

2018-03-18 16:33 387 查看
建立一个$函数,通过传元素的名称前缀来判断的选取的元素类型,名称来选取元素,并进行相应的操作,如改变属性,元素内容,以及css样式
function $(selected){
//alert(selected);
//获取要得到对象的标识
var firstChar = selected.substr(0,1);
//标识后面的参数
var sel =selected.substr(1);
var obj =[];
switch(firstChar){
//获取id对象
case '#':
obj[0] = document.getElementById(sel);
break;
//获取class对象
case '.':
obj = document.getElementsByClassName(sel);
//console.log(obj);
break;
//获取标签对象
default:
obj = document.getElementsByTagName(selected);
}
//可以赋予对象一些方法
//同传递过来的值将css修改掉
obj.css =function(key,value){
if(value == undefined){
return obj[0].style[key];
}else{
for(var i=0;i<obj.length;i++){
obj[i].style[key] = value;
}
}
//保证连贯操作
return this;
}
//我们要处理html方法 将外面传递过来的值修改掉 innerHTML
obj.html =function(key){
if(key == undefined){
return obj[0].innerHTML;
}else{
for(var i = 0;i<obj.length;i++){
obj[i].innerHTML =key;
}
}
return this;
}
//用来专门添加属性
obj.attr = function(key,value){
if(value == undefined){
return obj[0][key];
}else{
for(var i = 0; i<obj.length;i++){
obj[i][key]=value;
}
}
return this;
}

//必须返回一个对象
return obj;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: