JS实例

吸顶条

原理：滚动高度 >= div距离上面的绝对距离 时将div固定定位 TOP = 滚动高度。
<b>代码</b>

<script>
  function (obj) {
    var l = 0;
    var t = 0;
    while (obj) {
      l += obj.offsetLeft;
      t + = obj.offsetTop;
      obj = obj.offsetParent;
    }
  }

  window.onload = function () {
    var oDiv = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    // 求出DIV1 距离上面的一个绝对位置
    var iDivT = getPos(oDiv).top;
    window.onscroll = function () {
      //滚动高度
      var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
      //滚动高度大于等于DIV1距离上面的绝对距离的时候就定位
      if (scrollT >= iDivT) {
        //判断是否IE6
        if (window.navigator.userAgent.indexOf('MSIE 6.0') ！= -1 ) {
            oDiv.style.position = 'absolute';
            oDiv.style.top = scrollT + 'px';
         } else {
            oDiv.style.position = 'fixed';
            oDiv.style.top = 0;
         }  
        oDiv.style.left = '0';
       //让DIV2显示占Div1 的位置；
        oDiv2.style.display = 'block';
      } else {
         oDiv.style.postion = '';
         oDiv2.style.display ='none';
      }
    };
  }

</script>

关于添加元素：

a）.父级.appendChild();
父级.insertBefore();
b ). innerHTML
会出现的问题：会把之前元素身上的事件给清空了
原因：它会先清空所有的，在添加

文本提示框：

文本框  -> oT
获取焦点
oT.onfocus -> 获取焦点的时候

失去焦点
oT.onblur -> 失去焦点的时候

强制获取焦点
oT.focus();

强制失去焦点
oT.blur();

预加载：

偷偷摸摸加载
用户体验好一点

<b>创建图片：</b>
a). createElement('img');
b). new Image();

<b>图片身上的事件：</b>
当加载成功的时候
oImg.onload
当加载失败的时候
oImg.onerror

进度条比例：
n/10 -> 比例
变化的数/定死的数

<b>保留两位小数：</b>
toFixed(保留小数的位数);
自动进位(四舍五入)

表单：（form）

给后台提交数据

想要提交数据：
form必须要有的：
1、action：提交的地址
2、name： 数据名称
3、value： 数据

method 提交方式：默认get
get: 不安全 容量32K 有缓存
post: 相对安全 容量1G 没有缓存

缓存（cache）：
对于浏览器来说一个地址只会访问一次

get好处：分享、收藏

关于父级

parentNode -> 结构上的父级
祖宗（最大父级）：document

offsetParent -> 定位上的父级
祖宗（最大父级）：body