JavaScript脚本语言入门（下）

海盗船长

发布于 2020-08-27 17:49:12

1.5K0

发布于 2020-08-27 17:49:12

文章被收录于专栏：基础知识文章

1.事件处理

1.什么是事件处理程序

事件处理程序用于响应某个事件而执行的处理程序。事件处理程序可以是任意JavaScript语句，但通常使用特定的自定义函数（Function）来处理。

2.JavaScript常用事件

事件	触发事件
onabort	对象载入被中断时触发
onblur	元素或窗口失去焦点时触发
onchange	改变<select>元素的选项或其他表单元素失去焦点，并且在其获取焦点后内容发生过改变时触发
onclick	单击鼠标左键时触发。当光标的焦点在按钮上并按下回车键时也会触发该事件
ondblclick	双击鼠标左键时触发
onerror	出现错误时触发
ondocus	任何元素或窗口本身获得焦点时触发
onkeydown	键盘上的按键（包括shuift和Alt等键）被按下时触发，如果一直按着某键，则会不断触发。当返回false时，取消默认动作。
onkeypress	键盘上的按键被按下并产生一个字符时产生。也就是说，当按下shift或alt键时不会触发。如果一直按着某键，则会不断触发。当返回false时，取消默认动作。
onkeyup	释放键盘上按键时触发。
onload	页面完全载入后，在windows对象上触发；所有框架都载入后，在框架集上触发；<img>标记指定的图像完全载入后，在其上触发；<object>标记指定的对象完全载入后，在其上触发。
onmousedown	单击任意一个鼠标键时触发。
onmousemove	鼠标在某个元素上移动时持续触发
onmouseout	将鼠标从指定元素上上移开时触发
onmouseover	鼠标移动到某个元素上时触发
onmouseup	释放任意一个鼠标按键时触发
onreset	单击重置按钮时，在<form>上触发
onresize	窗口或框架的大小发生改变时触发
onscroll	在任何带滚动条的元素或窗口上滚动时触发
onselect	选中文本时触发
onsubmit	单击提交按钮时，在<form>上触发。
onunload	页面完全卸载后，在windows对象上触发；或者所有框架都卸载后，在框架集上触发

3.事件处理程序的调用

在使用事件处理程序对页面进行操作时，在最主要的是如何通过对象的事件来制定事件处理程序。指定方式主要由以下两种：

1.在JavaScript中

在JavaScript中调用事件处理程序，首先需要获得要处理对象的引用，然后将要执行的处理函数赋值给对应的事件。例如：在JavaScript中调用事件处理程序。

<input name="bt_save" type="button" value="保存">
	<script language="javascript">
		var b_save=document.getElementById("bt_save");
		b_save.onclick=function(){
			alert("单击了保存按钮");
		}
		</script>

2.在HTML中

在HTML中分配事件处理程序，只需要在HTML标记中添加相应的事件，并在其中指定要执行的代码或函数名即可。例如：在HTML中调用事件处理程序。

<input name="bt_save" type="button" value="保存" onclick="alert('单击了保存按钮');">

6.常用对象

1.Windows对象

windows对象即浏览器窗口对象，是一个全局对象，是所有对象的顶级对象。windows对象提供许多属性和方法，这些属性和方法被用来操作浏览器页面的内容。windows对象不需要new关键字创建对象实例，而是直接使用“对象名.成员”的格式来访问其属性或方法。下面将对windows对象的属性和方法进行介绍。

windows对象的属性

属性	描述
document	对窗口或框架中含有文档的Document对象的只读引用
defaultStatus	一个可读写的字符，用于指定状态栏中的默认信息
frames	表示当前窗口中所有Frame对象的集合
location	用于代表窗口或框架的Location对象。如果将一个URL赋予该属性，则浏览器将加载并显示该URL指定的文档
length	窗口或框架包含的框架个数
history	对窗口或框架的history对象的只读引用
name	用于存放窗口对象的名称
status	一个可读写的字符，用于指定状态栏的当前信息
top	表示最顶层的浏览器窗口
parent	表示包含当前窗口的父窗口
opener	表示打开当前窗口的父窗口
closed	一个制度的布尔值，表示当前窗口是否关闭。当浏览器窗口关闭后，表示该窗口的windows对象并不会消失，不过其closed属性被设置成true
self	表示当前窗口
screen	对窗口或框架的screen对象的只读引用，提供屏幕尺寸、颜色深度等信息
navigator	对窗口或框架的navigator对象的只读引用，通过navigator对象可以获得与浏览器相关的信息

