JS文件寫法操做，DOM基本操做

 js文件寫法、規範

// 定義全局變量

var num = 0;//這個是用來記數的。

 

// 頁面加載完成

window.onload = funtion(){

         intVar();//初始化變量

         scrollFun();//滾動監聽

         。。。。

}

 

 

// 定義方法

funtion initVar(){}

funtion scrollFun(){}

 

 

dom操做

dom  操做頁面上的標籤

         js的組成：ECMAscript（核心語法）

                   BOM  瀏覽器對象模型

                            windows  窗口

                            location  地址欄

                            history  歷史記錄

                            document  文檔  html文件

                   DOM  文檔對象模型

<script>

 

 

//打開關閉窗口

         // windows.open("打開文件名";"打開文件位置");

         // windows.close屬性();

 

//修改地址欄

         // location.href;在本頁面跳轉

         // location.href="網頁地址";則跳轉到網頁地址上。

         // location.reload();刷新

         // location.replace();

 

//定時器

         // 延遲執行

         // var setTimeoutObj setTimeout(funtion(){

         //     alert(123);

         // });

         // 間隔執行

         // setInterval(funtion(){

         //     console.log(123);

         // },3000);   以毫秒爲單位。

 

 

 

// 中止定時器

//       clearTimeout(setTimeoutObj);

//       clearTimeout(setin);

//       間隔打印三次中止

         // var intv setInterval(funtion(){

         //     sum++;

         //     console.log(123);

         //     if (sum >= 3) {

         //              clearTimeout(intv);

         //     }

         // },1000);

 

// 動態時鐘

// var  str = "";

// setInterval(funtion(){

//     str = "";

//     var tt = new Date(),

//              y = tt.getFullYear(),

//              M = +tt.getMouth()+ 1 ,

//              d = tt.getDate(),

//              h = tt.getHours(),

//              m = tt.getMinutes(),

//              s = tt.getSecounds();

//     var str = y + '-'+ M + '-' + d + '' + h + ':' + m + ':' + s;

//     document.getElemntsByTagName('div')[0].innerHTML = str;

//     document.write(str);

//     },1000);

 

//滾動監聽

         // var flag = true;

 //    window.onscroll= function(){

 //        //變量t是滾動條滾動時，距離頂部的距離

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

 //        if(t = 100 && flag == true){

 //            flag = false;

 //            alert(123);

 //        }

 //    }

    

// 頁面加載完成。

// 很重要，！將所有頁面加載完成！！！

window.onload = funtion(){   }

dom 文檔對象模型 body ：

什麼時候找 什麼時候操做  找到標籤，操做標籤

         找到標籤：

                   document.getElementById("btn");

                   document.getElementsByName("btn"); 經過name屬性

                   document.getElementsByTagName("btn"); 經過標籤

                   document.getElementsByClassName("btn"); 經過class屬性

 

         瞭解：結合嵌套來找。

         操做js對象

                   內容

                            非表單元素：obj.innerHTML   obj.innerHTML = 123;

                            表單元素： obj.value   obj.value = 123;

                   樣式

                            obj.style.color  obj.style.color = red;

                            這個操做只能操做行內樣式

                            background-color  變成  backgroundColor   去掉「-」 開頭字母大寫

                   

　　　　　屬性 obj
　　　　　　　　obj.setAttribute('class','dd ff');//覆蓋性設置屬性
　　　　　　　　obj.getAttribute('class','dd');//獲取屬性
　　　　　　　　obj.removeAttribute('class');//刪除屬性
　　　　　事件
　　　　　　不一樣地方
　　　　　　　　方式一：
　　　　　　　　onclick 屬性
　　　　　　　　方式二：js中定義
　　　　　　　　obj.onclick = function(){}
　　　　　　　　//寫在在Evt事件內
　　　　　　　　//此處function無實際意義，語法如此。只是說明這裏是個方法調用。
　　　　　　　　方式三：
　　　　　　　　obj.addEventistener('click',f1); //this 寫在行內
　　　　　　　　obj.addEventistener('click',f1);
　　　　　　　　obj.removeEventistener('click');

                   建立刪除

        

// 節點操做

         // var btnDom = document.getElementById("btn").getElementsByTagName('span');

         // var btnsDom = document.getElementsByTagName("btn");

         // console.log(btnDom.firstElementChlid);

 

 

//根據ID 查找控件

         // var dombtn = document.getElementById('btn');

         // alert(dombtn);

 

//根據標籤名，查找

         // var dombtn = document.getElementsByTagName("button");  

         // console.log(dombtn);      //找出來的東西叫集合，相似是數組

         //     for (var i in dombtn) {  //用for in  遍歷的時候全出來了

         //              if (!isNaN(i)){      // 須要判斷非數字的跳過

         //                       continue;

         //              }

         //              console.log(dombtn[i]);

         //     }

 

         // console.log('-----------------');

                 //for(var i =0;i<//btnDom.length;i++){　//這種遍歷不用判斷

                 //console.log(btnDom[i]);

         //     }