1、BOM对象

1.1、window对象

1.1.1、frameset

1.1.2、iframe

1.1.3、confrim确认框架

1.1.4、时间周期

1.1.5、倒计时案例

1.1.6、关闭、打开浏览器

1.2、history对象

1.3、Location对象

2、DOM对象

2.1、document对象

2.1.1、getElementById()

2.1.2、getElementsByTagName()

2.1.3、getElementsByName()

2.2、操作内容

2.2.1、相关属性

2.3、常用的事件

2.3.1、案例一（验证手机号码是否正确）

2.3.2、案例二鼠标悬浮切换图片

2.3.3、案例三鼠标按下松开切换背景颜色

2.4、操作节点

2.4.1、appendChild添加子标签

2.4.2、removeChild删除子标签

2.4.3、setAttribute添加属性

2.4.4、removeAttribute删除属性

2.5、操作CSS样式

2.5.1、设置一个CSS样式

2.5.2、批量设置CSS样式

2.5.3、通过class设置样式

2.5.4、案例

3、表单验证

1、BOM对象

1.1、window对象

1.1.1、frameset

可以把window页面进行分割, 是一个框架标签，把页面引入或者进行割，最大的缺点就不能body一块使用。

<frameset> 分割的标签

<frame> 标签引入其他页面

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><frameset rows="10%,*"><frame src="head.html"><frameset cols="15%,*"><frame src="left.html"><frame src="right.html"></frameset></frameset>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h1>我是头部</h1></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h1>我是侧边栏</h1></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h1>我是主体部</h1></body>
</html>

1.1.2、iframe

可以把window页面进行分割，是一个框架标签，可以和body一块使用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><iframe src="right.html" frameborder="1"></iframe><h1>hello world</h1></body>
</html>

1.1.3、confrim确认框架

confrim两个值确定（true）取消(false) var con = window.confrim(消息); 返回的类型为boolean

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="button" value="删除" id="_delete"></body><script>var _delete=document.getElementById("_delete");_delete.onclick=function(){if(confirm("你确认要删除我?")){alert("删除成功");}else{alert("谢谢你手下留情");}}</script>
</html>

1.1.4、时间周期

clearInterval()	取消由setInterval()设置的timeout
clearTimeout()	取消setTimeout()设置的timeout
setInterval()	指定时间周期
setTimeout()	在指定的毫秒数后调期函数或者计算表达式

案例让时间走动，进行开始或者停止控制

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><span id="_time"></span><input type="button" onclick="stopTime()" value="暂停时间"><input type="button" onclick="startTime()" value="开始时间"></body><script>//设置时间周期，间隔一秒调用setTime函数var set_Time=setInterval("setTime()", 1000);window.onload = function() {var _time = document.getElementById("_time");}function setTime() {var date = new Date();//日期格式转换为字符串格式var time = date.toLocaleString();//替换内容_time.innerHTML = time;}function stopTime(){//消除时间周期clearTimeout(set_Time);}function startTime(){//重新设置时间周期set_Time=setInterval("setTime()", 1000);}</script>
</html>

1.1.5、倒计时案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--设置倒计时时间--><meta http-equiv="refresh" content="10;https://www.baidu.com"><title></title></head><body>还有<span id="time_m" style="color: orange; font-size: 18px;"></span>秒跳转到<a href="https://www.baidu.com">百度</a></body><script>var time_m=document.getElementById("time_m");var time=10;window.onload=function(){var _time=setInterval("setTime()",1000);} function setTime(){time_m.innerHTML=--time;}</script>
</html>

1.1.6、关闭、打开浏览器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function open_Browser(){window.open("https://www.baidu.com");}function close_Browser(){window.close();}</script></head><body><input type="button" value="打开浏览器" onclick="open_Browser()"><input type="button" value="关闭浏览器" onclick="close_Browser()"></body>
</html>

1.2、history对象

history对象包含用户访问过的url, 注意：一定是访问过的历史url

history是window对象的一部份，可以通过window.history属性进行访问

