继CSS后的JavaScript

目录

一、JavaScript引入方式

二、语法基础

1.变量的声明

2.数据类型

3.类型转换

4.转义字符

三、函数

1.函数的分类

2.函数的定义

3.函数的调用

四、字符串对象

1.获取字符串的长度  str.length

2.字符串的大小写转换 str.toUpperCase();str./toLowerCase();

3.获取字符串中的一个字符 str.charAt(n);

4.截取字符串 str.substring(start,end);

5.替换字符串 str.replace();

6.分割字符串 str.split();

7.检索字符串的位置 indexOf();

五、数组对象

1.获取数组的长度 arr.lengh

2.截取数组某部分 arr.slice()

3.添加数组元素 arr.unshift()/arr.push()

4.删除数组元素 arr.shift()/arr.pop()

5.数组大小比较排序 arr.sort()

6.颠倒数组顺序 arr.reverse()

7.将数组元素连接成字符串 arr.join()

六、时间对象

1.操作年月日

2.操作时分秒

1.获取时分秒

3.获取星期几

七、数学对象

1.math对象的属性

2.math对象的方法

3.方法：最大值与最小值

4.方法：取整运算

5.方法：三角函数

6.方法：生成随机数

八、DOM基础

1.DOM介绍

2.节点类型

3.获取元素

1.getElementById( )

2.getElementsByTagName( )

3.getElementsByClassName( )

4.getElementsByName( )

5.querySelector( )和querySelectAll( )

6.document.title和document.body

4.创建元素createElement( )和createTextNode( )

5.插入元素appendChild( )和insertBefore( )

6.删除元素removeElement( )

7.复制元素 cloneNode( )

8.替换元素 replaceChild( )

九、DOM进阶

1.HTML属性操作(对象属性)

2.HTML属性操作(对象方法)

3.CSS属性操作

4.DOM遍历

5.innerHTML和innerText

十、事件基础

1.鼠标事件

①鼠标单击事件onclick

②鼠标移入移出onmouseover-onmouseout

③鼠标按下和鼠标松开onmousedown-onmouseup

2.键盘事件onkeydown-onkeyup

3.表单事件

①获取焦点onfocus-onblur

②onselect

③onchange

4.编辑事件

①oncopy

②onselectstart

③oncontextmenu

5.页面事件

①onload

②onbeforeunload

十一、事件进阶

1.事件处理器和事件监听器

2.event对象

①type属性

②keyCode,shiftKey,ctrlKey,altKey

3.this

十二、window对象

1.窗口操作

①打开窗口

 ②关闭窗口

2.对话框

1.alert()

2.confirm()

 3.prompt()

3.定时器

1.一次性定时器setTimeout()和clearTimeout()

 2.重复性定时器setInterval()和clearInterval()

4.location对象

5.navigator对象

十三、document对象

1.document对象属性

2.document对象方法

---

一、JavaScript引入方式

①外部js，最理想的js引入方式

②内部js

③元素事件js

二、语法基础

1.变量的声明

在js中，所有类型的变量都是由var声明的：var  变量名 = 值;

2.数据类型

在js中，数据类型可以分为两种：基本数据类型和引用数据类型。

基本数据类型包括：数字，字符串，布尔值，未定义值(undefined)和空值(null)5种。

引用数据类型包括：对象，数组，函数。

3.类型转换

①类型转换包括先时类型转换和隐式类型转换。隐式类型转换由指的是js自动进行的类型转换，像：数字+字符串=字符串，显示转换是指手动用代码强制进行的类型转换。

②字符串转化为数字：

1.Number();

//Number可以将任意数字型像"123","123.56"这种字符串转换为数字，对含有英文字符的字符串不能进行转换。


var str="123.456";
var str_n="123fgh";
document.write(Number(str));
document.write(Number(str_n));

*输出结果：

123.456

NaN(not a number)

2.parseInt()和parseFloat();

//parseInt()和parseFloat()可以提取首字母为数字的任意字符串中的数字，parseInt提取整数部分，parseFloat会提取包括小数部分在内的数字。

var str_n="123.58fgh";
var str="123.58fgh";
var str_m="a125";
var n_str_n=parseInt(str_n);
var n_str=parseFloat(str);
var n_str_m=parseFloat(str_m);
document.write(n_str_n+"<br/>"+n_str+"<br/>"+n_str_m);

*输出结果：

123
123.58
NaN

③数字转换为字符串

1.与空字符串相加

数字123+""转换为字符串“123”

2.toString();

var a=12345.678;
var str_a=a.toString();
document.write(str_a);

*输出结果：

"12345.678"

4.转义字符

转义字符            说明
\'                英文单引号
\"                英文双引号
\n                换行符


*在document.write()中换行应用<br/>
*在alert()中换行应用\n

三、函数

1.函数的分类

内置函数、有返回值的函数(return)、无返回值的函数。

2.函数的定义

function 函数名(参数1，参数2，……)
{
    
}



*例如：
function sum(a,b)
{
	return a+b;
}
document.write(sum(3,4));

*结果：

7

3.函数的调用

1.函数的调用有以下四种调用方式：

*直接调用

*在表达式中调用

*在超链接中调用(<a href = "javascript:函数名()"></a>)

*在事件中调用<input type="button" οnclick="函数名()" value="按钮"/>

四、字符串对象

调用方法和调用属性时的区别：

①调用方法时：.方法名();

②调用属性时：.属性名；

1.获取字符串的长度  str.length

用length属性来获取字符串或者数组的长度。str.length;

var str="bai xiao shuai";
document.write(str.length);

*结果：14

2.字符串的大小写转换 str.toUpperCase();str./toLowerCase();

①字符串名.toLowerCase();方法

将字符串中的大写字母转换为小写字母，返回转换后的字符串

②字符串名.toUpperCase();方法

将字符串中的小写字母转换为大写字母，返回转换后的字符串

var str="Bai xIao SHUAi";
var str_ltemp=str.toLowerCase();
var str_utemp=str.toUpperCase();
document.write(str_ltemp+"<br/>"+str_utemp);

*结果：

bai xiao shuai
BAI XIAO SHUAI

3.获取字符串中的一个字符 str.charAt(n);

①.数组名.charAt(n);

获取字符串中的第n+1个字符

var str="bai xiao shuai";
var char=str.charAt(4);
document.write(char);
			

*结果：

”x“

4.截取字符串 str.substring(start,end);

①str.substring(start,end);

截取字符串长度，从下标start开始，到下标end-1结束，不包括下标为end对应的字符。

var str="bai xiao shuai";
var str_sub=str.substring(4,10);
document.write(str_sub);

