- setCss方法
- 目的：設(shè)置元素身上的單一的行間樣式
- 參數(shù)：ele：元素，attr：屬性名匈庭，value：屬性值
- 知識(shí)點(diǎn)：
- 核心設(shè)置
ele.style[attr]=value;
- 針對(duì)特殊的進(jìn)行處理：1）width等屬性竞阐，屬性值為px坡椒，但不添加單位時(shí)企垦，也可以設(shè)置成功；2）針對(duì)透明度的兼容處理思币，最終效果是，但設(shè)置屬性名為opacity時(shí)羡微，封裝好兼容的代碼谷饿；3）浮動(dòng)問(wèn)題，針對(duì)不同瀏覽器進(jìn)行不同的設(shè)置妈倔；
<body>
<div id="div1">美好</div>
<script>
var oDiv=document.getElementById("div1");
function setCss(ele, attr, value) {
//1.針對(duì) 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";
}
//下面代碼更簡(jiǎn)單
/*if(reg.test(attr) && !isNaN(value)){
value=value+"px";
}*/
//2. 針對(duì)透明度的兼容處理
if(attr=="opacity"){
ele.style[attr]=value;
ele.style.filter="alpha(opacity="+value*100+")";
return;
}
//3. 針對(duì)浮動(dòng)
if(attr=="float"){
ele.style.styleFloat=value;//兼容IE
ele.style.cssFloat=value;//兼容火狐
return;
}
//核心設(shè)置
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方法
- 目的：設(shè)置一組行間樣式
- 參數(shù)：ele：元素博投，opt：對(duì)象
<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方法
- 目的：三合一，集獲取盯蝴，設(shè)置一個(gè)贬堵，設(shè)置一組三者
- 參數(shù)：根據(jù)需要添加
- 思路：
- 判斷傳入的實(shí)參，利用arguments结洼，第一個(gè)參數(shù)ele,第二個(gè)參數(shù)（a.字符串a(chǎn)ttr黎做，b.對(duì)象opt),第三個(gè)參數(shù) 屬性值；
- 判斷條件是傳入幾個(gè)實(shí)參松忍，即實(shí)參的類(lèi)型
- 知識(shí)點(diǎn)
- 字符串用typeof判斷蒸殿，對(duì)象用
{}.toString()==="[object Object]"判斷是否為真；
- 代碼：
css:function (ele) {
var argTwo=arguments[1];//獲取第二個(gè)參數(shù)
if(typeof argTwo==="string"){
var argThree=arguments[2];//獲取第三個(gè)參數(shù)
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方法
- 目的：獲取容器節(jié)點(diǎn)下的所有元素子節(jié)點(diǎn)集合鸣峭，并獲取指定tagName的元素集合
- 參數(shù)：parent：容器節(jié)點(diǎn)宏所，tagName：指定標(biāo)簽名，可傳可不傳摊溶；
- 知識(shí)點(diǎn)：
- 獲取元素身上的tagName方法：cur.tagName或cur.nodeName爬骤，二者獲取的都是大寫(xiě)的標(biāo)簽名
-
parent.children，可以獲取父級(jí)元素下所有的元素子節(jié)點(diǎn)莫换，但是在IE8瀏覽器中霞玄，會(huì)將注釋節(jié)點(diǎn)算成元素節(jié)點(diǎn)；
- 代碼：
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拉岁，二者獲取的都是大寫(xiě)的標(biāo)簽名
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);//結(jié)果為8坷剧；
var achilds1=utils.getChildren(oWrap,"div");
console.log(achilds1.length);//結(jié)果為5；
var achilds2=utils.getChildren(oWrap,"span");
console.log(achilds2.length);//結(jié)果為1喊暖；
</script>
</body>
- prevNode方法惫企，nextNode方法，sibling方法
- preNode方法：獲取元素的上一個(gè)哥哥元素節(jié)點(diǎn)
- nextNode方法：獲取元素下一個(gè)弟弟元素節(jié)點(diǎn)
- sibling方法：獲取元素相鄰的兄弟元素節(jié)點(diǎn)集合
- 知識(shí)點(diǎn)：
-
previousElementSibling與nextElementSibling兩者在標(biāo)準(zhǔn)瀏覽器中支持陵叽，在IE5-8瀏覽器中不支持狞尔；
- 工具庫(kù)代碼：
//1 元素上一個(gè)哥哥元素節(jié)點(diǎn)
prevNode:function (ele) {
if(frg){
return ele.previousElementSibling;
}
pre=ele.previousSibling;
while(pre && pre.nodeType !==1){
pre=pre.previousSibling;
}
return pre;
},
//2 元素的下一個(gè)弟弟元素節(jié)點(diǎn)
nextNode:function (ele) {
if(frg){
return ele.nextElementSibling;
}
var nex=ele.nextSibling;
while(nex && nex.nodeType !==1){
nex=nex.nextSibling;
}
return nex;
},
//3 元素的相鄰元素節(jié)點(diǎn)（包含哥哥和弟弟元素節(jié)點(diǎn)）
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方法：獲取元素所有的哥哥元素節(jié)點(diǎn)集合
- nextNodeAll方法：獲取元素所有的弟弟元素節(jié)點(diǎn)集合
- siblings方法：獲取元素所有的兄弟元素節(jié)點(diǎn)集合
- 工具庫(kù)代碼：
//4 獲取元素所有的哥哥元素節(jié)點(diǎn)集合
prevNodeAll:function (ele){
var ary=[];
var pre=this.prevNode(ele);
while(pre){
//unshift的目的是使元素按著dom順序插入數(shù)組偏序；
ary.unshift(pre);
pre=this.prevNode(pre);
}
return ary;
},
//5 獲取元素所有的弟弟元素節(jié)點(diǎn)集合
nextNodeAll:function (ele){
var ary=[];
var nex=this.nextNode(ele);
while(nex){
ary.push(nex);
nex=this.nextNode(nex);
}
return ary;
},
//6 元素的所有的相鄰元素節(jié)點(diǎn)
siblings:function (ele) {
return this.prevNodeAll(ele).concat(this.nextNodeAll(ele));
}
- index方法
- 目的：獲取當(dāng)前元素在容器所有子節(jié)點(diǎn)中的位置硼婿，即索引值（從0開(kāi)始）
- 獲取：索引值等于當(dāng)前元素所有哥哥元素的個(gè)數(shù)
- 工具庫(kù)代碼：
index:function (ele) {
return this.prevNodeAll(ele).length;
}
- firstEleChild方法禽车，lastEleChild方法
- firstEleChild方法：獲取父級(jí)元素中第一個(gè)元素節(jié)點(diǎn)
- lastEleChild方法：獲取父級(jí)元素中最后一個(gè)元素節(jié)點(diǎn)
- 工具庫(kù)代碼：
//1 firstChild 所有子節(jié)點(diǎn)中第一個(gè)元素節(jié)點(diǎn)
firstEleChild:function (parent) {
return this.getChildren(parent)[0];
},
//2 lastChild 所有子節(jié)點(diǎn)中最后一個(gè)元素節(jié)點(diǎn)
lastEleChild:function (parent) {
var ary=this.getChildren(parent);
return ary[ary.length-1];
},
- appendChild方法寇漫，prependChild方法，insertBefore方法殉摔，insertAfter方法
- appendChild方法：插入父級(jí)元素所有子元素節(jié)點(diǎn)的最后一個(gè)
- prependChild方法：插入父級(jí)元素所有子元素節(jié)點(diǎn)的第一個(gè)
- insertBefore方法：插入指定子元素節(jié)點(diǎn)的前面
- insertAfter方法：插入指定子元素節(jié)點(diǎn)的后面
//1 appendChild 插在父級(jí)元素所有子元素的后面
appendChild:function (parent,newold){
parent.appendChild(newold);
},
//2 prependChild 插在父級(jí)元素所有子元素的前面
prependChild:function (parent,newnode) {
var firstNode=this.firstChild(parent);
if(firstNode){
parent.insertBefore(newnode,firstNode);
}else{
parent.appendChild(newnode);
}
},
//3 insertBefore 插入到指定子元素節(jié)點(diǎn)的前面
insertBefore:function (newnode,oldnode) {
oldnode.parentNode.insertBefore(newnode,oldnode);
},
//4 insertAfter 插入到指定子元素節(jié)點(diǎn)的后面
insertAfter:function (newnode,oldnode) {
var nexnode=this.nextNode(oldnode);
if(nexnode){
this.insertBefore(newnode,nexnode);
}else{
this.appendChild(oldnode.parent,newold);
}
}
