JavaScript交互式网页设计笔记

发布时间：2025-12-09 18:49:12 浏览次数：4

一、JavaScript基本语法

1.简介

JavaScript诞生于1995年，主要是进行用户输入的合法性验证

Web脚本语言轻型的、解释性的浏览器内

2.执行原理

当客户端向服务器请求某个页面时，服务器端将整个页面包含JavaScript的脚本代码作为响应内容，发送到客户端的机器，客户端浏览器根据收到的网页内容从上往下逐行读取并解释其中的HTML或脚本代码

从服务器端下载到客户端，在客户端执行，不占用服务器端的CPU等资源，分担了服务器的任务，间接提升了Web服务器的性能

3.JavaScript脚本代码的位置

3.1HTML文件混合方式

在网页的<script></script>标签对中直接编写脚本程序代码

<body>

//页面输出

document.write("hello，world");

//日志输出——控制台

console.log("hello,world2");

//弹窗

alert("hello,world3");

</script>

</body>

3.2JS文件引用方式

将脚本程序代码编写在一个单独的JavaScript文件中，然后在网页中引用

可在<head>内、<body>内、<body>外

注意：

带有src属性的<script>标签。不应该在<script>标签对之间包含任何额外的JavaScript代码。如包含了嵌入的代码，则只会执行外部脚本文件，而嵌入的代码会被忽略

3.3HTML代码嵌入方式

将脚本程序代码作为某个HTML页面元素的事件属性值或超链接href属性值

4.变量

JavaScript的变量采用弱类型的形式，即声明变量时不必确定类型，而是在使用或赋值时自动确定其数据类型

var声明的变量没有块作用域，有函数作用域
let有块作用域

方式一：

var message1;

message1="你们好呀";

方式二：

var message2="今天又是元气满满的一天呀";

声明变量规则：

a：第一个字符必须是一个字母、下划线、或美元符号

b：其他字符可以是字母、下划线、美元符号、或数字

c：区分大小写

d：不能与关键字同名，如while、for、if等

变量的运算使用

var x=2;var y=6;var z=x+y;//字符串拼接空格有效alert("x:"+x+",y:"+y+" x+y="+z);//占位符alert(`x:${x},y:${y},x+y=${z}`);

5.数据类型

5.1typeof操作符

由于JavaScript是弱类型的，因此需要一种手段来检测给定变量的数据类型

var w;console.log(typeof w);

string：用单引号或双引号来声明的字符串

undefined：未初始化的变量及未声明的变量

number：整数或浮点数

object：JavaScript中的对象、数组或null

boolean：true或false

5.2undefined

对未初始化的变量及未声明的变量使用typeof运算符均会返回undefined

5.3null

null是空类型，表示一个变量已经有值，但值为空对象，使用typeof检测时会返回object

5.4boolean

boolean是布尔类型，也称真假类型。这个类型有两个标准值：true和false。布尔值用来表示一个逻辑表达式的结果，通常用作判断处理

5.5number

整数和小数都是number

5.6string

字符串类型，是程序中使用最广泛的一种类型。字符串是使用单引号或双引号引起来的若干字符

6.运算符

JavaScript中的运算符
类型	运算符
算术运算符	+ - * / % ++ --
赋值运算符	=
比较运算符	> < >= <= == !=
逻辑运算符	&& \|\| !

7.JavaScript注释

7.1单行注释

//这是单行注释

7.2多行注释

/*这是多行注释*/

8.JavaScript流程控制语句——顺序结构和选择结构

8.1顺序结构

按先后顺序依次执行，最基本的结构

8.2选择结构

8.2.1if语句单分支语句

if(条件表达式){

语句或语句块

}

var w;if (typeof w == undefined) {console.log("w的数据类型是未定义");}

8.2.2if双分支语句

if(条件表达式){

语句或语句块1

}else{

语句或语句块2

}

var y=3.5;var xx;if (x > 0) {xx = y;} else {xx = -y;}console.log(xx);

8.2.3if多分支语句

if(条件表达式1){

语句或语句块1

}else if(条件表达式2){

语句或语句块2

}else{

语句或语句块3

}

var time = new Date();var hour = time.getHours();if (hour <= 11) {console.log("早上好");} else if (hour <= 18) {console.log("下午好");} else {console.log("晚上好");}

8.2.4switch语句

switch(表达式){

case 取值1:语句或语句块1;

break;

case 取值2:语句或语句块2;

break;

case 取值3:语句或语句块3;

break;

default:语句或语句块n+1;

break;

}

var time = new Date();var week = time.getDay();switch (week) {case 1:case 2:case 3:case 4:case 5:case 6:document.write("今天是" + week + "还是要努力工作啊");break;default:document.write("今天是星期天好好休息一下吧");break;}

9.JavaScript流程控制语句——循环结构

9.1while循环

while(条件表达式){

语句或语句块

}

