104 css选择器的的封装 $("#ele").css() $(".ele").css() $("ele").css()

//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<this.elements.length;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<all.length;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 < temps.length; j ++) {

childElements.push(temps[j]);

}

break;

default :

var tags=this.elements[i].getElementsByTagName(str);

for(var j=0;j<tags.length;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 < tags.length; 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<all.length;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 < this.elements.length; 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.length;i++)

{

this.elements[i].onclick=fn;

}

return this;

};

//设置innerHtml 获取innerHTML

Base.prototype.html=function(value)

{

for(var i=0;i<this.elements.length;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<this.elements.length;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<this.elements.length;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.length;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.length;i++)

{

this.elements[i].style.display="block"

}

return this;

};

//添加hide

Base.prototype.hide=function()

{

for(var i=0;i<this.elements.length;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.length;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<this.elements.length;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.length;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.length;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")

});

时间: 2024-10-10 08:16:52

104 css选择器的的封装 $("#ele").css() $(".ele").css() $("ele").css()的相关文章

css 选择器【转】

最近在研究jQuery的选择器,大家知道jQuery的选择器和css的选择器非常相似,所以整理一下css选择器: css1-css3提供非常丰富的选择器,但是由于某些选择器被各个浏览器支持的情况不一样,所以很多选择器在实际css开发中很少用到. 1.基础的选择器 选择器 含义 示例 * 通用元素选择器,匹配任何元素 * { margin:0; padding:0; } E 标签选择器,匹配所有使用E标签的元素 p { font-size:2em; } .info和E.info class选择器,

CSS选择器 转

来自于:http://www.cnblogs.com/webblog/archive/2009/08/07/1541005.html 最近在研究jQuery的选择器,大家知道jQuery的选择器和css的选择器非常相似,所以整理一下css选择器: css1-css3提供非常丰富的选择器,但是由于某些选择器被各个浏览器支持的情况不一样,所以很多选择器在实际css开发中很少用到. 1.基础的选择器 选择器 含义 示例 * 通用元素选择器,匹配任何元素 * { margin:0; padding:0;

CSS选择器 - 性能的探究及提升

[本博客为原创:http://www.cnblogs.com/HeavenBin/]  前言: 在工作中编写CSS样式表时随着选择器层数的增加总会看到选择器又丑又长的情况,利用工作之余研究从其命名再到如何提高其性能.本博客将以"通俗易懂"."简洁""的方式来探究CSS选择器的性能,以及叙述总结如何提升CSS选择器的性能.(2017-8-20) 一. CSS选择器性能是如何消耗的? 工作原理:浏览器利用CSS选择器来匹配文档元素. 工作流程:例如 #hd .

css(二)css选择器,伪类

前戏 前面我们说过CSS规则由选择器和声明组成,我们要给标签设置属性,那我们就要找到对应的标签,CSS选择器可以帮我们找到我们需要的标签 css选择器有: 标签选择器 类选择器 ID选择器 全局选择器 群组选择器 后代选择器 标签选择器 标签选择器前面我们用过,它是以HTML标签作为选择器 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type&qu

Css选择器定位详解

1.使用 class 属性来定位元素,方法如下: driver.findElement(By.cssSelector("input.login")); 即可以先指定一个 HTML的标签,然后加一个“.”符号,跟上 class 属性的值 2.使用相对ID选择器定位元素,方法如下: WebElement ele = driver.findElement(By.cssSelector("input#username")); 即可以先指定一个 HTML 标签,然后加上一个“

css选择器优化

css选择器优化@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);

DAY44-前端入门-css的三种引用方式以及优先级、样式与长度颜色、常用样式、css选择器

目录 一.css的三种引用方式 行间式 内联式 外联式 二.三种引入的优先级 三.样式与长度颜色 基本样式 长度 颜色 四.常用样式 字体样式 文本样式 背景样式 五.css选择器 基础选择器 基础选择器优先级 组合选择器 组合选择器优先级 属性选择器 一.css的三种引用方式 行间式 1.在标签头部的style 2.属性值是css语法 3.属性值用Key:value形式赋值,value具有单位 4.属性值之间用;隔开 <div style='width:100px;height=100px;b

CSS选择器

CSS选择器有:id选择器.派生选择器 1.id选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. #red {color:red;} #green {color:green;} <p id="red">这个段落是红色.</p> <p id="green">这个段落是绿色.</p> 2.派生选择器 在现代布局中,id 选择器常常用于建立派生

CSS选择器优先级【转】

样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style 有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式. 示例如下: <head>     <style type="text/css&

关于css选择器的一些事 第一章 基本选择器!

关于选择器,好多人小伙伴只用了最基本的几个选择器,感觉这玩意没有啥学的,讲道理,确实也没啥学的.但是,选择器种类掌握的越多,编写代码起来就会越轻松,为啥呢.举个例子吧!先上一串代码和效果,就知道我想表达什么了! 上面一个五列的li,代码如下 <style> *{margin:0;padding: 0;list-style: none} ul{display: flex} li{flex: 1;text-align: center;border-left: 1px solid red} li:n