JavaScript的學習筆記

 ------- android培訓java培訓、期待與您交流! --------

 

1、在頁面上通過按鈕創建一個表格

思路:      1、創建一個table節點。document.creatElement("table");

                   2、通過table節點的InserRow()方法創建表格的行爲對象並添加到Rows集合中。

                  3、通過行爲對象的insertcell()方法創建單元格對象並添加到cells集合中。

                   4 、給單元格中添加數據。

                           a、創建一個節點如文本節點,document.creatTextNode("文本內容");通過單元格對象appendChild方法將文本節點添加到單元格的尾部。

                             b、可以通過單元格的innerHTML,添加單元格的元素,tdNode.innerHTML="<img   src='1.jpg'  alt='圖片說明信息'/>";

                  5、建立好表格節點,添加到DOM樹中也就是頁面的指定位置。

2、如何刪除表格的行和列。

思路:          1、刪除行:獲取表格對象,通過表格對象的deleteRow方法,將指定的行索引傳入deleteRow方法中。

                       2、刪除列:表格沒有直接刪除列的方法,要通過刪除每一行中指定的單元格來完成刪除列的動作。獲取所有的行對象,並進行遍歷,通過行對象的deleteCell方法將指定的單元格刪出。

3、對錶格中的數據進行排序。

思路:            1、獲取表格中所有行對象。

                         2、定義臨時存儲將需要進行排序的行對象存入到數組中。

                         3、對數組進行排序,通過比較每一行對象中指定單元格中的數據,如果是整數需要通過ParseInt轉換。

                        4、將排序後的數組通過遍歷,將每一個行對象重新添回表格,通過tbody節點的appendChild方法

                         5、其實排序就是每一行對象的引用取出。

4、表格的行顏色間隔顯示,並在鼠標指定的行上高亮顯示

思路:            1、獲取所有的行對象,將需要間隔顏色顯示的行對象進行動態的className屬性的指定,那麼前提是,先定義好類選擇器。

                         2、爲了完成高亮,需要用到兩個事件,onmouseover(鼠標進入) onmouseout(鼠標移出)

                         3、爲了方便可以在遍歷行對象時,將每一個行對象都進行兩個事件屬性的指定,並通過匿名函數完成該對象的處理。

                         4、高亮的原理就是將鼠標進入時的指定顏色改變,改變前先記錄住原來行對象的樣式,這樣在鼠標離開時,可以講原樣式還原。

                          5、該樣式需要在頁面加載完後直接顯示,所以使用的window.onload事件完成。

5、完成一個與css手冊中一樣的實例

          通過下拉菜單選擇指定樣式屬性的使用效果。

6、表單的組件。

           單選框、複選框。這兩個組件都用一個屬性來表示其選中與否的狀態。checked完成一個對多個複選框進行全選的操作。

思路:將全選那個複選框的checked狀態賦給所有的checkbox即可。

             <input  type ="checkbox" name="all" onclick=''checkAll()/'>全選

           <input    type="checkbox" name="item"/>

           <input  type ="checkbox"  name="item"/>

           <input   type="checkbox"   name="item"/>

           <input  type="checkbox"    name="all"  onclick="checkAll()"/>全選

          <script   type="text/javascript">

           function checkAll()              

                {

                      var node=document.getElementsByName("all")[0];

                       var   items=document.getElemetByName("item");

                      for(var  x=0;x<items.length;x++)

                              {

                                     items[x].checked=node.checked;

                              }

                   }

              </script>有兩個全

                        1、可以向裏面傳this.function checkAll()可以傳個對象

                         2、什麼也不傳可以通過event.srcElement

                         3、可以通過傳角標function  checkAll()也傳個角標。

7、獲取鼠標的座標,讓指定的區域隨着鼠標移動獲取鼠標座標  event.x和event.y指定區域隨鼠標移動其實就是改變了指定區域的left和投票屬性的值。這裏需要用到的事件:body對象的onmouseover事件,還需要用到一個css樣式,直接定義頁面,所以區域都在同一層次,爲了對某一區域進行定位,將該區域分離到另一個層次,用到css中的position屬性。

 ------- android培訓java培訓、期待與您交流! --------

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章