<table border="1" width="100%"><tr align="center"><td>摄氏温度</td><td>华氏温度</td></tr><script type="text/javascript">var f;var c=0;var count=1;while(count<=10 && c<=250){//转换f=c*9/5.0+32;document.write("<tr align='center'><td>"+c+"</td><td>"+f+"</td></tr>");c=c+20;count++;}</script></table>

9.2do-while循环语句

do{

语句或语句块

}while(条件表达式);

9.3for循环语句

for(初始化表达式;循环条件表达式;循环后的操作表达式){

语句或语句块

}

<table border="1" width="100%"><tr align="center"><td>摄氏温度</td><td>华氏温度</td></tr><script type="text/javascript">var ff;//华氏温度for(var cc=0,count1=1;count1<=10&&cc<=250;cc=cc+20,count1++){ff=cc*9/5.0+32;document.write("<tr align='center'><td>"+cc+"</td><td>"+ff+"</td></tr>");}</script></table>

9.4break语句和continue语句

break退出循环结构

continue结束本次循环，进入下次循环

二、JavaScript函数与事件

1.JavaScript自定义函数

1.1函数的定义

function 函数名(形式参数1,形式参数2,...) {

语句

}

</script>

定义函数需遵守的规则：

a：使用function关键字，function后是函数名，函数不必说明返回值的类型

b：函数的命名规则与变量名的命名规则相同

c：函数名后的（），可以包含若干参数，也可以选择不带任何参数

d：最后是一对{}，包含具体实现特定功能的若干语句

1.2函数的调用

函数名（参数值）

1.3函数的参数

参数声明不需要关键字var，但参数的命名与变量命名规则相同

JavaScript中函数的参数具有以下特殊性:

a：函数声明了参数，调用时也可以不传递参数，这在其他编程语言中是会出现编译错误的

b：不管函数声明时有多少个参数，调用函数时可以传递若干个参数值给函数，并且实际传递的参数值还可以在函数内部获得

注:函数参数的长度：length是arguments对象的属性，表示函数被调用时实际传递的参数个数

1.4函数的返回值

return 返回值;

var result=函数(参数); 调用时

1.5匿名函数

匿名函数就是没有名字的函数，也称为拉姆达函数，时一种使用JavaScript函数的强大方式。

匿名函数作参数：通常把匿名函数作为函数的参数传递，这种情况在jQuery中非常普遍

方式一：

方式二：

1.6变量的作用域

全局变量是在函数体外声明的，可以在任何地方包括函数的内部使用。

局部变量是在函数体内声明的，只能在函数体内使用，局部变量随着函数的结束而消失。

如果全局变量和局部变量出现重名的情况，局部变量优先，即无论局部变量的值怎么改变，全局变量的值不会受到影响

2.JavaScript系统函数

2.1parseInt()函数

将字符串转换为整数

例：150cast——150

cast——NaN

6——6

6.56——6

2.2parseFloat()函数

返回的是一个浮点数

例：route66.5——NaN

8.5dog——8.5

6——6

.6——0.6

2.3isNaN()函数

判断参数是不是数字。如果不是数字，返回true，否则返回false

例:1234——false

wh——true

2.4eval函数

eval函数运行以字符串形式表示的JavaScript代码串，并返回执行代码串后的结果。计算表达式的结果

3.JavaScript事件

通过鼠标或按键在浏览器窗口或网页元素上执行的操作，称之为事件。

事件与处理程序的绑定：

方式一：

<p onclick="this.style.fontSize='30px'">事件与处理程序的绑定1</p>

方式二：

<p id="txt" onclick="changeSize()">事件与处理程序的绑定2</p><script type="text/javascript">function changeSize(){var obj=document.getElementById("txt");obj.style.fontSize='30px';}</script>

方式三：

<p id="txt" >事件与处理程序的绑定3</p><script type="text/javascript">function changeSize(){var obj=document.getElementById("txt");obj.style.fontSize='30px';}document.getElementById("txt").onclick=changeSize;</script>

方式四：

<p id="txt" >事件与处理程序的绑定3</p><script type="text/javascript">document.getElementById("txt").onclick=function (){this.style.fontSize='30px';}</script>

4.JavaScript的常用事件

4.1鼠标事件

4.1.1onclick事件

onclick事件是鼠标单击页面元素时触发的事件

<input type="radio" name="gender" id="men" value="男" onclick="showGender(this)">男<input type="radio" name="gender" id="men" value="女" onclick="showGender(this)">女<script type="text/javascript">//onclick鼠标点击事件function showGender(obj){alert("你选择的性别是："+obj.value);}</script>

this是JavaScript的一个关键字，表示当前的事件源

4.1.2onMouseOver事件和onMouseOut事件

鼠标移入、移出页面元素时触发的事件

例：当鼠标移入图片上，图片滚动，鼠标移出图片，停止滚动

4.1.3onMouseMove事件

鼠标指针移动时发生的事件，它以像素为单位，每移动1像素，onMouseMove()方法就触发一次

鼠标移动了<span id="sp">0</span>像素<p style="width: 200px; height:200px; background-color: aquamarine;" onmousemove="moveCount()"></p><script type="text/javascript">var count=0;function moveCount(){document.getElementById("sp").innerHTML=++count;//获取标签之间的内容}</script>

4.2其他事件

4.2.1onload事件

事件会在页面加载完成后立即发生

4.2.2onblur事件

光标或者焦点离开元素后触发的事件

<fieldset id="" style="width: 600px;"><legend>用户登录</legend>用户名<input placeholder="请输入六位数以上的账号" type="text" name="userName" id="userName" onblur="checkUser(this)"><span id="erro" style="color: red;"></span><br>密   码<input type="password" name="pwd" id="pwd"><br><input type="submit" name="" id="" value="登录"></fieldset> <script type="text/javascript">//onblur 焦点事件function checkUser(obj){if(obj.value.length<=6){//alert("输入不合法，请重新输入");document.getElementById("erro").innerHTML ="*输入不合法，请重新输入";}}</script>

4.2.2onchange事件

输入框的值发生变化或者改变下列列表的选项会触发的事件

<select name="" id="" onchange="changeLink(this)"><option value="请选择">请选择</option><option value="http://www.baidu.com">百度</option><option value="http://www.163.com">网易</option></select> <script type="text/javascript">//onchange事件function changeLink(obj){var site=obj.value;if(site!="请选择"){window.open(site);}}</script>

4.3表单事件

<form action="https://blog.csdn.net/Alive_tree/article/details/102941123" onsubmit="checkLogin()"><fieldset id="" style="width: 600px;"><legend>用户登录</legend>用户名<input placeholder="请输入六位数以上的账号" type="text" name="userName" id="userName" onblur="checkUser(this)"><span id="erro" style="color: red;"></span><br>密   码<input type="password" name="pwd" id="pwd"><br><input type="submit" name="" id="" value="登录"></fieldset></form> <script type="text/javascript">//onsubmit 单击表单元素的提交按钮提交事件function checkLogin(){var pwd=document.getElementById("pwd").value;if(pwd.trim().length>0){return true;}else{return false;}}</script>

三、JavaScript浏览器对象模型

1.浏览器对象模型

BOM是浏览器对象模型的简称。

一个完整的浏览器对象模型主要包括：window、history和document等对象，其中window对象是整个浏览器对象模型的顶层对象

浏览器对象模型的主要功能：

a：具有弹出新浏览器窗口的功能

b：具有移动、关闭和更改浏览器窗口大小的能力

c：提供WEB浏览器详细信息的导航对象

d：提供浏览器载入页面详细信息的本地对象

e：提供用户屏幕分辨率详细信息的屏幕对象

f：支持Cookies

g：Internet Explorer对浏览器对象模型进行扩展以包括ActiveX对象类，可以通过JavaScript来实现Active对象

2.window对象

window对象处于对象模型的第一层，对于每打开的窗口，系统会自动将其定义为window对象。

window对象提供了一系列的属性，这些属性本身也是对象。

window对象还提供了一些方法，用于创建对话框、操作窗口以及执行计时事件。

由于window对象是其他对象的基础，即顶层对象，所以在调用其方法或者属性时可以省略window对象名。

2.1常用属性

常用属性
属性	含义
document	窗口中当前显示的文档对象
history	history对象保存窗口最近加载的URL
location	当前窗口的URL
status	状态栏文本

2.2常用方法

方法	说明
prompt()	显示可提示用户输入的对话框
alert()	显示带有一个提示消息和一个确定按钮的警示框
confirm()	显示一个带有提示信息，确定和取消按钮的确认框
close()	关闭浏览器窗口
open()	打开一个新的浏览器窗口，加载给定URL所指定的文档
setTimeout()	在设定的毫秒数后调用函数或计算表达式
setInterval()	按照设定的周期（以毫秒计）来重复调用函数或表达式
clearInterval()	取消重复设置，与setInterval()对应

2.3使用window对象创建对话框

2.3.1alert()弹出一个警告对话框

a：alert可以弹出一个警告对话框，或者提示下一步该如何操作。

b：alert中的消息可以使用任何有效的表达式、变量或者字符。

c：alert对话框的参数为字符串，字符串中包含的html标签不会被解释，但可以使用转义字符如\n、\t等

2.3.2prompt()可以创建提示对话框

a：使用prompt方法可以创建提示对话框，用户可以在对话框中输入信息，提示对话框中包含一个简单的文本框，用户在提示对话框中输入文本后，作为值返回。

b：prompt方法有两个参数：第一个参数提示用户应该输入的内容，第二个参数是文本框中显示的初始默认值，如果没有传递第二个参数，文本框中默认显示undefined。

2.3.3confirm()可以创建确认对话框

使用confirm方法可以创建确认对话框，用来确认用户针对某一个问题的答案，须经过用户同意操作才能完成。此方法值需一个参数，即向用户描述需要确认的问题

2.4使用window对象操作窗口

窗口的常见特征
名称	说明
height、width	窗口文档显示区的高度、宽度，单位为像素
left、top	窗口与屏幕左边、顶端的距离，单位为像素

window.open("新窗口的URL","给新窗口命名","设置新窗口的特征") ;

window.close() ;

open方法的返回值是打开的window的对象。open方法的第一个参数是新窗口的URL地址，第二个参数是给新窗口的命名，第三个参数是设置新窗口的特征，这三个参数都是可以省略的

close方法可以关闭窗口对象。close方法没有参数，只要让需要关闭窗口的对象调用close方法即可。

<h1>主页面</h1><a href="javaScript:adwindows.close()">关闭页面</a> <script type="text/javascript">var adwindow;window.onload=function (){adwindows=window.open("demo3.2.html","广告","width=600,height=600,left=300,top=300");}</script>

2.5使用window对象执行计时事件

2.5.1setTimeout()方法

在指定的时间执行指定的代码并退出

带有两个参数：一个是带引号的程序代码或者函数的调用，一个是以毫秒表示时间，这个时间代表执行代码的延迟。

例：两秒之后显示alert提示框

2.5.2setInterval()方法

根据设置的时间间隔反复执行指定代码，直到程序结束或者利用clearInterval方法取消

带有两个参数：一个是带引号的程序代码或者函数的调用，一个是以毫秒表示时间，这个时间代表执行代码的延迟。

例：setInterval和clearInterval方法的联合使用—制作小女孩看书的动画

<p><img src="img/girl_1.gif" alt="" id="girlimg"></p><p><input type="button" value="开始" onclick="start()"><input type="button" value="停止" onclick="stop()"></p> <script type="text/javascript">var i=1;//保存动画当前播放的静态画面索引function change(){if(i<4){i++;}else{i=1;//播放到最后一幅画时，再从头开始}document.getElementById("girlimg").src="img/girl_"+i+".gif"; }var fs;function start(){fs=setInterval("change()",100);change();}function stop(){clearInterval(fs);}</script>

2.5.3requestAnimationFrame()方法

requestID=window.requestAnimationFrame(callback);

使用回调函数作为参数，这个回调函数将在浏览器重绘之前调用

requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，它的主要用途是按帧对网页进行重绘。

目的是为了让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。

requestAnimationFrame的优势，在于充分利用显示器的刷新机制，比较节省系统资源。

取消重绘：调用cancelAnimationFrame方法可以取消重绘

注意：requestAnimationFrame()方法是在主线程中完成的，如果主线程非常繁忙，动画效果就会大打折扣

<p><img src="img/girl_1.gif" alt="" id="girlimg"></p><p><input type="button" value="开始" onclick="start()"><input type="button" value="停止" onclick="stop()"></p> <script type="text/javascript">var i=1;//保存动画当前播放的静态画面索引function change(){if(i<4){i++;}else{i=1;//播放到最后一幅画时，再从头开始}document.getElementById("girlimg").src="img/girl_"+i+".gif";requestAnimationFrame(change);}var rnf;function start(){rnf=requestAnimationFrame(start);change();}function stop(){cancelAnimationFrame(rnf);}</script>

3.history对象和location对象

3.1history对象

页面前进/后退的条件：确保当前页面之前/之后有页面，当前页面才能执行前进/后退操作

history对象的方法
方法	描述
back()	后退一个页面，相当于浏览器后退按钮
forward()	前进一个页面，相当于浏览器前进按钮
go()	打开一个指定位置的页面

history实现页面前进后退：在history对象中，可以分别使用history.go(1)方法和history.go(-1)方法代替history.forward()方法和history.back()方法

第一个页面

<a href="3.3.html">跳转到下一个页面</a>

第二个页面

<a href="http://www.baidu.com">打开百度页面</a><br/><a href="javascript:window.history.forward()">前进</a><br/><a href="javascript:window.history.back()">后退</a><br/><a href="javascript:window.history.go(1)">前进</a><br/><a href="javascript:window.history.go(-1)">后退</a><br/>

3.2location对象

location对象的常用属性和方法
名称	描述
href属性	返回或设置当前页面的URL
hostname属性	返回Web主机的域名
pathname属性	返回当前页面的路径和文件名
port属性	返回Web主机的端口（80或443）
protocol属性	返回所使用的Web协议（http://或https://）
reload()方法	重新加载当前页面，相当于浏览器的刷新按钮
assign()方法	加载新的文档

<p>页面信息如下：<br><label for="" id="info"></label></p><h3>友情链接</h3><select name="" id="sel" onchange="changURL()"><option value="http://www.oschina.net">开源中国</option><option value="http://www.csdn.net">CSDN</option><option value="http://www.cnblogs.com">博客园</option><option value="http://www.mycodes.com">源码之家</option></select><a href="javascript:window.location.reload()">刷新</a><a href="javascript:window.location.assign('http://www.baidu.com')">百度一下，你就知道</a> <script type="text/javascript">window.onload=function(){var info=document.getElementById("info");info.innerHTML="主机域名："+window.location.hostname+"<br/>主机端口："+window.location.href+"<br/>Web协议："+window.location.protocol+"<br/>页面的路径和文件名："+window.location.pathname}function changURL(){//获取选择的列表项的值var url=document.getElementById("sel").value;//设置当前浏览器窗口地址栏的URLwindow.location.href=url;}</script>

更改页面的URL地址：window.location.href属性可获取当前页面的URL地址，也可更改当前页面的URL地址

4.screen对象和navigator对象

4.1screen对象

Window.screen对象包含了用户屏幕的相关信息，编写时可不用window前缀

availWidth属性返回访问者屏幕的宽度，单位是像素，减去界面特性

availHeight属性返回访问者屏幕的高度，单位是像素，减去界面特性

screen对象的常用属性
属性	描述
availWidth	返回显示屏幕的可用宽度（除window任务栏外）
availHeight	返回显示屏幕的可用高度（除window任务栏外）
colorDepth	返回目标设备或缓冲器上的调色板的比特深度
pixelDepth	返回显示屏幕的颜色分辨率（比特每像素）
width	返回显示屏幕的宽度
height	返回显示屏幕的高度

<h3>你的屏幕信息：</h3> <script type="text/javascript">document.write("总宽度/高度:");document.write(screen.width+"*"+screen.height);document.write("<br/>");document.write("可用宽度/可用高度:");document.write(screen.availWidth+"*"+screen.availHeight);document.write("<br/>");document.write("色彩深度:");document.write(screen.colorDepth);document.write("<br/>");document.write("色彩分辨率");document.write(screen.pixelDepth);</script>

4.2navigator对象

navigator对象的名称是Netscape的Navigator浏览器，但其它实现了JavaScript的浏览器也支持这个对象

navigator对象的实例是唯一的，可以用window对象的navigator属性来引用它

navigator对象包含了浏览器的有关信息

浏览器检测：由于navigator可误导浏览器检测，可使用对象检测来嗅探不同的浏览器。不同的浏览器支持不同的对象，例如Opera浏览器支持window.opera，因此对于不同的浏览器，要使用不同的对象来检测浏览器

navigator对象的常见属性
属性	描述
appCodeName	返回浏览器的代号
appMinorVersion	返回浏览器的次级版本
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
browserLanguage	返回浏览器的语言
cookieEnabled	返回浏览器的是否启用cokkie的布尔值
cpuClass	返回浏览器系统的CPU等级
onLine	返回系统是否处于联机模式的布尔值
platform	返回运行浏览器的操作系统平台
systemLanguage	返回操作系统使用的默认语言
userAgent	返回客户机发送服务器的user-agent头部的值
userLanguage	返回操作系统的自然语言设置

navigator对象的常见方法
方法	描述
javaEnabled()	规定浏览器是否启用Java
taintEnabled()	规定浏览器是否启用数据污点，仅适用于IE浏览器

<p id="info"></p> <script type="text/javascript">var info="<p>浏览器代号："+navigator.appCodeName+"</p>";info+="<p>浏览器名称："+navigator.appName+"</p>";info+="<p>浏览器版本："+navigator.appVersion+"</p>";info+="<p>是否处于联机模式："+navigator.onLine+"</p>";info+="<p>启用Cookies："+navigator.cookieEnabled+"</p>";info+="<p>用户代理："+navigator.platform+"</p>";info+="<p>是否启用java："+navigator.javaEnabled()+"</p>";document.getElementById("info").innerHTML=info;</script>

navigator对象集合

集合

描述

plugins[]

返回对文档所有嵌入式对象的引用

该集合是一个plugin对象的数组，其中的元素代表浏览器已经安装的插件。plugin对象提供的是有关插件的信息，其中包括它所支持的MIME类型的列表

虽然plugins[]数组是由IE4定义的，但是在IE4中它却总是空的，因为IE4不支持插件和plugin对象

<h2>你的浏览器安装了以下插件</h2><script type="text/javascript">var plug=navigator.plugins;for(var i=0;i<plug.length;i++){document.write(plug[i].name+"<br/>");}</script>

四、JavaScript文档对象模型

1.文档对象模型简介及属性

DOM是文档对象模型的简称。与浏览器对象模型关注浏览器的整体不同，文档对象模型只关注浏览器所载入的文档。文档对象模型组成：html元素、属性和文本。

文档对象模型的核心操作：查看节点、创建节点、增加节点、删除节点以及替换节点

1.1节点的特点：

a：整个文档是一个文档节点

b：每个html标签是一个元素节点

c：包含在html元素中的文本是文本节点

d：每个html属性是一个属性节点

e：注释属于注释节点

f：html文档中的节点彼此间都存在关系，类似一张家族图谱

1.2父节点：

除文档节点之外的每个节点都有父节点。如<head>和<body>的父节点是<html>节点，文本节点DOM：文档对象模型的父节点是<p>节点

1.3document对象的常用属性

属性	描述
bgColor	页面的背景颜色
fgColor	文本的前景颜色
title	页面标题

例：根据下拉框选择的属性，更改页面中的字体颜色和背景颜色

<h1>更改字体颜色和背景颜色</h1><select name="" id="sel"><option value="blue">蓝色</option><option value="red">红色</option><option value="pink">粉色</option><option value="yellow">黄色</option><option value="gray">灰色</option><option value="purple">紫色</option></select> <script type="text/javascript">document.getElementById("sel").onchange=function(){document.bgColor=this.value;document.fgColor=this.value+255;}</script>

2.document对象查找HTML元素

document对象获取文档节点的方法
方法	说明
getElementById()	获取指定id的HTML页面元素对象
getElementsByTagName()	返回所有指定标签名的HTML页面元素对象
getElementsByName()	获取一组指定name的HTML页面元素对象
getElementsByClassName()	返回所有指定类名的HTML页面元素对象

2.1通过id查找HTML元素

document.getElemenById(id)—获取一组指定Name的HTML页面元素对象

可以提供id获取html页面元素，参数id为必选项，是字符串类型，返回值是对象，若没有符合条件的对象，则返回null

<p id="intro">你好，世界！</p><p>本案例演示了getElementById的用法</p> <script type="text/javascript">var x=document.getElementById('intro');document.write("<p>该文本来自id为intro的段落:"+x.innerHTML+"</p>");</script>

innerHTML属性：

innerHTML属性是一个字符串，用来设置或获取位于对象起始和结束标签之间的HTML内容

2.2通过name查找HTML元素

document.getElemenByName(name)—返回所有指定标签名的HTML页面元素对象

可以提供name获取html页面元素，参数name为必选项，是字符串类型，返回值是数组对象，若没有符合条件的对象，则返回空数组

例:模拟购物车全选功能

<table border="1px" style="width: 100%"><caption>我的表格</caption><tr><td><input type="checkbox" id="allCheck" onclick="allCheck()" />全选</td><td>项目</td><td>状态</td><td>单价</td><td>数量</td><td>合计</td></tr><tr><td><input type="checkbox" name="itemCheck" id="" onchange="itemCheck()"/></td><td>苹果</td><td>可以购买</td><td>3400.00</td><td>1</td><td>3400.00</td></tr><tr><td><input type="checkbox" name="itemCheck" id="" onchange="itemCheck()"/></td><td>华为</td><td>可以购买</td><td>5000.00</td><td>2</td><td>10000.00</td></tr></table> <script type="text/javascript">function allCheck() {//idvar allCheck = document.getElementById("allCheck");//namevar itemCheck = document.getElementsByName("itemCheck");for (var i = 0; i < itemCheck.length; i++) {itemCheck[i].checked = allCheck.checked;}}function itemCheck() {//记录选中的数量——方式1的变量/* var checkCount = 0; *///记录选中的数量和没选中的数量——方式2的变量var checked = 0;//选中var notchecked = 0;//没选中//idvar allCheck = document.getElementById("allCheck");//namevar itemCheck = document.getElementsByName("itemCheck");for(var i=0;i<itemCheck.length;i++){//判断每一个选项的选中状态//方式1/* if(itemCheck[i].checked==true){checkCount++;} *///方式2if(itemCheck[i].checked){checked++;}else{notchecked++;}}//如果checkCount的数量等于itemCheck的长度，则全部选中，全选按钮勾上//反之，全选按钮不勾//方式1/* if(checkCount==itemCheck.length){allCheck.checked=true;}else{allCheck.checked=false;} *///方式2if(checked==itemCheck.length){allCheck.checked=true;}else if(notchecked==itemCheck.length){allCheck.checked=false;}else{allCheck.checked=false;}}</script>

2.3通过标签名查找HTML元素

document.getElemenByTagName(tagname)—返回所有指定类名的HTML页面元素对象

可以通过标签名访问页面元素，参数tagname为必选项，是字符串类型，返回值是指定标签名的对象的集合，若没有符合条件的对象，则返回空数组

例：当鼠标移动到页面中的菜单上时，修改菜单的背景图像；当鼠标移开时，菜单恢复原来的样式

2.4通过类名查找HTML元素

document.getElemenByClassName(classname)

可以通过类名访问页面元素，参数classname为必选项，是字符串类型，指需要获取的元素类名，多个类名之间使用空格分隔，返回值为NodeList对象，表示指定类名的元素集合，元素在集合中的顺序以其在代码中的出现次序排列，可通过节点列表中的索引号来访问列表中的节点，索引号由0开始，若没有符合条件的对象，则返回空数组

例：修改<li>标签中class=box的样式，将他们的背景颜色设置为yellow黄色

<ul><li >首页</li><li class="box">首页</li><li >首页</li><li class="box">首页</li><li >首页</li><li class="box">首页</li></ul> <script type="text/javascript">window.onload=function(){var box=document.getElementsByClassName("box");for(var i=0;i<box.length;i++){box[i].style.background="yellow";}}</script>

NodeList节点列表：

可以使用NodeList对象的length属性来确定指定类名的元素个数，并循环各个元素来获取需要的元素。

document.getElemenByClassName方法的兼容性：

Internet Explorer 8及更早的IE版本不支持getElementsByClassName()方法。

3.document对象改变HTML

通过JavaScript中的document对象，可改变文档中HTML元素的输出流、内容、样式和属性。JavaScript中的document对象能够动态的创建HTML内容

3.1使用document对象改变HTML输出流

document.write()方法可用于直接向HTML的输出流写内容

使用document.write()方法的注意事项：

不要在文档加载完成之后使用document.write()方法，这样做会覆盖该文档中所有的内容

3.2使用document对象改变HTML内容

document.getElementById(id).innerHTML=新的HTML内容

修改HTML内容最简单的方法是使用innerHTML属性

innerHTML属性是一个字符串，用来设置或获取位于对象起始和结束标签之间的HTML内容

<p id="content" ></p><input type="button" value="向页面中添加内容" onclick="insert()"/><script type="text/javascript">function insert(){var obj=document.getElementById('content');obj.innerHTML='<h2>我是动态添加的内容</h2>'}</script>

3.3使用document对象改变HTML样式

document.getElementById(id).style.property=新样式

HTML对象的style属性：每个HTML对象都有用于访问css样式的style属性，style对象中包含一系列与css属性相对应的属性

<p id="content" ></p><input type="button" value="向页面中添加内容" onclick="insert()"/><input type="button" value="修改页面样式" onclick="change()"/><script type="text/javascript">function insert(){var obj=document.getElementById('content');obj.innerHTML='<h2>我是动态添加的内容</h2>'}function change(){var content=document.getElementById('content');content.style.borderColor='red';content.style.color='blue';content.style.borderStyle='solid';content.style.borderWidth='2px';}</script>

3.4使用document对象改变HTML属性

document.getElementById(id).attribute=新属性值

<p><img id="image" src="img/bg1.gif" alt=""></p><p><input type="button" value="更换图片" onclick="changePic()"></p><script>function changePic(){var img=document.getElementById("image");img.src="img/bg2.gif";}</script>

4.DOM节点操作

4.1节点信息

编程时希望访问某个元素的父元素，但又不知道父元素的id、name和tag，这时可根据层级关系来查找节点，每个节点都具有访问其他节点的属性

节点属性
属性名	描述
parentNode	当前节点的父节点引用
childNodes	当前节点的所有子节点
firstChild	当前节点的第一个字节
lastChild	当前节点的最后一个字节
previousSibling	返回当前节点的前一个兄弟节点
nextSibling	返回当前节点的后一个兄弟节点

节点的nodeType属性：

通过节点对象的nodeType属性可以来判断是哪种类型的节点，当nodeType为1时就是元素节点，nodeType为2时时属性节点，nodeType为3时则是文本节点

<p id="test"><p>第一个段落</p><p>第二个段落</p></p><input type="button" value="子节点" onclick="getChildren()" /><input type="button" value="父节点" onclick="getParent()" /><script type="text/javascript">function getChildren() {var p = document.getElementById("test");var ps = p.childNodes;for (var i = 0; i < ps.length; i++) {//如果子节点是元素节点if (ps[i].nodeType == 1) {ps[i].style.color = "blue";}}}function getParent(){var p = document.getElementById("test");var parent = p.parentNode;parent.style.backgroundColor='pink';}</script>

4.2动态添加和删除节点

使用document对象可以创建、添加和删除DOM树的节点，可使用document对象制作动态添加、删除页面元素的特效

创建节点使用document对象中的createElement方法实现

使用appendChild(node)方法将指定节点追加到现有子节点的末尾

4.2.1使用document对象中的createElement方法实现

4.2.1使用document对象中的removeChild方法实现

<input type="button" value="添加" onclick="ins()"><input type="button" value="删除" onclick="del()"><script type="text/javascript">var sel=document.createElement('select');var option1=document.createElement('option');option1.value='yellow';option1.innerHTML='黄色';sel.appendChild(option1);var option2=document.createElement('option');option2.value='red';option2.innerHTML='红色';sel.appendChild(option2);var option3=document.createElement('option');option3.value='blue';//创建一个文本节点var txt=document.createTextNode('蓝色');option3.appendChild(txt); sel.appendChild(option3);//select的onchange事件处理sel.onchange=function(){document.body.bgColor=this.value;}//将select中的第一个元素节点移动到select子节点的末尾sel.appendChild(sel.firstChild);function ins(){document.body.appendChild(sel);}//删除select节点function del(){document.body.removeChild(sel);}</script>

删除节点的注意事项：

使用DOM删除元素时，需要清楚的知道要删除元素的父元素

五、JavaScript对象

1.Object对象和Date对象

JavaScript的内部对象按使用方法可分为以下两种：

a：实例对象，在引用该对象的属性和方法时，必须先使用new关键字创建一个对象实例，然后再使用“对象实例名.成员”的格式来进行访问

b：静态对象，在引用该对象的属性和方法时不需要使用new关键字创建对象实例，可以直接使用“类名.成员”的格式来进行访问

1.1Object对象和Date对象

提供了一种创建自定义对象的简单方式，不需要开发人员定义构造函数

object对象的属性：

对象的属性可以使用索引运算符“[]”进行访问.如果在编写脚本时不知道属性名称，可以使用一个变量代替对象的属性，在调用函数时，将属性作为参数传入即可

//object 对象实例名[属性] 对象实例名.属性//静态实例.属性 <input type="button" value="显示姓名" onclick="getAttr('name')"><input type="button" value="显示年龄" onclick="getAttr('age')"><script type="text/javascript">var person=new Object();person.name="张三";person.age=18;//第一种方式function getAttr(attr) { alert(person[attr]);}//第二种方式function getInfo() {alert(person.name+""+person.age);}window.onload(getInfo());</script>

说明：

对象的属性可以使用索引运算符[]进行访问。如果在编写脚本时不知道属性的名称，可以使用一个变量代替对象的属性，在调用函数时，将属性作为参数传入即可。如在getAttrr()函数中，无法预先知道要调用person对象的哪个属性，可以在索引运算符[]中使用变量attr来访问person对象的属性

1.2Date对象

可以获取计算机中的日期和时间

new Date() //当前日期和时间

new Date(milliseconds) //返回1970年1月1日至今的秒数

new Date(dateString)

new Date(year,month,day,hours,minutes,seconds,milliseconds)

Date对象的常用方法
方法	功能
getDate()	返回一个月中的某一天（1~31）
getDay()	返回一周中的某一天（0~6），0为周日，1为周一，以此类推
getFullYear()	以四位数返回年份
getHours()	返回小时（0~23）
getMilliseconds()	返回毫秒
getMinutes()	返回分钟（0~59）
getMonth()	返回月份（0~11），0为1月，1为二月，以此类推
getSeconds()	返回秒数（0~59）
getTime()	返回1970年1月1日至今的秒数

Date对象常用的方法，如获取年份getFullYear、获取小时的方法getHour等

Date方法的使用

a：getDay：返回一周中的某一天（0-6），0为周日，1为周一

b：Date对象：Date对象只是计算机的一个毫秒级快照，它只保存了被创建时的时间信息，如希望总是显示当前最新的时间，就需要不停的获取时间快照

c：获取月份要加一，因为月份从0开始

例：获取当前时间并实时更新

<span id="myclock"></span><script type="text/javascript">function showTime() {var now = new Date();var year = now.getFullYear(); //获取年份var month = now.getMonth(); //获取月份var day = now.getDate(); //获取日var hour = now.getHours(); //获取小时var minutes = now.getMinutes(); //获取分钟var seconds = now.getSeconds(); //获取秒var week = now.getDay(); //获取星期var weekStr;switch (week) {case 0:weekStr = "星期日";break;case 1:weekStr = "星期一";break;case 2:weekStr = "星期二";break;case 3:weekStr = "星期三";break;case 4:weekStr = "星期四";break;case 5:weekStr = "星期五";break;case 6:weekStr = "星期六";break;}//第一种输出方式//document.getElementById("myclock").innerHTML=(`${year}年${month}月${day}日<br>${hour}:${minutes}:${seconds}<br>${weekStr}`);//第二种输出方式//document.getElementById("myclock").innerHTML=year+"年"+month+"月"+day+"日<br>"+hour+":"+minutes+":"+seconds+"<br>"+weekStr;//在小于10的月日时分秒前加一个0document.getElementById("myclock").innerHTML=year+"年"+checkTime(month)+"月"+checkTime(day)+"日<br>"+checkTime(hour)+":"+checkTime(minutes)+":"+checkTime(seconds)+"<br>"+weekStr;}//在小于10的数字前加一个0function checkTime(i){if(i<10){i="0"+i;}return i;}//每隔500毫秒取一次当前时间——自动更新时间window.setInterval('showTime()',500);//调用方法才能显示——因为获取的时间是写在方法里面的window.onload=showTime;</script>

说明：

每个Date实例对象都只是计算机的一个毫秒级快照，换而言之，Date对象只是保存了它被创建时的时间信息，如果希望总是当前最新时间，就需要不断的获取时间快照

例：Date对象进行倒计时——距离元旦还有多少天

2.Image对象和Math对象

2.1Image对象

在网页中使用图片，只需要调用<img>标签，然后在src属性中设置图片的绝对路径或相对路径即可。如需在网页里实现动画或者图像效果，则需要在JavaScript中使用Image对象

图像缓存技术：

实际上是在本地计算机的内存中暂时保存图像文件，不必每次使用的时候都进行下载，使用这种技术，需要借助Image对象

加载Image对象：

创建Image对象，并设置其src属性，指定的图片就可以从服务器中下载并存入本地计算机的内存中。

<img src="img/img_1.jpg" alt="" id="img"/><input type="button" value="切换" onclick="changeImg()"><script type="text/javascript">//image:借助image对象，讲图片缓存到内存中，后续动画，图片不会卡顿//创建一个对象var pic=new Image();pic.src="img/pc.jpg";function changeImg(){//图片var oldImg=document.getElementById("img");//替换属性oldImg.src=pic.src}</script>

2.2Math对象

JavaScript中的基本数值运算符可用来进行一些简单的数学运算，使用Math对象可以进行更多的高级运算，如平方根、三角函数、对数和随机数等。与其他对象不同，Math不需要使用new关键字创建对象的实例

random：

返回0和1之间的伪随机数，可能为0，但总是小于1，[0,1)

floor：

对浮点数向下取整，如Math.floor(67.6)返回值是67。

Math对象中常用的方法
方法	描述
Math.abs(number)	返回number的绝对值
Math.ceil(number)	对number向上取整，如Math.ceil(67.6) 返回值是68
Math.floor(number)	对number向上取整，如Math.ceil(67.6) 返回值是67
Math.max(number1,number2)	返回number1与number2中的较大值
Math.min(number1,number2)	返回number1与number2中的较小值
Math.pow(x,y)	返回x的y次幂
Math.random()	返回0和1之间的伪随机数，可能为0，但总是小于1，[0,1)
Math.round(number)	返回最接近number的整数
Math.sqrt(number)	number的平方根

例：猜数游戏，系统随机产生1到10之间的整数，然后由用户在文本框中输入猜到的数，进行比较，一致则猜对了，否则猜大了或者猜小了

<h1>请输入1-10的整数</h1><input type="text" name="userinput" id="userinput" placeholder="请输入1——10"/><input type="button" value="猜猜看" onclick="guess()"/><script type="text/javascript">//产生一个随机数//Math 静态对象 0-1 0.11*10+1var rand = Math.floor(Math.random() * 10 + 1);function guess() {//获取用户的输入let userInput=document.getElementById("userinput").value;//比较用户输入//检查输入if(!isNaN(userInput.trim()) && userInput.trim()!=null && userInput.trim()!=""){if(userInput>rand){alert("猜大了，数字范围是1——"+userInput);}else if(userInput<rand){alert("猜小了，数字范围是"+userInput+"——10");}else{alert("猜对了");}}else{alert("格式有误，请重新输入");}}</script>

3.数组与String对象

3.1数组详情请查看名为‘JavaScript数组’的blog

是用变量来表示一组数据的集合，用于实现对这组数据的统一管理，数组中的每个数据称为数组的元素。数组包括数组列表和Array对象。

数组列表：

用于表示一组数据的集合，由一对方括号[]包围，列表中的每个元素用逗号隔开，数组元素可以是任意类型的数据（包括其他数组）

length属性：

每个数组变量，都有一个length属性，表示该数组中元素的个数

3.2String对象详情请查看名为‘JavaScript中的String对象’的blog

字符串的常用方法
方法	描述
charAt()	返回字符串对象中指定索引处的字符，索引从0开始，如“Hello World”.charAt(3),返回字符l
indexOf()	返回某个子字符串在目标字符串中首次出现的位置，如“Hello World”.indexOf("a"),返回-1，在目标字符串中没有子字符串“a“，故返回-1
substr()	从指定索引位置开始截取指定长度的字符串，如“Hello World”.substr(2,3)，返回”llo“ 第一个参数表示从索引为2的字符串开始截取，即”l“，第二个参数表示截取长度
substring()	返回指定索引范围内的字符串，如“Hello World”.substring(2,3)，返回”l“，返回索引2和3之间的字符串，并且包括索引2对应的字符，不包括索引3对应的字符
toLowerCase()	将字符串转化为小写
toUpperCase()	将字符串转化为大写如“Hello World”.toUpperCase()，返回”HELLO WORLD“
split()	返回按照指定分隔符拆分的若干子字符串数组，如var arr="helloworld".split("o"); arr是数组变量，其中第一个元素是”hell“，第二个元素是”w“，第三个元素是”rld“

4.对象的创建及常用语句详情请查看名为‘JavaScript对象的创建及常用语句’的blog

JavaScript中类（class）是一个模板，模板描述了类中所有对象共同的属性和行为。创建类后，可使用它作为模板创建多个对象。

JavaScript并没有传统意义的类，也没有class关键字，在JavaScript中使用其他的方式来实现类的概念。

定义JavaScript类，需要编写一个函数，函数名为对象的类名，在函数体中定义属性和方法。当使用new关键字调用该函数时，它就是一个构造函数，这个函数创建对象并返回对象的引用。

例如调用Book()构造函数时，它将返回Book对象的引用，是一个Book类的实例。

this关键字：

用function创建类时，要求属性和方法必须使用this关键字来引用，表示当前类的实例

JavaScript中提供了两个专门用于对象的语句：

with语句和for...in语句

在一段连续的程序代码中，如果多次使用到某个对象的属性或方法，那只需在with关键字后的小括号中写出这个对象的名称，然后就可以在其后大括号里的执行语句中直接引用该对象的属性名或方法名，而不需要在每个属性和方法名前都加上对象实例和点（.）。

for in语句

功能是对某个对象的所有属性进行循环操作，将某个对象的所有属性名称逐一赋值给一个变量，不需要事先知道对象属性的个数

上一篇：武汉地区网站建设(武汉专业的网站建设制作) 下一篇：外包公司网站建设深圳(深圳网站建设方案外包)

知识问答

JavaScript交互式网页设计笔记

一、JavaScript基本语法

1.简介

2.执行原理

3.JavaScript脚本代码的位置

3.1HTML文件混合方式

3.2JS文件引用方式

3.3HTML代码嵌入方式

4.变量

5.数据类型

5.1typeof操作符

5.2undefined

5.3null

5.4boolean

5.5number

5.6string

6.运算符

7.JavaScript注释

7.1单行注释

7.2多行注释

8.JavaScript流程控制语句——顺序结构和选择结构

8.1顺序结构

8.2选择结构

9.JavaScript流程控制语句——循环结构

9.1while循环

9.2do-while循环语句

9.3for循环语句

9.4break语句和continue语句

二、JavaScript函数与事件

1.JavaScript自定义函数

1.1函数的定义

1.2函数的调用

1.3函数的参数

1.4函数的返回值

1.5匿名函数

1.6变量的作用域

2.JavaScript系统函数

2.1parseInt()函数

2.2parseFloat()函数

2.3isNaN()函数

2.4eval函数

3.JavaScript事件

4.JavaScript的常用事件

4.1鼠标事件

4.2其他事件

4.3表单事件

三、JavaScript浏览器对象模型

1.浏览器对象模型

浏览器对象模型的主要功能：

2.window对象

2.1常用属性

2.2常用方法

2.3使用window对象创建对话框

2.4使用window对象操作窗口

2.5使用window对象执行计时事件

3.history对象和location对象

3.1history对象

3.2location对象

4.screen对象和navigator对象

4.1screen对象

4.2navigator对象

四、JavaScript文档对象模型

1.文档对象模型简介及属性

1.1节点的特点：

1.2父节点：

1.3document对象的常用属性

2.document对象查找HTML元素

2.1通过id查找HTML元素

2.2通过name查找HTML元素

2.3通过标签名查找HTML元素

2.4通过类名查找HTML元素

3.document对象改变HTML

3.1使用document对象改变HTML输出流

3.2使用document对象改变HTML内容

3.3使用document对象改变HTML样式

3.4使用document对象改变HTML属性

4.DOM节点操作

4.1节点信息

4.2动态添加和删除节点

3.1数组详情请查看名为‘JavaScript数组’的blog

3.2String对象详情请查看名为‘JavaScript中的String对象’的blog

4.对象的创建及常用语句详情请查看名为‘JavaScript对象的创建及常用语句’的blog