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>

web前端基础复习_day07_JavaScript高级相关推荐

HTML及CSS基础入门：web前端基础，看这一篇就够了
写在开头:这是一篇有关于HTTP和CSS的基础入门教程.你也可以将他当作一本字典,因为我将所有可能用到的语法结构全部设置了标题,你只需要点击标题即可跳转过去.同时,我在最后放置了两个CSS实战,以供读 ...
advanced installer更换程序id_好程序员web前端培训分享kbone高级-事件系统
好程序员web前端培训分享kbone高级-事件系统:1.用法,对于多页面的应用,在 Web 端可以直接通过 a 标签或者 location 对象进行跳转,但是在小程序中则行不通:同时 Web 端的页面 ...
iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
Web前端基础知识整理
1. 前端基础知识文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述特点: 扩展名为.xml 内容区分大小写标签要成对出现,形成容器,只能有一个标签按正确 ...
WEB前端基础（HTML+CSS+JavaScript）（上）最好看最详细的笔记~
WEB前端基础当前部分是基于HTML与CSS总结,后续有JavaScript更新~ 文章目录 WEB前端基础一.HTML概述(阶段1 入门概述) 1.HTML 二.第一个HTML页面 1.HTML ...
web前端基础与CSS入门
web前端基础 1.嵌套列表注:列表之间可以互相嵌套,形成多层级的列表. <!DOCTYPE html> <html lang="en"> <hea ...
html web前端基础(1)
html web前端基础(1) 本人暂时所用的学习软件是HB(HBuilder) 所以下方代码展示也是在HB所呈现的什么是web : 1.典型的应用: 1.C / S ***** client: 客 ...
html clear属性值,【Web前端基础知识】clear使用方法
[摘要] 前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页.下面是[Web前端基础知识]clear使用方法,小编建议有准备参加考试的备考生一定要合理规划时间,仔细阅读相关规定,提 ...
WEB前端基础知识汇总
javascript: JavaScript中如何检测一个变量是一个String类型?请写出函数实现 typeof(obj) === "string" typeof obj === ...
web前端基础——第一章
目录一.了解什么是HTML.CSS 1.什么是HTML.CSS? 2.如何去写代码?写到哪里呢? 二.宇宙第一编辑器VS Code 1.如何安装/使用插件? 2.学习编辑器基本使用. 三.Chrom ...

web前端基础复习_day07_JavaScript高级

JavaScript高级

一. BOM对象

1. Window 对象

① 概述

② 常用属性

③ 常用方法

2. Navigator 对象

① 概述

② 常用属性

3. Screen 对象

① 概述

② 常用属性

4. History 对象

① 概述

② 常用属性

③ 常用方法

5. Location 对象

① 概述

② 常用属性

③ 常用方法

二. DOM

1. Document 对象

① 概述

② 常用方法

2. Element 对象

① 概述

② 常用属性

③ 常用方法

3. Node 对象

① 概述

② 常用属性

③ 常用方法

四. DOM案例

三. 事件监听机制

① 概念

② 常见的事件

③ 案例

web前端基础复习_day07_JavaScript高级相关推荐

最新文章

热门文章