前端学习_Series2_01.JavaScript_04

收藏的一些细节

1. document.write(str)方法可以将指定的内容写入到html文件中，可以加入样式等信息。
2. window.onload = function(){}表示在页面加载的时候就加载某个函数。

3. onkeypress=function()可以获取键盘按下的按键的值，并对按下的按键进行判断，比如
   
   这个函数就可以判断按下的值是不是数字。

4. window的propmt(str1，str2)方法可以弹出一个对话框，其中str1就是对话框的标题，str2就是对话框中默认的输入，返回值是true或者false。

5. 做html的步骤：

   1.定义数据封装的标签（就是定义界面）
   2.确定事件源
   3.注册事件
   4.事件处理
   5.要考虑到实用性，可以把所有的js和css封装成文件，然后引用
   6.要注意css中的样式和js中的样式属性是不一定相同的
   

6. 获取事件源对象的两种方法

   1.通过event对象的srcElement属性
   
   2.将事件源对象通过this传入
   

7. 一些简单的例子：
   1.通过按钮实现table中的数据按照行中的某一列的值进行排序，其中js文件如下：

/* 需求：表格中按照年龄的顺序进行排序 思路：1.每个人的信息是一行，那么先将行数据都取出，临时存入到数组中      2.并对数组中的行对象的其中一个单元格中的数据进行排序      3.将排序后的行对象重新添加回表格对象中 * */var b = true;function sortTab() {    var tabNode = document.getElementsByTagName("table")[0];    var trs = tabNode.rows;    var arr = new Array(); //临时容器中存放的都是表格行对象的引用    for (var x = 1; x < trs.length; x++) {        arr[x - 1] = trs[x];    }    sortTable(arr);    var tbdNode = tabNode.childNodes[1];//这里可以打印一下看看是不是需要的节点//  for(var x = 0; x < tbdNode.length; x++){//      alert(tbdNode[x].nodeName);//  }//  alert(tbdNode.nodeName);    if (b) {        for (var x = 0; x < arr.length; x++) {            //alert(arr[x].cells[0].innerText + "......" +arr[x].cells[1].innerText);            tbdNode.appendChild(arr[x]);        }        b = false;    } else {        for (var x = arr.length - 1; x >= 0; x--) {//这里要注意数组的下标是以length-1结尾的            //alert(arr[x].cells[0].innerText + "......" +arr[x].cells[1].innerText);            tbdNode.appendChild(arr[x]);        }        b = true;    }}function sortTable(arr) {    for (var x = 0; x < arr.length; x++) {        for (var y = x + 1; y < arr.length; y++) {            if (parseInt(arr[x].cells[1].innerText) < parseInt(arr[y].cells[1].innerText)) {                var tmp = arr[x];                arr[x] = arr[y];                arr[y] = tmp;            }        }    }}/* 行颜色间隔显示 * */var name;//用来记录tr节点原来的样式function trColor(){    var tabNode = document.getElementsByTagName("table")[0];    var trs = tabNode.rows;    for(var x = 1; x < trs.length; x++){        if(x % 2 == 1){            trs[x].className = "one";        }else{            trs[x].className = "two";        }        trs[x].onmouseover = function(){            name = this.className;            this.className = "over";        }        trs[x].onmouseout = function(){            this.className = name;        }    }}window.onload = trColor;/*function over(trNode){    name = trNode.className;    trNode.className = "over";}function out(trNode){    trNode.className = name;}*/

其中css文件如下：

table {    border: #0066FF 1px solid;    width: 60%;}td,th {    border: #0066FF 1px solid;    text-align: center;}.one{    background-color: #33FFCC;}.two{    background-color: #FFFF66;}.over{    background-color: #00FF00;}

其中HTML代码如下：

2.实现类似css的api文档的效果，即下拉框中选择样式，然后显示样式，代码如下：

3.实现类似电商网站中的对选中商品的金额进行的运算，其中js代码如些：

/*1.获取被选中的checkbox，通过checked属性的状态完成2.获取被选中checkbox的value的金额3.求和4.定义span区域存储总金额//单选和复选这两个组件都有一个属性来表示其选中与否的状态：checked * */function getSum() {    var sum = 0;    var inputNodes = document.getElementsByName("item");    for (var x = 0; x < inputNodes.length; x++) {        if (inputNodes[x].checked == true) {            sum += parseInt(inputNodes[x].value);        }    }    var spanNode = document.getElementsByTagName("span")[0];    var str = sum + "元";    spanNode.innerHTML = str.fontsize(6);}function checkAll(index) { //可以使用角标，也可以使用this或者event.srcElement传入    var inputNodes = document.getElementsByName("item");    for (var x = 0; x < inputNodes.length; x++) {        inputNodes[x].checked = document.getElementsByName("all")[index].checked;    }}

其中HTML代码如下：

4.未完待续