Bom对象
bom: browser object model 浏览器对象模型 js希望和浏览器有一定的交互能力
window对象
所有的浏览器都支持window对象。它表示的浏览器窗口
window对象是js中的顶层对象,所有的js函数,变量等都是window对象成员
甚至Dom的document也是window对象的属性之一
frameset
可以把window页面进行分割, 是一个框架标签,把页面引入或者进行割,最大的缺点就不能body一块使用
<frameset> 分割的标签
<frame> 标签 引入其他页面
<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>
<head>
<meta charset="utf-8">
<title></title>
<script>
function demo(){
var con = window.confirm("我这么可爱你确定要删除我吗???");
if(con){
alert("算你狠!");//真正的删除了
}else{
alert("我知道你还是爱我的,么么哒!");//取消
}
}
</script>
</head>
<body>
<button onclick="demo()">删除</button>
</body>
</html>
时间周期
clearInterval() | 取消由setInterval()设置的timeout |
---|---|
clearTimeout() | 取消setTimeout()设置的timeout |
setInterval() | 指定时间周期 |
setTimeout() | 在指定的毫秒数后调期函数或者计算表达式 |
案例让时间走动,进行开始或者停止控制
<script>
//设置一个时间周期,参数1:表示是一个调用的方法,参数2:表示的时间周期
var interval_id = window.setInterval("_setTime()",1000);
//页面一刷新,用户就可以看到时间,但是这个是静态的
window.onload = function(){
//获取id
var _time = document.getElementById("_time");
//获取当前时间
var date = new Date();
//把时间写入到span标签中
_time.innerHTML = date.toLocaleString();
}
function _setTime(){
//获取id
var _time = document.getElementById("_time");
//获取当前时间
var date = new Date();
//把时间写入到span标签中
_time.innerHTML = date.toLocaleString();
}
//停止时间
function _stopTime(){
window.clearInterval(interval_id);//获取设置时间周期的id
}
//开始时间
function _stratTime(){
interval_id = window.setInterval("_setTime()",1000);
}
</script>
</head>
<body>
<span style="color: red;" id="_time"></span>
<input type="button" value="停止时间" onclick="_stopTime()"/>
<input type="button" value="开始时间" onclick="_stratTime()"/>
</body>
倒记时案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- html中有一个meta标签,可以实现页面刷新,可以看作是倒记时 -->
<meta http-equiv="refresh" content="10;url=https://www.baidu.com">
<title></title>
<!-- 通过js配合meta标签,把这个倒记时的时间,显示给用户,效果是时间递减 -->
<script>
var time = 10;
window.onload = function(){
window.setInterval("setTime()",1000);
}
function setTime(){
document.getElementById("spanid").innerHTML = time;
time--;
}
</script>
</head>
<body>
<center>
<span style="font-size: 78px; color:orange; text-align: center;" id="spanid"></span>
秒后跳转到<a href="https://www.baidu.com"> 百度</a>
</center>
<div align="center">
<img src="img/404.jpg" />
</div>
</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列表中的某一个具体的页面 |
<!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.com";
}
</script>
</head>
<body>
<input type="button" value="查询订单" onclick="order()"/>
<a href="http://www.baidu.com">查询订单</a>
</body>
</html>
Dom对象
Dom对象: Document Object Model 文档对象模型
W3C组织规定:
当浏览器把一个html文件加载到内存中之后,这个html文件,就是一个Document对象。并且在浏览器加载html文件中的所有标签时,把html文件中的所有标签页加载成不同的标签对象,以及标签中的属性,也加载成属性对象,标签中的文本也加载成文本对象。
浏览器在加载某个标签时,标签的文本数据,被加载成当前标签的一个子标签。当我们把一个html文件加载完成之后,他们就得到这个html文件中的所有标签,属性,文本对象。可以使用js技术结合Document对象,对html文件中的所有标签,进行各种操作。
在浏览器把html文件加载完成之后,标签被称作标签对象(元素节点),标签中的文件称为文本节点(文本对象),标签的属性称为属性节点(属性对象)。
节点信息:
nodeName(节点名称) nodeVale(节点值) nodeType(节点类型)
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 | 删除某一个标签中的属性 |
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";
</script>
</body>
</html>
表单验证
页面准备
<form action="http://www.baidu.com" 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.com" method="post" onsubmit="return demo();">