JavaScript高级

于 2022-04-22 20:52:17 发布
阅读量134 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiaoyu5632/article/details/124275152
版权

##DOM简单学习：为了满足案例要求

        *功能：控制html文档的内容

        *代码：获取页面标签（元素）对象：Element

                *document.getElementById（"id值"）：通过元素的id获取元素对象

        *操作Element对象：

                1.修改属性值：

                        1.明确获取的对象是哪一个？

                        2.查看API文档，找出其中有哪些属性可以设置

                2.修改标签体内容：
                        *属性：innerHTML

## 事件简单学习

        *功能：某些组件被执行了某些操作后，触发某些代码的执行。

        *如何绑定事件：
                1.直接在html标签上，指定事件的属性（操作），属性值就是js代码

                        事件：onclick ---- 单击事件

                2.通过js获取元素对象，指定事件属性，设置一个函数 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
</head>
<body>
<img src="images/off.jpg"  id="light" width="300" height="300" onclick="fun2();">
<img src="images/off.jpg"  id="light2" width="300" height="300">
<script>
    function fun2(){
        alert("别点我了!!!");
    }

    //1.获取对象
    var light2 = document.getElementById("light2");
    //2.绑定事件
    light2.onclick = fun2;
</script>
</body>
</html>

 电灯开关案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="images/off.jpg"  id="light2" width="300" height="300">
    <img src="images/on.jpg"  id="light1"  width="300" height="300">

    <script>
        /*
        *分析：
        * 1.获取图片对象
        * 2.绑定单机事件
        * 3.每次点击切换图片
        *   *规则：
        *       *如果灯是开的 on ，切换为 off
        *       *如果灯是关的 off ,切换为 on
        *   *使用标记flag来完成
        * */


       //1.获取元素对象
       var light2 = document.getElementById("light2");

       var flag = false; //代表灯是灭的

       //2.绑定事件
       light2.onclick = function () {
           //判断如果灯是开的，则灭掉
           if(flag){
               light2.src = "images/on.jpg";
               flag = false;
           }else {
               //如果灯是灭的，则打开
               light2.src = "images/off.jpg";
               flag = true;
           }

       }

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

## BOM：

        1.概念：Browser Object Model 浏览器对象模型

                *将浏览器的各个组成部分封装为对象

        2.组成：

                *Window：窗口对象

                *Navigator：浏览器对象

                *Screen：显示器屏幕对象

                *History：历史记录对象

                *Location：地址栏对象

 Window

window：窗口对象 

        1.创建

        2.方法

                1.与弹出框有关的方法：

                        alert（）显示带有一段消息和一个确认按钮的警告框

                        confirm（） 显示带有一段消息以及确认按钮和取消按钮的对话框

                                *如果用户点击确定按钮，则方法返回true

                                *如果用户点击取消按钮，则返回方法false

                        promat（） 显示可提示用户输入的对话框

                                *返回值：获取用户输入的值

                2.与开发关闭有关的方法：

                        close（）：关闭浏览器窗口。

                                *谁调用我，我关谁

                        open（）：打开一个新的浏览器窗口

                                *返回新的window对象

                3.与定时器有关的方式

                        setTimeout（） 在指定的毫秒数后调用函数或计算表达式

                                *参数：

                                        1.JS代码或者方法对象

                                        2.毫秒值

                                *返回值：唯一标识，用于取消定时器

                        clearTimeout（） 取消有setTimeout（）方法设置的timeout

        

                        setInterval（） 按照指定的周期（以毫秒计）来调用函数或计算表达式

                                  *参数：

                                        1.JS代码或者方法对象

                                        2.毫秒值

                                *返回值：唯一标识，用于取消定时器

                        clearInterv（） 取消由setInterval（） 设置的timeout

        3.属性

                1.获取其他BOM对象：

                        history    location  Navigator   Screen

                2.获取DOM对象

                        document

        4.特点

                *Window对象不需要创建可以直接使用 window使用。 window.方法名（）；

                *Window引用可以省略。  方法名（）；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

    var flag = confirm("您确定要退出吗");
    if(flag){
        alert("欢饮下次使用");
    }else {
        alert("手别抖了》》》");
    }


    var s = prompt("请输入用户名");
    alert(s);