back()	加载history列表中的前一个URL
forward()	加载history列表中的下一个URL
go()	加载hitory列表中的某一个具体的页面

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h1>我是a页面</h1><a href="b.html">跳转到b页面</a></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function backPage() {history.back();}function forwardPage() {history.forward();}function goPage() {/* 负数是指定上一个页（左边）  正数是指定下一个页（右边）  */history.go(1)}</script></head><body><h1>我是b页面</h1><a href="c.html">跳转到c页面</a><input type="button" value="返回上一页" onclick="backPage()"><input type="button" value="跳到下一页" onclick="forwardPage()""><input type="button" value="指定跳转" onclick="goPage()"></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function goPage(){history.go(-2);//返回a页面}</script></head><body><h1>我是c页面</h1><input type="button" value="指定跳转" onclick="goPage()""></body>
</html>

1.3、Location对象

Location对象是window对象的一部份，可以通过window.location属性来访问

location表示是当前浏览器的地址对象。浏览器的地址中主要保存的是访问某个网站的url地址

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><script>function skip(){location.href="https://www.baidu.com";}</script><body><input type="button" value="跳转百度" onclick="skip()"></body>
</html>

2、DOM对象

2.1、document对象

Document对象代表整个html文档，可用来访问页面中的所有元素，快速获取html中的页面的标签对象。

document.getElementById()	返回指定id对象的引用
document.getElementsByName()	返回指定带有名称的对象集合
document.getElementsTagName()	返回指定带有标签名的对象集合
document.getElementsByClassName()	根据Class属性值获取元素对象们，返回值是一个数组
document.querySelector(选择器)	根据选择器，获取元素，适合选择一个（#id .class div）
document.querySelectorAll(css选择器)	根据css选择器获取元素，适合选择多个，返回是一个数组

1、querySelectorAll 是找出所有匹配的节点后，返回对应的元素节点数组.如果没有则返回undefinde。

2、querySelector 是找到一个后立刻返回找到的第一个节点对象，如果没有则返回null。

2.1.1、getElementById()

案例：显示/隐藏密码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body>密码：<input type="password" name="pwd" id="pwd_id"><input type="button" value="显示/隐藏密码" onclick="changeType()""></body><script>var pwd=document.getElementById("pwd_id");function changeType(){if(pwd.type=="password"){pwd.type="text";}else if(pwd.type=="text"){pwd.type="password";}}</script>
</html>

2.1.2、getElementsByTagName()

案例：图片放大缩小

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><img src="../img/1.png" alt="" width="400px"><input type="button" value="放大" onclick="increate()"><input type="button" value="减小" onclick="decreate()"></body><script>//方式一，返回的是数组var imgs=document.getElementsByTagName("img");//方式二，querySelectorAll("img") 返回也是数组 可以根据css选择器选中function increate(){//获取到的是img数组，所以取出数组中第一个图片imgs[0].width+=40;}function decreate(){imgs[0].width-=40;}</script>
</html>

2.1.3、getElementsByName()

