BOM

BOM概述 :

BOM : Browser Object Model 浏览器对象模型

将浏览器的各个组成部分封装称对象
- ①浏览器本身就是一个对象 Navigator
- ②显示器屏幕对象 Screen
- ③浏览器窗口对象 window
  - (包含了地址栏对象 , 和历史记录对象 , DOM对象 Document)
- ④地址栏对象 location
- ⑤浏览器的历史记录对象 History

1.window窗口对象

(1)特点 :

window对象不需要创建可以直接使用 , window.方法名();
window引用可以省略 , 方法名();

(2)方法 :

①第一类 : 与弹出框有关的方法

① alert() 显示带有一段消息和一个确认按钮的警告框
② confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
- 如果用户点击确定按钮 , 则方法返回true
- 如果用户点击取消按钮 , 则方法返回false
- 一般是用来防止用户误操作
- ```
var flag = window.confirm("输入提示信息");
```
③ prompt() 显示可提示用户输入的对话框
返回值 , 获取用户输入的值

var s = prompt("请输入是否更换");

②第二类 : 与打开关闭窗口有关的方法

① close() : 关闭窗口

谁调用我 , 我就关谁

<body><img id="light" src="img/溜溜球.gif"><input type="button" value="打开窗口" id="open"><input type="button" value="关闭窗口" id="close"><script>var opens = document.getElementById("open");//创建open的对象var newwindow;opens.onclick = function (){newwindow = open("https://baidu.com");}var closes = document.getElementById("close");closes.onclick = function (){//使用打开窗口的对象 调用close()方法 , 这样就可以关闭新打开的窗口了newwindow.close();}</script>
</body>

② open() : 打开窗口

默认是打开一个空窗口
open(“中间是可以传参数的 , 想要跳转到那个页面 , 就把路径写进去”)

<body><img id="light" src="img/溜溜球.gif"><input type="button" value="打开窗口" id="open"><script>var opens = document.getElementById("open");opens.onclick = function (){open("https://baidu.com");}</script>
</body>

③第三类 : 与定时器有关的方法

① setTimeout() : 在指定的毫秒数后调用函数或者计算表达式

参数 :
- 1.js代码或者方法对象
- 2.毫秒值

