web前端基础复习_day07_JavaScript高级

最新推荐文章于 2024-07-11 20:55:36 发布

孟庆杰

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量185

点赞数

分类专栏： web前端文章标签： js javascript dom bom 前端

本文链接：https://blog.csdn.net/weixin_42931689/article/details/104592665

版权

web前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

JavaScript高级

JavaScript = ECMAScript + BOM + DOM;

一. BOM对象

Browser Object Model 浏览器对象模型;
访问和操作浏览器的各个组件提供属性和方法;

1. Window 对象

① 概述

所有浏览器都支持 window 对象。它代表浏览器的窗口。

② 常用属性

window.innerHeight - 浏览器窗口的内高度（以像素计）
window.innerWidth - 浏览器窗口的内宽度（以像素计）
window.outerHeight - 浏览器窗口的外高度（以像素计）
window.outerWidth - 浏览器窗口的外宽度（以像素计）

③ 常用方法

与弹出框有关的方法：
- alert() 显示带有一段消息和一个确认按钮的警告框。
- confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
  * 如果用户点击确定按钮，则方法返回true
  * 如果用户点击取消按钮，则方法返回false
- prompt() 显示可提示用户输入的对话框。
  * 返回值：获取用户输入的值
与打开关闭有关的方法：
- close() 关闭浏览器窗口。
  * 谁调用我，我关谁
- open() 打开一个新的浏览器窗口
  * 返回新的Window对象
与定时器有关的方式
- setTimeout() 在指定的毫秒数后调用函数或计算表达式。
  * 参数：
  1. js代码或者方法对象
  2. 毫秒值
  * 返回值：唯一标识，用于取消定时器
- clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
- setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
- clearInterval() 取消由 setInterval() 设置的 timeout。

2. Navigator 对象

① 概述

对象包含有关访问者的信息。

② 常用属性

navigator.appVersion 属性返回有关浏览器的版本信息：

document.getElementById("demo").innerHTML = navigator.appVersion;

3. Screen 对象

① 概述

对象包含用户屏幕的信息。

② 常用属性

screen.width 属性返回以像素计的访问者屏幕宽度。
screen.height 属性返回以像素计的访问者屏幕的高度。

document.getElementById("demo").innerHTML = "Screen Width: " + screen.width;
document.getElementById("demo1").innerHTML = "Screen Height: " + screen.height;

4. History 对象

① 概述

对象包含浏览器历史。

② 常用属性

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

③ 常用方法

history.back() 方法加载历史列表中前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go(参数) 加载 history 列表中的某个具体页面。
- 参数：
  * 正数：前进几个历史记录
  * 负数：后退几个历史记录

5. Location 对象

① 概述

对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。

② 常用属性

location.href 属性返回当前页面的 URL

document.getElementById("demo").innerHTML = "页面位置是 " + location.href;

③ 常用方法

location.reload() 重新加载当前文档。刷新

二. DOM

Document Object Model 文档对象模型
将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
对象的 HTML DOM 树

1. Document 对象

① 概述

文档对象代表您的网页。

② 常用方法

查找 HTML 元素
- document.getElementById(id) 通过元素 id 来查找元素
- document.getElementsByTagName(name) 通过标签名来查找元素
- document.getElementsByClassName(name) 通过类名来查找元素
- document.getElementsByName(name) 通过name属性值来查找元素。
- document.querySelector(name) 通过 CSS 选择器查找符合条件的第一个 HTML 元素。
- document.querySelectorAll(name) 通过 CSS 选择器查找所有复合条件的 HTML 元素，返回 NodeList 对象。
查找 HTML 对象
- document.body 返回 <body>元素
- document.documentElement 返回<html>元素
创建 HTML 对象
- document.write() 向文档写 HTML 表达式或 JavaScript 代码。
- document.createElement() 创建元素节点。

2. Element 对象

① 概述

元素对象代表着一个 HTML 元素。

② 常用属性

element.clientHeight 在页面上返回内容的可视高度（不包括边框，边距或滚动条）
element.clientWidth 在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
element.offsetHeight 返回任何一个元素的高度包括边框和填充，但不是边距
element.offsetWidth 返回元素的宽度，包括边框和填充，但不是边距
element.offsetLeft 返回当前元素的相对水平偏移位置的偏移容器
element.offsetTop 返回当前元素的相对垂直偏移位置的偏移容器
element.scrollHeight 返回整个元素的高度（包括带滚动条的隐蔽的地方）
element.scrollLeft 返回当前视图中的实际元素的左边缘和左边缘之间的距离
element.scrollTop 返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离
element.scrollWidth 返回元素的整个宽度（包括带滚动条的隐蔽的地方）
element.style 设置或返回元素的样式属性
element.className 设置或返回元素的class属性

③ 常用方法

element.appendChild() 为元素添加一个新的子元素
element.cloneNode() 克隆某个元素
element.getAttribute() 返回指定元素的属性值
element.innerHTML() 设置或者返回元素的内容。
element.removeAttribute() 从元素中删除指定的属性
element.removeChild() 删除一个子元素
element.setAttribute() 设置或者改变指定属性并指定值。

