javascript系统函数

1系统函数

（1）parseInt

parseInt函数将字符串转换为整数。它从字符串的开头开始解析，在第一个非整数位置停止解析并返回前面读到的所有整数。如果字符串不是以整数开头，将返回

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

（2）parseFloat

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

（3）isNaN

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

计算输入两个文本框的数字之和。在两个文本框都修剪了左右两边的空格，仍输入了数据的前提下，验证输入的是否是数值字符串，如果是，把两个数据之和显示在第三个文本框，反之，则给予错误提示。

function calc(){

var num1=document.getElementById("op1").value;

var num2 = document.getElementById("op2").value;

if (num1.trim()!= "" && num2.trim() != "") {

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

document.getElementById("result").value = parseFloat(num1) + parseFloat(num2);

} else {

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

}

} else {

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

}

}

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

trim():修剪空格

弹出消息框

（4）eval()

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

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

2 事件与处理程序的绑定

（1）在事件源对象所对应的html标签上增加一个要处理的事件属性，让事件属性值等于处理该事件的函数名或程序代码。

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

function changeSize(){

var obj=document.getElementById("txt");

obj.style.fontSize="30px";

}

......

事件与处理程序的绑定

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

onclick事件

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

function showGender(obj){

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

}

......

性别：

onclick="showGender(this)"/>男

女

onload和onunload事件

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

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

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

onblur事件

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

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

请输入密码：

......

function checkPwd(){

var pwd=document.getElementById("txtPwd").value;

if(pwd.length>=6){

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

}else{

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

}

}

onchange事件

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

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

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

请选择

乐视网高清

新浪体育

.......

function changeLink(obj){

var site=obj.value;

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

window.open(site);

}

}

onmouseover和onmouseout事件

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

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

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

单击表单元素的“提交按钮“会触发form标签的onsubmit事件，浏览器对这个事件的默认处理方式是提交数据给action属性指定的页面进行处理。如果要让用户在单击“提交按钮”后不提交数据到指定的页面，就需要编写一个事件处理程序，来改变浏览器对form标签的onsubmit事件的默认处理方式

......

浏览器执行完事件处理程序后，还会去执行该事件的默认动作，如onsubmit事件的默认动作是跳转页面。在check函数中，设置event对象的returnValue属性值为false，就表示要取消浏览器对当前事件的默认处理，这里是指让浏览器不再跳转到info.html页面。

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

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

function check(){

var userName=document.getElementById("name").value;

if(userName==""){

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

return false;

}

return true;

}

......

用户名：

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

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

一个完整的浏览器对象模型主要包括window、history、location和document等对象，其中window对象是整个浏览器对象模型的顶层对象。各个对象所处位置及其关系如

下图所示：

window对象

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

window常用的属性

window对象

window对象

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

open方法的返回值是打开的window的对象。Open方法的第一个参数是新窗口的URL，第二个参数是给新窗口的命名，第三个参数是设置新窗口的特征。常见的特征如下表：

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

关闭广告

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

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

function change(){

if(i<4){

i++;

}else{

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

}

document.getElementById("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对象有三个

方法：

后退

前进

?location对象

location对象用于管理当前打开窗口的URL信息，相当于浏览器的地址栏。location对象通过window的location获取属性，location对象的常用属性和方法如下表：

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

function changeURL(){

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

var url=document.getElementById("sel").value;

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

window.location.href=url;

}

......

百度

document.bgColor="blue";

document.fgColor="white";

document对象

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

document.getElementById(id)：通过id访问页面元素

function setContent(){

var obj=document.getElementById("content");

obj.innerHTML="

动态添加标题

";

}

......

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

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

function setContent(){

var obj=document.getElementById("content");

obj.innerHTML="

动态添加标题

";

}

function setStyle(){

var obj=document.getElementById("content");

obj.style.borderColor="red";

obj.style.borderStyle="solid";

obj.style.borderWidth="2px";

obj.style.color="orange";

}

。。。

利用className属性

......

function setStyle(){

var obj=document.getElementById("content");

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

}

......

document.getElementsByName(name)：通过name访问页面元素。参数

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

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

全选

......

function check(){

var cb1=document.getElementById("allCb");

var chs=document.getElementsByName("item");

for(var i=0;i

chs[i].checked=cb1.checked;

}

}

document.getElementsByTagName(tagname)：通过标签名访问页面元素。参数tagname为必选项，为字符串类型。返回值是指定标签名的对象的集合，如果无符合条件的对象，则返回空数组。

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

• 首页
• 产品列表
• 新闻

.......

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

使用removeChild删除节点。