//获取返回值对象
var id = setInterval(fun , 3000);
function fun(){var b = window.confirm('是否取消闹钟?');if (b){//确定是哪个对象调用的关闭方法clearInterval(id);}
}

② clearTimeout() : 取消由setTimeout()方法设置的定时器
③ setInterval() : 按照指定的周期 , (以毫秒计) , 来调用函数或计算表达式
④ clearInterval() : 取消由setInterval()方法设置的定时器

(3)属性 :

获取其他DOM对象
- location 地址栏
- history 历史
- Navigater 导航
- Screen 屏幕
获取DOM对象
- document

案例轮播图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>轮播图</title>
</head>
<body><img id="mg" src="img/溜溜球.gif"><script>setInterval(fun , 3000);var flag = true;var ID = document.getElementById("mg");function fun(){if (flag){ID.src = "img/小美女.gif";flag = false;}else{ID.src = "img/溜溜球.gif";flag = true;}}</script>
</body>
</html>

2.location地址栏对象

(1)创建 : (获取)

① window.location

② location

(2)方法 :

① assign() : 加载新的文档

② reload() : 重新加载当前文档

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>location对象</title>
</head>
<body><input type="button" value="刷新" id="but"><script>//reload()方法 , 定义一个按钮 , 点击这个按钮就去刷新当前页面var but = document.getElementById("but");but.onclick = function (){location.reload();}</script>
</body>
</html>

③ replace() : 用新的文档替换当前文档

(3)属性 : location.href

①href 设置URL

location.href = "URL路径";

②获取href

```
var href = location.href;
```
点击之后跳转到对应页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>location对象</title></head>
<body><input type="button" value="去百度" id="but"><script>//reload()方法 , 定义一个按钮 , 点击这个按钮就去刷新当前页面var but = document.getElementById("but");but.onclick = function (){location.href = "http://www.baidu.com";}</script>
</body>
</html>

案例页面倒计时跳转

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>倒计时跳转</title><style>p{text-align: center;}span{color: red;}</style>
</head>
<body>
<p><span id="s">5</span>秒之后 , 页面自动跳转</p>
<script>/*分析:1.显示页面的效果2.倒计时读秒实现 定时器*/var s = document.getElementById("s");setInterval(showtime , 1000);//设置一个初始值 , 用来下边修改标签体的时候用var count = 5;//修改时间的方法function showtime(){count--;if (count === 0){//这里不用进行关闭 , 因为脚本语言不同于编译语言 , 页面跳转之后 , 代码就失效了 , 所以不用进行关闭//clearInterval(close);location.href = "http://baidu.com";}//转换为字符串s.innerHTML = count + "";}
</script>
</body>
</html>

3.history历史记录对象

history对象包含了用户(在当前浏览器窗口中)访问过的URL

(1)创建 :

①window.history

②history

(2)方法 :

① back() : 后退

history.back(); //返回上一次页面

② forward() : 前进

history.forward(); //加载历史列表中下一个URL

③ go() : 加载历史列表中的某个具体页面

history.go(参数)  :
//相当于集成了back()和forward()方法
//整数 : 前进几个历史记录
//负数 : 后退几个历史记录

(3)属性 : history.length :

返回当前浏览器窗口历史列表中的URL数量

```
var 数量 = history.length;
```

DOM

DOM概述 :

DOM : Document Object Model : 文档对象模型

其实是将标记语言文档一次性加载进内存 , 在内存中形成一颗DOM树

将标记语言文档的各个组成部分 , 封装为对象 , 可以使用这些对象 , 对标记语言文档进行CRUD动态操作
是将html文档转换为DOM树结构
W3C DOM标准被分为三个不同的部分 :
- 核心DOM : 针对任何结构化文档的标准模型
  - Document : 文档对象
  - Element : 元素对象
  - Attribute : 属性对象
  - Text : 文本对象
  - Comment : 注释对象
  - Node : 节点对象 (其他五个的父对象)
- XML DOM : 针对XML文档的标准模型
- HTML DOM : 针对HTML文档的标准模型
代码 : 获取页面的标签(元素)对象 Element

document.getElementById("id值");
<!--通过元素的id获取元素对象-->
<body>
<img id="light" src="img/溜溜球.gif">
<script>
var elementById = document.getElementById("light");
</script>
</body>

操作Element对象 :

1.修改属性值

elementById.src = "img/小美女.gif";
<!--修改什么的值 , 对象后边就跟什么-->

2.修改标签体内容

属性 : innerHTML

elementById.innerHTML = "修改标签体中的内容";

1.核心DOM

(1)Document : 文档对象

①创建

1.window.document

2.document

②方法

1.获取Element元素对象

//根据id属性值获取元素对象
document.getELementById("id值");
//一般id值是唯一的

//根据元素名称获取元素对象们
document.getElementsByTagName("标签名称");
//返回值是一个数组  如果想指定是第几个标签
//在后边加一个[选择那一个]  例如 : 第一个
document.getElementsByTagName("标签名称")[0];
//一般标签是很多的

//根据class属性值获取元素对象们 , 只要class属性值一样 , 就能获取
document.getElementsByClassName("Class属性值");
//返回值是一个数组  如果想指定是第几个标签
//在后边加一个[选择那一个]  例如 : 第一个
document.getElementsByClassName("Class属性值")[0];
//一般class可以是多个

//根据name值获取元素对象们
document.getElementsByName("name值");
//返回值是一个数组  如果想指定是第几个标签
//在后边加一个[选择那一个]  例如 : 第一个
document.getElementsByName("name值")[0];
//一般在多选框和复选框中有name的值

2.创建其他DOM对象

//创建有指定名称的属性节点 , 并返回新的Attr对象
document.createAttribute(name)

//创建注释节点
document.createComment()

//创建元素节点
document.createElement()

//创建文本节点
document.createTextNode()

(2)Element : 元素对象

①创建(获取) : 通过document 来获取和创建

②方法 :

1.removeAttribute() : 删除属性

2.setAttribute() : 设置属性

③案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Element对象</title>
</head>
<body><a>点我试一试</a><input type="button" value="设置属性" id="btn_set"><input type="button" value="删除属性" id="btn_remove">
<script>var btn = document.getElementById("btn_set");btn.onclick = function(){var s = prompt("请输入跳转地址");var a = document.getElementsByTagName("a")[0];a.setAttribute("href" , s);}var btn_remove = document.getElementById("btn_remove");btn_remove.onclick = function(){var remove = document.getElementsByTagName("a")[0];var b = confirm("是否删除");if (b){remove.removeAttribute("href");}}
</script>
</body>
</html>

(3)Node : 节点对象 (其他五个的父对象)

节点 : 可以是元素节点 , 文本节点 , 属性节点 , …
注意 : 虽然所有的对象均能继承用于处理父节点和子节点的属性和方法 , 但是并不是所有的对象都拥有父结点或者子节点 , 例如 : 文本节点不能拥有子节点 , 所以向类似的节点添加子节点就会导致DOM错误
特点 : 所有DOM对象都可以被认为是一个节点

①CRUD方法 :

1.appendChild() 向节点的子节点列表的结尾添加新的子节点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Node对象</title><style>div{border: 1px solid red;}#div1{width: 200px;height: 200px;}#div2{width: 100px;height: 100px;}#div3{width: 100px;height: 100px;}</style>
</head>
<body>
<div id="div1"><div id="div2">div2</div>div1</div>
<input type="button" value="删除文字" id="btn_remove">
<input type="button" value="添加子节点" id="btn_add">
<script>var btn_remove = document.getElementById("btn_remove");btn_remove.onclick = function(){var div1 = document.getElementById("div1");var div3 = document.getElementById("div3");div1.removeChild(div3);}var btn_add = document.getElementById("btn_add");btn_add.onclick = function(){//给div1添加子节点var div1 = document.getElementById("div1");//创建div节点var div3 = document.createElement("div");div3.setAttribute("id" , "div3");div1.appendChild(div3);}
</script>
</body>
</html>

2.removeChild() 删除(并返回)当前节点的指定子节点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Node对象</title><style>div{border: 1px solid red;}#div1{width: 200px;height: 200px;}#div2{width: 100px;height: 100px;}</style>
</head>
<body>
<div id="div1"><div id="div2">div2</div>div1</div><input type="button" value="删除文字" id="btn">
<script>var elementById = document.getElementById("btn");elementById.onclick = function(){var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");div1.removeChild(div2);}
</script>
</body>
</html>

3.replaceChild() 用新节点替换一个子节点

4.parentNode() 返回节点的父节点

使用 :
```
对象.parentNode;//这里不用加()
```

综合案例 : 动态表格

<!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="sex" placeholder="请输入性别"><input type="button" id="btn_add" value="添加"></div>
<table><caption>学生信息表</caption><tr><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td>1</td><td>思尘</td><td>男</td>
<!--    每一个a里边加一个onclick点击事件 , 方法中传一个值this表示当前超连接的对象    --><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>var btn_add = document.getElementById("btn_add");//1.1.给添加按钮绑定单击事件btn_add.onclick = function(){//1.2.获取文本框中的内容var id = document.getElementById("id").value;var name = document.getElementById("name").value;var sex = document.getElementById("sex").value;//1.3.创建 td 设置td的文本为文本框的内容var td_id = document.createElement("td");var text_id = document.createTextNode(id);td_id.appendChild(text_id);var td_name = document.createElement("td");var text_name = document.createTextNode(name);td_name.appendChild(text_name);var td_sex = document.createElement("td");var text_sex = document.createTextNode(sex);td_sex.appendChild(text_sex);var td_a = document.createElement("td");var a = document.createElement("a");a.setAttribute("href" , "javascript:void(0);");a.setAttribute("onclick" , "del(this)");var a_text = document.createTextNode("删除");a.appendChild(a_text);td_a.appendChild(a);//1.4.创建trvar tr = document.createElement("tr");//1.5.将td添加到tr中tr.appendChild(td_id);tr.appendChild(td_name);tr.appendChild(td_sex);tr.appendChild(td_a);//1.6.获取table , 将tr添加到table中var table = document.getElementsByTagName("table")[0];table.appendChild(tr);}//删除操作function del(obj){var table_remove = obj.parentNode.parentNode.parentNode;var obj_tr = obj.parentNode.parentNode;table_remove.removeChild(obj_tr);}
</script>
</body>
</html>

2.HTML DOM

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HTML DOM</title>
</head>
<body><div id="div1">div</div>
<script>//获取div对象var div = document.getElementById("div1");//修改div标签中的内容(将标签体文本替换为输入框)//div.innerHTML = "<input type='text'>";//在div标签中追加一个文本输入框 (使用+=符号来完成)//div.innerHTML += "<input type='text'>";
</script>
</body>
</html>

(1)案例 : 使用innerHTML简化动态表格

<!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="sex" placeholder="请输入性别"><input type="button" id="btn_add" value="添加">
</div>
<table><caption>学生信息表</caption><tr><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td>1</td><td>思尘</td><td>男</td><!--    每一个a里边加一个onclick点击事件 , 方法中传一个值this表示当前超连接的对象    --><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>var btn_add = document.getElementById("btn_add");//1.1.给添加按钮绑定单击事件btn_add.onclick = function(){//1.2.获取文本框中的内容var id = document.getElementById("id").value;var name = document.getElementById("name").value;var sex = document.getElementById("sex").value;//获取table对象var table = document.getElementsByTagName("table")[0];table.innerHTML += "<tr>" +"    <td>"+id+"</td>" +"    <td>"+name+"</td>" +"    <td>"+sex+"</td>" +"    <td><a href='javascript:void(0);' οnclick='del(this)'>删除</a></td>" +"  </tr>";}function del(obj){var table_remove = obj.parentNode.parentNode.parentNode;var obj_tr = obj.parentNode.parentNode;table_remove.removeChild(obj_tr);}
</script>
</body>
</html>

(2)控制元素样式

①使用元素的style来设置样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>控制样式</title>
</head>
<body><div id="div1">div</div>
<script>var div1 = document.getElementById("div1");div1.onclick = function (){//修改样式方式1div1.style.border = "1px solid red";div1.style.width = "200px";//如果是两个单词的属性//font-size --> fontSize (去掉横杠 , 第二个首字母大写)div1.style.fontSize = "20px";}
</script>
</body>
</html>

②提前定义好类选择器的样式 , 通过元素的className属性来设置样式

css样式:

<style>.d1{border: 1px solid red;width : 100px;height : 100px;}.d2{border: 1px solid blue;width : 200px;height : 200px;}
</style>

方法

var div2 = document.getElementById("div2");div2.onclick = function (){//第二种方式 : 使用class选择样式div2.className = "d2";
}

事件

功能 : 某些组件被执行了某些操作后 , 触发某些代码的执行

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

如何绑定事件

1.直接在html标签上 , 指定事件的属性 , 属性值就是js的代码

<img  id="light" src="img/溜溜球.gif"
onclick="document.getElementById('light').src = 'img/小美女.gif'">
<!--或者是调用一个js函数-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件绑定操作</title><script>function fun(){alert("我被点了");alert("我又被点了");}</script>
</head>
<body>
<img  id="light" src="img/溜溜球.gif" onclick="fun()">
</body>
</html>

2.通过js获取元素对象 , 指定事件属性 , 设置一个函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件绑定操作</title>
</head>
<body><img  id="light2" src="img/溜溜球.gif"><script>function fun(){alert("我被点了");alert("我又被点了");}//获取light2对象var elementById = document.getElementById("light2");//这里不能加括号 , 加括号相当于立即执行elementById.onclick = fun;</script>
</body>
</html>

1.点击事件 :

(1)单击事件 : onclick

(2)双击事件 : ondblclick

2.焦点事件 :

(1)失去焦点 : onblur

一般用于表单校验的时候 , 当失去焦点后 , 校验用户输入的数据是否合法

(2)获得焦点 : onfocus

3.加载事件 :

(1) onload : 一个页面或一幅图片完成加载 , 执行事件

一般是给 body加一个id , 用来获取body对象 ,设置加载事件
或者是给window 设置加载事件直接
```
window.onload = function(){}
```

4.鼠标事件 :

(1) onmousedown : 鼠标按钮被按下

鼠标点击的时候 , 在function中传一个参数 event
event的属性event.button可以获取是鼠标那个按键按的

document.getElementById("username").onmousedown = function (event){alert(event.button);//左键是0 , 滚轮是1 , 右键是2}

(2) onmouseup : 鼠标按钮被松开

(3) onmousemove : 鼠标被移动

(4) onmouseout : 鼠标从某元素移开

(5) onmouseover : 鼠标移到某元素之上

5.键盘事件 :

(1) onkeydown : 键盘某个按键被按下

一般是用来获取回车按下事件值为13 , 来进行判断是否登录(或者发送数据)的
和鼠标点击一样 , 这里也可以创建一个形参 event , 然后用event.keyCode属性来获取那个按键
注意 : 在中文输入法的情况下会出现都是229的情况 ,
这个时候使用onkeyup属性即可解决这个问题

document.getElementById("username").onkeyup = function (event){alert(event.keyCode);}

(2) onkeyup : 键盘某个按键被松开

(3) onkeypress : 键盘某个按键被按下并松开

6.选择和改变 :

(1) onchange : 域的内容被改变

一般使用在下拉框中 , 如果域中内容变了 , 就改变数据

document.getElementById("city").onchange = function (){alert("内容变化了...");}

<!--给select添加一个id-->
<select id="city"><option>---请选择---</option><option>上海</option><option>北京</option><option>深圳</option>
</select>

(2) onselect : 文本被选中

7.表单事件 :

(1) onsubmit : 确认按钮被点击

可以阻止表单提交 , 如果用户输入格式不正确 , 就阻止提交 ,

document.getElementById("from").onsubmit = function (){var flag = false ;//  这里flag暂时定为false , 可以加条件判定return flag;//返回值为false时 , 不能提交 , 返回值为true时 , 才可以提交}

(2) onreset : 重置按钮被点击

综合案例: 表格全选

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>table{border: 1px solid red;width: 500px;margin-left: 30%;}td,th{text-align: center;border: 1px solid;}div{margin-top: 10px;margin-left: 30%;}.s1{background-color: red;}.s2{background-color: #fff;}</style><script>/*分析 :全选功能获取当前所有的checkbox遍历checkbox , 设置所有checkbox的状态为选中 checked* *///1.在页面加载完成之后绑定事件window.onload = function(){//2.给全选按钮绑定事件document.getElementById("selectAll").onclick = function(){var checkboxs = document.getElementsByName("cb");for (const checkbox of checkboxs) {checkbox.checked = true ;}}//3.给全不选按钮绑定事件document.getElementById("unselectAll").onclick = function (){var checkboxs = document.getElementsByName("cb");for (const checkbox of checkboxs) {checkbox.checked = false ;}}//4.给反选按钮绑定事件document.getElementById("selectRev").onclick = function (){var checkboxs = document.getElementsByName("cb");for (const checkbox of checkboxs) {/*if (checkbox.checked === true){checkbox.checked = false;}else if (checkbox.checked === false){checkbox.checked = true;}*///这里不用判断 , 直接checkbox.checked = !checkbox.checked;}}//给第一行的选择框设置事件document.getElementsByName("ccbb")[0].onclick = function (){var checkboxs = document.getElementsByName("cb");for (const checkbox of checkboxs) {checkbox.checked = this.checked ;}}//给所有tr绑定鼠标移入移出事件var trs = document.getElementsByTagName("tr");for (const tr of trs) {//移入事件tr.onmouseover = function (){this.className = "s1";}//移出事件tr.onmouseout = function (){this.className = "s2";}}}</script>
</head>
<body><table><caption>学生信息表</caption><tr><th><input type="checkbox" name="ccbb"></th><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td><input type="checkbox" name="cb"></td><td>1</td><td>思尘</td><td>男</td><td><a href="javascript:void(0)">删除</a></td></tr><tr><td><input type="checkbox" name="cb"></td><td>2</td><td>尘</td><td>女</td><td><a href="javascript:void(0)">删除</a></td></tr><tr><td><input type="checkbox" name="cb"></td><td>3</td><td>怪</td><td>男</td><td><a href="javascript:void(0)">删除</a></td></tr></table>
<div><input type="button" id="selectAll" value="全选"><input type="button" id="unselectAll" value="全不选"><input type="button" id="selectRev" value="反选">
</div>
</body>
</html>

综合案例:表单校验

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>黑马注册</title><style>*{margin: 0px;padding: 0px;box-sizing: border-box;}body{background: url("http://y0.ifengimg.com/a/2015_03/ea616d5226561b0.jpg") no-repeat center;background-size: cover;}.rg_layout{width: 900px;height: 500px;border: 5px solid #EEEEEE;background-color: white;margin: auto;margin-top: 15px;}.rg_left{float: left;margin: 15px;}.rg_left p:first-child{color: #FFD026;font-size: 20px;}.rg_left p:last-child{color: #A6A6A6;font-size: 20px;}.rg_center{float: left;width: 450px;}.rg_right{float: right;}.rg_right p:first-child{font-size: 10px;}.rg_right p a{color: pink;}.td_left{width: 100px;height: 45px;text-align: right;}.td_right{padding-left: 40px;}#username,#password,#email,#name,#tel,#birthday,#checkcode{width: 251px;height: 32px;border: 1px solid #A6A6A6;border-radius: 5px;padding-left: 10px;}#checkcode{width: 110px;}#img_check{height: 32px;vertical-align: middle;}#btn_submit{width: 150px;height: 40px;background-color: #FFD026;border: 1px solid #FFD026;}#s_password,#s_username{font-size: 12px;}.error{color: red;}.ok{color: green;}</style><script>/*分析1.给表单绑定一个onsubmit事件 , 监听器中判断每一个方法的校验结果如果都为true , 则监听器返回true ,有一个为false , 则监听器返回false .2.定义一些方法分别校验表单项3.给各个表单项绑定onblur失去焦点事件* */window.onload = function (){//1.给表单绑定 onsubmit 事件document.getElementById("form").onsubmit = function (){//调用用户名校验方法  checkUsername();//调用密码校验方法   checkPassword();// return checkUsername() && checkPassword();return checkUsername() && checkPassword();}//给用户名绑定失去焦点事件document.getElementById("username").onblur = function funCheckUsername(){checkUsername();}//给密码绑定失去焦点事件document.getElementById("password").onblur = function funCheckPassword(){checkPassword();}//校验用户名function checkUsername(){//1.获取用户名的值var username = document.getElementById("username").value;//2.定义正则表达式var reg_username = /^\w{6,12}$/;//3.判断值是否符合正则表达式的规范var flag = reg_username.test(username);//获取spanvar s_username = document.getElementById("s_username");//4.判断flag , 提示信息if (flag){//提示绿色对√s_username.innerHTML = "√";s_username.setAttribute("class","ok");}else{//校验失败提示  红色的格式不正确s_username.innerHTML = "格式错误";s_username.setAttribute("class","error");}return flag;}//校验密码function checkPassword(){//1.获取用户名的值var password = document.getElementById("password").value;//2.定义正则表达式var reg_password = /^\w{6,12}$/;//3.判断值是否符合正则表达式的规范var flag = reg_password.test(password);//获取spanvar s_password = document.getElementById("s_password");//4.判断flag , 提示信息if (flag){//提示绿色对√s_password.innerHTML = "√";s_password.setAttribute("class","ok");}else{//校验失败提示  红色的格式不正确s_password.innerHTML = "格式错误";s_password.setAttribute("class","error");}return flag;}}</script>
</head>
<body>
<!--大框-->
<div class="rg_layout">
<!-- 左边 --><div class="rg_left"><p>新用户注册</p><p>USER REGISTER</p></div>
<!--  右边--><div class="rg_right"><p>已有账号<a href="#">立即登录</a></p></div>
<!--  中间--><div class="rg_center"><div class="rg_form"><!--定义表单 form--><form action="https://www.baidu.com/" id="form" method="get"><table><tr><td class="td_left"><label for="username">用户名</label></td><td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"><span id="s_username"></span></td></tr><tr><td class="td_left"><label for="password">密码</label></td><td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"><span id="s_password"></span></td></tr><tr><td class="td_left"><label for="email">Email</label></td><td class="td_right"><input type="email" name="email" id="email" placeholder="请输入Email"></td></tr><tr><td class="td_left"><label for="name">姓名</label></td><td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td></tr><tr><td class="td_left"><label for="tel">手机号</label></td><td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td></tr><tr><td class="td_left"><label>性别</label></td><td class="td_right"><input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女</td></tr><tr><td class="td_left"><label for="birthday">出生日期</label></td><td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td></tr><tr><td class="td_left"><label for="checkcode">验证码</label></td><td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"><img id="img_check" src="img/验证码.png"></td></tr><tr><td colspan="2" align="center"><input type="submit" id="btn_submit" value="注册"></td></tr></table></form></div></div>
</div>
</body>
</html>

BOM和DOM和事件相关推荐

【黑马JS笔记】BOM对象DOM对象事件
DOM:文档对象模型,将标记语言文档的各个元素封装为一个对象,通过树结点的方式控制html文档内容在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点: ...
java day34【ECMAScript 、BOM 、DOM 、事件】
第一章 DOM简单学习:为了满足案例要求 * 功能:控制html文档的内容 * 获取页面标签(元素)对象:Element * document.getElementById("id值&qu ...
【前端】JS的BOM和DOM，事件，表单验证案例
先看小练习1:开关灯用到的Dom相关知识点 * 功能:控制html文档的内容 * 获取页面标签(元素)对象:Element* document.getElementById("id值&qu ...
JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
javascript原生事件句柄、BOM、DOM对象属性方法总结
javascript原生事件句柄.BOM.DOM对象属性方法总结 JS事件句柄事件句柄类型说明 onabort 事件句柄图像加载被中断 onblur 事件句柄元素失去焦点 onfocus 事 ...
python 全栈开发，Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)...
昨日内容回顾 1.三种引入方式1.行内js <div onclick = 'add(3,4)'></div>//声明一个函数function add(a,b){}2.内接js& ...
前端之 BOM 和 DOM
前戏到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互.也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DOM ...
前端基础之BOM和DOM
前戏到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...
html中dom和bom,区分BOM和DOM，区分window、document、html、body
JavaScript三大组成部分 1. ECMAScript ECMAScript是JavaScript的语法标准,由ECMA(欧洲计算机厂家协会)制定的. 2. BOM BOM即浏览器对象模型(br ...