windows对象的方法

方法	描述
alert()	弹出一个警告对话框
confirm()	显示一个确认对话框，单击“确认”按钮时返回true，否则返回false
prompt()	弹出一个提示对话框，并要求输入一个简单的字符串
blur()	将键盘焦点从顶层浏览器窗口中移开。在多数平台上，这将使窗口移到最后边
close()	关闭窗口
focus()	将键盘焦点赋予顶层浏览器窗口中。在多数平台上，这将使窗口移动到最前面
open()	打开一个新窗口
scrollTo(x,y)	将窗口滚动到x,y坐标指定的位置
scrollBy(offsetx,sffsety)	按照指定的位移量滚动窗口
setTimeout(timer)	在经过指定的时间后执行代码
clearTimerout()	取消对指定代码的延迟执行
moveTo(x,y)	将窗口移动到一个绝对位置
moveBy(offsetx,offsety)	将窗口移动到指定的位移量处
resizeTo(x,y)	设置窗口的大小
resizeBy(offsetx,offsety)	按照指定的位移量设置窗口的大小
print()	相当于浏览器工具栏中的“打印”按钮
setInterval()	周期性地执行指定的代码
clearInterval()	停止周期性的执行代码

由于windows对象的open()和close()方法在实际网站开发中经常使用，下面将对其进行详细介绍：

（1）open()方法

open方法用于打开一个新的浏览器窗口，并在该窗口中装载指定URL地址的网页。open()方法的语法格式如下：

windowVar=window.open(url,windowname[,location]);

参数说明如下：

windowVar:当前打开窗口的句柄。如果open()方法执行成功，则window Var的值为一个window对象的句柄，否则window Var的值是一个空值。
url：目标窗口的URL。如果URL是一个空字符串，则浏览器将打开一个空白窗口，允许用write()方法创建动态HTML。
windowname：用于指定新窗口的名称，该名称可以作为<a>标记和<form>的target属性的值。如果该指数指定了一个已经存在的窗口，nameopen()方法将不再创建一个新的窗口。
location：对窗口属性进行设置，其可参数如下表所示： |参数| 描述 | |–|--| | width | 窗口的宽度 | |height|窗口的高度| |top|窗口顶部距离屏幕顶部的像素数| |left|窗口左端距离屏幕左端的像素数| |scrollbars|是否显示滚动条，值为yes或no| |resizable|设定窗口大小是否固定，值为yes或no| |toolbar|浏览器工具栏，包括后退及前进按钮等，值为yes或no| |menubar|菜单栏，一般包括文件、编辑及其他菜单项，值为yes或no| |location|定位区，也叫地址栏，是可以输入URL的浏览器文本区，值为yes或no| 例如：打开一个新的浏览器窗口，在该窗口中显示bbs.htm文件，设置打开窗口的名称为bbs,并设置窗口的顶边距、左边距、宽度和高度，代码如下：

window.open("bbs.htm","bbs","width=531,height=402,top=50,left=20");

(2)close()方法

close()方法用于关闭当前窗口。其语法格式如下：

window.close()

2.String对象

1.String对象的属性

String对象最常用的属性是length，该属性用于返回String对象的长度。length属性的语法格式如下：

string.length

返回值是一个只读的整数，他代表指定字符串的长度，每个汉字按一个字符计算。

2.String对象的方法

方法	描述
abchor(name)	为字符串对象中的内容两边加上HTML的<a name=name></a>标记对
big()	为字符串对象的内容的两边加上HTML的<big></big>标记对
bold()	为字符串对象的内容的两边加上HTML的<b></b>标记对
charAt(index)	返回字符串对象中指定索引号的字符组成的字符串，位置的有效值为0到字符串长度减1的数值。
charCodeAt(index)	返回一个整数，该整数表示字符串对象中指定位置处的字符的Unicode编码
concat(s1,…,sn)	将调用方法的字符串与指定字符串接合，结果返回新字符串
fontcolor	为字符串对象的内容两边加上HTML的<font></font>标记对，并设置color属性，可以是颜色的十六进制值，也可以是颜色的预定义名
fontsize(size)	为字符串对象的内容两边加上HTML的标记对，并设置size属性
indexOf(pattern)	返回字符串中包含patten所代表参数第一次出现的位置值。如果该字符串中不包含要查找的模式，则返回-1
indexOf(patten,startIndex)	同上，只是从startIndex指定的位置开始查找
lastIndexOf(patten)	返回字符串中包含patten所代表参数最后一次出现的位置值。如果该字符串中不包含要查找的模式，则返回-1
lastIndexOf(patten,startIndex)	同上，只是检索从startIndex指定的位置开始
localeCompare(s)	用特定比较方法比较字符串与s字符串。如果字符串相等，则返回0；否则返回一个非0的数字值

