第二十八课：JavaScript补充-CSDN博客

本文链接：https://blog.csdn.net/xinyoulinxi0512/article/details/108247468

全局函数

parseInt()：返回一个整数
parseFloat()：返回一个浮点数
isNaN()：判断不是数字
eval：将字符串作为脚本运行
decodeURI()：解码
encodeURI：编码
下面展示一些 内联代码片。

<script>
    console.log(isNaN("aaa"));//判断不是数字
    eval("console.log(1+2)");//将字符串作为脚本运行
    var encodeURI = encodeURI("/JS入门/全局函数.html");//编码
    console.log(encodeURI);
    var decodeURI = decodeURI(encodeURI);//解码
    console.log(decodeURI)
</script>

获得元素

document.getElementById(id); --> 只能获得一个
getElementsByName(name属性的值) --> 获得多个
getElementsByTagName(tr)
getElementsByClassName(class)

动态添加事件

JS获得元素.onclick = function() {}

<script>
    onload = function () {
        //var table = document.getElementById("table");
        var table1 = document.getElementsByClassName("c");
        //var trs = table.tBodies[0].rows;
        for (var i = 0;i < table1.length;i++){
            if(i % 2 == 0){
                table1[i].style.backgroundColor = "blue";
            }else{
                table1[i].style.backgroundColor = "red";
            }
            table1[i].onmouseover = function () {
                this.setAttribute("color",this.style.backgroundColor)
                this.style.backgroundColor = "white";

            }
            table1[i].onmouseout = function () {
                var color = this.getAttribute("color")
                this.style.backgroundColor = color;
            }
        }
    }
</script>

案例一：表格的隔行换色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>换行改色</title>
    <script>
        onload = function () {
            //var table = document.getElementById("table");
            var table1 = document.getElementsByClassName("c");
            //var trs = table.tBodies[0].rows;
            for (var i = 0;i < table1.length;i++){
                if(i % 2 == 0){
                    table1[i].style.backgroundColor = "blue";
                }else{
                    table1[i].style.backgroundColor = "red";
                }
            }
        }
    </script>
</head>
<body>
    <table border="1" cellspacing="0" align="centre" id="table">
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
            </tr>
        </thead>
        <tbody>
            <tr class="c">
                <td>q</td>
                <td>w</td>
                <td>e</td>
                <td>r</td>
            </tr>
            <tr class="c">
                <td>q</td>
                <td>w</td>
                <td>e</td>
                <td>r</td>
            </tr>
            <tr class="c">
                <td>q</td>
                <td>w</td>
                <td>e</td>
                <td>r</td>
            </tr>
            <tr class="c"   >
                <td>q</td>
                <td>w</td>
                <td>e</td>
                <td>r</td>
            </tr>
            <tr class="c">
                <td>q</td>
                <td>w</td>
                <td>e</td>
                <td>r</td>
            </tr>
        </tbody>
    </table>
</body>
</html>>

案例二：全选按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选</title>
    <script>
        function checkAll(obj){
            var flag = obj.checked;//获得全选按钮的选中状态
            var inputs = document.getElementsByTagName("input");//获得其他的按钮
            for (var i = 0;i < inputs.length;i++){
                inputs[i].checked = flag;//设置选中状态
            }
        }
    </script>
</head>
<body>
<table border="1" cellspacing="0" align="center"  width="800px">
    <thead>
    <tr>
        <th><input type="checkbox" onclick="checkAll(this)"id="table"></th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    </thead>
    <tbody>
    <tr class="c">
        <td><input type="checkbox"></td>
        <td>q</td>
        <td>w</td>
        <td>e</td>
        <td>r</td>
    </tr>
    <tr class="c">
        <td><input type="checkbox"></td>
        <td>q</td>
        <td>w</td>
        <td>e</td>
        <td>r</td>
    </tr>
    <tr class="c">
        <td><input type="checkbox"></td>
        <td>q</td>
        <td>w</td>
        <td>e</td>
        <td>r</td>
    </tr>
    <tr class="c">
        <td><input type="checkbox"></td>
        <td>q</td>
        <td>w</td>
        <td>e</td>
        <td>r</td>
    </tr>
    <tr class="c">
        <td><input type="checkbox"></td>
        <td>q</td>
        <td>w</td>
        <td>e</td>
        <td>r</td>
    </tr>
    </tbody>
</table>
</body>
</html>

案例三：省市二级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市二级联动</title>
    <script>
        var city = [
            ["直辖市"],
            ["杭州","金华","衢州","绍兴","宁波"],
            ["福州", "厦门"],
            ["苏州","南京"]
        ];//创建数组
        function citySelect(obj) {
            var allCity = city[obj.value];//将省份与城市连接起来存进allCity中
            var citychose = document.getElementById("cityId");//获得城市对象
            citychose.innerHTML = "<option>请选择城市</option>";//刷新
            for (var i = 0; i < allCity.length; i++){
                var option = document.createElement("option");
                option.innerHTML = allCity[i];
                citychose.appendChild(option);
            }
        }

    </script>
</head>
<body>
<select onchange="citySelect(this)">
    <option value="">请选择省</option>
    <option value="0">北京</option>
    <option value="1">浙江省</option>
    <option value="2">福建省</option>
    <option value="3">江苏省</option>
</select>
<select id="cityId">
    <option>请选择城市</option>
</select>
</body>
</html>