大家好，欢迎来到IT知识分享网。
目录
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方式。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/9864.html
