js一起学10：DOM高级——offsetParent、scrollBottom、焦点事件、image对象和toFixed、表单

阅读更多

一、新的属性操作方式

（1）.

（2）[ ]

（3）getAttribute(属性名)-----获取自定义属性

（4）setAttribute(属性名，属性值)----设置属性

（5）setAttribute配合getAttribute使用

oBtn.setAttribute('index','2');

alert(oBtn.getAttribute('index'));

二、offsetParent

获取定位的父级

offsetTop：元素距离其offsetParent上边框的距离

例子：

 var oDiv3 = document.getElementById('div3');

 var oDiv2 = oDiv3.offsetParent;

 var j3 = oDiv3.offsetTop;  //oDiv3有10px的margin，其有定位的父级oDiv2有10px的padding，所以是20px

 var j2= oDiv2.offsetTop;   //为啥是50px呢？因为oDiv2是绝对定位，所以位置和oDiv1没有关系，所以offsetTop是top的10px加上margin的10px

 alert(j2+j3);

三、scrollBottom=scrollTop+clientHeight

if(top

    显示

}

例：图片延时加载

function getPos(obj){

 var t =0;

 var l =0;

 while(obj){

  t+=obj.offsetTop;

  l+=obj.offsetLeft;

  obj=obj.offsetParent;

 }

 return {top:t,left:l};

}

window.onload=function(){

 var aImg = document.getElementsByTagName('img');

 loadImgs();

 window.onscroll=window.onresize=loadImgs;

 function loadImgs(){

  for(var i=0;i

   var top = getPos(aImg[i]).top;

   var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

   var scrollBottom = scrollTop+document.documentElement.clientHeight;

   if(top

    aImg[i].src=aImg[i].getAttribute('_src');

   }

  }

 };

};

四、获取元素

getElementsByTagName

getElementsByName

getElementsByClassName

children（不是真正的数组，用不了数组的函数）

五、scrollHeight---获取内容的高度

var oDiv = document.getElementById('box');

alert(oDiv.scrollHeight);

 alert(document.body.scrollHeight);

例子：瀑布流

function rnd(n,m){

     return parseInt(n+Math.random()*(m-n));

}

function createLi(){

     var oLi=document.createElement('li');

     oLi.style.background='rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';

     oLi.style.height=rnd(120,350)+'px';

     return oLi;

}

window.onload=function(){

     var aUl=document.getElementsByTagName('ul');

     create();

     function create(){

          for(var i=0;i<20;i++){

               var oLi=createLi();

               var arr=[];

               for(var j=0;j

                    arr.push(aUl[j]);

               }

               arr.sort(function(oUl1,oUl2){

                    return oUl1.offsetHeight-oUl2.offsetHeight;

               });

               arr[0].appendChild(oLi);

          }

     }

     window.onscroll=function(){

          var height=document.body.scrollHeight; //内容高度

          var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

          if(scrollTop>=height-document.documentElement.clientHeight-500){

               setTimeout(function(){

                    create();

               },300);

          }

     }

}

六、 焦点事件

1.  onfocus   获取焦点事件

     onblur     失去焦点

2.  focus()  设置焦点

     blur()     取消焦点

输入框自动获取焦点

window.onload=function(){

    var oInp=document.getElementsByTagName('input')[0];

    var oS=document.getElementsByTagName('span')[0];

    oInp.onfocus=function(){

        oS.style.display='none';

    }

    oInp.onblur=function(){

        if(oInp.value==''){

            oS.style.display='block';

        }

    }

    oS.onclick=function(){

        oS.style.display='none';

        oInp.focus();

    }

}

七 、tofixed 保留几位小数

 alert(0.55555555.toFixed(0));

八 、 image对象

new Image();

onload---当图片加载完成时

onerror---当加载失败时

例子：进度条

window.onload=function(){

    var oDiv1=document.getElementById('div1');

    var oDiv2=document.getElementById('div2');

    var count=0;

    for(var i=0;i<77;i++){

        var oImg=new Image();

        oImg.onerror=function(){

            alert(this.src+'加载失败');

        }

        oImg.onload=function(){

            count++;

            var scale=count/77;

            oDiv2.innerHTML=(scale*100).toFixed(2)+'%';

            oDiv2.style.width=oDIv1.offsetWidth*scale+'px';

            if(count==77){

                alert('加载完成');

            }

        }

        oImg.src=" http://www.zhinengshe.com/works/3525/img/"+i+".jpg";

    }

}

   

九、 表单

1. 把数据提交给服务器

    action 地址       name 名字       submit 提交

    id是给前台用的。name给后台用的。  name可以重复 

    getElementsByName 通过name获取一组元素

2. method----提交方式 

（1）get   数据在url中（ 适合分享 ）  默认的      容量很小   32k       不安全 

post 数据不在url中（无法分享）              容量非常大  1G      相对安全 
http://tieba.baidu.com/home/main?un=%E8%90%8C%E9%A6%85%E5%B0%8F%E6%B1%A4%E5%9C%86&ie=utf-8&fr=pb 

https security--- 安全http协议  （花钱）