JavaScript（2）

最新推荐文章于 2024-07-15 23:20:19 发布

cugzyc

最新推荐文章于 2024-07-15 23:20:19 发布

阅读量207

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41333844/article/details/103333479

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

DOM

注意JS代码在HTML中的位置，会影响执行的顺序。

通过id获取元素对象

获取标签对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS</title>
</head>
<body>
    <img src="#" id = 'light'>
    <h1 id = "title">我是hangsir</h1>
    <script>
        var light = document.getElementById("light");
        alert("我要换图片了！")
        light.src = "#";
        var title = document.getElementById("title");
        alert("我要变身了！")
        title.innerHTML = "我是库里";
    </script>
</body>
</html>

事件

<img src="#" id = 'light' onclick="alert('我被点了')">

<head>
    <meta charset="UTF-8">
    <title>JS</title>
    <script>
        function f() {
            alert("我被点了");
            alert("我又被点了");
        }
    </script>
</head>
<body>
    <img src="#" id = 'light' onclick="f();">

获取元素对象，指定事件属性，设置函数

电灯开关案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
    <script>
        function solve(){
            var elementById = document.getElementById("lightSwitch");
            if(elementById.src.match("off")){
                elementById.src = "./images/pic_bulbon.gif";
            }else {
                elementById.src = "./images/pic_bulboff.gif";
            }
        }
    </script>
</head>
<body>
    <img src="./images/pic_bulboff.gif" onclick="solve();" id="lightSwitch">
</body>
</html>

BOM

窗口对象

弹出方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出方法</title>
    <script>
        alert("你好啊");
        window.alert("你好哇");
        var flag = window.confirm("你确定要退出吗？");
        if(flag){
            alert("欢迎下次光临");
        }else {
            alert("手别抖了……");
        }
        var userName = window.prompt("请输入用户名");
        alert(userName);
    </script>
</head>
<body>

</body>
</html>

打开关闭方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打开关闭</title>
    <script>
    </script>

</head>
<body>
    <input type="button" value="打开新窗口" id="new_windows">
    <input type="button" value="关闭刚才打开的新窗口" id="close_windows">
    <script>
        var elementById = document.getElementById("new_windows");
        // 错误写法
        // elementById.onclick = open("https://www.baidu.com");
        // 注意js代码的位置要在标签的后面
        var newWindows;
        elementById.onclick = function (){
            newWindows = open("https://www.baidu.com");
        }

        var elementById1 = document.getElementById("close_windows");
        elementById1.onclick = function () {
            newWindows.close();
        }


    </script>
</body>
</html>

定时器方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
    <script>
        function func() {
            alert("boom~~");
        }
        //一次性计时器 下面两种使用方法等效
        setTimeout(func,3000);
        var id = setTimeout("func();",3000);
        // 取消这个一次性计时器
        clearTimeout(id);
        // 循环计时器
        var id2 = setInterval(func,2000);
        // 取消这个循环计时器
        clearInterval(id2);
    </script>
</head>
<body>
</body>
</html>

轮播图案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
    <img src="./images/pic_bulboff.gif" id="light">
    <script type="text/javascript">
        // 0 1 0 1 0 1 0 1
        var pic = document.getElementById("light");
        var arr = ['./images/pic_bulbon.gif','./images/pic_bulboff.gif'];
        var len = arr.length;//1
        // document.write(len+"<br>");//2
        var i = 0;
        // 两个函数的效果一样，都是实现数组的循环
        // function func2(){
        //     pic.src = arr[i];
        //     i++;
        //     if(i == len){ // 注意是len，不是len-1
        //         i=0;
        //     }
        //
        // }

        function func2(){
            pic.src = arr[i%len];
            i++;
        }
        setInterval(func2,1000);
    </script>
</body>
</html>

其他BOM对象

// window 可以省略
var his = window.history;
var his2 = history;

var ele = window.document.getElementById("");
var ele2 = document.getElementById();

Location对象

地址栏对象

reload方法与href属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>刷新</title>
</head>
<body>
    <input type="button" id="button1" value="刷新">
    <input type="button" id="button2" value="百度">
    <script>
        var ele1 = document.getElementById("button1");
        function func1() {
            location.reload();
        }
        ele1.onclick = func1;

        var href = location.href;
        // alert(href);

        var ele2 = document.getElementById("button2");
        ele2.onclick = function () {
            location.href = "https://www.baidu.com";
        }
    </script>
</body>
</html>

自动跳转首页案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跳转首页</title>
    <style>
        span{
            color: red;
        }
        p{
            text-align: center;
        }
    </style>
    <script>
        var secend = 3;
        var flag = confirm("三秒后跳转百度是否立即跳转？");
        if(flag){
            location.href = "https://www.baidu.com";
        }else{
            document.write("<p><span id='time'>3</span>秒后跳转……</p>");
            setInterval(func2,1000);
        }
        function func2(){
            var ele1 = document.getElementById("time");
            ele1.innerHTML = secend--;
            if(secend <= 0){
                location.href = "https://www.baidu.com";
            }
        }

    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跳转首页</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }
    </style>

