JS的学习

JS完成表格的一个隔行换色

新标签的学习

<thead>
        <tr>
            <th></th>
</tr>
</thead>
    <tbody>
        <tr>
            <td></td>
</tr>
</tbody>

技术分析

确定事件(页面加载事件onload)

获取元素：获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)。

Tbody里面的行数(rows.length)

JS的遍历(for循环)

获取奇数行和偶数行(对遍历中角标对2取余)

设置背景颜色(.style.backgroundColor)

步骤分析

第一步：确定事件(onload)并为其绑定一个函数
第二步：书写函数(获取表格)
第三步：获取tbody里面的行数
第四步：对tbody里面的行进行遍历
第五步：获取奇数行和偶数行(角标对2取余)
第六步：分别对奇数行和偶数行设置背景颜色

代码实现
JS部分：

<script>
    window.onload = function(){
        var tblEle = document.getElementById("tbl");
        //2.获取表格中tbody里面的行数(长度)
        var len = tblEle.tBodies[0].rows.length;
        //alert(len);
        //3.对tbody里面的行进行遍历
        for(var i=0;i<len;i++){
            if(i%2==0){
                //4.对偶数行设置背景颜色
                tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
            }else{
                //5.对奇数行设置背景颜色
                tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
            }
        }
    }
</script>

HTML代码：

给table里面添加一个id=“tbl”,在table里面添加新标签<thead></thead>和<tbody></tbody>

实现一个表格的高亮显示

分析：

    第一步：确定事件(onmouseover和onmouseout)并分别为其绑定一个函数
    第二步：获取鼠标移上去的那行，对其设置背景颜色

JS代码：

<script>
    function changeColor(id,flag){
        if(flag=="over"){
            document.getElementById(id).style.backgroundColor="red";
        }else if(flag=="out"){
            document.getElementById(id).style.backgroundColor="white";
        }
    }
</script>

HTML代码：

<tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">

学过的事件总结

• onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适。
• onclick/ondblclick:鼠标单击和双击事件
• onkeydown/onkeypress：搜索引擎使用较多
• onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。
• onmouseover/onmouseout/onmousemove：购物网站商品详情页。
• onsubmit：表单提交事件 ，有返回值，控制表单是否提交。
• onchange:当用户改变内容的时候使用这个事件(二级联动)

JS完成全选和选不选操作

1.技术分析

确定事件(鼠标单击事件onclick)，事件绑定到编号前面的复选框里面

获取编号前面的复选框的状态(是否选中)

获取复选框：var checkAllEle = document.getElementById(“id”)

获取复选框的状态：checkAllEle.checked?

获取下面所有的复选框：
document.getElementsByName(“name”);

2.步骤分析

第一步：确定事件(onclick)并为其绑定一个函数
第二步：书写函数(获取编号前面的复选框，获取其状态)
第三步：判断编号前面复选框的状态(如果为选中，获取下面所有的复选框，并将其状态置为选中)
第四步：判断编号前面复选框的状态(如果为未选中，获取下面所有的复选框，并将其状态置为未选中)

3.代码实现
JS部分代码：

<script>
    function checkAll(){
        //1.获取编号前面的复选框
        var checkAllEle = document.getElementById("checkAll");
        //2.对编号前面复选框的状态进行判断
        if(checkAllEle.checked==true){
            //3.获取下面所有的复选框
            var checkOnes = document.getElementsByName("checkOne");
            //4.对获取的所有复选框进行遍历
            for(var i=0;i<checkOnes.length;i++){
                //5.拿到每一个复选框，并将其状态置为选中
                checkOnes[i].checked=true;
            }
        }else{
            //6.获取下面所有的复选框
            var checkOnes = document.getElementsByName("checkOne");
            //7.对获取的所有复选框进行遍历
            for(var i=0;i<checkOnes.length;i++){
                //8.拿到每一个复选框，并将其状态置为未选中
                checkOnes[i].checked=false;
            }
        }
    }
</script>

HTML代码：

复选框前面的：
    <th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>

下面所有的复选框：
<td><input type="checkbox" name="checkOne"/></td>

javascript的DOM操作

Document:整个html文件都成为一个document文档
Element:所有的标签都是Element元素
Attribute：标签里面的属性
Text：标签中间夹着的内容为text文本
Node:document、element、attribute、text统称为节点node.

Document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象
getElementById（）
getElementByName（）
getElementByTaqName（）

后面两个方法获取之后需要遍历！

以下两个方法很重要，但是在手册中查不到！
创建文本节点：document.createTextNode()
创建元素节点：document.createElement()

Element对象

我们所认知的html页面中所有的标签都是element元素

element.appendChild()
向元素添加新的子节点，作为最后一个子节点。

element.firstChild
返回元素的首个子节点。

element.getAttribute()
返回元素节点的指定属性值。

element.innerHTML
设置或返回元素的内容。

element.insertBefore()
在指定的已有的子节点之前插入新节点。

element.lastChild
返回元素的最后一个子元素。

element.setAttribute()
把指定属性设置或更改为指定值。

element.removeChild()
从元素中移除子节点。

element.replaceChild()
替换元素中的子节点。

Attribute对象

我们所认知的html页面中所有标签里面的属性都是attribute

实现动态添加城市

1.在页面中使用列表显示一些城市
< ul>
< li>北京< /li>
< li>上海< /li>
< li>广州< /li>
< /ul>
2.分析：

事件(onclick)
获取ul元素节点
创建一个城市的文本节点
创建一个li元素节点
将文本节点添加到li元素节点中去。
使用element里面的方法appendChild()来添加子节点

3.代码：
JS代码

