javascript系统函数

admin管理员组

文章数量:1531732

2024年7月17日发(作者：)

1系统函数

（1）parseInt

parseInt函数将字符串转换为整数。它从字符串的开头开始解析，在第一个非整数位

置停止解析并返回前面读到的所有整数。如果字符串不是以整数开头，将返回

NaN(Not a Number：非数字值)。

（2）parseFloat

parseFloat()函数和parseInt()函数类似，只不过它是返回一个浮点数

（3）isNaN

isNaN() 函数用于判断参数是否是NaN（不是数字）。如果是 NaN， 那么 isNaN 函数

返回 true ，否则返回 false。

计算输入两个文本框的数字之和。在两个文本框都修剪了左右两边的空格，仍输入了

数据的前提下，验证输入的是否是数值字符串，如果是，把两个数据之和显示在第三

个文本框，反之，则给予错误提示。

function calc(){

var num1=mentById("op1").value;

var num2 = mentById("op2").value;

if (()!= "" && () != "") {

if (!isNaN(num1) && !isNaN(num2)) {

mentById("result").value = parseFloat(num1) +

parseFloat(num2);

}

根据id属性获取文本框后，使用其value属性进一步得到内容

} else {

alert("请输入正确的数值");

}

} else {

alert("请输入两个操作数");

}

trim():修剪空格

弹出消息框

（4）eval()

运行以字符串形式表示的javascript代码串，并返回执行代码串后的结果。

例子：计算用户输入在文本框的表达式的计算结果。

2 事件与处理程序的绑定

（1）在事件源对象所对应的html标签上增加一个要处理的事件属性，让事件属性值

等于处理该事件的函数名或程序代码。

当单击段落时，文本的大小改成30px

function changeSize(){

}

......

事件与处理程序的绑定

2）用匿名函数来简化，即事件名=function(){…}。

onclick事件

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

function showGender(obj){

}

alert("您选择的性别是："+);

ze="30px";

var obj=mentById("txt");

ze="30px";

......

性别：

onclick="showGender(this)"/>男

女

onload和onunload事件

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

用户关闭或刷新网页时触发onunload事件

设置window对象的status属性表示显示在浏览器状态栏上的文本

onblur事件

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

验证用户输入的密码长度是否在6位以上。

请输入密码：

......

function checkPwd(){

var pwd=mentById("txtPwd").value;

if(>=6){

alert("密码输入正确");

=“欢迎来到淘淘网";

}else{

alert("密码的长度必须在6位以上");

}

}

onchange事件

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

onchange事件。

在下拉列表框中选中友情链接后，窗口打开指定的页面。

window对象open方法的功能是打开新窗口并载入给定URL的文档

请选择

乐视网高清

新浪体育

.......

function changeLink(obj){

}

onmouseover和onmouseout事件

onmouseover和onmouseout事件是指鼠标移入、移出页面元素时触发的事件。

当鼠标移入到滚动的图片时，图片停止滚动，当鼠标移出图片时，图片继续滚动。

var site=;

if(site!="请选择"){

(site);

}

3浏览器默认的事件处理程序

单击表单元素的“提交按钮“会触发form标签的onsubmit事件，浏览器对这个事件

的默认处理方式是提交数据给action属性指定的页面进行处理。如果要让用户在单击

“提交按钮”后不提交数据到指定的页面，就需要编写一个事件处理程序，来改变浏

览器对form标签的onsubmit事件的默认处理方式

......

浏览器执行完事件处理程序后，还会去执行该事件的默认动作，如onsubmit事件

的默认动作是跳转页面。在check函数中，设置event对象的returnValue属性值为

false，就表示要取消浏览器对当前事件的默认处理，这里是指让浏览器不再跳转到

页面。

要取消浏览器对当前事件默认处理，可以在html标签的事件属性设置中使用return

false语句。

– 验证用户是否输入了姓名，如果输入了则提交表单。

function check(){

var userName=mentById("name").value;

if(userName==""){

alert("请输入用户名");

Value=false;

}

......

}

return false;

return true;

获取输入在id="name"文本框的内容

4 浏览器对象模型（ Browser Object Model ）

一个完整的浏览器对象模型主要包括window、history、location和document等对象，

其中window对象是整个浏览器对象模型的顶层对象。各个对象所处位置及其关系如

下图所示：

window对象

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

window对象。

window常用的属性

属性

document

history

location

status

window对象

含义

窗口中当前显示的文档对象

History对象保存窗口最近加载的URL

当前窗口的URL

状态栏文本

方法

prompt

alert

说明

显示可提示用户输入的对话框

显示带有一个提示消息和一个确定按钮

的警示框

confirm

显示一个带有提示信息、确定和取消按

钮的确认框

close

open

关闭浏览器窗口

打开一个新的浏览器窗口，加载给定

URL所指定的文档

setTimeout

在设定的毫秒数后调用函数或计算表达

式

setInterval

按照设定的周期（以毫秒计）来重复调

用函数或表达式

clearInterval

window对象

利用窗口对象的open、close方法打开、关闭窗口。

open方法的返回值是打开的window的对象。Open方法的第一个参数是新窗口的

