- setCss方法
- 目的：设置元素身上的单一的行间样式
- 参数：ele：元素，attr：属性名，value：属性值
- 知识点：
- 核心设置
ele.style[attr]=value;
- 针对特殊的进行处理：1）width等属性，属性值为px，但不添加单位时，也可以设置成功；2）针对透明度的兼容处理，最终效果是，但设置属性名为opacity时，封装好兼容的代码；3）浮动问题，针对不同浏览器进行不同的设置；
<body>
<div id="div1">美好</div>
<script>
var oDiv=document.getElementById("div1");
function setCss(ele, attr, value) {
//1.针对 width height left top right bottom margin(Left|Right..) padding lineHeight fontSize borderWidth 给其添加单位
var reg=/(width|height|left|top|right|bottom|lineHeight|borderWidth|fontSize|((margin|padding)(Left|Right|Top|Bottom)?))/g;
if(reg.test(attr) && !/(auto|%)/.test(value)){
value=parseFloat(value)+"px";
}
//下面代码更简单
/*if(reg.test(attr) && !isNaN(value)){
value=value+"px";
}*/
//2. 针对透明度的兼容处理
if(attr=="opacity"){
ele.style[attr]=value;
ele.style.filter="alpha(opacity="+value*100+")";
return;
}
//3. 针对浮动
if(attr=="float"){
ele.style.styleFloat=value;//兼容IE
ele.style.cssFloat=value;//兼容火狐
return;
}
//核心设置
ele.style[attr]=value;
}
setCss(oDiv,"width","50%");
setCss(oDiv,"lineHeight",200);
setCss(oDiv,"margin",20);
setCss(oDiv,"fontSize",30);
setCss(oDiv,"background","red");
setCss(oDiv,"opacity",0.3);
setCss(oDiv,"float","right");
</script>
</body>
- setGroupCss方法
- 目的：设置一组行间样式
- 参数：ele：元素，opt：对象
<body>
<div id="div1">美好</div>
<script src="utils3.js"></script>
<script>
var oDiv=document.getElementById("div1");
function setGroupCss(ele,opt) {
for(var attr in opt){
utils.setCss(ele,attr,opt[attr]);
}
}
setGroupCss(oDiv,{
width:"50%",
height:100,
backgroundColor:"green",
float:"right"
})
</script>
</body>
- css方法
- 目的：三合一，集获取，设置一个，设置一组三者
- 参数：根据需要添加
- 思路：
- 判断传入的实参，利用arguments，第一个参数ele,第二个参数（a.字符串attr，b.对象opt),第三个参数 属性值；
- 判断条件是传入几个实参，即实参的类型
- 知识点
- 字符串用typeof判断，对象用
{}.toString()==="[object Object]"判断是否为真；
- 代码：
css:function (ele) {
var argTwo=arguments[1];//获取第二个参数
if(typeof argTwo==="string"){
var argThree=arguments[2];//获取第三个参数
if(typeof argThree==="undefined"){
return this.getCss(ele,argTwo);
}else{
this.setCss(ele,argTwo,argThree);
}
}
if(argTwo.toString()==="[object Object]"){
this.setGroupCss(ele,argTwo);
}
}
<body>
<div id="div1">美好</div>
<script src="utils3.js"></script>
<script>
var oDiv=document.getElementById("div1");
utils.css(oDiv,{
width:"50%",
height:100,
backgroundColor:"green",
float:"right"
});
console.log(utils.css(oDiv,"height"));
console.log(utils.css(oDiv,"width"));
utils.css(oDiv,"height",200)
</script>
</body>
- getChildren方法
- 目的：获取容器节点下的所有元素子节点集合，并获取指定tagName的元素集合
- 参数：parent：容器节点，tagName：指定标签名，可传可不传；
- 知识点：
- 获取元素身上的tagName方法：cur.tagName或cur.nodeName，二者获取的都是大写的标签名
-
parent.children，可以获取父级元素下所有的元素子节点，但是在IE8浏览器中，会将注释节点算成元素节点；
- 代码：
getChildren:function (parent, tagName) {
var ary=[];
var aChilds=parent.childNodes;
for(var i=0; i<aChilds.length; i++){
var cur=aChilds[i];
if(cur.nodeType==1){
if(typeof tagName==="undefined"){
ary.push(cur);
}else if(cur.nodeName===tagName.toUpperCase()){
//获取元素身上的tagName方法：cur.tagName或cur.nodeName，二者获取的都是大写的标签名
ary.push(cur);
}
}
}
return ary;
}
<body>
<div id="wrap">
<div></div><!--dd-->
<div></div>
<div></div>
<div></div>
<div></div>
<p></p>
<p></p>
<span></span>
</div>
<script src="utils3.js"></script>
<script>
var oWrap=document.getElementById("wrap");
var achilds=utils.getChildren(oWrap);
console.log(achilds.length);//结果为8；
var achilds1=utils.getChildren(oWrap,"div");
console.log(achilds1.length);//结果为5；
var achilds2=utils.getChildren(oWrap,"span");
console.log(achilds2.length);//结果为1；
</script>
</body>
- prevNode方法，nextNode方法，sibling方法
- preNode方法：获取元素的上一个哥哥元素节点
- nextNode方法：获取元素下一个弟弟元素节点
- sibling方法：获取元素相邻的兄弟元素节点集合
- 知识点：
-
previousElementSibling与nextElementSibling两者在标准浏览器中支持，在IE5-8浏览器中不支持；
- 工具库代码：
//1 元素上一个哥哥元素节点
prevNode:function (ele) {
if(frg){
return ele.previousElementSibling;
}
pre=ele.previousSibling;
while(pre && pre.nodeType !==1){
pre=pre.previousSibling;
}
return pre;
},
//2 元素的下一个弟弟元素节点
nextNode:function (ele) {
if(frg){
return ele.nextElementSibling;
}
var nex=ele.nextSibling;
while(nex && nex.nodeType !==1){
nex=nex.nextSibling;
}
return nex;
},
//3 元素的相邻元素节点（包含哥哥和弟弟元素节点）
sibling:function (ele) {
var pre=this.prevNode(ele);
var next=this.nextNode(ele);
var ary=[];
if(pre) ary.push(pre);
if(next) ary.push(next);
return ary;
}
- prevNodeAll方法，nextNodeAll方法，siblings方法
- preNodeAll方法：获取元素所有的哥哥元素节点集合
- nextNodeAll方法：获取元素所有的弟弟元素节点集合
- siblings方法：获取元素所有的兄弟元素节点集合
- 工具库代码：
//4 获取元素所有的哥哥元素节点集合
prevNodeAll:function (ele){
var ary=[];
var pre=this.prevNode(ele);
while(pre){
//unshift的目的是使元素按着dom顺序插入数组；
ary.unshift(pre);
pre=this.prevNode(pre);
}
return ary;
},
//5 获取元素所有的弟弟元素节点集合
nextNodeAll:function (ele){
var ary=[];
var nex=this.nextNode(ele);
while(nex){
ary.push(nex);
nex=this.nextNode(nex);
}
return ary;
},
//6 元素的所有的相邻元素节点
siblings:function (ele) {
return this.prevNodeAll(ele).concat(this.nextNodeAll(ele));
}
- index方法
- 目的：获取当前元素在容器所有子节点中的位置，即索引值（从0开始）
- 获取：索引值等于当前元素所有哥哥元素的个数
- 工具库代码：
index:function (ele) {
return this.prevNodeAll(ele).length;
}
- firstEleChild方法，lastEleChild方法
- firstEleChild方法：获取父级元素中第一个元素节点
- lastEleChild方法：获取父级元素中最后一个元素节点
- 工具库代码：
//1 firstChild 所有子节点中第一个元素节点
firstEleChild:function (parent) {
return this.getChildren(parent)[0];
},
//2 lastChild 所有子节点中最后一个元素节点
lastEleChild:function (parent) {
var ary=this.getChildren(parent);
return ary[ary.length-1];
},
- appendChild方法，prependChild方法，insertBefore方法，insertAfter方法
- appendChild方法：插入父级元素所有子元素节点的最后一个
- prependChild方法：插入父级元素所有子元素节点的第一个
- insertBefore方法：插入指定子元素节点的前面
- insertAfter方法：插入指定子元素节点的后面
//1 appendChild 插在父级元素所有子元素的后面
appendChild:function (parent,newold){
parent.appendChild(newold);
},
//2 prependChild 插在父级元素所有子元素的前面
prependChild:function (parent,newnode) {
var firstNode=this.firstChild(parent);
if(firstNode){
parent.insertBefore(newnode,firstNode);
}else{
parent.appendChild(newnode);
}
},
//3 insertBefore 插入到指定子元素节点的前面
insertBefore:function (newnode,oldnode) {
oldnode.parentNode.insertBefore(newnode,oldnode);
},
//4 insertAfter 插入到指定子元素节点的后面
insertAfter:function (newnode,oldnode) {
var nexnode=this.nextNode(oldnode);
if(nexnode){
this.insertBefore(newnode,nexnode);
}else{
this.appendChild(oldnode.parent,newold);
}
}