下面对常用的方法进行详细介绍：

（1）indexOf()方法

indexOf()方法用于返回String对象内第一次出现子字符串的字符位置。如果没有找到指定的子字符串，则返回-1.其语法格式如下：

string.indexOf(subString[,startIndex])

参数说明如下：

subString：必选项。要在String对象中查找的子字符串。
startIndex：可选项。该整数值指出在String对象内开始查找索引。如果省略，则从字符串的开始处查找。

例：

var str="fxl@qq.com";
var index=str.indexOf('@');//返回的索引值为3
var index=str.indexOf('@',4);//返回值为-1

（2）substr()方法

substr()方法用于返回指定字符串的一个子串。其语法格式如下：

string.substr(start[,length]);

参数说明如下：

start：用于指定获取子字符的起始下标。如果是一个负数表示从尾部开始算起。
length：可选，用于指定子字符串中的字符的个数。如果省略该参数，则返回从start开始位置到字符串结尾的子串。例：

var word="One World One Dream!";
var subs=word.substr(10,9);//subs的值为One Dream

（3）substring()方法

substring()方法用于返回指定字符串的第一个字串。其语法格式如下：

string.substring(from[,to]);

参数说明如下：

from：用于指定要获取子字符串的第一个字符在string中的位置。
to：可选，用于指定要获取子字符串的最后一个字符在string中的位置。

例：

var word="One World One Dream!";
var subs=word.substring(10,19);//subs的值为One Dream

（4）replace()方法

replace()方法用于替换一个与正则表达式匹配的子串。其语法格式如下：

string.replace(regExp,substring)

参数说明如下：

resExp：一个正则表达式。如果正则表达式中设置了标志g，那么该方法将用替换字符串替换检索到的所有与模式匹配的子串，否则只替换所见所到的第一个与模式匹配的子串。
substring：用于指定替换文本或生成替换文本的函数。如果substring是一个字符串，那么每个匹配都将由该字符串替换，但是在substring中的“$”字符具有特殊的意义，如下表所示：

