JS筆記

  第一章：

         編寫JS流程：

　　　　一、  佈局：HTML和CSS

　　　　二、  樣式：修改頁面元素樣式，div的display樣式

　　　　三、  事件：肯定用戶作什麼操做，onclick(鼠標點擊事件)、onmouseover(鼠標懸停)、onmouseout(鼠標移出)

　　　　四、  編寫JS：在事件中，用JS來修改頁面元素樣式

　　　　五、  原理：響應用戶的操做，對頁面元素進行樣式修改

第二章：

            Javascript基礎：

                    JS代碼的引入：

                           外部鏈入式：

                                   <script type=」text/javascript」 src=」js文件路徑」></script>

                            內部js:

                                     <script>js代碼</script>

                          數據類型：

                                              var a=12;

                                             數值類型number

                                               alert(typeof a);

 

                                               字符串string

                                               a="hello";

                                               alert(typeof a);

 

                                               布爾類型boolean

                                              a=true;

                                               alert(typeof a);

 

                                               函數類型function

                                               a=function(){};

                                               alert(typeof a);

 

                                               對象object

                                               a=document;

                                               alert(typeof a);

 

                                               沒有定義的類型undefined

                                               alert(typeof a);

                  

•   變量名的命名規則：不以數字開頭大小寫字母、數字、下劃線命名；（區分大小寫）；經常使用命名規則：駝峯命名法，首字母小寫後面單詞首字母大寫開頭；如：getDingShiQi
•   變量的轉換：

                               parseInt(值);   將一個值轉換爲Int數據類型

                               parseFloat(值); 將一個值轉換爲float數據類型

 

                                  隱式轉換：

                                                                 Var a=5, b=」5」, c=」2」;

                                                                 先轉換類型，再比較:

                                                                         a==b;

                                                                不轉換類型，直接比較

                                                                           a===b;

                                                                 不轉換類型，+爲鏈接符

                                                                         a+b;                  

                                                                 先轉換類型，再進行運算,+爲運算符

                                                                           a+b;

•     變量的做用域：

　　　　　　一、  全局變量：位於函數體外部的變量，全部函數都可調用與賦值；

　　　　　　二、  局部變量：位於函數體中的變量，僅僅爲其所在函數體中使用，其餘函數定義相同的變量名不會衝突；

 

• 閉包：子函數能夠使用父函數裏定義的函數

       

• 求餘運算符：%                var a=34; var c = a%10;  c爲4；

       

• 判斷語句   Switch 語句：

                語法：

                  switch(值或者變量)

                  {

                   case 值:

                            語句塊；

                            break;

                   case 值:

                            語句塊；

                            break;

                   default:

                            語句塊；

                  }

         判斷switch括號裏面的值與case的值是否相等、相等則執行case 裏的語句塊，遇到break;則結束，不然繼續執行下面的其餘case裏面的語句塊直至遇到break; 跳出。若判斷case裏面沒有相符合的，則執行default 下的語句塊，這裏的default至關於else

 

• break,continue的區別： 通常在循環體中使用這兩；break;跳出所有循環；continue; 跳出本次循環
• 真假：爲boolean數據類型；

　　　　一、  非0的數字爲真，0爲假；

　　　　二、  非空字符串爲真，空字符串爲假；

　　　　三、  非空對象爲真，空對象爲假；

　　　　四、  Undefined爲假；

• 可變參arguments 調用函數時傳遞多個參數造成一個arguments數組；能夠直接用下標調用

         它，如arguments[0];

• 提取非行間樣式[只能用id的方式]：currentStyle爲ie裏面的

                                               語法：document.getElementById("div1").currentStyle.width;

                                     getComputedStyle 爲firefox裏面的

                                               語法：window.getComputedStyle(oBj,null).width;

• 數組基礎：

                   聲明一個數組：var Arr = new Array();

                   聲明並初始化：var Arr = [1,2,3,4,5];

                            Arr.push();        在數組尾部添加一個或者多個元素，並返回一個新的長度；

                            Arr.pop();          在數組尾部刪除並返回最後一個元素；

 

                            Arr.unshift();    在數組頭部添加一個或者多個元素，並返回一個新的長度；

                            Arr.shift();         在數組頭部刪除並返回第一個元素；

                          

                            Arr.sort();           對數組進行排序；按照默認順序排序；

                            Arr.join(「,」);      在數組原有元素間插入元素」,」

                            Arr.concat(Brr);        鏈接Arr和Brr數組返回新的數組

第三章：

              定時器：var 定時器名=setInterval(tick, 1000);      設置定時器，每隔1000毫秒調用tick函數構建圖片的src屬性值

                                   Var 定時器名=setTimeout(tick, 1000);  設置定時器，隔1000毫秒調用tick函數構建圖片的src屬性值

              清除定時器：

                                   clearTimeout(定時器名);

                                   clearInterval(定時器名);

第四章：

      offsetLeft();   語法：oBj.offsetLeft(); 返回當前元素距離父元素左邊緣的距離；

第五章:

              InnerHTML       語法：oBj.innerHTML;     innerHTML具備雙向功能，經過它能夠獲取標籤元素內容與設置標籤元素內容；

 

• 子節點和父節點：

　　　　　　childNodes獲取子節點   childNodes返回的是子節點的集合，是一個數組的格式。他會把換行和空格也當成是節點信息。childNodes.length獲取長度

           利用children來獲取子元素是最方便的，他也會返回出一個數組。對其獲取子元素的訪問只需按數組的訪問形式便可。

 

           　　　　firstChild來獲取第一個子元素

           　　　　使用firstElementChild來獲取第一個子元素的時候，會獲取到父元素第一個子元素的節點 這樣就能直接顯示出來文本信息了。他並不會匹配換行和空格信息。

 

     　　　　 parentNode獲取父節點

　　　　parentElement和parentNode同樣，只是parentElement是ie的標準。

       　　　　offsetParent獲取全部父節點

　　　　其實這個是於位置有關的上下級 ，直接可以獲取到全部父親節點， 這個對應的值是body下的全部節點信息。