案例：提交多选框后输出所选内容

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="checkbox" name="hobby" value="悠悠球" />悠悠球<input type="checkbox" name="hobby" value="乒乓球" />乒乓球<input type="checkbox" name="hobby" value="足足球" />足足球<input type="button" value="提交" onclick="demo()" /></body><script>function demo(){//获取到的元素对象是一个数组，所以需要进行遍历var hobby=document.getElementsByName("hobby");for(var i=0;i<hobby.length;i++){if(hobby[i].checked==true){console.info(hobby[i].value);}}}</script>
</html>

2.2、操作内容

2.2.1、相关属性

属性名	描述
element.innerText	获取或者修改元素的纯文本内容
element.innerHTML	获取或者修改元素的html内容
element.outerHTML	获取或者修改包含自身的html内容

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="myDiv"><h4>注释</h4>程序猿最讨厌自己写注释，同时也最讨厌别人不写注释</div></body><script>// element.innerText获取或者修改元素的纯文本内容// element.innerHTML获取或者修改元素的html内容// element.outerHTML获取或者修改包含自身的html内容var myDiv = document.getElementById("myDiv");console.log(myDiv.innerText);console.log(myDiv.innerText += "pppp");console.log(myDiv.innerHTML);console.log(myDiv.innerHTML += "aaasp");console.log(myDiv.outerHTML);console.log(myDiv.outerHTML += "pppp");</script>
</html>

innerText与innerHTML的区别：（经典面试题）
1、innerText 获取的是纯文本，innerHTML获取的是所有html内容。
2、innerText 设置到页面中的是纯文本，innerHTML设置到页面中的html会展示出外观效果。
3 innerHTML不包含自身，outerHTML包含自身的html内容。

2.3、常用的事件

点击事件

事件	描述
onclick	单击事件
ondblclick	双击事件

焦点事件

事件	描述
onblur	失去焦点
onfocus	元素获得焦点

加载事件

事件	描述
onload	页面加载完成后立即发生

鼠标事件

事件	描述
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开
onmousemove	鼠标被移动
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开

键盘事件

事件	描述
onkeydown	某个键盘按键被按下
onkeyup	某个键盘按键被松开
onkeypress	某个键盘按键被按下并松开

改变事件

事件	描述
onchange	域的内容被改变

表单事件

事件	描述
onsubmit	提交按钮被点击

2.3.1、案例一（验证手机号码是否正确）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body>手机号：<input type="text" placeholder="请输入手机号" id="phone" onblur="demo()"><span id="spanid"></span></body><script>function demo(){var regExp=new RegExp("^1[3456789]\\d{9}$")var spanid=document.getElementById("spanid");var phone=document.getElementById("phone");if(regExp.test(phone.value)){spanid.innerHTML="<font color=green>通过！</font>";}else{spanid.innerHTML="<font color=red>手机格式错误</font>";}}</script>
</html>

2.3.2、案例二鼠标悬浮切换图片

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><img src="../img/2.png" alt="" class="img" width="450px"></body><script>var _img=document.querySelector(".img");_img.onmouseover=function(){_img.src="../img/1.png";}_img.onmouseout=function(){_img.src="../img/2.png";}</script>
</html>

2.3.3、案例三鼠标按下松开切换背景颜色

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="text" id="input_id"></body><script>var input_id=document.querySelector("#input_id");input_id.onkeydown=function(){input_id.style.background="pink";}input_id.onkeyup=function(){input_id.style.background="orange";}</script>
</html>

2.4、操作节点

标签名	创建标签
appendChild	为某一个标签，去添加子标签
removeChild	为某一个标签，删除孩子标签
setAttribute	为某一个标签添属性
removeAttribute	删除某一个标签中的属性

2.4.1、appendChild添加子标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><ul id="myul"><li>jack</li><li>rose</li></ul></body><script>var myul=document.getElementById("myul");// 创建li标签var _li=document.createElement("li");//创建文本var _text=document.createTextNode("pink");//把文本添加到li标签中_li.appendChild(_text);//添加到父级标签内myul.appendChild(_li);</script>
</html>

2.4.2、removeChild删除子标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><ul id="myul"><li>jack</li><li id="x1">rose</li><li>tom</li><li>mary</li></ul><input type="button" value="删除子标签" onclick="demo()"></body><script>function demo(){var x1=document.getElementById("x1");//第一种方式// var myul=document.getElementById("myul");// myul.removeChild(x1);//第二种方式 parentNode是获取x1的父亲标签对象x1.parentNode.removeChild(x1);}</script>
</html>

删除全部

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><ul id="myul"><li>jack</li><li id="x1">rose</li><li>tom</li><li>mary</li></ul><input type="button" value="删除全部" onclick="demo()"></body><script>function demo(){var lis=document.querySelectorAll("li");for(let i=lis.length-1;i>=0;i--){lis[i].parentNode.removeChild(lis[i]);}}</script>
</html>

依次删除

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><ul id="myul"><li>jack</li><li>rose</li><li>tom</li><li>mary</li></ul><input type="button" value="依次删除子标签" onclick="demo()"></body><script>function demo(){var lis=document.querySelectorAll("li");//每次删除数组第一个元素对象lis[0].parentNode.removeChild(lis[0]);}</script>
</html>

2.4.3、setAttribute添加属性

案例：清除所有input框历史记录

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="text" name="username" autocomplete="off"><input type="text" name="username"><input type="text" name="username"><input type="text" name="username"><input type="text" name="username"></body><script>var inputs=document.querySelectorAll("input");for(let i=0;i<inputs.length;i++){inputs[i].setAttribute("autocomplete","off");}</script>
</html>

2.4.4、removeAttribute删除属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="text" name="username" autocomplete="off"><input type="text" name="username"><input type="text" name="username"><input type="text" name="username"><input type="text" name="username"></body><script>var inputs=document.querySelectorAll("input");for(let i=0;i<inputs.length;i++){inputs[i].removeAttribute("name");}</script>
</html>

2.5、操作CSS样式

通过js动态修改元素的样式。

2.5.1、设置一个CSS样式

js对象.style.样式名='样式值'

2.5.2、批量设置CSS样式

js对象.style.cssText='属性名：属性值;...'

2.5.3、通过class设置样式

js对象.className='样式名称1; 样式名称2;...'

2.5.4、案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.pclass{color: aqua;border: 1px solid darkgoldenrod;}</style></head><body><p id="p1">1. 设置一个css样式</p><p id="p2">2. 批量设置css样式</p><p id="p3">3. 通过class设置样式</p></body><script>var p1=document.getElementById("p1");p1.style.color="red";var p2=document.getElementById("p2");p2.style="color:red;border:1px solid yellow;font-size:20px";var p3=document.getElementById("p3");p3.className="pclass";</script>
</html>

3、表单验证

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>input {outline: none;}#box {background-color: #F5F5F5;text-align: center;line-height: 50px;width: 350px;height: 350px;margin: 150px auto;}table {margin-left: 30px;}</style></head><body><div id="box"><h1>注册</h1><form action="#" method="get" onsubmit="return demo()"><table><tr><td>账号：</td><td><input type="text" name="username" id="input_id" placeholder="请输入4-16位字母数字下划线"></td></tr><tr><td>昵称：</td><td><input type="text" name="name" id="name_id" placeholder="请输入以字母开头的4-15位字母数字"></td></tr><tr><td>密码：</td><td><input type="password" name="password" id="pwd_id" placeholder="请输入至少一个大写字母和一个小写字母的8-16位密码"></td></tr><tr><td>确认密码：</td><td><input type="password" name="password" id="re_pwd"></td></tr><tr><td colspan="2"><input type="submit" value="注册"><input type="reset"></td></tr></table></form></div></body><script>var inputs = document.getElementsByTagName("input");//关闭每个input框的历史记录for (let i = 0; i < inputs.length; i++) {inputs[i].setAttribute("autocomplete", "off");}//为每个tr添加属性居中属性var trs = document.getElementsByTagName("tr");for (let i = 0; i < trs.length; i++) {trs[i].setAttribute("align", "center");}var input_id = document.getElementById("input_id");var name_id = document.getElementById("name_id");var pwd_id=document.getElementById("pwd_id");var re_pwd=document.getElementById("re_pwd");var regExp = new RegExp("^\\w{4,16}$");//必须包含一个大写，一个小写字母，且长度为8到16位var pwdExp= new RegExp("^(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9~!@&%#_]{8,16}$")var nameExp=new RegExp("^[a-zA-Z][a-zA-Z0-9]{4,15}$") //检查用户名是否符合正则表达式var checkUsername=input_id.onblur = function() {if (regExp.test(input_id.value)) {input_id.style.border = "2px solid green";return true;} else {input_id.style.border = "2px solid red";return false;}}//检查昵称是否符合正则表达式var checkName=name_id.onblur=function(){if (regExp.test(name_id.value)) {name_id.style.border = "2px solid green";return true;} else {name_id.style.border = "2px solid red";return false;}}//检查密码方法，里面有判断密码是否为空，重复密码是否和密码相同var checkpwd=pwd_id.onblur=function(){if(pwdExp.test(pwd_id.value)){pwd_id.style.border="2px solid green";return true; }else{pwd_id.style.border="2px solid red";return false;}}var check_repwd=re_pwd.onblur=function(){if(pwd_id.value==""||re_pwd.value==""){re_pwd.style.border = "2px solid red";pwd_id.style.border="2px solid red";return false;}if(pwd_id.value==re_pwd.value&&pwd_id.value!=""&&re_pwd.value!=""){re_pwd.style.border="2px solid green";return true;}else{re_pwd.style.border = "2px solid red";return false;}}//提交调用demo方法，判断以上所有方法是否同时满足function demo(){if(!(checkUsername()&&checkName()&&checkpwd()&&check_repwd())){return false;}}</script>
</html>

初加载效果

全部正确

重复密码错误

点击注册成功后，提交信息至后台，使用get方式会显示到地址栏，不过实际开发都会使用post方式提交到请求头里，这里为了方便演示才使用get方式。

JavaScript高级（详细总结）相关推荐

JavaScript|JavaScript 高级语法——详细汇总
JavaScript 高级语法目录 JavaScript 高级语法一.变量提升和函数提升作用域的概念 1. 变量提升 ① 变量提升 ② 变量提升后,与外界同名变量不会相互影响 ③ 多次声明变量 ...
前端红宝书《JavaScript高级程序设计》核心知识总结
此文是对<JavaScript 高级程序设计>一书难点的总结,也是笔者在看了 3 遍之后的一些梳理和感想,希望能借此巩固js的基础和对一些核心概念有更深入的了解. 摘要 JS基本的数据类型 ...
攻下《JavaScript高级程序设计》——第二章在HTML中使用JavaScript
从上一章我们知道了,JavaScript是一种专门为网页交互而设计的脚本语言,那么,它就免不了和HTML打交道,所以在设计JavaScript的时候,Netscape首要面临的就是,怎么让HTML和J ...
《javascript高级程序设计》笔记：内存与执行环境
上一篇:<javascript高级程序设计>笔记:继承近几篇博客都会围绕着图中的知识点展开由于javascript是一门具有自动垃圾收集机制的编程语言,开发者不必担心内存的分配和回收的 ...
《JavaScript高级程序设计》红宝书第二遍阅读（动手实践）
<JavaScript高级程序设计>红宝书第二遍阅读(动手实践) 第1章--什么是JavaScript 第2章--HTML中的JavaScript 第3章--语言基础第4章--变量.作用 ...
javaScript高级[二]
javaScript高级[二] 函数函数的定义和调用函数的定义方式函数的调用方式 this 函数内this指向改变函数内部this指向 call()方法 apply()方法 bind()方法 ...
javascript高级编程教程,javascript基础入门案例
谁有比较好的javascript视频教程李炎恢的javascript教程,在verycd上可以下载. 结合<javascript高级程序设计>学习,应该会比较好,他这个教程就是参考了&l ...
JavaScript 高级3 ：函数进阶
JavaScript 高级3 :函数进阶 Date: January 19, 2023 Text: 函数的定义和调用.this.严格模式.高阶函数.闭包.递归目标: 能够说出函数的多种定义和调用方式 ...
JavaScript高级程序设计学习笔记（三）
分享一下第五章(引用类型)的笔记,内容比较多,我拆成了两部分,今天这部分是关于Object.Array.Date和RegExp类型的. 以下的笔记是书上一些我以前学习的时候,没有太重视的js基础知识, ...
一行python代码画粑粑_如何阅读《JavaScript高级程序设计》（一）
题外话最近在看<JavaScript高级程序设计>这本书,面对着700多页的厚书籍,心里有点压力,所以我决定梳理一下..探究一下到底怎么读这本书.本书的内容好像只有到ES5...所以只能 ...

JavaScript高级（详细总结）

1、BOM对象

1.1、window对象

1.1.1、frameset

1.1.2、iframe

1.1.3、confrim确认框架

1.1.4、时间周期

1.1.5、倒计时案例

1.1.6、关闭、打开浏览器

1.2、history对象

1.3、Location对象

2、DOM对象

2.1、document对象

2.1.1、getElementById()

2.1.2、getElementsByTagName()

2.1.3、getElementsByName()

2.2、操作内容

2.2.1、相关属性

2.3、常用的事件

2.3.1、案例一（验证手机号码是否正确）

2.3.2、案例二鼠标悬浮切换图片

2.3.3、案例三鼠标按下松开切换背景颜色

2.4、操作节点

2.4.1、appendChild添加子标签

2.4.2、removeChild删除子标签

2.4.3、setAttribute添加属性

2.4.4、removeAttribute删除属性

2.5、操作CSS样式

2.5.1、设置一个CSS样式

2.5.2、批量设置CSS样式

2.5.3、通过class设置样式

2.5.4、案例

3、表单验证

JavaScript高级（详细总结）相关推荐

最新文章

热门文章