JavaScript案例

1、案例一：在末尾添加节点(*****)
2、案例二：动态显示时间
3、案例三：全选练习
4、案例四：下拉列表左右选择
5、案例五：省市联动
6、案例六：动态生成表格
============================================

1、案例一：在末尾添加节点(*****)
    ** 创建标签 createElement方法
    ** 创建文本 createTextNode方法
    ** 把文本添加到标签下面 appendChild方法（剪切粘贴效果）

2、案例二：动态显示时间
    * 得到当前的时间
        var date = new Date();  //得到不是常规的格式
        var d1 = date.toLocaleString(); //格式化
    * 需要让页面每一秒获取时间
        setInterval方法 定时器
    * 显示到页面上
        每一秒向div里面写一次时间
    * 使用innerHTML属性
    * 代码
        function getD1() {
            //当前时间
            var date = new Date();
            //格式化
            var d1 = date.toLocaleString();
            //获取div
            var div1 = document.getElementById("times");
            div1.innerHTML = d1;
        }
        //使用定时器实现每一秒写一次时间
        setInterval("getD1();",1000);
3、案例三：全选练习
    ** 使用复选框上面一个属性判断是否选中
        - checked属性
        - checked=true：选中
        - checked=false：不选中
    * 创建一个页面
    ** 复选框和按钮
    - 四个复选框表示爱好
    - 还有一个复选框操作 全选和选不选，也有一个事件

    ** 三个按钮，分别有事件
        - 全选
        - 全不选
        - 反选
    * 全选操作
        步骤：
        /*
            1、获取要操作的复选框
                - 使用getElementsByName()
            2、返回是数组，
                - 属性 checked判断复选框是否选中
                    checked = true; //表示选中
                    checked = false;//表示不选中
                - 遍历数组，得到的是每一个checkbox
            * 把每一个checkbox属性checked=true
        */
    * 全不选操作
        步骤
        /*
            1、获取到要操作的复选框
            2、返回的是数组，遍历数组
            3、得到每一个复选框
            4、设置复选框的属性 checked=false
        */
    * 反选操作
        步骤
        /*
            1、获取到要操作的复选框
            2、返回数组，遍历数组
            3、得到每一个复选框
            4、判断当前的复选框是选中还是不选中
                - if(love1.checked == true) {}
            5、如果选中，属性checked设置成false，否则，设置成true
        */
    * 使用复选框实现全选和全不选
        步骤
        /*
            1、得到上面那个复选框
                - 通过id获取到
            2、判断这个复选框是否是选中
                - if条件，checked==true
            3、如果是选中，下面是全选
            4、如果不是选中，下面是全不选
        */

4、案例四：下拉列表左右选择
    * 下拉选择框
    <select>
        <option>111</option>
        <option>111</option>
    </select>
    * 创建一个页面
    ** 两个下拉选择框
        - 设置属性 multiple属性，multiple="multiple" 表示展示全部下拉框内容
    ** 四个按钮，有事件
    * 选中添加到右边
        步骤
        /*
            1、获取select1里面的option
                - getElementsByTagName()返回是数组
                - 遍历数组，得到每一个option
            2、判断option是否被选中
                - 属性 selected，判断是否被选中
                ** selected= true: 选中
                ** selected= false：没有选择
            3、如果是选中，把选择的添加到右边去
            4、得到select2
            5、添加选择的部分
                - appendChild方法
                    （注意在添加的过程中appendChild方法是剪切效果，选中的数组长度会发生变化，解决办法：每次只取第一个数据即可）
        */
    * 全部添加到右边
        步骤
        /*
            1、获取第一个select下面的option对象
            2、返回数组，遍历数组
            3、得到每一个option对象
            4、得到select2
            5、添加到select2下面
                - appendChild方法
        */
    * 选中添加到左边
        步骤
        /*
            1、获取select2里面的option对象
            2、返回是数组，遍历数组
            3、得到每一个option对象
            4、判断option是否被选中
                - if条件 属性 selected == true：选择
            5、获取select1
            6、添加到select1里面
                - 使用appendChild方法
        */
    * 全部添加到左边
        步骤
        /*
            1、获取select2里面的option对象
            2、返回是数组，遍历数组
            3、得到每一个option对象
            4、获取到select1
            5、添加到select1里面
            - 使用appendChild方法
        */
5、案例五：省市联动
    * 创建一个页面，有两个下拉选择框
    * 在第一个下拉框里面有一个事件 ：改变事件 onchange事件
        - 方法add1(this.value);表示当前改变的option里面的value值
    * 创建一个二维数组，存储数据
    * 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市
    /*
        1、遍历二维数组
        2、得到也是一个数组（国家对应关系）
        3、拿到数组中的第一个值和传递过来的值做比较
        4、如果相同，获取到第一个值后面的元素
        5、得到city的select
        6、添加过去（使用）appendChild方法
        - 创建option（三步）
    */
注意：
    由于每次都要向city里面添加option
    第二次添加，会追加。
        * 每次添加之前，先清空一下city下的所有option节点！
6、案例六：动态生成表格
    *创建一个页面：两个输入框和一个按钮
    *代码和步骤
    /*
        1、得到输入的行和列的值
        2、生成表格
            ** 循环行
            ** 在行里面循环单元格
        3、显示到页面上
            - 把表格的代码设置到div里面
            - 使用innerHTML属性
    */
    //获取输入的行和列
    var h = document.getElementById("h").value;
    var l = document.getElementById("l").value;
    //把表格代码放到一个变量里面
    var tab = "<table border='1' bordercolor='blue'>";
    //循环行
    for(var i=1;i<=h;i++) {
        tab += "<tr>";
        //循环列
        for(var j=1;j<=l;j++) {
            tab += "<td>aaaaaaa</td>"
        }
        tab += "</tr>";
    }
    tab += "</table>";
    //alert(tab);
    //得到div标签
    var divv = document.getElementById("divv");
    //把table的代码设置到div里面去
    divv.innerHTML = tab;

    或者
        <script type="text/javascript">
            var table = document.createElement("table");
            table.border='1' ;
            table.style.borderColor='blue';

            for(var i=1;i<=5;i++) {
                var tr = document.createElement("tr");
                for(var j=1;j<=5;j++) {
                    var td = document.createElement("td");
                    var text = document.createTextNode("aaaaaaa");
                    td.setAttribute("name","hello");
                    td.setAttribute("id","id"+i+j);
                    td.setAttribute("onclick","fun(this);");
                    td.appendChild(text);
                    tr.appendChild(td);
                }
                table.appendChild(tr);
            }
            var mytable2 = document.getElementById("mytable2");
            mytable2.appendChild(table);

            function fun(e){
                alert(e.innerHTML);
            }
        </script>