*结果：

xiao s

5.替换字符串 str.replace();

①字符串名.replace(原字符串的待替换的字符片段，替换字符串);

将原字符串中的字符片段第一次出现的片段改为替换字符串.

②字符串名.replace(原字符串的待替换的字符片段的正则表达式，替换字符串)；

将原字符串中的字符片段全部替换为替换字符串。

var str="i love you i love you";
var str1="i am loser,you are loser,all are loser";
var str_instead=str.replace("you","myself");
var str1_instead=str1.replace(/loser/g,"hero");
document.write(str_instead+"<br/>"+str1_instead);

*结果：

i love myself i love you
i am hero,you are hero,all are hero

6.分割字符串 str.split();

数组名.split("分隔符");

按分隔符将字符串分割成多个片段存在数组中，分隔符不做为数组元素的一部分。返回分割后的字符串片段组成的数组。

var str="i love you world";
var arr=str.split(" ");
for(var i=0;i<arr.length;i++)
{
	document.write("数组的第"+(i+1)+"个元素是"+arr[i]+"<br/>");
}
		</script>

*结果：

数组的第1个元素是i
数组的第2个元素是love
数组的第3个元素是you
数组的第4个元素是world

7.检索字符串的位置 indexOf();

①字符串名.indexOf("指定字符串");

②字符串名.lastIndexOf("指定字符串");

如果被查找字符串中包含指定字符串，indexOf()会返回指定字符串首次出现的下标，lastIndexOf()会返回指定字符串最后出现的下标，如果不包含指定字符串，indexOf()和lastIndexOf()都返回-1.

var str="hello world i love world";
			document.write(str.indexOf("e")+"<br/>"+str.lastIndexOf("e"));

结果：

1

17

五、数组对象

数组：存放多个相同数据类型的数据(一般情况下)。

数组的创建：

var arr=[   ];

或者var arr=new Array(   );

1.获取数组的长度 arr.lengh

var arr=[1,5,8,9];
document.write(arr.length);

*结果：

4

2.截取数组某部分 arr.slice()

arr.slice(start,end);

类似于字符串的subtring()方法。包括start但不包括end。

var arr=["html","css","js","jquery"];
document.write(arr.slice(1,3));

*结果：

css,js

3.添加数组元素 arr.unshift()/arr.push()

①arr.unshift();

在数组开头添加新元素，原数组发生改变。

②arr.push();

在数组末尾添加新元素，原数组发生改变。

在已知数组长度的情况下还可以使用arr[arr.length]=" ";在数组末尾添加新元素。

var arr=["html","css","js","jquery"];
arr.unshift("vue","react");
arr.push("css3","html5");
arr[arr.length]="bai";
document.write(arr);

*结果：

vue,react,html,css,js,jquery,css3,html5,bai

4.删除数组元素 arr.shift()/arr.pop()

①arr.shift();

删除数组中的第一个元素。

②arr.pop();

删除数组中的最后一个元素。

var arr=["html","css","js","jquery","vue","react"];
arr.shift();
arr.pop();
document.write(arr);

*结果：

css,js,jquery,vue

5.数组大小比较排序 arr.sort()

arr.sort(函数名);

对所有元素进行大小比较，按照升序或者降序排列，原数组发生改变。

			function up(a,b)
			{
				return a-b;//a>b进行升序排列
			}
			function down(a,b)
			{
				return b-a;//进行降序排列
			}
			var arr=[1,5,8,2,4,7,11,0,36];
			arr.sort(up);
			document.write(arr+"<br/>");
			arr.sort(down);
			document.write(arr);

*结果：

0,1,2,4,5,7,8,11,36
36,11,8,7,5,4,2,1,0

6.颠倒数组顺序 arr.reverse()

var arr=[5,6,1,7,8];
document.write(arr.reverse());

*结果：

8,7,1,6,5

7.将数组元素连接成字符串 arr.join()

arr.join("连接符");

arr.join()为默认情况，采用,作为连接符，arr.join("")实现数组元素之间的连接，字符串之间没有连接符。

var arr=["vue","react","html","css","js"];
document.write(arr.join("")+"<br/>");
document.write(arr.join("*")+"<br/>");
document.write(arr.join());

*结果：

vuereacthtmlcssjs
vue*react*html*css*js
vue,react,html,css,js

六、时间对象

创建时间对象的方法：

var 时间对象名 = new Date();

1.操作年月日

①获取年月日：

方法                说明
getFullYear()    获取年份，取值为4位数字
getMonth()       获取月份，取值为0-11的整数
getDate()        取值为1-31的整数

var d=new Date();
var year=d.getFullYear();
var month=d.getMonth()+1;
var day=d.getDate();
document.write("今天是"+year+"年"+month+"月"+day+"日");

*结果：

今天是2022年7月21日

②设置年月日：

方法                说明
setFullYear()      设置年、月、日
setMonth           设置月、日
setDate()          设置日

var d = new Date();
d.setFullYear(2022,04,18);
document.write(d);

*结果：

Wed May 18 2022 15:35:06 GMT+0800 (中国标准时间)

2.操作时分秒

1.获取时分秒

方法            说明
getHours()     获取小时数，取值为0-23
getMinutes()   获取分钟数，取值为0-59
getSeconds()   获取秒数，取值为0-59

var d = new Date();
var hours=d.getHours();
var minute=d.getMinutes();
var second=d.getSeconds();
document.write("当前时间是"+hours+"时"+minute+"分"+second+"秒");

*结果：

当前时间是16时1分58秒

②设置时分秒：

方法                说明
setHours()        设置时、分、秒、毫秒
setMiniutes()     设置分、秒、毫秒
setSeconds()      设置秒、毫秒

var d = new Date();
d.setHours(12,15,36);
document.write(d);

*结果：

Thu Jul 21 2022 12:15:36 GMT+0800 (中国标准时间)

3.获取星期几

时间对象.getDay()；返回0-6，0代表周日，1-6代表周一至周六

var d=new Date();
var str_day=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var day = d.getDay();
document.write(str_day[day]);

*结果：

星期四

七、数学对象

1.math对象的属性

属性            说明            对应的数学形式
PI            圆周率                Π
LN2           2的自然对数          In(2)
LN10          10的自然对数         In(10)
LOG2E         以2为底e的对数       log2e
LOG10E        以10为底e的对数      log10e
SQRT2         2的平方根           根号2
SQRT1_2       2的平方根的倒数      根号2分之1

document.write(Math.PI);

*结果：

3.141592653589793

2.math对象的方法