<script>
    window.onload = function(){
        document.getElementById("btn").onclick = function(){
            //1.获取ul元素节点
            var ulEle = document.getElementById("ul1");
            //2.创建城市文本节点
            var textNode = document.createTextNode("深圳");//深圳
            //3.创建li元素节点
            var liEle = document.createElement("li");//<li></li>
            //4.将城市文本节点添加到li元素节点中去
            liEle.appendChild(textNode);//<li>深圳</li>
            //5.将li添加到ul中去
            ulEle.appendChild(liEle);
        }
    }
</script>       

HTML代码

<input type="button" value="添加新城市" id="btn"/>
<ul id="ul1">
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
</ul>

JS完成省市二级联动

1.技术分析

事件(onchange)

使用一个二维数组来存储省份和城市(二维数组的创建？)

获取用户选择的省份(使用方法传参的方式：this.value)

遍历数组(获取省份与用户选择的省份比较，如果相同了，继续遍历该省份下所有的城市)

创建文本节点和元素节点并进行添加操作

createTextNode()
createElement()
appendChild()

2.步骤分析

第一步：确定事件(onchange)并为其绑定一个函数
第二步：创建一个二维数组用于存储省份和城市
第三步：获取用户选择的省份
第四步：遍历二维数组中的省份
第五步：将遍历的省份与用户选择的省份比较
第六步：如果相同，遍历该省份下所有的城市
第七步：创建城市文本节点
第八步：创建option元素节点
第九步：将城市文本节点添加到option元素节点中去
第十步：获取第二个下拉列表，并将option元素节点添加进去
第十一步：每次操作前清空第二个下拉列表的option内容。

3.代码实现
JS代码：

<script>
    //1.创建一个二维数组用于存储省份和城市
    var cities = new Array(3);
    cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
    cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
    cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
    cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");

    function changeCity(val){

        //7.获取第二个下拉列表
        var cityEle = document.getElementById("city");

        //9.清空第二个下拉列表的option内容
        cityEle.options.length=0;

        //2.遍历二维数组中的省份
        for(var i=0;i<cities.length;i++){
            //注意，比较的是角标
            if(val==i){
                //3.遍历用户选择的省份下的城市
                for(var j=0;j<cities[i].length;j++){
                    //alert(cities[i][j]);
                    //4.创建城市的文本节点
                    var textNode = document.createTextNode(cities[i][j]);
                    //5.创建option元素节点
                    var opEle = document.createElement("option");
                    //6.将城市的文本节点添加到option元素节点
                    opEle.appendChild(textNode);
                    //8.将option元素节点添加到第二个下拉列表中去
                    cityEle.appendChild(opEle);
                }
            }
        }
    }
</script>

Html代码：

<select onchange="changeCity(this.value)">
<option>--请选择--</option>
    <option value="0">湖北</option>
    <option value="1">湖南</option>
    <option value="2">河北</option>
    <option value="3">河南</option>
</select>
<select id="city">

</select>

javascript内置对象

JS Array 
JS Boolean 
JS Date 
JS Math 
JS Number 
JS String 
JS RegExp 
JS Functions 
JS Events 

Array对象

Array 对象用于在单个的变量中存储多个值。

创建 Array 对象的语法：
new Array();
new Array(size);
new Array(element0, element0, ..., elementn);

数组的特点：
长度可变！数组的长度=最大角标+1

Boolean对象

Boolean 对象表示两个值："true" 或 "false"。

创建 Boolean 对象的语法：
new Boolean(value); //构造函数
Boolean(value);     //转换函数

如果value 不写，那么默认创建的结果为false

Date对象

Date 对象用于处理日期和时间。

创建 Date 对象的语法：
var myDate=new Date()
注释：Date 对象会自动把当前日期和时间保存为其初始值。

getTime()
返回 1970 年 1 月 1 日至今的毫秒数。
解决浏览器缓存问题

Math和number对象

与java里面的基本一致。

String对象

match()
找到一个或多个正则表达式的匹配。

substr()
从起始索引号提取字符串中指定数目的字符。

substring()
提取字符串中两个指定的索引号之间的字符。

<script>
    var str = "-a-b-c-d-e-f-";
    var str1 = str.substr(2,4);//-b-c
    //alert(str1);

    var str2 = str.substring(2,4);//-b
    alert(str2);
</script>

RegExp对象

正则表达式对象
test
检索字符串中指定的值。返回 true 或 false。

全局函数

decodeURI() 解码某个编码的 URI。 

decodeURIComponent() 解码一个编码的 URI 组件。  

encodeURI() 把字符串编码为 URI。 

encodeURIComponent() 把字符串编码为 URI 组件。 

eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。 

parseFloat() 解析一个字符串并返回一个浮点数。 

parseInt() 解析一个字符串并返回一个整数。 

关于编码和解码的一组方法：

<script>
    var str = "张三";
    //alert(encodeURI(str));//%E5%BC%A0%E4%B8%89
    //alert(encodeURIComponent(str));//%E5%BC%A0%E4%B8%89

    //alert(decodeURI(encodeURI(str)));//张三
    //alert(decodeURIComponent(encodeURIComponent(str)));//张三

    var str1 = "http://www.itheima.cn";
    //alert(encodeURI(str1));//http://www.itheima.cn
    //alert(encodeURIComponent(str1));//http%3A%2F%2Fwww.itheima.cn

    //alert(decodeURI(encodeURI(str1)));//http://www.itheima.cn
    //alert(decodeURIComponent(encodeURIComponent(str1)));//http://www.itheima.cn

    var str2 = "alert('abc')";
    //alert(str2);
    eval(str2);

</script>