</head>
<body>
    <p><span id="time">5</span>秒后跳转首页</p>
    <script>
        var second = 5;
        function func() {
            var time = document.getElementById("time");
            second--;
            if(second<=0){
                location.href = "https://www.baidu.com";
            }
            time.innerHTML = second+"";
        }
        setInterval(func,1000);
    </script>

</body>
</html>

History对象

一个属性，三个方法

核心DOM模型

DOM：文档对象模型

当HTML文档进入浏览器的内存中后，会被解析成树形结构

学习内容

核心DOM模型中的Document对象

获取Element对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM_Document</title>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="div1"></div>
    <input type="text" name="username">
<script>
    var divs = document.getElementsByTagName("div");
    var div_class = document.getElementsByClassName("div1");
    var div_name = document.getElementsByName("username");
    alert(div_class.length);//1
    alert(divs.length);//5
    alert(div_name.length);//1
</script>
</body>
</html>

创建其他DOM对象

var htmlTableElement = document.createElement("table");
alert(htmlTableElement);

核心DOM模型中的Element对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM_Element</title>
</head>
<body>
    <a>点击跳转百度</a>
    <input type="button" id="btn_set" value="设置超链接">
    <input type="button" id="btn_remove" value="删除超链接">
<script>
<!--    匿名函数    -->
    var elem_a = document.getElementsByTagName("a")[0];
    document.getElementById("btn_set").onclick = function(){
        elem_a.setAttribute("href","https://www.baidu.com");
    }


    document.getElementById("btn_remove").onclick = function(){
        elem_a.removeAttribute("href","https://www.baidu.com");
    }
</script>
</body>
</html>

核心DOM模型中的Node对象

3个方法，1个属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM_Node</title>
    <style>
        div{
            color: red;
            border: 2px solid;
        }
        #div1{
            width: 100px;
            height: 100px;
        }
        #div2{
            width: 50px;
            height: 50px;
        }
        #div3{
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">

        </div>
    </div>
    <a href="javascript:void(0);" id="del">删除子节点</a>
    <a href="javascript:void(0);" id="add">添加子节点</a>
<script>

    document.getElementById("del").onclick = function(){
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.removeChild(div2);
    }

    document.getElementById("add").onclick = function(){
        var div1 = document.getElementById("div1");
        var div3 = document.createElement("div");
        div3.setAttribute("id","div3");
        div1.appendChild(div3);
    }

</script>
</body>
</html>

动态表格案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        .div_main{
            text-align: center;
        }
    </style>
    <script>
        function delTr(obj) {
            // alert(obj);
            var table = obj.parentNode.parentNode.parentNode;
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);

        }
    </script>
</head>
<body>
    <div class="div_main">
        <input type="text" placeholder="输入标号" id="number">
        <input type="text" placeholder="输入姓名" id="name">
        <input type="text" placeholder="输入性别" id="gend">
        <input type="radio" id="male" name="gender" value="0"><label for="male">男</label>
        <input type="radio" id="female" name="gender" value="1"><label for="female">女</label>

        <input type="button" id="btn" value="添加">
    </div>

    <table align="center" id="table_main" border="1" width=50%>
        <caption>学生信息表</caption>
        <tr align="center" bgcolor="#ffe4c4">
            <th>姓名</th>
            <th>学号</th>
            <th>班级</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>12345</td>
            <td>12345</td>
            <td>计算机1班</td>
            <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
        </tr>
        <tr>
            <td>12345</td>
            <td>12345</td>
            <td>计算机1班</td>
            <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
        </tr>
    </table>
<script>


    var btn = document.getElementById("btn");
    btn.onclick = function () {

        var list_radio = document.getElementsByName("gender");
        for(var i = 0;i < list_radio.length; i++){
            if(list_radio[i].checked){
                alert(list_radio[i].value);
                break;
            }
        }

        var text1 = document.getElementById("number").value;
        var text2 = document.getElementById("name").value;
        var text3 = document.getElementById("gend").value;
        number_td = document.createElement("td");
        // number_td.innerHTML = text1;
        // 注意是文本节点
        var text_id = document.createTextNode(text1);



        number_td.appendChild(text_id);
        name_td = document.createElement("td");
        // name_td.innerHTML = text2;

        var text_name = document.createTextNode(text2);
        name_td.appendChild(text_name);
        gender_td = document.createElement("td");
        // gender_td.innerHTML = text3;
        var text_gender = document.createTextNode(text3);
        gender_td.appendChild(text_gender);
        var operator_td = document.createElement("td");
        var ele_new_a = document.createElement("a");
        ele_new_a.setAttribute("href","javascript:void(0);");
        ele_new_a.setAttribute("onclick","delTr(this);");


        ele_new_a.appendChild(document.createTextNode("删除"));

        // ele_new_a.innerHTML = "删除";
        operator_td.appendChild(ele_new_a);
        var new_tr = document.createElement("tr");
        new_tr.appendChild(number_td);
        new_tr.appendChild(name_td);
        new_tr.appendChild(gender_td);
        new_tr.appendChild(operator_td);
        var ele_table = document.getElementById("table_main");
        ele_table.appendChild(new_tr);
    }
