JavaScript表格、表單

表格操做——table

• 獲取表格——經過標籤或者id獲取
• 獲取表頭——table.tHead
• 獲取表格主題——table.tBodies --> [tbody,tbody]
• 獲取表格底部—— table.tFoot
• 獲取表格行——
  - table.tHead.rows --> [tr,tr]
  - table.tBodies[0].rows --> [tr,tr]
  - table.tFoot.rows --> [tr,tr]
• 獲取單元格——
  - table.tHead.rows[0].cells --> [th,th]
  - table.tBodies[0].rows[0].cells --> [td,td]
  - table.tFoot.rows[0].cells --> [td,td]

表格的屬性操做：

• getAttribute(attr) 獲取標籤屬性(內置,自定義)
• setAttribute(attr,val) 設置標籤屬性(內置,自定義),自定義屬性會顯示在標籤上
• * 以上兩種方式一般用來操做自定屬性
• ele.attr 一般用來設置內屬性,也能夠設置自定義屬性,這種方式設置的自定義屬性不會顯示在標籤上

 

表單操做：

獲取表單元素——form.name

        <form action="" id="form1">
            <input type="text" name="user">
            <input type="text" name="pass">
            <input type="radio" name="sex">
            <input type="radio" name="sex">
        </form>

        js:
            var form1 = document.getElementById('form1');
            console.log(form1.user);  // input
            console.log(form1.pass);  //input
            console.log(form1.sex);   //[input,input]

輸入框的事件及方法

• 得到焦點事件——onfocus
• 失去焦點事件——onblur
• 得到焦點方法——focus（）
• 失去焦點方法——blur（）

表單域事件及方法

• 表單提交事件——onsubmit

              form.onsubmit = function(){
                  return false; //阻止表單提交
              }

• 表單重置事件——onreset

              form.onreset = function(){
                  return false; //阻止表單重置
              }

• 表單提交方法——submit（）
• 表單重置方法——reset（）

 

元素的尺寸和位置

client系列

• clientWidth——寬度＋左右padding
• document.documentElement.clientWidth 可視區寬度
• clientHeight——高度＋上下padding
• document.documentElement.clientHeight 可視區高度
• clientTop——上邊框的寬度
• clientLeft //左邊框寬度

offset系列

• offsetWidth——寬度＋左右padding＋左右border
• offsetHeight ——高度+上下padding + 上下border
• offsetTop —— 距離定位父級頂部的位移
• offsetLeft —— 距離定位父級左邊的位移

 

scroll系列

• scrollWidth——元素實際內容寬度
• scrollHeight //元素實際內容高度
• scrollTop //滾動的元素頂部捲去的高度
• scrollLeft //滾動的元素左邊捲去的寬度

 

頁面捲去高度的兼容問題：

         //獲取頁面捲去高度兼容寫法
            var st = document.documentElement.scrollTop || document.body.scrollTop;  

         //兼容全部瀏覽器的頁面滾動事件寫法
                window.onscroll = function(){
                    ...
                }