3.方法：最大值与最小值

Math.max(n1,n2,n3……n);

Math.min(n1,n2,n3……n);

document.write(Math.max(1,8,5,2,66,99,101,65,3)+"<br/>");
document.write(Math.min(1,8,5,2,66,99,101,65,3));

*结果：

101

1

4.方法：取整运算

1.向下取整：

Math.floor(x);

所谓向下取整，返回的就是小于等于那个数的最近的那个整数。

document.write(Math.floor(Math.random()*8-4));//产生[-4,4)的一个整数

*结果：

产生[-4,4)的一个整数

②向上取整：

Math.ceil(x);

所谓向上取整，指的是返回大于或等于指定数的最接近的那个整数。

document.write(Math.ceil(Math.random()*8-4));//产生(-4,4]的一个整数

*结果：

产生(-4,4]的一个随机整数。

5.方法：三角函数

参照图片：https://img-blog.csdnimg.cn/acd3120267b54a56b7f1afe7aa8e86a8.png

x是角度值，用弧度来表示，常用写法为：度数*Math.PI/180;因为这样可以直接看出度数。

document.write(Math.sin(30*Math.PI/180)+"<br/>");
document.write(Math.cos(60*Math.PI/180)+"<br/>");
document.write(Math.tan(45*Math.PI/180));

*结果：

0.49999999999999994
0.5000000000000001
0.9999999999999999

6.方法：生成随机数

①生成某个范围内的任意数

Math.random( );默认产生一个[0,1)的一个随机数。

Math.random( )*3;产生一个[0,3)的一个随机数。

Math.random( )*3-2;产生一个[-2,1)的随机数。

②生成某个范围内的整数

Math.floor(Math.random( )*8)；产生[0,7]之间的一个随机数。

document.write(Math.floor(Math.random()*8));

Math.floor(Math.random( )*8)-3;产生[-3,4)之间的一个随机数

7.方法：生成随机颜色

			function getColorOfRgb()
			{
				var r=Math.floor(Math.random()*(255+1));
				var g=Math.floor(Math.random()*(255+1));
				var b=Math.floor(Math.random()*(255+1));
				var RGB="RGB=("+r+","+g+","+b+")";
				return RGB;
			}
			document.write(getColorOfRgb());

*结果:

RGB=(27,102,16),括号内的r,g,b为随机值

八、DOM基础

1.DOM介绍

*全称document object model(文档对象模型)。

简单地说，DOM中有很多方法，我们可以通过他提供的某个方法来操作页面中的一个元素，DOM操作可以简单的理解为通过Js操作元素。

*结构：DOM采用树结构，以树节点的方式来表示页面中的每一个元素

 在上述的树状结构中，html为树根，也叫做根元素。head和body拥有共同的父节点，是兄弟节点。

*在DOM中操作元素时，可以把这个元素看成一个对象，然后使用这个对象的方法和属性来进行相关操作。

2.节点类型

在DOM中，节点共有十二种类型，常见的有以下三种：

*元素节点

*属性节点

*文本节点

*元素节点、属性节点、文本节点是单独的节点，不含有包含关系。

*只有元素节点才可以拥有子节点。

3.获取元素

1.getElementById( )

*通过元素属性的id获取一个元素。

*语法:

document.getElementById("id名");

*类似于CSS中的id选择器，只不过它是JavaScript中的操作方式，id选择器是Css中的操作方式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript</title>
		<script>
            //下边这一段代码表示在整个页面加载完成后再执行。浏览器是按照从上到下的顺序解析代码的，如果不加，浏览器解析到detElementById("div1")就会报错。
			window.onload=function()
			{
				var oDiv=document.getElementById("div1");
				oDiv.style.color="yellow";
			}
		</script>
	</head>
	<body>
		<div id="div1">JavaScript</div>
	</body>
</html>

2.getElementsByTagName( )

*通过元素中的标签名获得多个元素组成的伪数组。

*语法：

document.getElementsByTagName();

*类似于css中的"元素选择器"。

window.onload=function()
{
	var oDiv=document.getElementsByTagName("div");
	oDiv[0].style.color="yellow";
}

3.getElementsByClassName( )

 *类似于CSS中的类选择器，得到的是一组元素组成的伪数组。

*语法：

document.getElementsByClassName();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript</title>
		<script>
			window.onload=function()
			{
				var oLi=document.getElementsByClassName("select");
				oLi[0].style.color="red";
			}
		</script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JS</li>
			<li class="select">Jquery</li>
			<li class="select">react</li>
			<li class="select">vue</li>
		</ul>
	</body>
</html>

4.getElementsByName( )

*仅针对表单元素来说。

*语法：

document.getElemnetsByName();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript</title>
		<script>
			window.onload=function()
			{
				var oInput=document.getElementsByName("rad");
                //将类数组中第三个元素的checked属性设置为true
				oInput[1].checked=true;
			}
		</script>
	</head>
	<body>
		<span>您的学历是：</span>
		<br />
		<label><input type="radio" name="rad" value="博士" />博士</label>
		<label><input type="radio" name="rad" value="硕士" />硕士</label>
		<label><input type="radio" name="rad" value="本科" />本科</label>
	</body>
</html>

5.querySelector( )和querySelectAll( )

*让我们可以使用CSS的语法来获取所需要的元素，获取到的元素以类数组的形式保存。

*语法：

document.querySelector("选择器");选取满足选择条件的第一个元素。
document.querySelectorAll("选择器");选择满足条件的所有元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript</title>
		<script>
			window.onload=function()
			{
				var oDiv=document.querySelectorAll(".test");
				// 循环设置oDiv中的元素为红色
				for(var i=0;i<oDiv.length;i++)
				{
					oDiv[i].style.color="red";
				}
			}
		</script>
	</head>
	<body>
		<div class="test">HTML</div>
		<div>CSS</div>
		<div class="test">JavaScript</div>
		<div>jQuery</div>
		<div class="test">react</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript</title>
		<script>
			window.onload=function()
			{
				var oLi=document.querySelector("#list li:nth-child(3)");
				oLi.style.color="red";
			}
		</script>
	</head>
	<body>
		<ul id="list">
			<li>HTML</li>
			<li>CSS</li>
			<li>Javascript</li>
			<li>jQuery</li>
		</ul>
	</body>
</html>

 

6.document.title和document.body

*选取title元素和body元素的快捷方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript</title>
		<script>
			window.onload=function()
			{
				document.title="梦想是什么?";
				document.body.innerHTML="<strong style='color:red'>梦想就是一种让你感到坚持就是幸福的东西</strong>";
			}
		</script>
	</head>
	<body>
	</body>