字符	替换文本
$1,$2…,$99	与regExp中的第1~99个子表达式匹配的文本
$&	与regExp相匹配的子串
$`	位于子段左侧的文本
$’	位于子串右侧的文本
$$	直接量——$符号

例：去掉字符串的首尾空格。在页面中添加用于输入原字符串和显示转换后的字符串的表单及表单元素，代码如下：

<html>
	<script language="javascript">
		function trim(){
			var str=form1.oldString.value;//获取原字符串
			if(str==""){//当原字符串为空时
				alert("请输入原字符串);
				form1.oldString.focus();return;
			}
			else{//当原字符串不为空时
				var objExp=/(^\s*)|(\s*$)/g;//创建regExp对象
				str=str.replace(objExp,"");//替换字符串的首尾空格
			}
			form1.newString.value=str;//将替换后的字符串写入到“转换后的字符串”文本框中
		}
	</script>
	<body>
	<form name="form1" method="post" action="">
	原字符串：<textarea name="oldString" cols="40" rows="4"></textarea><br>
	转换后的字符串：<textarea name="newString" cols="40" rows="4"></textarea>
	<input name="Button" type="button" class="btn_grey" onclick="trim()" value="转换后的字符串">
	</form>
	</body>
</html>

（5）split()方法

split()方法用于将字符串分割为字符串数组。其语法格式如下：

string.split(delimiter,limit)

参数说明如下：

delimiter：字符串或正则表达式，用于指定分隔符。
limit：可选项，用于指定返回数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数字，否则整个字符串都会被分割，而不考虑其长度。
返回值：一个字符串数组，该数组是通过delimiter指定的边界将字符串分割成的字符串数组。

3.Date对象

1.创建Date对象

Date对象是一个有关日期和时间的对象，它具有动态性，即必须使用new运算符创建一个实例：创建Date对象的语法格式如下：

dateObj=new Date()
dateObj=new Date(dateValue)
dateObj=new Date(year,month,date[,hours[,minutes[,ms]]])

参数说明如下：

date Value：如果是数值，则表示指定日期与1970年1月1日午间全球标准时间相差的毫秒数；如果是字符串，则dateValue按照parse方法中的规则进行解析。
year：一个4位数的年份。
month：表示月份。
date：表示日期。
hours：表示小时。
minutes：表示分钟。
seconds：表示秒钟。
ms：表示毫秒。

2.Date对象的方法

Date对象没有提供直接访问的属性，只具有获取，设置日期和事件的方法。Date的常用方法如下表：

方法	描述	示例
get[UTC]FullYear()	返回Date对象的年份，用4位数字表示，采用本地或世界时间	new Date().getFullYear();//返回2020
get[UTC]Month	返回对象中的月份（0~11），采用本地事件或世界时间	new Date().getMonth()//返回值为4
get[UTC]getDate()	返回对象中的日（1~31），采用本地时间或世界时间	new Date().gatDate()//返回27
get[UTC]Day()	返回对象中的星期（0~6），采用本地时间或世界时间	new Date().getDay()//返回2
get[UTC]Hours()	返回对象中的小时数(0~23)，采用本地时间或世界时间	new Date().getHours()//返回20

7.DOM技术

DOM技术是表示文档（如HTML文档）和访问，操作构成文档的各种元素（如HTML标记的文档和文本串）的应用程序接口（API）。他提供了文档中独立元素的结构化，面向对象的表示方法，并允许通过对象的属性和方法访问这些对象。另外，文档对象模型还提供了添加和删除文档对象的方法，这样能够创建动态的文档内容。

1.DOM的分层结构

2.遍历文档

在DOM中，HTML文档各个节点被视为各种类型的Node对象，并且将HTML文档表示为Node对象的树。对于任何一个树形结构来说，最长做的就是遍历树。在DOM中，可以通过Node对象的parentNode、firstChild、lastChild、previousSibling等属性来遍历文档树。 Node对象的常用属性如下表所示：

属性	类型	描述
parentNode	Node	节点的父节点，没有父节点时为null
childNodes	NodeList	节点的所有子节点的NodeList
firstChild	Node	节点的第一个子节点，没有则为null
lastChild	Node	节点的最后一个子节点，没有则为null
previousSibling	Node	节点的上一个节点，没有则为null
nextChild	Node	节点的下一个子节点，没有则为null
nodeName	String	节点名
nodeValue	String	节点值
nodeType	String	表示节点类型的整形常量

Node对象的节点类型、节点名、节点值及节点类型常量如下表所示：

节点类型	节点名	节点值	节点类型常量
Attr	属性名	属性值	ATTRIBUTE_NODE(2)
CDATASection	#cdata-section	CDATA段内容	CDATA_SECTION_NODE(4)
Comment	#comment	注释的内容	COMMENT_NODE(8)
Document	#document	null	DOCUMENT_NODE(9)
DocumentFragment	#document-fragment	null	DOCUMENT_FRAGMENT_NODE(11)
DocumentType	文档类型名	null	DOCUMENT_TYPE_NODE(10)
Element	标记名	null	ELEMENT_NODE(1)
Entity	实体名	null	ENTITY_NODE(6)
EntityReference	引用实体名	null	ENTITY_REFERENCE_NODE(5)
Notation	符号名	null	NOTATION(12)
ProcessionInstruction	目标	除目标文件外的所有内容	PROCESSIONG_INSTRUCTION_NODE(7)
Text	#text	文本节点内容	TEXT_NODE(3)

3.获取文档中的指定元素

1.通过元素的ID属性获取元素 使用Document对象的getElementsById()方法可以通过元素的ID属性获取元素，例如，获取文档中的ID属性为userList的节点，代码如下：

document.getElementById("userList");

2.通过元素的name属性获取元素 使用Document对象的getElementsByName()方法可以通过元素的name属性获取元素。与getElementsById()方法不同的是，该方法的返回值是一个数组，而不是一个元素。如果想通过name属性获取页面唯一的元素，可以通过获取返回数组中下标值为0的元素进行获取。例如，获取name属性为userName的节点。代码如下：

document.getElementsByName("userName")[0];

4.操作文档

Node对象常用的方法

方法	描述
insertBefore(newChild,refChild)	在现有子节点refChild之前插入子节点newChild
replaceChild(newChild,resChild)	将子节点列表中的子节点oldChild换成newChild，并返回oldChild
remove(oldChild)	将子节点列表中的子节点oldChild删除，并返回oldChild节点
appendChild(newChild)	将新节点newChild添加到该节点的子节点列表的尾部。如果newChild已经在树上，则先将其删除
hasChildNodes()	返回一个布尔值，表示节点是否有子节点
cloneNode(deep)	返回这个节点的副本