</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="打开窗口" id="open">
<input type="button" value="关闭窗口" id="close">

<script>
    //1.获取对象
    var openWindow = document.getElementById("open");
    var closeWindow = document.getElementById("close");
    var newWindow;
    //2.打开窗口
    openWindow.onclick = function () {
       newWindow = open("https://www.runoob.com/");
    }
    //关闭窗口
    closeWindow.onclick = function () {
        newWindow.close();
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //一次行定时器
/*    setTimeout(fun,3000);*/

/*    var timeout = setTimeout(fun,3000);
    clearTimeout(timeout);
    */
    function fun() {
        alert("1234512345!!!");
    }

    //循环定时器
/*    setInterval(fun,1000);*/
    var interval = setInterval(fun,1000);
    clearInterval(interval);
</script>
</body>
</html>

Location

Location: 地址烂对象

        1.创建（获取）：
                1.window.location

                2.location

        2.方法：

                *reload() ：刷新当前页面

        3.属性：

                *href：设置返回完整的URL

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="刷新界面" id="btn">

<input type="button" value="去百度" id="go">

<script>
    //1.获取对象
    var btn = document.getElementById("btn");
    //2.绑定单机事件
    btn.onclick = function (){
        //3.刷新界面
        location.reload();
    }
    //获取地址
    var href = location.href;

    //1.获取对象
    var go = document.getElementById("go");
    //2.绑定单机事件
    go.onclick = function () {
        //点击按钮去访问
        location.href = "https://www.huya.com/";
    }
</script>
</body>
</html>

 页面跳转案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            text-align: center;
            font-size: large;
        }
        span {
            color: red;
        }
    </style>
</head>
<body>
<p><span id="time">5</span>秒之后，跳转到首页</p>

<script>
    //1.获取对象
    var time = document.getElementById("time");
    var second = 5;
    function showTime() {
        second--;

        if(second <= 0){
            location.href = "https://www.huya.com/";
        }
        time.innerHTML = second+"";

    }

    //设置定时器
    setInterval(showTime,1000);
</script>
</body>
</html>

History

 History：历史记录对象

        1.创建（获取）：

                1.window.history

                2.hitory

        2.方法：
                *back（） 加载history列表中的前一个URL

                *forward（） 加载history 列表中的下一个URL

                *go（参数）   加载history列表中的某个具体页面

                        *参数：

                                *正数：前进几个历史记录

                                *负数：后退几个历史记录

        3.属性：

                *length   返回当前窗口历史列表中的URL数量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="查看历史记录个数" id="btn">
<a href="页面跳转案例.html">11111111111</a>
<input type="button" value="前进" id="forward">

<script>
    //1.获取对象
    var btn = document.getElementById("btn");
    //2.绑定方法
    btn.onclick = function () {
        var length = history.length;-
        alert(length);
    }

    var forward = document.getElementById("forward");
    forward.onclick = function () {
        //history.forward();
        history.go(1);
    }
</script>
</body>
</html>

 ##DOM：

        *概念：Document Object Model 文档对象模型

                *将标记语言文档的各个组成部分，封装为对象。可以使用这些对象 ，对标记语言文档进行CRUD的动态操作

        * w3c DOM 标准被分为3个不同的部分：

                *核心 DOM - 针对任何结构化文档的标准模型

                        *Document：文档对象

                        *Element：元素对象

                        *Attribute：属性对象

                        *Text：文本对象

                        *Comment：注释对象

                        *Node：节点对象，其他五个的父对象

        *XML DOM - 针对 XML 文档的标准模型

        *HTML DOM - 针对 HTML 文档的标准模型

