您的位置: 首页  >  IT文章  >  js一行学10：DOM高级——offsetParent、scrollBottom、焦点事件、image对象和toFixed、表单

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

分类: IT文章 • 2024-04-20 11:36:02
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上边框的距离

例子：

<style>

*{margin:0; padding:0;}

#div1{width:500px; height:400px; background:#ccc; margin:10px; padding:10px;}

#div2{width:400px; height:300px; background:yellow; margin:10px;padding:10px; position:absolute; top:40px; left:40px;}

#div3{width:300px; height:200px; background:red; margin:10px;}

</style>

 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<scrollBottom){
    显示
}

例：图片延时加载

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<aImg.length;i++){

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

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

   var scrollBottom = scrollTop+document.documentElement.clientHeight;

   if(top<scrollBottom){

    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<aUl.length;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";
    }
}
<div id="div1">
    </div id="div2"></div>
</div。
九、表单
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协议 （花钱）

相关推荐