一.Bom对象
bom: browser object model 浏览器对象模型 js希望和浏览器有一定的交互能力
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5r8tveWE-1677607234278)(images/image-20210705113343304.png)]
window对象
所有的浏览器都支持window对象。它表示的浏览器窗口
window对象是js中的顶层对象，所有的js函数，变量等都是window对象成员
甚至Dom的document也是window对象的属性之一
frameset
可以把window页面进行分割, 是一个框架标签，把页面引入或者进行割，最大的缺点就不能body一块使用
分割的标签 标签 引入其他页面<frameset rows="20%,*">
<frame src="hear.html" />
<frameset cols="20%,*">
<frame src="left.html" />
<frame src="rigth.html" />
</frameset>
</frameset>
iframe
可以把window页面进行分割， 是一个框架标签，可以和body一块使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<iframe src="index.html"></iframe>
可以书写自己的东东
</body>
</html>
confrim确认框
confrim两个值 确定（true） 取消(false) var con = window.confrim(消息); 返回的类型为boolean
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
右
<input type="button" value="删除" id="del"/>
<script>
window.onload=function(){
//删除按钮绑定单击事件
let del_btn= document.getElementById("del");
del_btn.onclick=function(){
//弹出提示框，是否要删除
let rel= window.confirm("确定要删除吗？");//boolean true/false
if(rel){
alert("删除成功");
}else{
alert("就知道你不忍心删我~~~");
}
}
}
</script>
</body>
</html>
时间周期
| clearInterval() | 取消由setInterval()设置的timeout |
|---|---|
| clearTimeout() | 取消setTimeout()设置的timeout |
| setInterval() | 指定时间周期 |
| setTimeout() | 在指定的毫秒数后调期函数或者计算表达式 |
案例让时间走动，进行开始或者停止控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态时钟</title>
</head>
<body>
<span id="clock"></span>
<!-- 点击按钮，时间停止走动 -->
<input type="button" value="停止" id="stop">
<input type="button" value="开始" id="start">
<script>
window.onload=function(){
//span标签中显示当前时间
setTime();
//每隔一秒，重新设置span标签时间
let timeid=setInterval("setTime()",1000);
//点击 停止按钮
document.getElementById("stop").onclick=function(){
//取消 周期函数 clearInterval(时间周期id)
clearInterval(timeid);
}
//点击 开始按钮
document.getElementById("start").onclick=function(){
//继续时间走动 再次设置周期函数
timeid=setInterval("setTime()",1000);
}
}
function setTime(){
//1.得到当前时间
let now =new Date();
let now_str= now.toLocaleString();//当前时间字符串
//2.设置span标签
let span_el=document.getElementById("spanid");
span_el.innerHTML = now_str;
}
</script>
</body>
</html>
倒记时案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<span style="font-size:40px;color:orange;font-weight:bold" id="spanid">10</span>
秒后跳转至<a href="http://www.baidu">百度</a>首页
<script>
window.onload=function(){
setInterval("sett()",1000);
}
let index =10;
//定义函数，修改页面span标签中数字 每秒减一
function sett(){
index --;
document.getElementById("spanid").innerHTML = index;
//倒计时 为0 时
if(index==0){
//跳转页面
location.href = "http://www.baidu";
}
}
</script>
</body>
</html>
关闭，打开浏览器
| close() | 关闭浏览器 |
|---|---|
| open() | 打开浏览器 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function open_Browser(){
//打开浏览器窗口
window.open("04-让时间动起来.html");
}
</script>
</head>
<body>
<input type="button" value="打开浏览器" onclick="open_Browser()" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//关闭浏览器
function close_Browser(){
window.close();
}
</script>
</head>
<body>
<input type="button" value="关闭浏览器" onclick="close_Browser()" />
</body>
</html>
history对象
history对象包含用户访问过的url, 注意： 一定是访问过的历史url
history是window对象的一部份，可以通过window.history属性进行访问
| back() | 加载history列表中的前一个URL |
|---|---|
| forward() | 加载history列表中的下一个URL |
| go(数字) | 加载hitory列表中的某一个具体的页面 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WhAVmheB-1677607234280)(images/image-20210705144632357.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
我是01html
<a href="02.html">去02html</a>
</body>
</html>
<script>
//返回上一页
function backPage(){
history.back();
}
//跳到下一页
function forwardPage(){
history.forward();
}
//指定跳转
function goPage(){
/*
负数是指定上一个页（左边）
正数是指定下一个页（右边）
*/
history.go(1);
}
</script>
</head>
<body>
<input type="button" value="返回上一页" onclick="backPage()" />
<input type="button" value="跳到下一页" onclick="forwardPage()" />
<input type="button" value="指定跳转" onclick="goPage()" />
我是02html
<a href="03.html">去03html</a>
</body>
<script>
//指定跳转
function goPage(){
history.go(-2);//跳转到01
}
</script>
</head>
<body>
<input type="button" value="指定跳转" onclick="goPage()" />
我是03html
<a href="01.html">去01html</a>
</body>
Location对象
Location对象是window对象的一部份，可以通过window.location属性来访问
location表示是当前浏览器的地址对象。浏览器的地址中主要保存的是访问某个网站的url地址。
例：把用户带到一个新的地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function order(){
location.href = "http://www.baidu";
}
</script>
</head>
<body>
<input type="button" value="查询订单" onclick="order()"/>
<a href="http://www.baidu">查询订单</a>
</body>
</html>
二.Dom对象
Dom对象: Document Object Model 文档对象模型
W3C组织规定：
当浏览器把一个html文件加载到内存中之后，这个html文件，就是一个Document对象。并且在浏览器加载html文件中的所有标签时，把html文件中的所有标签页加载成不同的标签对象，以及标签中的属性，也加载成属性对象，标签中的文本也加载成文本对象。
浏览器在加载某个标签时，标签的文本数据，被加载成当前标签的一个子标签。当我们把一个html文件加载完成之后，他们就得到这个html文件中的所有标签，属性，文本对象。可以使用js技术结合Document对象，对html文件中的所有标签，进行各种操作。
在浏览器把html文件加载完成之后，标签被称作标签对象（元素节点），标签中的文件称为文本节点（文本对象），标签的属性称为属性节点（属性对象）。
节点信息：
nodeName(节点名称) nodeVale(节点值) nodeType(节点类型)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-de9wWHZ6-1677607234282)(images/image-20210705155311598.png)]
document对象
Document对象代表整个html文档，可用来访问页面中的所有元素
快速获取html中的页面的标签对象
| document.getElementById() | 返回指定id对象的引用 |
|---|---|
| document.getElementsByName() | 返回指定带有名称的对象集合 |
| document.getElementsTagName() | 返回指定带有标签名的对象集合 |
| document.getElementsByClassName() | 根据Class属性值获取元素对象们。返回值是一个数组 |
| document.querySelector(id选择器) | 根据id选择器，获取元素 |
| document.querySelectorAll(css选择器) | 根据css选择器获取元素，返回是一个数组 |
getElementById()
<script>
function demo(){
//方式一，获取元素id
//var inputid = document.getElementById("inputid");
//方式二，获取元素id
var inputid = document.querySelector("#inputid");
if(inputid.type == "text"){
inputid.type ="password";
}else if(inputid.type == "password"){
inputid.type ="text";
}
}
</script>
</head>
<body>
<input type="text" name="pwd" id="inputid"/>
<input type="button" onclick="demo()" value="显示/隐藏密码" />
</body>
getElementsByTagName()
<script>
function demo1(){
//方式一，getElementsByTagName("img"); 返回的是数组
// var _img = document.getElementsByTagName("img");
//方式二，querySelectorAll("img") 可以根据css选择器选中
var _img = document.querySelectorAll("img");
_img[0].width += 30;
}
function demo2(){
var _img = document.getElementsByTagName("img");
_img[0].width -= 30;
}
</script>
</head>
<body>
<img src="img/404.jpg" width="450px"/>
<input type="button" onclick="demo1()" value="放大" />
<input type="button" onclick="demo2()" value="缩小" />
</body>
getElementsByName()
<script>
function demo(){
//方式一， getElementsByName("hobby");
// var hobbys = document.getElementsByName("hobby");
//方式二，querySelectorAll("input[name='hobby']") css选择器
var hobbys = document.querySelectorAll("input[name='hobby']")
for (var i = 0; i < hobbys.length; i++) {
if(hobbys[i].checked == true){
alert(hobbys[i].value);
}
}
}
</script>
</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>
getElementsByClassName()
<script>
function demo(){
//方式一，getElementsByClassName("hobby"
// var hobbys = document.getElementsByClassName("hobby");
//方式二,querySelectorAll(".hobby") css选择器
var hobbys = document.querySelectorAll(".hobby");
for (var i = 0; i < hobbys.length; i++) {
if(hobbys[i].checked == true){
alert(hobbys[i].value);
}
}
}
</script>
</head>
<body>
<input type="checkbox" name="hobby" class="hobby" value="悠悠球"/>悠悠球
<input type="checkbox" name="hobby" class="hobby" value="乒乓球"/>乒乓球
<input type="checkbox" name="hobby" class="hobby" value="足足球"/>足足球
<input type="button" value="提交" onclick="demo()" />
</body>
操作内容
相关属性
| 属性名 | 描述 |
|---|---|
| element.innerText | 获取或者修改元素的纯文本内容 |
| element.innerHTML | 获取或者修改元素的html内容 |
| element.outerHTML | 获取或者修改包含自身的html内容 |
代码演示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
#myDiv {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="myDiv">
<h4>注释</h4>
程序猿最讨厌自己写注释，
同时也最讨厌别人不写注释
</div>
<script>
//获取id
let myDiv = document.getElementById('myDiv');
//innerHTML 获取标签中所有内容，包括标签；从对象的起始位置到终止位置的全部内容
console.info(myDiv.innerHTML);
console.info(myDiv.innerHTML="拉出去");
console.info(myDiv.innerHTML+="拉出去");
// innerText 获取标签中纯文本内容，不包括标签；
console.info(myDiv.innerText);
console.info(myDiv.innerText="拉出去");
console.info(myDiv.innerText+="拉出去");
// outerHTML 获取标签本身，修改标签本身 ，添加标签本身的后面
console.info(myDiv.outerHTML);
console.info(myDiv.outerHTML="<h1>别人从不写注释，不写文档... </h1>");
console.info(myDiv.outerHTML +="<h1>别人从不写注释，不写文档... </h1>");
</script>
</body>
</html>
总结
1. innerText 获取的是纯文本
innerHTML获取的是所有html内容
2. innerText 设置到页面中的是纯文本
innerHTML设置到页面中的html会展示出外观效果
3. innerHTML不包含自身
outerHTML包含自身的html内容
常用的事件
点击事件
| 事件 | 描述 |
|---|---|
| onclick | 单击事件 |
| ondblclick | 双击事件 |
焦点事件
| 事件 | 描述 |
|---|---|
| onblur | 失去焦点 |
| onfocus | 元素获得焦点 |
加载事件
| 事件 | 描述 |
|---|---|
| onload | 页面加载完成后立即发生 |
鼠标事件
| 事件 | 描述 |
|---|---|
| onmousedown | 鼠标按钮被按下 |
| onmouseup | 鼠标按键被松开 |
| onmousemove | 鼠标被移动 |
| onmouseover | 鼠标移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
键盘事件
| 事件 | 描述 |
|---|---|
| onkeydown | 某个键盘按键被按下 |
| onkeyup | 某个键盘按键被松开 |
| onkeypress | 某个键盘按键被按下并松开 |
改变事件
| 事件 | 描述 |
|---|---|
| onchange | 域的内容被改变 |
表单事件
| 事件 | 描述 |
|---|---|
| onsubmit | 提交按钮被点击 |
事件案例一
<script>
function demo(){
//获取用户输入信息
var name = document.querySelector("#uid").value;
//正则
var regExp = new RegExp("^1[3456789]\\d{9}$");
//判断是否满足正则
if(regExp.test(name)){
document.getElementById("spanid").innerText = "合法";
//提交到后台，后台到db，查询有没有这个手机号，如果有，手机号已存在！！
}else{
document.getElementById("spanid").innerText = "不合法";
}
}
function demo2(){
alert("我是聚焦事件")
}
</script>
</head>
<body>
手机号：<input type="text" name="username" id="uid" onblur="demo()" /><span id="spanid"></span><br>
密码：<input type="text" name="pwd" id="pid" onfocus="demo2()" /><span id="spanid"></span>
</body>
事件案例二
<script>
window.onload = function(){
//获取初始的图片
var _img = document.getElementById("img");
//绑定鼠标悬浮事件
_img.onmouseover = function(){
_img.src = "img/p4.jpg";
}
//绑定鼠标离开事件
_img.onmouseout = function(){
_img.src = "img/p3.jpg";
}
}
</script>
</head>
<body>
<img src="img/p3.jpg" id="img" width="450px"/>
</body>
事件案例三
<script>
window.onload = function(){
//获取input框
var _input = document.getElementById("iid");
//绑定键盘按下事件
_input.onkeydown = function(){
_input.style.background = "yellow";
}
//绑定键盘松开事件
_input.onkeyup = function(){
_input.style.background = "red";
}
}
</script>
</head>
<body>
<input type="text" id="iid" />
</body>
注意事项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function demo(){
alert(444)
}
</script>
</head>
<body>
<input type="button" value="提交" id="buttonid" onclick="demo()" />
<!--
约定大于配置： 很情况下在写代码，程序员都不约而同都这种写法
前端人员现在都不这种写法，把所有的样式都用css来控制
前端人员认为你不应该把事件写在标签中
前端人员认为你应该把事件写js，事件是js所有拥有
我们应该优先加载页面相关的样式，html结构
我们应该把页面以外的尽量写在页面下面
-->
<center>
<p>我爱你中国</p>
</center>
</body>
<script>
window.onload = function(){
var buttonid = document.getElementById("buttonid");
buttonid.onclick = function(){
alert(888);
}
}
</script>
</html>
操作节点
| createElement(标签) | 创建 |
|---|---|
| appendChild | 为某一个标签，去添加子标签 |
| 父元素对象.removeChild | 为某一个标签，删除孩子标签 |
| setAttribute | 为某一个标签添属性 |
| removeAttribute | 删除某一个标签中的属性 |
| createTextNode | 生成文本节点 |
appendChild添加子标签
<script>
function addElement(){
//创建标签
var _li = document.createElement("li");//<li></li>
//创建文本
var textNode = document.createTextNode("");
//添加文本到li标签中
_li.appendChild(textNode);//<li></li>
//添加到父标签中
document.getElementById("myul").appendChild(_li);
}
</script>
</head>
<body>
<ul id="myul">
<li>jack</li>
<li>rose</li>
</ul>
<input type="button" onclick="addElement()" value="添加子标签" />
</body>
removeChild删除子标签
指定删除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function demo(){
//指定删除子标签
var node = document.getElementById("x1");
//删除子标签
node.parentNode.removeChild(node);
}
</script>
</head>
<body>
<ul id="myul">
<li>jack</li>
<li id="x1">rose</li>
<li>tom</li>
<li>mary</li>
</ul>
<input type="button" onclick="demo()" id="inputid" value="删除子标签" />
</body>
</html>
删除全部
<script>
function demo(){
//获取id
var myul = document.getElementById("myul");
//根据父标签获取所有子标签
var childs = myul.childNodes;
//删除全部，必从后往前遍历，否则无法删除全部
for(var i = childs.length -1; i>= 0; i--){
myul.removeChild(childs[i]);
}
}
</script>
</head>
<body>
<ul id="myul">
<li>jack</li>
<li id="x1">rose</li>
<li>tom</li>
<li>mary</li>
</ul>
<input type="button" onclick="demo()" id="inputid" value="删除全部标签" />
</body>
依次删除
<script>
function demo(){
var arr = document.getElementsByTagName("li");
var dom = arr[0];
dom.parentNode.removeChild( dom );
}
</script>
</head>
<body>
<ul id="myul">
<li>jack</li>
<li>rose</li>
<li>tom</li>
<li>mary</li>
</ul>
<input type="button" onclick="demo()" value="依次删除子标签" />
</body>
setAttribute添加属性(*)
<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>
window.onload = function(){
//给所有input添加 autocomplete="off"
var tagName = document.getElementsByTagName("input");
for (var i = 0; i < tagName.length; i++) {
tagName[i].setAttribute("autocomplete","off");
}
}
</script>
removeAttribute删除属性
<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>
window.onload = function(){
//给所有input添加 autocomplete="off"
var tagName = document.getElementsByTagName("input");
//遍历
for (var i = 0; i < tagName.length; i++) {
//移除input框中所有name属性
tagName[i].removeAttribute("name");
}
}
</script>
操作样式
通过js动态修改元素的样式。
语法
-
设置一个css样式
js对象.style.样式名='样式值' -
批量设置css样式-了解
js对象.style.cssText='属性名：属性值;...' -
通过class设置样式【重点】
js对象.className='样式名称1 样式名称2 ...'
代码演示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.mpp {
background-color: orange;
}
</style>
</head>
<body>
<p id="p1">1. 设置一个css样式</p>
<p id="p2">2. 批量设置css样式</p>
<p id="p3">3. 通过class设置样式</p>
<script>
let p1 = document.getElementById("p1");//获取段落标签
let p2 = document.getElementById("p2");//获取段落标签
let p3 = document.getElementById("p3");//获取段落标签
// 1. 设置一个css样式
// 设置字体大小
p1.style.fontSize = "20px";
// 设置背景颜色
p1.style.backgroundColor = "green";
// 设置字体颜色
p1.style.color = "red";
// 2. 批量设置css样式
// 缺点：写起来太痛苦，而且还有耦合性
p2.style.cssText = "border:2px solid red; font-size:40px";
// 3. 通过class设置样式
p3.className = "mpp pp";
</script>
</body>
</html>
三.表单验证
页面准备
<form action="http://www.baidu" method="post" onsubmit="return demo();">
<table>
<tr>
<td>用户名:<font color="red">*</font></td>
<td>
<input type="text" name="name" value="请输入用户名" id="user"
onblur="checkuser()" onfocus="clearUserNameValue()">
<span id="userspan"></span>
</td>
</tr>
<tr>
<td>密码:<font color="red">*</font></td>
<td><input type="text" name="pwd" value="请输入密码"></td>
<span id="pwdspan"></span>
</tr>
<tr>
<td></td>
<td><input type="submit"></td>
</tr>
</table>
</form>
清空输入的用户名
<script>
/* 清除请输入用户名 */
function clearUserNameValue(){
var user_input = document.getElementById("user");
if(user_input.value == "请输入用户名"){
user_input.value ="";
}
}
</script>
校验用户名
/* 校验用户名 */
function checkuser(){
var username = document.getElementById("user").value;
var regExp = new RegExp("^[a-zA-Z]{4,12}$");
if(regExp.test(username)){
document.getElementById("userspan").innerHTML="";
}else{
document.getElementById("userspan").innerHTML="用户名必须是字母，并且4-12位!";
}
}
校验提交
/* 校验用户名 */
function checkuser(){
var username = document.getElementById("user").value;
var regExp = new RegExp("^[a-zA-Z]{4,12}$");
if(regExp.test(username)){
document.getElementById("userspan").innerHTML="";
return true;
}else{
document.getElementById("userspan").innerHTML="用户名必须是字母，并且4-12位!";
return false;
}
}
/* 校验不通过不提交 */
function demo(){
if(!checkuser()){
return false;
}
}
<form action="http://www.baidu" method="post" onsubmit="return demo();">
作业-全选全不选
仅供参考
页面准备
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vfNvNcyy-1677607234283)(images/image-20210705160454828.png)]
全选
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AFw3TgAX-1677607234284)(images/image-20210705160500947.png)]
全不选
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s5IC9WaL-1677607234285)(images/image-20210705160506456.png)]
反选
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HTD69xEd-1677607234286)(images/image-20210705160513834.png)]
全选/全不选
new RegExp(“1{4,12}$”);
if(regExp.test(username)){
document.getElementById(“userspan”).innerHTML=“”;
}else{
document.getElementById(“userspan”).innerHTML=“用户名必须是字母，并且4-12位!”;
}
}
## 校验提交
```js
/* 校验用户名 */
function checkuser(){
var username = document.getElementById("user").value;
var regExp = new RegExp("^[a-zA-Z]{4,12}$");
if(regExp.test(username)){
document.getElementById("userspan").innerHTML="";
return true;
}else{
document.getElementById("userspan").innerHTML="用户名必须是字母，并且4-12位!";
return false;
}
}
/* 校验不通过不提交 */
function demo(){
if(!checkuser()){
return false;
}
}
<form action="http://www.baidu" method="post" onsubmit="return demo();">
作业-全选全不选
仅供参考
页面准备
[外链图片转存中…(img-vfNvNcyy-1677607234283)]
全选
[外链图片转存中…(img-AFw3TgAX-1677607234284)]
全不选
[外链图片转存中…(img-s5IC9WaL-1677607234285)]
反选
[外链图片转存中…(img-HTD69xEd-1677607234286)]
全选/全不选
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5VeVKzi8-1677607234287)(images/image-20210705160519445.png)]
a-zA-Z ↩︎
更多推荐
JAVA保姆式上手教程之免费JAVA 案例day02-js高级
发布评论