</script>

</body>
</html>

HTML DOM 模型

标签体的设置和获取、使用html元素对象的属性

var div1 = document.getElementsByTagName("div")[0];
    div1.innerHTML = "<input type='text'>";
    div1.innerHTML += "<input type='text'>";

使用innerHTML优化动态表格案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTMLDOM</title>
    <style>
        .div_main{
            text-align: center;
        }
    </style>
    <script>
        function delTr(obj) {
            // alert(obj);
            var table = obj.parentNode.parentNode.parentNode;
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
        }
    </script>
</head>
<body>
<div class="div_main">
    <input type="text" placeholder="输入标号" id="number">
    <input type="text" placeholder="输入姓名" id="name">
    <input type="text" placeholder="输入性别" id="gend">
    <input type="radio" id="male" name="gender" value="0"><label for="male">男</label>
    <input type="radio" id="female" name="gender" value="1"><label for="female">女</label>

    <input type="button" id="btn" value="添加">
</div>

<table align="center" id="table_main" border="1" width=50%>
    <caption>学生信息表</caption>
    <tr align="center" bgcolor="#ffe4c4">
        <th>姓名</th>
        <th>学号</th>
        <th>班级</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>12345</td>
        <td>12345</td>
        <td>计算机1班</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
</table>
<script>

//    var div1 = document.getElementsByTagName("div")[0];
//    div1.innerHTML = "<input type='text'>";
//    div1.innerHTML += "<input type='text'>";
//

    var btn = document.getElementById("btn");
    btn.onclick = function () {
        var text1 = document.getElementById("number").value;
        var text2 = document.getElementById("name").value;
        var text3 = document.getElementById("gend").value;

        var table = document.getElementById("table_main");
        table.innerHTML += "<tr>\n" +
            "        <td>"+text1+"</td>\n" +
            "        <td>"+text2+"</td>\n" +
            "        <td>"+text3+"</td>\n" +
            "        <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\">删除</a></td>\n" +
            "    </tr>"

    }
</script>

</body>
</html>

控制元素样式

DOM——事件

第二种注意

表格全选案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        .out{
            background-color: white;
        }
        .over{
            background-color: pink;
        }
        #div_button{
            text-align: center;
        }

    </style>
    <script>
        function delTr(obj) {
            // alert(obj);
            var table = obj.parentNode.parentNode.parentNode;
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
        }


        window.onload = function () {
            document.getElementById("selectAll").onclick = function () {
                var input_list = document.getElementsByTagName("input");
                for (var i = 0;i < input_list.length;i++){
                    input_list[i].checked = true;
                }
            }
            document.getElementById("unselectAll").onclick = function () {
                var input_list = document.getElementsByTagName("input");
                for (var i = 0;i < input_list.length;i++){
                    input_list[i].checked = false;
                }
            }
            document.getElementById("selectRev").onclick = function () {
                var input_list = document.getElementsByTagName("input");
                for (var i = 0;i < input_list.length;i++){
                    // 简化代码
                    /*
                    input_list[i] = !input_list[i];
                     */
                    if(input_list[i].checked){
                        input_list[i].checked = false;
                    }else {
                        input_list[i].checked = true;
                    }
                }
            }

            document.getElementById("inputAll").onclick = function () {
                // 获取第一个input的状态，让其他的input和它一样
                /*var input_list = document.getElementsByTagName("input");
                var flag = input_list[0].checked;
                for (var i = 0;i < input_list.length;i++){
                    input_list[i].checked = flag;
                }*/
                /*
                使用this简化代码
                 */
                var input_list = document.getElementsByTagName("input");
                for (var i = 0;i < input_list.length;i++){
                    input_list[i].checked = this.checked;
                }
            }

            var trs = document.getElementsByTagName("tr");
            // alert(trs[0]);
            for(var i = 0;i< trs.length; i++){
                trs[i].onmouseover = function () {
                    // alert(trs[i]);
                    // 错误
                    // trs[i].className = "over";
                    this.className = "over";

                }

                trs[i].onmouseout = function () {
                    // alert(trs[i]);
                    // trs[i].className = "out";
                    this.className = "out";
                }

            }
        }
    </script>
</head>
<body>
    <table border="1" align="center" width="50%">
        <caption>学生信息表</caption>
        <tr>
            <th><input type="checkbox" value="1" id="inputAll"></th>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><div align="center"><input type="checkbox" value="1"></div></td>
            <td></td>
            <td></td>
            <td></td>
            <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
        </tr>
        <tr>
            <td><div align="center"><input type="checkbox" value="1"></div></td>
            <td></td>
            <td></td>
            <td></td>
            <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
        </tr>
    </table>
    <div id="div_button">
        <input type="button" id="selectAll" value="全选">
        <input type="button" id="unselectAll" value="全不选">
        <input type="button" id="selectRev" value="反选">
    </div>
<script>

</script>
</body>
</html>

表单检验案例