*核心DOM模型：

        *Document：文档对象

        *Element：元素对象

        *Node：节点对象，其他5个对象的父对象

      Document 

 Document：文档对象

        1、创建（获取）：在html dom模型中可以使用window对象来获取

                1.window.document

                2.document

        2、方法：

                1.获取Element对象：

                        1.getElementById（）：根据id属性值获取元素对象。id属性值一般唯一

                        2.getElementsByTagName（）：根据元素名称获取元素对象们。返回值是一个                                                                                     数组

                        3.getElementsByClassName（）：根据Class属性获取元素对象们。返回值是一                                                                                     个数组

                        4.getElementByName（）：根据name属性值获取元素对象们。返回值是一个数                                                                            组

                2.创建其他DOM对象：

                        createAttribute（name）

                        createComment（）

                        createElement（）

                        createTextNode（）

        3.属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

<div class="cls1">div4</div>
<div class="cls1">div5</div>

<input type="text"  name="username">

<script>
    var div = document.getElementsByTagName("div");
    alert(div.length);

    var cl = document.getElementsByClassName("cls1");
    alert(cl.length);

    var user = document.getElementsByName(username);
    alert(user.length);
</script>
</body>
</html>

 Element

Element：元素对象

        1.获取/创建：通过document来获取和创建

        2.方法：

                1.removeAttribute（）：删除属性

                2.setAttribute（）：设置属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="设置属性" id="btn_set">
<a>点我试一试</a>
<input type="button" value="删除属性" id="btn_remove">



<script>
    //1.获取对象 增加属性
    var btn_set = document.getElementById("btn_set");
    btn_set.onclick = function () {
        //获取a标签
        var s = document.getElementsByTagName("a")[0];
        s.setAttribute("href","https://v.qq.com/");
    }

    //删除属性
    var btn_remove = document.getElementById("btn_remove");
    btn_remove.onclick = function () {
        //获取a标签
        var s = document.getElementsByTagName("a")[0];
        s.removeAttribute("href");
    }
</script>
</body>
</html>

Node

Node：节点对象，其他五个的父对象

        *特点：所有dom对象都可以被认为是一个节点

        *方法：
                *CRUD dom树：

                        *appendChild（）：向节点的子节点列表的结尾添加新的字节点

                        *removeChild（）：删除（并返回）当前节点的指定子节点

                        *replaceChild（）：用新的节点替换一个子节点 

        *属性：

                *parentNode返回节点的父节点

 特殊知识：

        超连接功能：

                1.可以被点击：样式

                2.点击后跳转到href指定的url

        需求：保留1功能，去掉2功能

        实现：href = "javascript:void(0)"

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

    <div id="div2">
        div2
    </div>
    div1
</div>

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

<script>
    //1.获取超链接
    var element_a = document.getElementById("del");
    //2.帮点单机事件
    element_a.onclick = function () {
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.removeChild(div2);
    }
    //1.获取超链接
    var element_add = document.getElementById("add");
    //2.帮点单机事件
    element_add.onclick = function () {
        var div1 = document.getElementById("div1");
        var div3 = document.createElement("div");
        div3.setAttribute("id","div3");
        div1.appendChild(div3);
    }
</script>
</body>
</html>

*HTML  DOM

        1.标签体的设置和获取：innerHTML

        2.使用HTML元素对象的属性

        3.控制样式

                1.使用元素的style属性来设置

                2.提前定义好类选择其，通过元素的className属性来设置其class属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div">
    div
</div>