</html>

4.创建元素createElement( )和createTextNode( )

*语法：

var e1 = document.creatElement("元素名");       //创建元素节点
var txt = document.creatTextNode("文本内容");   //创建文本节点
e1.appendChild(txt);                           //将文本节点插入到元素节点当中
e2.appendChild(e1);                            //将组装好的元素插入已经存在的元素中

①创建简单元素(不带属性)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript</title>
		<script>
			window.onload=function()
			{
				var oDiv=document.getElementById("div1");//获取元素
				var oStrong = document.createElement("strong");//创建元素节点
				var oTxt = document.createTextNode("绿叶学习网");//创建文本节点
				oStrong.appendChild(oTxt);//将文本节点插入到元素节点中
				oDiv.appendChild(oStrong);//将组装好的元素插入到已存在的元素中
			}
		</script>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>

②创建复杂元素(带属性)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript</title>
		<script>
			window.onload=function()
			{
				var oInput = document.createElement("input");//创建元素节点
				oInput.id = "submit";
				oInput.type = "button";
				oInput.value = "提交";
				oInput.onclick=function()
				{
					alert("提交成功");
				}
				document.body.appendChild(oInput);//将组装好的元素插入到body元素中
			}
		</script>
	</head>
	<body>
	</body>
</html>

 

③创建动态图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript</title>
		<script>
			window.onload=function()
			{
				var oImg = document.createElement("img");//创建元素节点
				oImg.src="fb17f84c2702cff8da55f08f1733dc7.jpg";
				oImg.alt = "流行编译器";
				oImg.className = "pos";//设置元素class用的是className
				oImg.style.border = "1px solid red";
				oImg.title = "流行编译器";
				document.body.appendChild(oImg);//将组装好的元素节点插入到body元素中
			}
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>

④创建多个元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript</title>
		<style type="text/css">
			table{ border-collapse: collapse; }
			tr,td{
				width: 80px;
				height: 20px;
				border: 1px solid gray;
			}
		</style>
		<script>
			window.onload=function()
			{
				var oTable = document.createElement("table");//创建元素节点
				for(var i=0;i<3;i++)
				{
					var oTr = document.createElement("tr");//创建元素节点
					for(var j=0;j<4;j++)
					{
						var oTd = document.createElement("td");//创建元素节点
						oTr.appendChild(oTd);//将元素节点td插入到元素节点tr中
					}
					oTable.appendChild(oTr);//将元素节点tr插入到元素节点table中
				}
				document.body.appendChild(oTable);//将组装好的元素节点插入到body标签中
			}
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>

5.插入元素appendChild( )和insertBefore( )

1.appendChild( );

把一个新元素插入到父元素的内部子元素的末尾。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript</title>
		<style type="text/css">
			table{ border-collapse: collapse; }
			tr,td{
				width: 80px;
				height: 20px;
				border: 1px solid gray;
			}
		</style>
		<script>
			window.onload=function()
			{
				var oBtn = document.getElementById("btn");//获取input type=button元素
				oBtn.onclick = function()
				{
					var oTxt = document.getElementById("txt");
					var oUl = document.getElementById("list");//获取元素
					var oLi = document.createElement("li");//创建元素节点
					var textNode = document.createTextNode(oTxt.value);//创建文本节点
					oLi.appendChild(textNode);//将文本节点插入到元素节点中
					oUl.appendChild(oLi);//将组装好的元素插入到已经存在的元素中
				}
			}
		</script>
	</head>
	<body>
		<ul id="list">
			<li>JavaScript</li>
			<li>HTML</li>
			<li>CSS</li>
		</ul>
		<input id="txt" type="text" />
		<input id="btn" type="button" value="插入"/>
	</body>
</html>

2.insertBefore( );

将一个新元素插入到父元素的某一个子元素之前。

*语法：

A.insertBefore(B,ref);

//A表示父元素，B表示子元素，ref表示指定子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript</title>
		<style type="text/css">
			table{ border-collapse: collapse; }
			tr,td{
				width: 80px;
				height: 20px;
				border: 1px solid gray;
			}
		</style>
		<script>
			window.onload=function()
			{
				var oBtn = document.getElementById("btn");//获取input type=button元素
				oBtn.onclick = function()
				{
					var oTxt = document.getElementById("txt");
					var oUl = document.getElementById("list");//获取元素
					var oLi = document.createElement("li");//创建元素节点
					var textNode = document.createTextNode(oTxt.value);//创建文本节点
					oLi.appendChild(textNode);//将文本节点插入到元素节点中
					oUl.insertBefore(oLi,oUl.firstElementChild);//将组装好的元素插入到已经存在的元素中
					//oUl.firstElementChild表示ul元素下的第一个子元素
				}
			}
		</script>
	</head>
	<body>
		<ul id="list">
			<li>JavaScript</li>
			<li>HTML</li>
			<li>CSS</li>
		</ul>
		<input id="txt" type="text" />
		<input id="btn" type="button" value="插入"/>
	</body>
</html>

 

6.删除元素removeElement( )

*语法：

A.removeChild(B);

//A表示父元素，B表示父元素内部的某个子元素
//删除元素的核心在于找到被删除的子元素和被删除子元素的父元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript</title>
		<style type="text/css">
			table{ border-collapse: collapse; }
			tr,td{
				width: 80px;
				height: 20px;
				border: 1px solid gray;
			}
		</style>
		<script>
			window.onload=function()
			{
				var oBtn = document.getElementById("btn");//获取元素btn,为其添加onclick属性
				oBtn.onclick=function()
				{
					var oUl= document.getElementById("list");//获取元素ul
					oUl.removeChild(oUl.lastElementChild);//删除元素ul内部的最后一个子元素
				}
			}
		</script>
	</head>
	<body>
		<ul id="list">
			<li>JavaScript</li>
			<li>HTML</li>
			<li>CSS</li>
		</ul>
		<input id="btn" type="button" value="删除"/>
	</body>
</html>

7.复制元素 cloneNode( )

*语法：

obj.cloneNode(bool);
//obj表示要复制的元素
//bool取值1或者true表示复制元素本身以及该元素下的所有子元素，取值0或者false,表示仅仅复制元素本身，不复制该元素下的子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript</title>
		<script>
			window.onload=function()
			{
				var oBtn = document.getElementById("btn");//获取元素input
				oBtn.onclick=function()
				{
					var oUl=document.getElementById("list");//设置input属性
					document.body.appendChild(oUl.cloneNode(true));//将ul以及其下的子元素插入到父元素body下
				}
			}
		</script>
	</head>
	<body>
		<ul id="list">
			<li>JavaScript</li>
			<li>HTML</li>
			<li>CSS</li>
		</ul>
		<input id="btn" type="button" value="复制"/>
	</body>
