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="";

                  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即可。

             全选

          

          

          

           全选

         

           function checkAll()              

                {

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

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

                      for(var  x=0;x

                              {

                                     items[x].checked=node.checked;

                              }

                   }

              有两个全

                        1、可以向里面传this.function checkAll()可以传个对象

                         2、什么也不传可以通过event.srcElement

                         3、可以通过传角标function  checkAll()也传个角标。

7、获取鼠标的坐标，让指定的区域随着鼠标移动获取鼠标坐标  event.x和event.y指定区域随鼠标移动其实就是改变了指定区域的left和投票属性的值。这里需要用到的事件：body对象的onmouseover事件，还需要用到一个css样式，直接定义页面，所以区域都在同一层次，为了对某一区域进行定位，将该区域分离到另一个层次，用到css中的position属性。

　------- android培训、java培训、期待与您交流！ --------