3. Node 对象

① 概述

所有DOM对象都可以被认为是一个节点

② 常用属性

element.firstChild 返回元素的第一个子节点
element.lastChild 返回的最后一个子节点
element.nextSibling 返回该元素紧跟的一个节点
element.previousSibling 返回元素之前紧接的节点。
element.parentNode 返回元素的父节点

③ 常用方法

element.appendChild() 为元素添加一个新的子元素
element.insertBefore() 在已有的子节点之前插入一个新的子节点。
element.cloneNode() 克隆某个元素
element.removeChild() 删除一个子元素
element.replaceChild() 替换子节点。

四. DOM案例

动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table {
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td, th {
            text-align: center;
            border: 1px solid;
        }

        div {
            text-align: center;
            margin: 50px;
        }
    </style>

</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>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);"  onclick='del(this)'>删除</a></td>
    </tr>

    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);"  onclick='del(this)'>删除</a></td>
    </tr>

    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);"  onclick='del(this)'>删除</a></td>
    </tr>
</table>

<script>
    function $(ele) {
        return document.querySelector(ele);

    }
    onload = function (ev) {
        // 添加元素
        $("#btn_add").onclick = function () {
            // 获取对应的值
            var id = $("#id").value;
            var name = $("#name").value;
            var gender = $("#gender").value;

            // 创建td标签
            var td_id = document.createElement("td");
            td_id.innerText = id;
            var td_name = document.createElement("td");
            td_name.innerText = name;
            var td_gender = document.createElement("td");
            td_gender.innerText = gender;
            var td_a = document.createElement("td");
            td_a.innerHTML = "<a href='javascript:void(0);' οnclick='del(this)'>删除</a>"

            // 创建一个tr标签
            var tr = document.createElement("tr");
            tr.appendChild(td_id);
            tr.appendChild(td_name);
            tr.appendChild(td_gender);
            tr.appendChild(td_a);

            // 把tr添加到table
            $("table").appendChild(tr);

        }

    }

    // 删除元素
    function del(obj) {
        var tr = obj.parentNode.parentNode;
        tr.parentNode.removeChild(tr);
    }
</script>

</body>
</html>

三. 事件监听机制

① 概念

某些组件被执行了某些操作后，触发某些代码的执行。
- 事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了
- 事件源：组件。如：按钮文本输入框…
- 监听器：代码。
- 注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。

② 常见的事件

点击事件：
- onclick：单击事件
- ondblclick：双击事件
焦点事件
- onblur：失去焦点
- onfocus:元素获得焦点。
加载事件：
- onload：一张页面或一幅图像完成加载。
鼠标事件：
- onmousedown 鼠标按钮被按下。
- onmouseup 鼠标按键被松开。
- onmousemove 鼠标被移动。
- onmouseover 鼠标移到某元素之上。
- onmouseout 鼠标从某元素移开。
键盘事件：
- onkeydown 某个键盘按键被按下。
- onkeyup 某个键盘按键被松开。
- onkeypress 某个键盘按键被按下并松开。
选择和改变
- onchange 域的内容被改变。
- onselect 文本被选中。
表单事件：
- onsubmit 确认按钮被点击。
- onreset 重置按钮被点击。

③ 案例

全选和反选按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table{
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top: 10px;
            margin-left: 30%;
        }
    </style>

    <script>
        function $(k) {
            return document.querySelector(k);
        }
        onload = function () {
            // 鼠标经过变色
            var tr = document.querySelectorAll("tr");
            tr.forEach(function (value) {
                value.onmouseover = function (ev) {
                    this.style.backgroundColor = "pink";
                }
                value.onmouseout = function (ev) {
                    this.removeAttribute("style");
                }
            })

            // 全选 和 反选
            var checkAll = $("th input");
            checkAll.onclick = function () {
                var that = this;
                document.querySelectorAll("td input").forEach(function (value) {
                    value.checked = that.checked;
                })
            }

            // 选中某一条
            var tdInput = document.querySelectorAll("td input")
            tdInput.forEach(function (value) {
                value.onclick = function () {
                    for (var i = 0; i < tdInput.length; i++) {
                        if (!tdInput[i].checked) {
                            checkAll.checked = false;
                            return;
                        }
                    }
                    checkAll.checked = true;
                }
            })

        }
    </script>

</head>
<body>

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

    <tr>
        <td><input type="checkbox" ></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" ></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" ></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

</table>
</body>
</html>

孟庆杰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端基础复习_day07_JavaScript高级

JavaScript高级JavaScript = ECMAScript + BOM + DOM;一. BOM对象Browser Object Model 浏览器对象模型;访问和操作浏览器的各个组件提供属性和方法;1. Window 对象① 概述所有浏览器都支持 window 对象。它代表浏览器的窗口。② 常用属性window.innerHeight - 浏览器窗口的...
复制链接

扫一扫