</html>

8.替换元素 replaceChild( )

*语法：

A.replaceChild(new,old);

//A表示父元素，new表示新子元素，old表示旧子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript</title>
		<script>
			window.onload=function()
			{
				var oBtn = document.getElementById("btn");
				oBtn.onclick=function()
				{
					var oP = document.getElementsByTagName("p")[0];//获取旧元素
					var oTag = document.getElementById("tag");
					var oTxt = document.getElementById("txt");
					var oNewTag = document.createElement(oTag.value);//创建元素节点
					var oNewTxt = document.createTextNode(oTxt.value);//创建文本节点
					oNewTag.appendChild(oNewTxt);//将文本节点插入到元素节点中
					document.body.replaceChild(oNewTag,oP);//将组装好的新元素替换旧元素
				}
			}
		</script>
	</head>
	<body>
		<p>Java</p>
		<hr />
		请输入标签：<input id="tag" type="text" /><br />
		请输入内容：<input id="txt" type="text" /><br /> 
		<input type="button" id="btn" value="替换" />
	</body>
</html>

九、DOM进阶

1.HTML属性操作(对象属性)

获取html属性值和设置html属性值：

*语法：

1.获取html属性值
obj.attr
//obj是元素名，即DOM对象，指的是用获取元素方法获得的元素节点
//attr是属性名称

2.设置html属性值
obj.attr = "属性值";

设置和获取动态DOM中的属性值：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript</title>
		<style type="text/css">
			#id{ color: antiquewhite; }
		</style>
		<script>
			window.onload = function()
			{
				var oInput = document.createElement("input");//创建元素节点
				//对象属性设置元素属性
				oInput.type = "button";
				oInput.value = "提交";
				oInput.id = "btn";
				
				//为按钮添加单击事件
				oInput.onclick = function()
				{
					alert(oInput.type);//对象属性获取元素属性
				}
				document.body.appendChild(oInput);//将组装好的元素节点插入到已经存在的元素中
			}
		</script>
	</head>
	<body>
	</body>
</html>

2.HTML属性操作(对象方法)

*javascript有4种方法来操作HTML属性：

obj.getAttribute("attr");                //获取某个元素的属性的值
obj.setAttribute("attr","属性值");       //设置某个元素的属性的值
obj.removeAttribute("attr");            //删除元素的某个属性
obj.hasAttribute("attr");               //判断某个元素是否含有某个属性

*实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript</title>
		<style type="text/css">
			#st{ color: chocolate;font-weight: bold; }
			input{ border: 1px dashed darkred;color: blueviolet; }
		</style>
		<script>
			window.onload = function()
			{
				var oP = document.getElementsByTagName("p");
				oP[0].setAttribute("id","st");//对象方法为元素设置id属性
				var oBtnRemove = document.getElementById("remove_style");
				var oBtnAdd = document.getElementById("add_style");
				var oGet = document.getElementById("get");
				
				//为按钮删除样式添加单击事件
				oBtnRemove.onclick = function()
				{
					if(oP[0].hasAttribute("id"))//对象方法判断元素是否含有某种属性
					{
						oP[0].removeAttribute("id");//对象方法删除元素属性
					}
				}
				
				//为按钮添加样式添加单击事件
				oBtnAdd.onclick = function()
				{
					if(oP[0].hasAttribute("id") == false)
					{
						oP[0].setAttribute("id","st");//对象方法设置元素的属性
					}
				}
				
				//为按钮获取添加单击事件
				oGet.onclick = function()
				{
					alert(oBtnAdd.getAttribute("type"));
				}
			}
		</script>
	</head>
	<body>
		<p>生活是一种态度</p>
		<input type="button" value="删除样式" id="remove_style" />
		<input type="button" value="添加样式" id="add_style" />
		<input type="button" value="获取" id="get" />
	</body>
</html>

3.CSS属性操作

*获取和设置CSS属性值

getComputeredStyle(obj).attr;            //获取css属性值,attr采用的是骆驼峰的书写方式：如background-color写成backgroundColor;
//对于获取元素不能使用obj.style.attr的解释是，oobj.style.attr只能获取css的行内样式表中的属性，对于外部或者内部样式表，是没法获取的，此时应该用getComputeredStyle(obj).attr;

obj.style.attr = "值";                   //一次设置一个css属性值，设置的是元素css的行内样式表
obj.style.cssText = "值";                //同时设置多个css属性值，设置的是元素css的行内样式表

//凡是对象的属性，都有两种写法：oBtn.id等价于 oBtn["id"];