<script>
    var div = document.getElementById("div");
    var innerHTML = div.innerHTML;
    // alert(innerHTML);

    // div.innerHTML = "<input type='text'>";

    div.innerHTML += "<input type='text'>";
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1 {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="div1">
    div1
</div>
<div id="div2">
    div2
</div>

<script>
     var div1 = document.getElementById("div1");
     div1.onclick = function () {
        //1.修改控制样式
        div1.style.border = "3px solid blue";
    }

    var div2 = document.getElementById("div2");
     div2.onclick = function () {
         div2.className = "d1";
     }
</script>

</body>
</html>

##事件监听机制： 

        *概念：某些组件被执行了某些操作后，触发某些代码的执行。

                *事件：某些操作。如：单击，双击，键盘按下，鼠标移动

                *事件源：组件。如：按钮，文本输入框....

                *监听器：代码

                *注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则会触                                       发某个监听器代码

        *常见的事件：
               1.点击事件：

                        1.onclick：单击事件

                        2.ondblclick：双击事件

                2.焦点事件

                        1.onblur：失去焦点

                        2.onfocus：元素获得焦点

                3.加载事件：

                        1.onload：一张页面或一副图像完成加载

                4.鼠标事件

                        1.onmousedown：鼠标按钮被按下

                                *定义方法时，定义一个形参，接受event对象

                                *event对象的button属性可以获取鼠标按钮键被点击了

                        2.onmouseup：鼠标按键被松开

                        3.onmousemove：鼠标被移动

                        4.onmouseover：鼠标被移动到某元素上

                        5.onmouseout：鼠标从某元素移开

                5.键盘事件：

                        1.onkeydown：某个键盘按键被按下

                        2.onkeyup：某个键盘按键被松开

                        3.onkeypress：某个键盘按键被按下并松开

                6.选择和改变

                        1.onchage：域的内容被改变

                        2.onselect：文本被选中

                7.表单事件

                        1.onsubmit：确认按钮被点击

                        2.onreset：重置按钮被点击

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            text-align: center;
            margin: 50px;
        }
        table {
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th {
            text-align: center;
            border: 1px solid;
        }
        .over {
            background-color: red;
        }
        .out {
            background-color: wheat;
        }


    </style>

    <script>

        //1.在页面加载完成后绑定事件
        window.onload = function () {
            //2.给全选按钮绑定单击事件
            document.getElementById("selectAll").onclick = function () {
                //全选功能
                //2.1获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                //2.2遍历
                for (var i = 0; i < cbs.length; i++) {
                    //2.3设置每一个cb的状态为选中
                    cbs[i].checked = true;
                    }
                }
                //3.给全不选按钮绑定单击事件
                document.getElementById("unSelectAll").onclick = function () {
                    //全不选功能
                    //3.1获取所有的checkbox
                    var cbs = document.getElementsByName("cb");
                    //3.2遍历
                    for (var i = 0; i < cbs.length; i++) {
                        //2.3设置每一个cb的状态为选中
                        cbs[i].checked = false;
                    }
                }
                //4.给反选按钮绑定单击事件
                document.getElementById("selectRev").onclick = function () {
                    //反选功能
                    //4.1获取所有的checkbox
                    var cbs = document.getElementsByName("cb");
                    //4.2遍历
                    for (var i = 0; i < cbs.length; i++) {
                        //4.3设置每一个cb的状态为相反
                        cbs[i].checked = !cbs[i].checked;
                    }
                }
                //5.给第一个按钮绑定单击事件
                document.getElementById("firstCb").onclick = function () {
                    //功能
                    //5.1获取所有的checkbox
                    var cbs = document.getElementsByName("cb");
                    //在获取第一个cb
                    //5.2遍历
                    for (var i = 0; i < cbs.length; i++) {
                        //4.3设置每一个cb的状态和第一个cb状态相同
                        cbs[i].checked = this.checked;
                    }
                }
                //6.将鼠标移上和移下元素绑定tr
                var trs = document.getElementsByTagName("tr");
                //遍历
            for (var i = 0; i < trs.length; i++) {
                //移到元素之上
                trs[i].onmouseover = function () {
                    this.className = "over";
                }
                //移下元素
                trs[i].onmouseout = function () {
                    this.className = "out";
                }
            }


        }
    </script>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">

</div>
<table>
    <caption>学生信息表</caption>
    <tr>
        <td><input type="checkbox" name="cb" id="firstCb"></td>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0)" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0)" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0)" onclick="delTr(this);">删除</a></td>
    </tr>
</table>
<div>
    <input type="button" value="全选" id="selectAll">
    <input type="button" value="全不选" id="unSelectAll">
    <input type="button" value="反选" id="selectRev">

</div>
</body>
</html>

——————本人上课笔记，可能不全

可以参考w3cshool

刘泽宇宇
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值