目录
2.一元运算符：只有一个运算数的运算符 e.g:a++ 、+3
7.比较与运算符：>、<、>=、<=、==、===(全等于）： 例子：
一、基本语法
1.与html结合方式：
1.内部js:可以写在html的任意位
2.外部js：用src加载外部js文件
注意：<script>标签在一个html页面内可以定义多个。
2.注释
3.数据类型
1.原始数据类型（基本数据类型）
2.引用数据类型：对象
4.变量
例子：
5.运算符
1.typeof(变量名） ：查看变量类型
2.一元运算符：只有一个运算数的运算符 e.g:a++ 、+3
3.二元运算符：a+b
4.三元运算符：?：、表达式 ：简化if...else:
5.算术运算符：+、-、*、/、%...
6.赋值运算符：=、+=、*=、/=
7.比较与运算符：>、<、>=、<=、==、===(全等于）：
例子：
8.逻辑运算符：&&、||、！
1.&&：与（短路）：如果左边你能得出答案是true，则就不进行右边表达式的判断，直 接真个表达是就是true，不管右边是false还是什么都不进行判断。
2. || ：或（短路）：与上同理，不过这里是false
3.其他类型转boolean:
6.流程控制语句
例子：
7.特殊语法
二、基本对象
1.function:函数（方法）对象
2.Array:数组对象
1.创建：3种方法，如果只有一个参数，那么就是代表数组的长度
2.特点：
1.js中，数组元素的类型是可变的
2.js中，数组的长度是可变的，没有赋值的arr[i]显示undefined
3.方法：
1.join(参数）：将数组中的元素按照指定的分隔符拼接成字符串
结果：
2.push(要添加元素值):向数组中添加元素
3.pop(要抛出数组中的元素的下标）：弹出数组中的元素
3.Date对象
1.创建：var date=new Date(); //显示当前日期
结果：
2.方法
1.toLocaleString():返回当前date对象对应的时间本地字符串格式
结果：
2.getTimme(）：获取毫秒值，返回当前如期对象描述的时间到1970年1月1日零点的 毫秒时差
4.Math：数学对象
1.创建：
*特点：math对象不需要创建直接调用即可
2.方法：
1.属性圆周率PI
2.random() :返回0.0~1.0之间的随机数：[0，1）
3.ceil(x) :对数进行上舍入（向上取整）
4.floor(x) ：对数进行下舍入（向下取整）
5.round(x) : 把数四舍五入为接近的整数
例子：
5.RegExp:正则表达式对象
1.正则表达式：定义字符串的组成规则。
1.单个字符：[]
如：[a] [ab] [a-zA-z0-9_]
*特殊符号代表特殊含义的单个字符：
\d:单个数字字符[0-9]
\w:单个单词字符[a-za-z0-9_]
2.量词符号：
？：表示出现0次或1次
*：表示出现0次或多次
+：表示出现1次或多次
{m,n} :表示m<=数量 <=n
* m如果缺省：{,n}:最多n次
* n如果缺少：{m,}：最少m次
3.开始结束符号：
* ^：开始
* $:结束
2.正则表达式对象：
1.创建：推荐使用第二种
2.方法
1.test(参数）：验证指定的字符串是否符合正则定义的规范
注意：只要是符合正则定义规则，就返回true
解释下面图：reg2正则对象是由单个单词字符组成的字符串，而且长度最小是6，最大是12，如果username也是reg2正则定义的规则，就是如果不是由单个单词字符组成的字符串或者是长度小于6或者大于6，那么就代表了username违法了reg2的正则规范，那么就返回false，否则false。
用途：表单校验依赖于正则表达式，可以使用test来判断用户填写的信息是否符合你定义的规则，如果不是则返回false.
6. Global
1.特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。
调用方法：方法名();
2.方法：
例子：
三、事件
1.概念：某些组件被执行了某些操作后，触发某些代码的执行
2.事件：某些操作，如：单击、双击、键盘按下、鼠标移动
3.事件源：组件。如：按钮、文本输入框
4.注册监听器：将事件、事件源、监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器的代码。
6.常见的事件：
1.点击事件：
1.onclick:单击事件
2.ondbclick:双击事件
2.焦点事件：
1.onblur:失去焦点
2.onfocus:元素获得焦点
3.加载事件：
1.onload:一张页面或一幅图像完成加载
4.鼠标事件：
1.onmousedown:鼠标按钮被按下
2.onmouseup:鼠标按键被松开
3.onmousemove:鼠标被移动
4.onmouseover:鼠标移到某元素之上
5.onmouseout:鼠标从某元素移开
5.键盘事件：
1.onkeydown:某个键盘按键被按下
2.onkeyup:某个按键被松开
3.onkeypress:某个键盘按键被按下并松开
6.选择和改变：
1.onchange:域的内容被改变
2.onselect:文本被选中
7.表单事件：
1.onsubmit:确认按钮被点击
2.onreset:重置按钮被点击
例子：
1.失去焦点事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见事件</title>
</head>
<body>
<input id="username">
//注意：是按代码顺序执行的，因此先执行文本框在失去焦点时可以的
//注意：只要获得焦点后才能失去焦点
<script>
document.getElementById("username").onblur=function(){
alert("失去焦点了....");
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见事件</title>
</head>
<script>
document.getElementById("username").onblur=function(){
alert("失去焦点了....");
}
</script>
<body>
//注意：是按代码顺序执行的，因此这里先执行了js,后执行body里面的文本框，这样时获取不到id="username"的，会报错。
//注意：只要获得焦点后才能失去焦点
<input id="username">
</body>
</html>2.事件用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见事件</title>
</head>
<body>
<form action="#" id="form" >
<form action="#" onclick="return CheckForm()"> //第二种表单事件方法
//注意：是按代码顺序执行的，因此这里先执行了js,后执行body里面的文本框，这样时获取不到id="username"的，会报错。
<input name="username" id="username">
<select id="city">
<option>请选择</option>
<option>北京</option>
<option>上海</option>
<option>浙江</option>
</select>
<input type="submit" value="提交">
</form>
</body>
<script>
//加载完成事件：当所有页面加载完成后再触发或加载js代码
window.onload=function(){
document.getElementById("username").onblur=function(){
//失去焦点事件
//注意：只要获得焦点后才能失去焦点
alert("失去焦点了....");
}
document.getElementById("username").onmouseover=function(){
//绑定鼠标事件，当鼠标移到元素之上，就弹出
alert("鼠标来了。。。");
}
document.getElementById("username").onmousedown=function(){
//绑定鼠标点击事件，当鼠标点击与元素时就弹出
alert("鼠标点击了。。。");
}
document.getElementById("username").onmousedown=function(event){
//这里定义方法时，定义一个形参，接收event对象，event对象的button属性可以 获取鼠标哪个按钮键被点击
//绑定鼠标点击事件，当鼠标点击与元素时就弹出
alert(event.button);//鼠标从左到右数字为0，1，2（左键，滑轮，右键）
}
document.getElementById("username").onkeydown=function(event){
//绑定键盘点击事件，当键盘时就弹出
//keyCode是知道哪个键盘键被按下了，虽然选择已经不推荐使用了，但是浏览器还是能支持
if(event.keyCode==13){
alert("提交表单"); //13是回车
}
document.getElementById("username").onchange=function(){
//选择和改变事件，当文本框内容改变了就弹出
alert("改变了。。");
}
document.getElementById("city").onchange=function(){
//选择和改变事件，当下拉选择框内容改变了就弹出
alert("改变了。。");）
}
document.getElementById("form").onsubmit=function(){
//表单事件onsubmit,可以阻止表单的提交，方法返回false则表单被阻止提交
//用于校验用户名格式是否正确
var flag=false;//假设校验通过
return flag;
}
//表单事件第二种方法
function CheckForm(){
return false;
//或 return true;
}
}
</script>
</html>（1）表单全选例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
border:1px solid;
width:500px;
margin-left:30%;
}
td,th{
text-align:center;
border:1px solid;
}
div{
margin-top:10px;
margin-left: 30%;
}
.out{
background-color:aliceblue
}
.over{
background-color:blue;
}
</style>
<script>
/*
（1）.js中的getElementByName是根据name属性获取一组元素节点对象
（2）.js中的getElementByTagName是寻找有着标签名的所有元素
*/
//1.在页面加载完成后执行下面操作
window.onload=function(){
// 2.给全选按钮
document.getElementById("selectAll").onclick=function(){
//全选
var cbs=document.getElementsByName("cb");//获取所有的checkbox
for (var i=0;i<cbs.length;i++){//遍历
cbs[i].checked=true;//设置每一个cb的状态为选中checked
}
}
document.getElementById("unselectAll").onclick=function(){
//全不选
var cbs=document.getElementsByName("cb");//获取所有的checkbox
for (var i=0;i<cbs.length;i++){//遍历
cbs[i].checked=false;//设置每一个cb的状态为选中checked
}
}
document.getElementById("selectRev").onclick=function(){
//反选
var cbs=document.getElementsByName("cb");//获取所有的checkbox
for (var i=0;i<cbs.length;i++){//遍历
//注意：反选不应该去判断他，应该直接取反
// if(cb[i]==true){
// cbs[i].checked=false;//设置每一个cb的状态为选中checked
// }
cbs[i].checked= ! cbs[i].checked;
}
}
document.getElementById("safirst").onclick=function(){
//全选第一个框框
var cbs=document.getElementsByName("cb");//获取所有的checkbox
for (var i=0;i<cbs.length;i++){//遍历
//或 cbs[i].checked=safirst.checked;//设置每一个cb的状态于sa状态一样的checked
cbs[i].checked=this.checked;
}
}
//给所有tr绑定移到元素之上和移除元素之上的鼠标事件
var trs=document.getElementsByTagName("tr");//获取tr
for(var j=0;j<trs.length;j++){
//移到元素之上
trs[j].onmouseover=function(){
this.className="over"; //改变属性背景色
}
//移出元素
trs[j].onmouseout=function(){
this.className="out";
}
}
}
</script>
</head>
<body>
<table>
<caption>学生信息表</caption>
<tr>
<td><input type="checkbox" name="cb" id="safirst"></td>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td><a href="javascript:void(0);">删除</a></td>
</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>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>4</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>表单全选效果：
（2）表单验证：
分析：1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。
如果都为true，则监听器方法返回true.
如果有一个为false,则监听器方法返回false
2.定义一些方法分别校验各个表单项
3.给各个表单项绑定onblur事件
表单校验例子（这里只写了用户名的，因为其他也是同理的）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册页面（表单验证）</title>
</head>
<style>
body{
background-color: aquamarine ;
background-repeat:repeat;
text-align: center;
}
.content{
width:600px;
height:650px;
background-color: rgb(255,255,255,50%);
/*margin-left:20%;*/
/*margin-right: 50%;*/
/*margin-top:20%;*/
/*margin-bottom:50% ;*/
margin:auto;/*让盒子居中*/
/*padding:10px;内边距*/
}
#title{
background-color: rgb(0,0,250,50%);
text-align: center;
padding: 20px;
}
.login{
width:600px;
height:500px;
}
#footer p a{
color:red;
}
#footer{
margin-top:40px;
}
.td_left{
width:200px;
text-align: right;
height:50px;
font-size: large;
}
.td_right{
/*margin-right:50px;*/
width:600px;
padding-right : 100px;
}
#username,#phone,#email,#department,#password,#sure_password{
width:250px;
height:30px;
border:1px ;
solid:#A66A6A6;
border-radius:5px;
padding-left:20px;
}
#verification_code{
width:150px;
height:30px;
border:1px ;
solid:#A66A6A6;
border-radius:5px;//圆角
padding-left:20px;//左外边距
}
#img_verification_code{
width:90px;
height:30px;
vertical-align: middle;//垂直居中展示
}
#sex1,#sex2{
width:50px;
height:30px;
}
#submit{
width:100px;
height:40px;
background-color:rgb(0,0,250,30%);
font-size: medium;
margin-top: 10px;
}
.error{
color:red;
}
</style>
<script>
//表单校验：
window.onload=function(){
//1.给表单绑定onsubmit事件
document.getElementById("form").onsubmit=function(){
//调用用户名校验方法 checkUsername()；
//调用密码校验方法 checkPassword()；
//return checkUsername() && checkPassword()
return checkUsername();
}
//给元素绑定离开焦点事件
//当鼠标输入完名字后离开了文本框，自动校验输入的用户名是否正确
//当页面加载完后才会执行
document.getElementById("username").onblur=checkUsername;
}
//校验用户名
function checkUsername(){
//1.获取用户名的值
var username= document.getElementById("username").value;
//2.定义正则表达式
var reg_username= /^\w{6,12}$/ ;
//3.判断值是否符合表单定义时正则规则
var flag=reg_username.test(username);
//4.不符合或符合则提示信息
var s_username=document.getElementById("s_username");
if(flag){
//提示用户名无误
s_username.innerHTML="通过";
}
else{
//提示用户名有误
s_username.innerHTML="不通过";
}
return flag;
}
</script>
</head>
<body>
<div class="content">
<h2 id="title">注册</h2>
<div class="login">
<form action="#" method="post" id="form">
<table>
<tr>
<td class="td_left">
<label for="username">姓名:</label>
</td>
<td class="td_right">
<input type="text" name="姓名" id="username" placeholder="请输入您的真实姓名">
<span id="s_username" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left">
<label for="sex1" for="sex2" >性别:</label>
</td>
<td class="td_right">
<!--这里的checked的作用是默认选中--->
<input type="radio" name="sex" value="male" id="sex1" checked>男
<input type="radio" name="sex" value="female" id="sex2">女
</td>
</tr>
<tr>
<td class="td_left">
<label for="phone">电话:</label>
</td>
<td class="td_right"><input type="text" name="电话" id="phone"></td>
</tr>
<tr>
<td class="td_left">
<label for="department">所在部门:</label>
</td>
<td class="td_right"><input type="text" name="所在部门" id="department"></td>
</tr>
<tr>
<td class="td_left">
<label for="email">邮箱:</label>
</td>
<td class="td_right"><input type="text" name="邮箱" id="email" ></td>
</tr>
<tr>
<td class="td_left">
<label for="password">密码:</label>
</td>
<td class="td_right">
<input type="password" name="邮箱" id="password" >
<span id="s_password"></span>
</td>
</tr>
<tr>
<td class="td_left">
<label for="sure_password">确认密码:</label>
</td>
<td class="td_right"><input type="password" name="邮箱" id="sure_password" ></td>
</tr>
<tr>
<td class="td_left">
<label for="verification_code">验证码:</label>
</td>
<td class="td_right">
<input type="text" name="验证码" id="verification_code" >
<img src="../img/verification_code.jpg" id="img_verification_code">
</td>
</tr>
<tr>
<td colspan="2" td_right >
<input type="submit" value="立即注册" id="submit">
</td>
</tr>
</table>
</form>
<div id="footer">
<p>已有账号?<a href="login.html">立即登录</a></p>
</div>
</div>
</div>
</body>
</html>例子运行效果：
四、DOM事件
1.DOM的简单学习
*功能：控制html文档的内容 :增上改查内容
*代码：获取页面标签（元素）对象Element :
document.getElementById("id值"); ：通过元素id获取元素对象
*操作Element对象：
1.设置属性值：设置的属性值要对应元素对象有才可以，因此借助API文档（如下举例）
*注意.图片路径使用的是反斜杠，使用正斜杠会出现图片无法显示的问题。
*明确过去的对象是哪一个？
*查看API文档，查找其中有哪些属性可以设置
举例src例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM事件简单学习</title>
</head>
<body>
<img id="light" src="F:/桌面文件/HTML+CSS/img/turn_off_the_light.png">
<!-- <img id="light" src="F:\桌面文件\HTML+CSS\img\open_the_light.png"> -->
<script>
//通过id获取元素对象
var light=document.getElementById("light");
alert("我要换图片了。。。。");
light.src="F:/桌面文件/HTML+CSS/img/open_the_light.png";
//弹不出对象，因为script定义再元素对象上面，图片还没加载完成，因此弹出窗口显示null
//要是想获取到则将script放在要获取元素的下方
//这里要点击弹出窗口的确定按钮，如果不点是不会显示下面的图片的
// light.setAttribute("src","F:\桌面文件\HTML+CSS\img\open_the_light.png");
</script>
</body>
</html>运行效果如图：
（说明：一开始为关灯图片，当点击了弹出窗口的确定按钮，图片换成了开灯图片）
2.修改标签内容：
1.属性：innerHTML,设置标签体内容
(注意：一般如果没有修改，都是应为获取的元素对象是空的原因，可以通过弹出窗口中显示是否元素对象是空）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM事件简单学习</title>
</head>
<body>
<img id="light" src="F:/桌面文件/HTML+CSS/img/turn_off_the_light.png">
<h1 id="title">哇哈哈哈哈哈</h1>
</body>
<script>
//通过id获取元素对象
var title=document.getElementById("title");
alert("我要换内容啦。。。");
//修改内容
title.innerHTML= "喜羊羊5555 ";
</script>
</html>事件简单学习：
*功能：某些组件被执行了某些操作后，触发了某些代码的执行功能
*如何绑定事件：
1.直接在html标签上，指定事件的属性（操作），属性值就是js代码
1.onclick:单击事件
（注意：这个是直接在html标签上指定属性onclick，当点击图片后就弹出对话框显示我被点击了）（缺点：因为位置有限，这里写只能写一个）
<body>
<img id="light" src="F:/桌面文件/HTML+CSS/img/turn_off_the_light.png" onclick="alert('我被点击了');">
<h1 id="title">哇哈哈哈哈哈</h1>
</body>使用方式：
（写在js的函数里，可以写很多弹出内容）
（缺点:html标签和事件绑定在一起，耦合与过高）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件的简单学习</title>
</head>
<body>
<img id="light" src="F:/桌面文件/HTML+CSS/img/turn_off_the_light.png" onclick="fun()">
<h1 id="title">哇哈哈哈哈哈</h1>
</body>
<script>
function fun(){
alert("我被点击了");
alert("我又被点击了");
}
</script>
</html>2.通过js获取于是怒对象，指定事件属性，设置一个函数:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件的简单学习</title>
</head>
<body>
<img id="light" src="F:/桌面文件/HTML+CSS/img/turn_off_the_light.png" >
<h1 id="title">哇哈哈哈哈哈</h1>
</body>
<script>
function fun2(){
alert("咋老点我");
}
var light2=document.getElementById("light");
light2.onclick=fun2;
</script>
</html>案例：电灯开关：
分析：1.获取图片对象
2.绑定单击事件
3.每次点击切换图片
*规则：如果灯是开的on，切换图片为of，否则反之：使用标记flag来完成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例：电灯开光</title>
</head>
<body>
<img id="light" src="F:/桌面文件/HTML+CSS/img/turn_off_the_light.png" >
<h1 id="title">哇哈哈哈哈哈</h1>
</body>
<script>
var light2=document.getElementById("light");
var test=false;
function fun2(){
if(test){
light2.src="F:/桌面文件/HTML+CSS/img/turn_off_the_light.png";
test=false;
}
else{
light2.src="F:/桌面文件/HTML+CSS/img/open_the_light.png";
test=true;
}
}
light2.onclick=fun2;
</script>
</html>BOM对象
1.概念：browesr object model 浏览器对象模型
*.将浏览器的各个组成部分封装成对象。
2.组成：
*.window:窗口对象（重要）
*.Navigator:浏览器对象
*.Screen：显示器屏幕对象
*.History:历史记录对象（重要）
*.Location:地址栏对象（重要）
1.window窗口对象：
1.创建：
2.方法：
1.与弹出框有关的方法
*.alert（）：显示带有一段消息和一个确认按钮的警告框。
*confirm() ：显示带有一段消息以及确认按钮和取消按钮的对话框。
*prompt() : 显示可提示用户输入的对话框。
2.与打开和关闭有关的方法：
*.close() ：关闭浏览器窗口
*.open() :打开一个新的浏览器窗口
3.与定时器有关的方法：
*.setTimeout() ：在指定的毫秒数后调用函数或计算表达式
*参数：
1.js代码或者方法对象
2.毫秒值 ：即到什么时间就执行代码
*.clearTimeout() : 取消由setTimeout() 方法设置的timeout
*.setInterval() : 循环定时器，按照指定周期（以毫秒计）来调用函数或计算表达式
*.clearInterval() :取消由setInterval（）设置的timout
3.属性：
第一类方法（获取其他BOM对象）：
*. history
*. location
*. Navigator
*. Screen
第二类方法：获取DOM对象：
*. document对象
用法：
1.window.document.getElementById();
2.dicument.getElementById();
4.特点：
*.window对象不需要创建可以直接使用，直接用window.方法名即可
*.window引用可以省略，直接方法名（）即可
1.与弹出框有关的方法：
1.alert()方法：
（说明，alert()方法可以使用这两种方式调用）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM对象</title>
</head>
<script>
alert("hello window");//正确
window.alert("hello a");//正确
</script>
<body>
</body>
</html>
2.confirm()方法：
用户点击确定按钮，返回true；点击取消按钮，返回false。
（说明：获取用户的选择后（用户点击了确定还是取消按钮），可以利用该值进行其他操作，如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM对象</title>
</head>
<script>
var flag=confirm("您确定要退出嘛？");//获取用户的选择
// alert(flag);
if(flag){
//退出操作
alert("欢迎再次光临");
}
else{
//提示：收别抖
alert("手别抖。。");
}
</script>
<body>
</body>
</html> 3. prompt()方法：
（返回值获取用户输入的值）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM对象</title>
</head>
<script>
//第三种：prompt()方法
var result=prompt("请输入用户名");//输入框
alert(result);
</script>
<body>
</body>
</html>2.打开与关闭的方法：
1.open()和close()方法：
（说明：对于open()方法会返回一个新的window对象）
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM对象</title>
</head>
<body>
<input id="openBtn" type="button" value="打开窗口">
<input id="closeBtn" type="button" value="关闭窗口">
</body>
</html>
<script>
var openBtn=document.getElementById("openBtn");
var newwindow;
openBtn.onclick=function(){
// open();//打开新窗口，将要打开的窗口网址放在括号（）里面
newwindow=open("http://www.baidu.com");//获取新窗口对象
}
var closeBtn=document.getElementById("closeBtn");
closeBtn.onclick=function(){
// open();//关闭新窗口，将要打开的窗口网址放在括号（）里面
newwindow.close();//关闭的是调用者的窗口，即谁调用关闭谁
}
</script>3.与定时器有关的方法：
1.setTimeout()方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM对象</title>
</head>
<body>
</body>
</html>
<script>
// 第一种写法： setTimeout("alert('Boom~');",3000);
//第二种写法：
setTimeout("fun();",2000);
//第三种写法：setTimeout(fun,2000);
function fun(){
alert('booom~');
}
</script> 2.setInterval()方法：循环定时器
（说明：在例子中是每2秒弹出一次，用法和setTimeout用法是一样的）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM对象</title>
</head>
<body>
<input id="openBtn" type="button" value="打开窗口">
<input id="closeBtn" type="button" value="关闭窗口">
</body>
</html>
<script>
setInterval(fun,2000);
function fun(){
alert('booom~');
}
</script>3. clearTimeout()方法：取消定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM对象</title>
</head>
<body>
<input id="openBtn" type="button" value="打开窗口">
<input id="closeBtn" type="button" value="关闭窗口">
</body>
</html>
<script>
var id= setTimeout(fun,2000);//第一个参数位置直接写函数对象，setTimeout会返回它对象
clearTimeout(id);//参数放取消定时器的对象
function fun(){
alert('booom~');
}
</script>案例：轮播图
分析：
1.在页面上使用img标签展示图片
2.定义一个方法，修改图片对象的src属性
3.定义一个定时器，每个3秒调用方法一次
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
body{
/* width:984px;
height:500px;
/* padding:2px; */
/* margin:0 auto; */
background-color: antiquewhite;
display:flex;
margin:auto;
justify-content: center;
align-items: center;
padding-top: 200px;
}
#img{
width:100px;
height:200px;
}
</style>
</head>
<body>
<div id="img">
<img id="photos" src="F:/桌面文件/HTML+CSS/img/轮播图/light_1.png">
</div>
</body>
<script>
//修改图面属性的方法
var number=1;
function fu(){
number++;
if (number >2){ //判断number是否大于3
number=1;
}
var pho=document.getElementById("photos");
pho.src="F:/桌面文件/HTML+CSS/img/轮播图/light_"+number+".png";
//通过number数字来切换对应编号的图片
}
//2.定义定时器
setInterval(fu,2000);//2000毫秒等于2秒
</script>
</html>window 属性：
1.第一类方法： window属性可以获取DOM和BOM对象：
1.history()方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window属性</title>
</head>
<body>
<script>
//获取history
var h1=window.history;
var h2=history;
alert(h1);
alert(h2);
</script>
</body>
</html> 2.location（）方法：
1.方法：
*.reload() ：重新加载当前文档（刷新）
2.属性：
*. href : 设置或返回完整的URL
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Location</title>
</head>
<body>
<input type="button" id="btn" value="刷新">
<input type="button" id="gobaidu" value="去百度">
<script>
//reload方法，定义ige按钮，点击按钮，刷新当前页面
//1.获取按钮
var btn=document.getElementById("btn");
btn.onclick=function(){//绑定单击事件
location.reload();//刷新页面
}
//获取href路径
var href=location.href;
//alert(href);
//点击去百度按钮，访问百度网站
//1.获取按钮
var gobaidu=document.getElementById("gobaidu");
gobaidu.onclick=function(){//绑定单击事件
location.href="http://www.baidu.com";//如果这里不加http协议，会出现找不到文件
}
</script>
</body>
</html>案例：自动跳转首页
分析：1.显示页面效果<p>标签
2.倒计时读秒效果实现
2.1 定义一个方法，获取span标签，修改标签体内容，修改时间--
2.2 定义一个定时器，1秒执行一次该方法
2.3 在方法中判断时间，如果<0，则跳转到首页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自动跳转首页</title>
<style>
p{
text-align: center;
}
span{
color:red;
}
</style>
<script>
//倒计时读秒效果实现
var second=5;
var time =document.getElementById("time");
function showtime(){
second--;
if (second<=0){
location.href="http:www.baidu.com";
}
time.innerHTML=second+"";
}
//设置定时器,1秒执行一次
setInterval(showtime,1000);
</script>
</head>
<body>
<p>
<span id="time">5</span>秒之后，自动跳转到首页....
</p>
</body>
</html> 3.Hostory（）方法：历史记录对象
1.创建（获取）：
1.window.history
2.history
2.方法：
*. back() : 加载history列表的前一个URL
*. forward() : 加载history列表中的下一个 URL
*. go(参数) : 加载history列表中的某个页面
*.参数：
*.正数：前进几个历史记录
*. 负数 ：后退几个历史记录
3.属性：
*. length : 返回当前窗口历史列表中的URL数量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>history对象</title>
</head>
<body>
<input type="button" id="btn" value="获取历史记录个数">
<a href="F:\桌面文件\HTML练习\js\轮播图.html">轮播图</a>
<input type="button" id="forward" value="前进">
<input type="button" id="back" value="后退">
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
var length=history.length; //length属性
alert(length);
}
//forward()方法和go（）方法
var forward=document.getElementById("forward");
forward.onclick=function(){
// history.forward();//前进，回到前一个网页
history.go(-1);
}
//back()方法
var back=document.getElementById("back");
back.onclick=function(){
history.back();//后退，回到后一个网页
}
</script>
</body>
</html>DOM对象
*概念：Document Object Model 文档对象模型
*.将标记语言文档的各个组成部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD（增删改查的）动态操作。
1.核心DOM：
*.Document : 文档对象（重点）
*.Element : 元素对象（重点）
*.Attribute : 属性对象
*.Text : 文本对象
*. Comment ：注释对象
.Node : 节点对象，其他5个的父对象（重点）
2.XML DOM：针对XML文档的标准模型
3.HTML DOM ： 针对html文档的标准模型
核心DOM模型
*. Document : 文档对象
1.创建(获取）：在html dom模型中可以使用window对象来获取
*.window.document
*.document
2.方法：
1.获取Element对象：
*.getElementById() : 根据id属性值获取元素对象，id属性值一般唯一
*.getElementsByTagName() : 根据元素名称获取元素对象们，返回值是一个数组
*.getElementsByClassName() : 根据Class的属性值获取元素对象们，返回值是一个数组
*.getElementsByName() :根据name书写纸获取元素对象们
2.创建其他dom对象：
*. createAttribute(name) :
*. createComment() :
*. createElement() :
*. createTextNode() :
3.属性：
*. Element : 元素对象
1.创建/获取：通过document来获取和创建
2.方法：
*. removeAttribute() : 删除属性
*.setAttribute() : 设置属性
*. Node : 节点对象，其他5个的父对象
1.特点：所有dom对象都可以被认为是一个节点
2.方法：
*CRUD dom 树：
*. appendChild() : 向节点的子节点列表的结尾添加新的子节点。
*. removeChild() : 删除（并返回）当前节点的指定子节点。
*. replaceChild() : 用新节点替换一个子节点。
3.属性：
*.parentNode:返回节点的父节点
一、获取element对象方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">di2</div>
<div id="div3">div3</div>
<div class="clas1">div4</div>
<div class="clas1">div5</div>
<input type="text" name="username">
</body>
<script>
//2.根据元素名称获取对象们，返回值是一个数组
var divs =document.getElementsByTagName("div");//参数放标html签名称
alert(divs.length);
//3.根据Class属性来获取
var div_cs =document.getElementsByClassName("clas1");//参数放标html签名称
alert(div_cs.length);
//通过name属性值来获取
var ele_username =document.getElementsByName("username");//参数放标html签名称
alert(ele_username.length);
</script>
</html>二、创建其他dom对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<script>
var table=document.createElement("table");//创建一个html table对象
alert(table);
</script>
</html>Element元素对象：
1. removeAttribute() : 删除属性 和 setAttribute() : 设置属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>element对象</title>
</head>
<body>
<a>点我</a>
<input type="button" id="btn_set" value="设置属性">
<input type="button" id="btn_set2" value="删除属性">
</body>
<script>
var btn_set=document.getElementById("btn_set");
btn_set.onclick=function(){
//获取a标签
var e_a= document.getElementsByTagName("a")[0];
e_a.setAttribute("href","http://ww.baidu.com");
}
var btn_set2=document.getElementById("btn_set2");
btn_set2.onclick=function(){
//获取a标签
var e_a= document.getElementsByTagName("a")[0];
e_a.removeAttribute("href","http://ww.baidu.com");
}
</script>
</html>2.Node节点对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
<style>
div{
border: 1px solid red;
}
#div1{
width:200px;
height:200px;
}
#div2{
width:100px;
height:100px;
}
#div3{
width:50px;
height:50px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">div2</div>
div1
</div>
<input type="button" id="createbtn" value="添加子节点">
</body>
<script>
var div2=document.getElementById("div2");
var div1=div2.parentNode; //element属性
alert(div1);
</script>
</html>案例：动态表格（增加、删除）
分析：
1.添加：
1.给添加按钮绑定单击事件
2.获取文本框内容
3.创建tr,td,设置td的文本为文本框内容
4.创建
5.将td添加到tr中
6.获取table,将tr添加到table中
2.删除：
1.确定点击的是哪一个超链接：给每一个超链接添加一个单击事件：
*. <td><a href="javascript:void(0);" οnclick="delTr(this);">删除</a></td>
2.怎么删除？：
*. removeChild():通过父节点删除子节点
方法一：动态添加：
<!DOCTYPE html>
<html>
<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" name="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" id="btn_add" value="添加">
</div>
<!--html中的表格-->
<!--table是独占一行的,其中的border是边框，不设置或者为0则表示没有边框-->
<!--一个tr代表表格中的一行-->
<!--其中th是表格的表头，字体为粗体-->
<!---其中caption是表格的标题-->
<!--其中colspan代表的是横向跨2格，2代表跨越的格数，rowspan="2"代表垂直跨2格--><!--跨行、列-->
<!--其中cellpadding是表格的边距大小，即表格内的文字与表格的边框的距离的大小-->
<table>
<caption>这是html的一个练习</caption>
<tr>
<th >编号</th>
<th>名称</th>
<th>日期</th>
<th>操作</th>
</tr>
<tr>
<td>04201</td>
<td>12345</td>
<td>佩大奇</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
<!-- this代表当前超链接的对象 -->
</tr>
<tr>
<td>04202</td>
<td>67891</td>
<td>乔大治</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td>23456</td>
<td>34567</td>
<td>34567</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
</table>
</body>
<script>
//方法一：动态表格的添加
var btn_add=document.getElementById("btn_add");
//1.给按钮绑定单击事件
btn_add.onclick=function(){
//2.获取文本框的内容
var id=document.getElementById("id").value;
var name=document.getElementById("name").value;
var gender=document.getElementById("gender").value;
//3.创建td，赋值td的标签体
//id的td
var td_id=document.createElement("td");
// td_id=appendChild(id);//不能把字符串当作子节点直接添加
var text_id=document.createTextNode(id);
td_id.appendChild(text_id);
// name的td
var td_name=document.createElement("td");
var text_name=document.createTextNode(name);
td_name.appendChild(text_name);
//gender的td
var td_gender=document.createElement("td");
var text_gender=document.createTextNode(gender);
td_gender.appendChild(text_gender);
//删除标签
var td_a=document.createElement("td");
var ele_a=document.createElement("a");
ele_a.setAttribute("href","javascript:void(0);");
ele_a.setAttribute("onclick","delTr(this)");//只要是单击了超链接就可以进行删除操作
var text_a=document.createTextNode("删除");
ele_a.appendChild(text_a);
td_a.appendChild(ele_a);
//4.创建tr
var tr=document.createElement("tr");
//5.添加td到tr中
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//6.获取table
var table=document.getElementsByTagName("table")[0];
table.appendChild(tr)
}
//动态表格的删除
//删除方法
function delTr(obj){
// alert(obj);
var table=obj.parentNode.parentNode.parentNode;
var tr=obj.parentNode.parentNode;
table.removeChild(tr);//通过父节点删除子节点，父节点table，子节点tr;
}
</script>
</html>方法二：使用innerHTML动态添加：
<!DOCTYPE html>
<html>
<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" name="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" id="btn_add" value="添加">
</div>
<!--html中的表格-->
<!--table是独占一行的,其中的border是边框，不设置或者为0则表示没有边框-->
<!--一个tr代表表格中的一行-->
<!--其中th是表格的表头，字体为粗体-->
<!---其中caption是表格的标题-->
<!--其中colspan代表的是横向跨2格，2代表跨越的格数，rowspan="2"代表垂直跨2格--><!--跨行、列-->
<!--其中cellpadding是表格的边距大小，即表格内的文字与表格的边框的距离的大小-->
<table>
<caption>这是html的一个练习</caption>
<tr>
<th >编号</th>
<th>名称</th>
<th>日期</th>
<th>操作</th>
</tr>
<tr>
<td>04201</td>
<td>12345</td>
<td>佩大奇</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
<!-- this代表当前超链接的对象 -->
</tr>
<tr>
<td>04202</td>
<td>67891</td>
<td>乔大治</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td>23456</td>
<td>34567</td>
<td>34567</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
</table>
</body>
<script>
//方法二：使用innerHTML追加表格
var btn_add=document.getElementById("btn_add");
//1.给按钮绑定单击事件
btn_add.onclick=function(){
//2.获取文本框的内容
var id=document.getElementById("id").value;
var name=document.getElementById("name").value;
var gender=document.getElementById("gender").value;
//获取table
var table=document.getElementsByTagName("table")[0];
//追加一行
table.innerHTML +="<tr>\n"+
" <td>"+id+"</td> \n"+
" <td>"+name+"</td>\n"+
"<td>"+gender+"</td>\n"+
' <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td> \n'+
"</tr>";
}
//动态表格的删除
//删除方法
function delTr(obj){
// alert(obj);
var table=obj.parentNode.parentNode.parentNode;
var tr=obj.parentNode.parentNode;
table.removeChild(tr);//通过父节点删除子节点，父节点table，子节点tr;
}
</script>
</html>
HTML DOM:
说明：html DOM 定义了所有HTML元素的对象和属性，以及访问它们的方法，简单说：html DOM是关于如何让获取、修改、添加或删除HTML元素的标准。
1.标签体的设置和获取： innerHTML :
2.使用html元素对象的属性
3.控制样式
2.使用html元素对象的属性：innerHTML使用方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UUTF-8">
<title>HTML_DOM</title>
</head>
<body>
<div id="div1">
div
</div>
<script>
var div=document.getElementById("div1");
var innerHTML=div.innerHTML;//获取innerHTML
// alert(innerHTML);
// div.innerHTML="<input type='text'>";//修改innerHTML
div.innerHTML +="<input type='text'>";//追加innerHTML内容
</script>
</body>
</html>3.控制样式：
1. 修改样式方式一：使用元素的style设置样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UUTF-8">
<title>HTML_DOM</title>
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<script>
var div=document.getElementById("div1");
var innerHTML=div.innerHTML;//获取innerHTML
// alert(innerHTML);
// div.innerHTML="<input type='text'>";//修改innerHTML
div.innerHTML +="<input type='text'>";//追加innerHTML内容
var div1=document.getElementById("div1");
div1.onclick=function(){
//修改样式方式一：使用元素的style设置样式
div1.style.border="1px solid red";//当我点击后div出现红色样式边框
div1.style.width="500px";
//font-size--->fonSize
div1.style.fontSize="20px";
}
</script>
</body>
</html>2.方法二：提前定义好类选择器的样式，通过元素的className属性来设置器class属性值，修改样式：使用className="d2"修改：(说明d2是style设置的class样式）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UUTF-8">
<title>HTML_DOM</title>
<style>
.d1{
border:1px solid red;
width:100px;
height:100px;
}
.d2{
border:1px solid blue;
width:500px;
height:100px;
}
</style>
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<script>
//修改样式方式二：使用元素的style设置样式
var div2=document.getElementById("div2");
div2.onclick=function(){
div2.className="d2";
}
</script>
</body>
</html>方法一和二的效果：