//attr采用骆驼峰书写的原因：再obj.style.属性中，属性时变量，而变量中是不允许出现中划线的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 100px;
				height: 100px;
				background-color: aqua;
			}
		</style>
		<script>
			window.onload = function()
			{
				var oDiv = document.getElementById("div1");
				var oBtnColor = document.getElementById("btnColor");
				var oBtnAdd = document.getElementById("btnAdd");
				var oBtnCssText = document.getElementById("btnCssText");
				oBtnColor.onclick = function()
				{
					alert(getComputedStyle(oDiv).backgroundColor);//获取css属性值
				}
				oBtnAdd.onclick = function()
				{
					oDiv.style.backgroundColor = "hotpink";//属性采用骆驼峰的书写方式
					oDiv.style.border = "3px solid chocolate";//设置css属性值
				}
				oBtnCssText.onclick = function()
				{
					var txt = document.getElementById("txt").value;//字符串中的书写名采用平时的书写方法
					oDiv.style.cssText = txt;//cssText设置怨怒苏属性
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="获取颜色" id="btnColor" /><br />
		<input type="button" value="设置颜色、边框" id="btnAdd" /><br />
		<input type="text" id="txt" value="请输入CSS的行内样式表"/>
		<input type="button" value="cssText" id="btnCssText" />
		<div id="div1"></div>
		</ul>
	</body>
</html>

4.DOM遍历

DOMi遍历可以分为以下三种情况：

*查找父元素

*查找子元素

*查找兄弟元素

①查找父元素

语法：

var oParent = obj.parentNode;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table,tr,td{ border: 1px solid chocolate;border-collapse: collapse; }
		</style>
		<script>
			window.onload = function()
			{
				var oTd = document.getElementsByTagName("td");
				for(var i=0;i<oTd.length;i++)
				{
					oTd[i].onclick = function()
					{
						var oParent = this.parentNode;
						oParent.style.backgroundColor = "red";
					}
				}
			}
		</script>
	</head>
	<body>
		<table>
			<caption>标题</caption>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
		</table>
		</ul>
	</body>
</html>

②查找子元素

*语法：

*childNodes、firstChild、lastChild
*children、firstElementChild、lastElementChild

//childNodes获取的是所有的子节点，包括子元素节点以及子文本节点；而children获取的所有的子元素节点。不包括子文本节点，firstElementChild表示children获取到的第一个子元素节点，lastElementChild表示children获取到的最后一个子元素节点，children[i]则表示获取到第(i+1)个子元素节点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table,tr,td{ border: 1px solid chocolate;border-collapse: collapse; }
		</style>
		<script>
			window.onload =function()
			{
				var oUl = document.getElementById("list");
				alert("childNodes的长度为"+oUl.childNodes.length+"\n"+"children的长度是"+oUl.children.length);
			}
		</script>
	</head>
	<body>
		<ul id="list">
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>
	</body>
</html>

 ③查找兄弟元素

*语法：

previousSibling、nextSibling
//与childNodes的方式相似，查找出来的可能是元素节点，也可能是文本节点。

previousElementSibling、nextElementSibling
//与children相似，查找出来的元素节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload = function()
			{
				var oBtn = document.getElementById("btn");
				var oUl = document.getElementById("list");
				oBtn.onclick = function()
				{
					var oChild = oUl.children[2];
					oUl.removeChild(oChild.previousElementSibling);
				}
			}
		</script>
	</head>
	<body>
		<ul id="list">
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
			<li>Vue.js</li>
		</ul>
		<input type="button" value="删除" id="btn" />
	</body>
</html>

5.innerHTML和innerText

*语法：

父元素.innerHTML = 'HTML元素的格式'
例如：document.body.innerHTML = '<p>字节跳动</p>';代表在body元素中插入p元素

父元素.innerText = '字节';
例如：代表在div元素中插入文本‘字节’.

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "UTF-8" />
		<title>JavaScript</title>
		<script>
			window.onload = function()
			{
				var oDiv = document.getElementsByTagName("div")[0];
				oDiv.innerHTML = '<span>绿叶学习网</span>\
								  <span style="color:hotpink;">Javascript</span>\
								  <span style="color:chocolate">入门教程</span>'    //'\'的作用是换行书写，增强可读性
			}
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>

十、事件基础

1.JavaScript中常见的时间有以下5中种：

*鼠标事件

*键盘事件

*表单事件

*编辑事件

*页面事件

2.事件调用方式：*在script标签中调用,*在元素种调用。

1.鼠标事件

*onclick                        鼠标单击事件

*onmouseover              鼠标移入事件

*onmouseout                鼠标移出事件

*onmousedown            鼠标按下事件

*onmouseup                鼠标松开事件

*onmousemove            鼠标移动事件

①鼠标单击事件onclick

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "UTF-8" />
		<title>Javascript</title>
		<style>
			div{ display: inline-block; 
			background-color: antiquewhite;
			color: chocolate;}
		</style>
		<script>
			window.onload = function()
			{
				var oDiv = document.getElementById("div1");
				oDiv.onclick = function()
				{
					alert("欢迎");
				}
			}
		</script>
	</head>
	<body>
		<div id="div1">点击弹出</div>
	</body>
</html>

②鼠标移入移出onmouseover-onmouseout

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "UTF-8" />
		<title>Javascript</title>
		<style>
		</style>
		<script>
			window.onload = function()
			{
				var oDiv = document.getElementById("div1");
				oDiv.onmouseover = function()
				{
					this.style.color = "red";
				};
				oDiv.onmouseout = function()
				{
					this.style.color = "black";
				}
			}
		</script>
	</head>
	<body>
		<div id="div1">字节跳动</div>
	</body>
</html>

③鼠标按下和鼠标松开onmousedown-onmouseup

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript</title>
		<script>
			window.onload = function()
			{
				var oTest = document.getElementById("test");
				var oBtn = document.getElementById("btn");
				oBtn.onmousedown = function()//鼠标按下
				{
					oTest.style.color = "red";
				};
				oBtn.onmouseup = function()//鼠标松开
				{
					oTest.style.color = "black";
				};
			}
		</script>
	</head>
	<body>
		<div id="test">字节跳动</div>
		<input type="button" id="btn" value="特效" />
	</body>
</html>

 2.键盘事件onkeydown-onkeyup

自动统计字符串的长度：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript</title>
		<style>
			input{ color: #BBBBBB;
			 border: 2px solid salmon;}
			span{ color: brown;
			font-size: 20px;
			 font-weight: bolder;}
		</style>
		<script>
			window.onload = function()
			{
				var oTxt = document.getElementById("txt");
				var oSp = document.getElementById("sp");
				oTxt.onfocus = function()//获取焦点
				{
					if(oTxt.value == "请输入")
					{
						oTxt.value = "";
					}
				};
				oTxt.onblur = function()//失去焦点
				{
					if(oTxt.value == "")
					{
						oTxt.value = "请输入";
					}
				};
				oTxt.onkeyup = function()//键盘松开总是发生在键盘按下之后，不用考虑键盘按下
				{
					var str = oTxt.value;
					oSp.innerText = str.length;
				}
			}
		</script>
	</head>
	<body>
		<input type="text" id="txt" value="请输入"/><br />
		<div><b>字符串的长度为</b><span id="sp">&nbsp;0</span></div>
	</body>
</html>

3.表单事件

在JavaScript中常见的表单事件有三种：

*onfocus-onblur                获取焦点/失去焦点

*onselect                          用的少

*onchange                       单选框、多选框、下拉列表选择某一项时触发。

①获取焦点onfocus-onblur

*获取焦点onfocus-onblur例子包含在键盘事件的例子中。

*focus()方法：页面一打开，光标就置于文本框内

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload = function()
			{
				var oTxt = document.getElementsByTagName("input")[0];
				oTxt.focus();
			}
		</script>
	</head>
	<body>
		<input type="text" />
	</body>
</html>

②onselect

*onselect事件属性在实际开发中用的少，不介绍。

*select方法：再次单击文本框，文本框中的内容会自动全部选中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload = function()
			{
				var oTxt = document.getElementsByTagName("input")[0];
				oTxt.onclick = function()
				{
					this.select();
				}
			}
		</script>
	</head>
	<body>
		<input type="text" />
	</body>
</html>

③onchange

*单选框、多选框、下拉列表选择某一项时触发。

复选框的全选和反选：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload = function()
			{
				var oFruit = document.getElementsByName("fruit");
				var oAll = document.getElementById("all");
				oAll.onchange = function()
				{
					if(oAll.checked)
					{
						for(var i=0;i<oFruit.length;i++)
						{
							oFruit[i].checked = true;
						}
					}
					else{
						for(var i=0;i<oFruit.length;i++)
						{
							oFruit[i].checked = false;
						}
					}
				};
			}
		</script>
	</head>
	<body>
		<label>全选/反选<input type="checkbox" id="all" ></label><br />
		<label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label>
		<label><input type="checkbox" name="fruit" value="苹果" />苹果</label>
		<label><input type="checkbox" name="fruit" value="荔枝" />荔枝</label>
		<label><input type="checkbox" name="fruit" value="西瓜" />西瓜</label>
	</body>
</html>

4.编辑事件

在JavaScript中，常见的编辑事件有三种：

*oncopy                防止页面内容背拷贝

*onselectstart        防止页面内容被选取

*oncontextmenu    禁止使用鼠标右键

①oncopy

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript</title>
		<script>
			window.onload = function()
			{
				document.body.oncopy = false;
			}
		</script>
	</head>
	<body>
		<div id="div1">字节跳动</div>
	</body>
</html>

内容可以被选中，但是不能复制

②onselectstart

window.onload = function()
{
	var oDiv = document.getElementById("div1");
	document.body.onselectstart = function()
    {
	    return false;
	}
}

页面内容不可以被选中。

③oncontextmenu

window.onload = function()
{
	document.body.oncontextmenu = function()
	{
		return false;
	}
}

禁止使用鼠标右键，但是不能限制快捷键

5.页面事件

常见的页面事件有：

*onload                        在文档加载完成后再执行

*onbeforeunload           离开离开前触发的一个事件

①onload

window.onload = function()
{
    ……
}

②onbeforeunload

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript</title>
		<script>
			window.onload = function()
			{
				alert("欢迎");
			}
			window.onbeforeunload = function(e)
			{
				e.returnValue = "再见";
			}
		</script>
	</head>
	<body>
	</body>
</html>

进入页面显示"欢迎”,离开页面提示“再见”。

十一、事件进阶

1.事件处理器和事件监听器

*事件处理器：通过HTML属性的方法为元素添加事件：

oBtn.onclick = function( ){ …… };

*事件监听器：使用addEventListener(  )方法为元素添加事件：

obj.addEventListener( "type",fn,false );

obj是一个DOM对象

type指的是事件类型，前缀不需要加on，如事件处理器中的onclick在事件监听器中的写法为click。

fn是函数名或者匿名函数。

*事件处理器和事件监听器的区别在于：

事件处理器不能为一个元素添加多个相同的事件，当添加多个相同的事件时，JavaScript只执行最后一个事件。

事件处理器可以为一个元素添加多个相同的事件，JavaScript从上到下依次执行。

①事件监听器解绑事件：

obj.removeEventListener("type",fn,false);

事件监听器解绑事件监听器添加的事件，不能解绑事件处理器添加的事件。

事件监听器解绑时，函数参数中的函数只能是函数名，因此在事件监听器添加事件时，函数参数应当用定义函数而不是匿名函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "UTF-8" />
		<title>Javascript</title>
		<script>
			window.onload = function()
			{
				var oP = document.getElementById("content");
				var oBtn = document.getElementById("btn");
				//采用事件监听器的方式为元素添加事件
				oP.addEventListener("click",changeColor,false);
				
				function changeColor(){
					this.style.color = "red";
				}
				oBtn.onclick = function(){
					oP.removeEventListener("click",changeColor,false);
				}
			}
		</script>
	</head>
	<body>
		<p id="content">字节跳动</p>
		<input type="button" value="解除绑定" id="btn" />
	</body>
</html>

②事件处理器解绑事件：

oBtn.onclick = null;

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "UTF-8" />
		<title>Javascript</title>
		<script>
			window.onload = function()
			{
				var oP = document.getElementById("content");
				var oBtn = document.getElementById("btn");
				//采用事件处理器为元素添加事件
				oP.onclick = function()
				{
					this.style.color = "red";
				}
				oBtn.onclick = function()
				{
					oP.onclick = null;//事件处理器添加元素事件的解绑方式
				}
			}
		</script>
	</head>
	<body>
		<p id="content">字节跳动</p>
		<input type="button" value="解除绑定" id="btn" />
	</body>
</html>

效果与上图事件监听器的实现效果相同。

2.event对象

*当一个事件发生时，事件有关的详细信息就会保存到临时的地方，这个地方称为event对象，可以通过event对象来获取一个事件的详细信息。

*实际上，在每一次调用一个事件时，JavaScript都会为这个事件函数加上一个隐藏的event参数而且通常情况下都是作为函数的第一个参数传入的。如：

oBtn.onclick = function(e)//e作为第一个函数参数接收函数传入的event对象。
{
	alert(e.type);
}

*对象的常见属性：

type                事件类型
keyCode             获取键码值
shiftKey            是否按下shift键
altKey              是否按下alt键
ctrlKey             是否按下ctrl键

①type属性

获取事件的类型。

oBtn.onclick = function(e){ alert(e.type); }

②keyCode,shiftKey,ctrlKey,altKey

获取按键

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "UTF-8" />
		<title>Javascript</title>
		<script>
			window.onload = function()
			{
				var oSpan = document.getElementById("key");
				window.addEventListener("keydown",calc,false);
				function calc(e){
					if(e.keyCode == 37 || e.keyCode == 65){
						oSpan.innerHTML = "左键";
					}else if(e.keyCode == 38 || e.keyCode== 87){
						oSpan.innerHTML = "上键";
					}else if(e.keyCode == 39 || e.keyCode == 68){
						oSpan.innerHTML = "右键";
					}else if(e.keyCode == 40 || e.keyCode == 83){
						oSpan.innerHTML = "下键";
					}else if(e.shiftKey || e.ctrlKey || e.altKey){
						alert("禁止使用shift,ctrl,alt键");
					}else{
						oSpan.innerHTML = "";
					}
				}
			}
		</script>
	</head>
	<body>
		<div>您控制的方向键是：<span id="key" style="color: hotpink;font-weight: bold;"></span></div>
	</body>
</html>

3.this

*在事件操作中：哪个DOM对象调用了this所在的函数，this就指向那个DOM对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "UTF-8" />
		<title>Javascript</title>
		<script>
			window.onload = function()
			{
				var oUl = document.getElementById("list");
				var oLi = oUl.getElementsByTagName("li");
				for(var i=0;i<oLi.length;i++)
				{
					oLi[i].onclick = function()
					{
						this.style.color = "red";
					};
				}
			}
		</script>
	</head>
	<body>
		<ul id="list">
			<li>深圳</li>
			<li>上海</li>
			<li>广东</li>
			<li>杭州</li>
		</ul>
	</body>
</html>

十二、window对象

在JavaScript中，一个浏览器窗口就是一个window对象。

window对象以及其下边的document,location,navigator等子对象都是用来操作浏览器窗口的，因此又称为浏览器窗口模型，简称BOM。

1.窗口操作

①打开窗口

*语法：

window.open(url,"target");    //target默认_blank打开新窗口，当设置为_self时表示在原窗口打开。

*打开空窗口向空窗口输出页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "UTF-8" />
		<title></title>
		<script>
			window.onload = function()
			{
				var oBtn = document.getElementById("btn");
				var opener = null;
				oBtn.onclick = function(){
			
					opener = window.open();
					var strHtml = "<!DOCTYPE html>\
					<html>\
					<head>\
					<title></title>\
					</head>\
					<body>\
					<div>绿叶</div>\
					</body>\
					</html>";
					opener.document.write(strHtml);
				};
			};
		</script>
	</head>
	<body>
		<input type="button" value="打开" id="btn" />
	</body>
</html>

打开后在新的页面输出”绿叶“。

 ②关闭窗口

*语法：

window.close()        //没有参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<script>
			window.onload = function()
			{
				var oBtn = document.getElementsByTagName("input");
				var opener = null;
				oBtn[0].onclick = function()
				{
					opener = window.open("http://www.lvyestudy.com");
				};
				oBtn[1].onclick = function()
				{
					opener.close();//关闭新窗口
				};
			}
		</script>
	</head>
	<body>
		<input type="button" value="打开新窗口" />
		<input type="button" value="关闭新窗口" />
	</body>
</html>

2.对话框

alert()                仅提示文字，没有返回值
confirm()              具有提示文字，返回布尔值
prompt()               具有提示文字，返回字符串

1.alert()

*弹出对话框。在alert中换行使用'\n'。

2.confirm()

*弹出对话框的同时提示确认取消按钮。点击确认返回true，取消返回false

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<script>
			window.onload = function()
			{
				var oBtn = document.getElementsByTagName("input");
				oBtn[0].onclick = function()
				{
					if(confirm("确定提交吗？")){
						alert("提交成功!");
					}else{
						alert("您取消了选择");
					}
					
				};
			}
		</script>
	</head>
	<body>
		<input type="button" value="提交" />
	</body>
</html>

 3.prompt()

*提示文字的同时返回用户输入的字符串，若未输入返回null。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<script>
			window.onload = function()
			{
				var oBtn = document.getElementsByTagName("input");
				oBtn[0].onclick = function()
				{
					var str = prompt("请输入您的姓名");
					document.write("欢迎来到-<strong>"+str+"</strong>");
				};
			}
		</script>
	</head>
	<body>
		<input type="button" value="点击" />
	</body>
</html>

 

3.定时器

1.一次性定时器setTimeout()和clearTimeout()

*语法：

setTimeout(code,time);
clearTimeout(存放定时器的变量);

//code可以是一段代码、一个函数、也可以是一个函数名。time是以毫秒为单位的：1秒等于1000毫秒

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<script>
			window.onload = function()
			{
				var oStart = document.getElementById("btnStart");
				var oEnd = document.getElementById("btnEnd");
				var timer = null;//存放计时器变量
				oStart.onclick = function(){
					clearInterval(timer);//防止连点产生计时器叠加bug
					timer = setTimeout(function(){ alert("欢迎");},2000);
				}
				oEnd.onclick = function(){
					clearTimeout(timer);
				}
			}
		</script>
	</head>
	<body>
		<p>点击开始按钮，两秒后提示欢迎语</p>
		<input type="button" value="开始" id="btnStart" />
		<input type="button" value="暂停" id="btnEnd" />
	</body>
</html>

 2.重复性定时器setInterval()和clearInterval()

*语法：

setInterval(code,time);
clearInterval(存放事件处理器的变量)
//code是一段代码，一个函数或者一个函数名
//time指时间，单位为毫秒

*倒计时：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<script>
			var n = 5;//定义全局变量，用于记录秒数
			window.onload = function()
			{
				setInterval(timeList,1000);
			}
			function timeList(){
				if(n>0){
					n--;
					document.getElementById("time").innerHTML = n;
				}
			}
		</script>
	</head>
	<body>
		<div>距离倒计时结束还有<span id="time" style="font-weight: bold;">5</span>秒钟</div>
	</body>
</html>

 

4.location对象

window.location.href

*获取和设置当前页面的地址。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<script>
			window.onload = function(){
				var url = window.location.href;
				alert("当前页面的地址为\n"+url);
				setTimeout(function(){ window.open("http://www.lvyestudy.com"); },3000);
			}
		</script>
	</head>
	<body>
		<p>3秒后跳转</p>
	</body>
</html>

5.navigator对象

*语法：

window.navigator.userAgent
//返回的是一个包含浏览器信息的字符串

alert(window.navigator.userAgent);

 

十三、document对象

document是浏览器为每个窗口内的html页面创建的对象，通过document对象，我们可以操作页面的元素；而通过window对象，我们可以操作浏览器的窗口。window对象是包含document对象的。

1.document对象属性

document.title                    获取文档的title
document.body                     获取文档的body
document.forms                    获取所有的form元素
document.images                   获取所有的img元素
document.links                    获取所有的a元素
document.cookie                   获取文档的coookie
document.URL                      获取当前文档的URL(页面地址)
document.referrer                 获取使浏览器到达当前文档的URL

2.document对象方法

document.getElementById()                通过id获取元素
document.getElementsByTagName()          通过元素名获取元素
document.getElementsByClassName()        通过class获取元素
document.getElementByName()              通过name获取元素
document.querySelector()                 通过选择器获取一个元素
docuemnt.querySelectorAll()              通过选择器获取所有元素
document.createElement()                 创建元素节点
document.createTextNode()                创建文本节点
document.write()                         输出内容
document.writeln()                       输出内容并换行

*document.writeln

document.writeln()只有在加上<pre>/<pre>标签时才换行，不加标签的话只是输出的内容之间有空隙。

			document.writeln("<pre>HTML");
			document.writeln("CSS");
			document.writeln("JavaScript");
			document.writeln("jQuery</pre>");

 *去掉标签后：