欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

104 css选择器的的封装 $("#ele").css() $(".ele").css() $("ele").css()_html/css_WEB-ITnose

程序员文章站 2022-04-29 11:46:46
...
//demo.js 调用

window.onload = function () {
// $().getClass("a").css("color","red");//旧方法
/* $("#box").css("color", "red").click(function(){
alert($(this).html())
});*/
//$(".a").css("color","green")
// $("p").find(".a").css("color","blue");
$("div").find("span").css("color","red")
// $("div").find(".a").css("color","red");
//$("div").find("#bb").css("color","red")


//$(".a").css("color","red")
};


//Base.js


var $=function(args)//调用,把this传递过来
{
return new Base(args);


};
//对象式
function Base(args)
{
//创建一个数组来获取节点和节点的数组
this.elements=[];//私有化,不共用
if(typeof args=="string")//$(".a").css("color","green")这样调用执行这里
{
switch (args.charAt(0))
{
case "#":
this.elements.push(this.getId(args.substring(1)));
break;
case ".":
this.elements=this.getClass(args.substring(1));//getClassreturn的是数组所以直接赋值
break;
default :
this.elements = this.getTagName(args);//getClassreturn的是数组所以直接赋值
}
}
else if(typeof args=="object") // $().getClass("a").css("color","red");这样调用就执行这里
{
if(args!=undefined)//这里的_this是一个对象,undefined也是个对象,却别typeof放回的带单引号的 “undefined”
{
this.elements[0]=args; //把this放到数组的第一个
}
}


}
//设置css选择子节点
Base.prototype.find=function(str)
{
var childElements=[];//临时数组避免和base.element[]冲突
for(var i=0;i {
switch (str.charAt(0))
{
case "#":
childElements.push(this.getId(str.substring(1)));
break;
case ".":
/* var all=this.elements[i].getElementsByTagName("*");
for(var j=0;j {
if(all[j].className==str.substring(1))
{
childElements.push(all[j]);
}
}*/
var temps = this.getClass(str.substring(1), this.elements[i]);
for (var j = 0; j childElements.push(temps[j]);
}
break;
default :
var tags=this.elements[i].getElementsByTagName(str);
for(var j=0;j {
childElements.push(tags[j]);
}
}
}
this.elements=childElements;
return this;
};


//获取ID节点
Base.prototype.getId = function (id) {
//返回ID节点的本身对象
return document.getElementById(id);
};
//获取元素节点数组
Base.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 temps.push(tags[i]);
}
return temps;
};
//class获取
Base.prototype.getClass=function(className,parentNode)
{
var node=null;
var temps=[];//临时数组避免和base.element[]冲突
if(parentNode!=undefined)
{
node=parentNode;
}
else
{
node=document;
}
var all=node.getElementsByTagName("*");
for(var i=0;i {
if(all[i].className==className)
{
temps.push(all[i]);//给临时数组添加
}
}
return temps; //返回临时数组
};
//获取某个节点,并且返回Base对象
Base.prototype.eq=function(num)
{
var element=this.elements[num];
this.elements=[];//清空数组
this.elements[0]=element;//重新赋值
return this; //返回如jq的eq()一样的东西
};


//获取某个节点,并且放回这个节点的对象
Base.prototype.get=function(num)//
{
return this.elements[num];//返回如jq的get()一样的东西
};
//设置CSS
Base.prototype.css = function (attr, value) {
for (var i = 0; i if (arguments.length == 1) {
return getStyle(this.elements[i], attr);//为什么这里需要return呢
}
this.elements[i].style[attr] = value;
}
return this;
};
Base.prototype.click=function(fn)
{
for(var i=0;i {
this.elements[i].onclick=fn;
}
return this;
};
//设置innerHtml 获取innerHTML
Base.prototype.html=function(value)
{


for(var i=0;i {
if(arguments.length==0)
{
return this.elements[i].innerHTML;
}
else
{
this.elements[i].innerHTML=value;
}


}
return this;
};
//添加class
Base.prototype.addClass=function(className)
{
for(var i=0;i {
if(!hasClass(this.elements[i],className))//判断是否已经有这个class
{
this.elements[i].className+=' '+className;
}
}
return this;
};
//移出class
Base.prototype.removeClass=function(className) //调用方法$().getClass("dd").addClass("a").addClass("b").removeClass("b");
{
for(var i=0;i {
if(hasClass(this.elements[i],className))//判断是否已经有这个class
{
this.elements[i].className=this.elements[i].className.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),'');
}
}
return this;
};
//添加link或style的css规则,不常用
Base.prototype.addRule=function(num,selectorText,cssText,position) //调用方法, $().addRule(0,"body","background:red",0)
{
var sheet=document.styleSheets[num];
if(typeof sheet.insertRule!="undefined")//w3c
{
sheet.insertRule(selectorText+"{"+cssText+"}",position);
}
else if(typeof sheet.addRule!="undefined")//iE
{
sheet.addRule(selectorText,cssText,position);//sheet.addRule("body","background:red",)
}
};
//移除link或style的css规则,不常用
Base.prototype.addRule=function(num,index) //调用方法, $().removeRule(0);
{
var sheet=document.styleSheets[num];
if(typeof sheet.deleteRule!="undefined")//w3c
{
sheet.deleteRule(index);
}
else if(typeof sheet.removeRule!="undefined")//iE
{
sheet.removeRule(index);//sheet.addRule("body","background:red",)
}
};
//设置hover方法
Base.prototype.hover=function(over,out)
{
for(var i=0;i {
// this.elements[i].onmouseover=over;
// this.elements[i].onmouseout=out;
addEvent(this.elements[i],"mouseover",over);
addEvent(this.elements[i],"mouseout",out)
}
return this;
};
//添加show
Base.prototype.show=function()
{
for(var i=0;i {
this.elements[i].style.display="block"


}
return this;
};
//添加hide
Base.prototype.hide=function()
{
for(var i=0;i {
this.elements[i].style.display="none"


}
return this;
};
//设置物体居中
Base.prototype.center=function(width,height)
{
var top=(getInner().height-width)/2;
var left=(getInner().width-height)/2;
for(var i=0;i {
this.elements[i].style.top=top+"px";
this.elements[i].style.left=left+"px";
}
return this;
};
//触发浏览器窗口事件
Base.prototype.resize = function (fn) {
for(var i=0;i {
var element=this.elements[i];
/* window.onresize=function()
{
fn();
if (element.offsetLeft > getInner().width - element.offsetWidth) {
element.style.left = getInner().width - element.offsetWidth + 'px';
}
if (element.offsetTop > getInner().height - element.offsetHeight) {
element.style.top = getInner().height - element.offsetHeight + 'px';
}
}*/
addEvent(window,"resize",function()
{
fn();
if (element.offsetLeft > getInner().width - element.offsetWidth) {
element.style.left = getInner().width - element.offsetWidth + 'px';
}
if (element.offsetTop > getInner().height - element.offsetHeight) {
element.style.top = getInner().height - element.offsetHeight + 'px';
}
})
}
return this;
};
//锁屏功能
Base.prototype.lock=function()
{
for(var i=0;i {
this.elements[i].style.width=getInner().width+"px";
this.elements[i].style.height=getInner().height+"px";
this.elements[i].style.display="block";
document.documentElement.style.overflow = 'hidden';
addEvent(window,"scroll",scrollTop);
}


return this;
};
function scrollTop(){
document.documentElement.scrollTop=0;// IE W3C
document.body.scrollTop=0;//火狐
}
Base.prototype.unlock=function()
{
for(var i=0;i {
this.elements[i].style.display="none";
document.documentElement.style.overflow = 'auto';
removeEvent(window,"scroll",scrollTop);
}


return this;
};
//插件入口
Base.prototype.extend=function(name,fn)
{
Base.prototype[name]=fn;
};


$().extend("bbb",function(){
alert("123")
});