URL，第二个参数是给新窗口的命名，第三个参数是设置新窗口的特征。常见的特征

如下表：

名称

height、width

left、top

toolbar=yes | no |1 | 0

说明

窗口文档显示区的高度、宽度。单位为像素

窗口的x坐标、y坐标。单位为像素

是否显示浏览器的工具栏。黙认是yes

取消重复设置，与setInterval对应

scrollbars=yes | no |1 | 0

location=yes | no |1 | 0

status=yes | no |1 | 0

menubar=yes | no |1 | 0

resizable=yes | no |1 | 0

titlebar=yes | no |1 | 0

是否显示滚动条。黙认是yes

是否显示地址地段。黙认是yes

是否添加状态栏。黙认是yes

是否显示菜单栏。黙认是yes

窗口是否可调节尺寸。黙认是yes

是否显示标题栏。黙认是yes

制作从天而降的广告页面。打开主页时，广告页面也随之打开。单击主页面“关闭广

告页”的链接时，广告页面关闭。

关闭广告

使用setTimeout方法或者setInterval方法，制作小女孩看书的动画

var i = 1;//保存动画当前播放的静态画面的索引

function change(){

if(i<4){

i++;

}else{

i = 1;//播放到最后一幅时，再从头开始

}

mentById("pic").src="images/girl_"+i+".gif";

}

var dh;

function play() {

dh = setInterval("change()", 100);;

}

function stop() {

clearInterval(dh); //取消反复执行

}

history对象

– history对象保存了当前浏览器窗口打开文档的一个历史记录列表，使用

history对象，可以将当前浏览器页面跳转到某个曾经打开过的页面。获

取histroy对象是通过window对象的history属性。history对象有三个

方法：

方法

back()

描述

后退一个页面，相当于浏览器后退按

钮

forward()

前进一个页面，相对于浏览器前进按

钮

go()

打开一个指定位置的页面

后退

前进

• location对象

location对象用于管理当前打开窗口的URL信息，相当于浏览器的地址栏。location对

象通过window的location获取属性，location对象的常用属性和方法如下表：

名称 描述

href属性

reload方法

获取或设置网页地址

重新加载当前页面，相

对于浏览器的刷新按钮

根据用户在下拉列表框中的选择，设置网页地址

function changeURL(){

}

......

百度

//获取选择的列表项的值

var url=mentById("sel").value;

//设置当前浏览器窗口的地址栏url

=url;

5 文档对象模型（ Document Object Model ）

DOM把html文档看成由元素、属性和文本组成的一棵倒立的树

可以把html文档中的每个成分看成一个节点，所以DOM的核心操作是查看节点、

创建和增加节点以及删除和替换节点。节点的特点如下：

1. 整个文档是一个文档节点；

2. 每个HTML标签是一个元素节点；

3. 包含在HTML元素中的文本是文本节点；

4. 每个HTML属性是一个属性节点；

5. 注释属于注释节点；

6. html文档中的节点彼此间都存在关系，如一张家族谱。

document对象

整个html文档在DOM中是一个document对象，常见的属性如下表

名称

bgColor

fgColor

title

="document的属性";

r="blue";

r="white";

document对象

描述

页面的背景颜色

文本的前景颜色

页面标题

document对象的方法主要用于操作文档节点，控制其内容和外观。其常用的方法如下

表

名称

write

getElementById

描述

用于向html文档中动态输入内容

获取指定id的html页面元素对象

getElementsByTagName

返回所有指定标签名的html页面元素对

象

getElementsByName

获取一组指定name的html页面元素对

象

createElement

创建代表某个html元素的对象

mentById(id)：通过id访问页面元素

function setContent(){

}

......

几乎所有的元素对象都有innerHTML属性。innerHTML属性是一个字符串，用来设置

或获取位于对象起始和结束标签之间的HTML内容

在上例的基础上，增加能够动态添加样式的功能。

function setContent(){

var obj=mentById("content");

TML="

动态添加标题

var obj=mentById("content");

TML="

动态添加标题

}

function setStyle(){

}

。。。

利用className属性

......

function setStyle(){

}

......

mentsByName(name)：通过name访问页面元素。参数

name为必选项，为字符串类型。返回值为数组对象，如果无符合条件的对象，

则返回空数组。

var obj=mentById("content");

ame="con";//className引用css定义的con类

border:1px solid red;

color:orange;

var obj=mentById("content");

Color="red";

Style="solid";

Width="2px";

="orange";

实现购物车页面中的“全选”功能。

全选

......

function check(){

var cb1=mentById("allCb");

var chs=mentsByName("item");

for(var i=0;i<;i++){

}

}

mentsByTagName(tagname)：通过标签名访问页面元素。参数

tagname为必选项，为字符串类型。返回值是指定标签名的对象的集合，如果无符合

条件的对象，则返回空数组。

要求当鼠标移动到菜单上时，修改菜单的背景图像；当鼠标移开时，菜单恢复原来的

样式

• 首页
• 产品列表
• 新闻

.......

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

使用removeChild删除节点。

//删除body标签的子节点

Child(newNode);

本文标签： 对象节点页面事件