一.概述
(1)网景(Netscape)公司开发的一种【基于对象】和【事件驱动】的脚本语言
(2)脚本语言:语言无需编译即可运行,是为了缩短传统的编写-编译-连接-运行的过程而创建的计算机编程语言
(3)基于对象:内置对象不具备面向的全部特征
(4)事件驱动:每一段JS代码都是由指定的事件调用执行的
(5)语言特点:交互性,安全性,跨平台性
二.基本语法
1.JS与Html结合方法
(1)直接在事件中写
通过每个Html标签中的事件属性
onclick = "javascript:alert('Hello World')"
(2)通过<script>标签
<script type="text/javascript">
JS代码书写位置
</script>
(3)通过<script>标签导入本地js文件
注意:<script>标签中写入JS代码无法运行
<script type="text/javascript" src="JS文件本地位置"></script>
2.ECMA核心语法
2.1 基本数据类型
(1)number:数字(整数、浮点型)
(2)string:字符串(注意:JS中有身为对象的String和基本数据类型string)
(3)boolean:布尔型
(4)undefined:变量定义了却没有赋值
(5)null:基本数据类型null,不过typeof返回的Object类型
特殊:
<1>.string类型的数据会自动转换前后数据的类型为string
<2>.【0】【""】【undefined】【NaN】【false】皆可以表示假
<3>.【true】数字的话为1,【false】【null】数字的话为0
2.2 变量
(1)用【var】来声明变量,赋值是什么类型这个变量就是什么类型
2.3 运算符
(1)【==】判断值是否相同(如:【"123"==123:true】)
(2)【===】判断值和类型是否都相同
(3)三元运算符:同java:条件表达式?值1:值2;
2.4 控制语句
(1)if语句
(2)switch语句
(3)while语句
(4)for语句
2.5 函数的定义
(1)第一种方式
function 函数名(参数名){
方法体
}
(2)第二种方式
注意:alert(函数名)得到的结果是等号后边的全部内容,调用通过——函数名(参数);
var 函数名 = function(参数名){
方法体
}
(3)第三种方式:最后一个参数时方法体
var show = new Function("参数名",...,"方法体");
注意:参数名和方法体需要用引号括起
2.6 全局函数
函数 | 描述 |
---|---|
decodeURI(表达式) | 解码某个编码的 URI。解码 |
encodeURI(表达式) | 把字符串编码为 URI。编码 |
eval(表达式) | 计算 JavaScript 字符串,并把它作为脚本代码来执行。 |
escape(表达式) | 对字符串进行编码。编码 |
unescape(表达式) | 对由 escape() 编码的字符串进行解码。解码 |
isNaN(表达式) | 检查某个值是否不是数字。 |
parseFloat(表达式) | 解析一个字符串并返回一个浮点数。 |
parseInt(表达式) | 解析一个字符串并返回一个整数。取整只保留整数位数字,不会四舍五入 |
2.7 常用对象
2.7.1 Array数组对象
//方法1:动态建立
var arr1 = new Array();
arr1[0] = "daf";
arr1[2] = false;
arr1[3] = 21;
//方法2:静态建立
var arr3 = new Array(21,41,41,431,1);
alert(arr3.toString());
//方法3:静态建立
var arr2 = [21,33,false];
方法 | 描述 |
---|---|
join(字符) | 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 |
sort() | 对数组的元素进行排序 |
reverse() | 颠倒数组中元素的顺序。 |
2.7.2 String字符串对象
方法 | 描述 |
---|---|
substr(首索引,长度) | 从起始索引号提取字符串中指定数目的字符。 |
substring(首索引,尾索引) | 提取字符串中两个指定的索引号之间的字符。 |
2.7.3 Math数学对象
2.7.4 Date日期对象
方法 | 描述 |
---|---|
Date() | 返回当日的日期和时间 |
getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31) |
getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6) |
getMonth() | 从 Date 对象返回月份 (0 ~ 11) |
toLocaleString() | 根据本地时间格式,把 Date 对象转换为字符串。 |
toLocaleTimeString() | 根据本地时间格式,把 Date 对象的时间部分转换为字符串 |
toLocaleDateString() | 根据本地时间格式,把 Date 对象的日期部分转换为字符串 |
2.7.5 RegExp正则表达式对象
方法 | 描述 |
---|---|
test(字符串) | 检索字符串中指定的值。返回 true 或 false。 |
search(正则) | 检索与正则表达式相匹配的值。 |
match | 找到一个或多个正在表达式的匹配。 |
replace | 替换与正则表达式匹配的子串。 |
split | 把字符串分割为字符串数组。 |
3.BOM
BOM(Browser Object Module:浏览器对象模型)
3.1 window对象
属性 | 描述 |
---|---|
closed | 返回窗口是否已被关闭。 |
opener | 返回对创建此窗口的窗口的引用。 |
self | 返回对当前窗口的引用。等价于 Window 属性。与iframe连用 |
status | 设置窗口状态栏的文本。 |
top | 返回最顶层的先辈窗口。与iframe连用 |
parent | 返回父窗口。与iframe连用 |
document | 对 Document 对象的只读引用。请参阅 Document 对象。 |
history | 对 History 对象的只读引用。请参数 History 对象。 |
location | 用于窗口或框架的 Location 对象。请参阅 Location 对象。 |
Screen | 对 Screen 对象的只读引用。请参数 Screen 对象。 |
Navigator | 对 Navigator 对象的只读引用。请参数 Navigator 对象。 |
returnValue | 这个值与showModalDialog连用 |
集合 | 描述 |
---|---|
frames[] | 返回窗口中所有命名的框架。该集合是 Window 对象的数组,每个 Window 对象在窗口中含有一个框架或 <iframe>。属性 frames.length 存放数组 frames[] 中含有的元素个数。注意,frames[] 数组中引用的框架可能还包括框架,它们自己也具有 frames[] 数组。可用此方法获取全部子框架,通过frames[子框架名]的方式可获取指定子框架 |
方法 | 描述 |
---|---|
alert(消息字符串) | 显示带有一段消息和一个确认按钮的警告框。(消息提示框) |
confirm(提示内容) | 显示带有一段消息以及确认按钮和取消按钮的对话框。(确认提示框,会返回true或false) |
prompt(提示内容,默认值) | 显示可提示用户输入的对话框。(对话框,返回输入的值) |
setInterval(调用的方法,间隔时间) | 按照指定的周期(以毫秒计)来调用函数或计算表达式。(可无限次运行。会有返回值,可利用此返回值清除这个定时器,方法不再运行)(调用方法时,如果用双引号括住方法名则加括号,如果不使用双引号,千万记住不要加括号,否则报错) |
setTimeout(调用的方法,间隔时间) | 在指定的毫秒数后调用函数或计算表达式。(只执行一次,可用递归实现无限次调用。会有返回值,可利用此返回值清除这个定时器,方法不再运行)(调用方法时,如果用双引号括住方法名则加括号,如果不使用双引号,千万记住不要加括号,否则报错) |
clearInterval(返回值标示) | 取消由 setInterval() 设置的 timeout。 |
clearTimeout(返回值标示) | 取消由 setTimeout() 方法设置的 timeout。 |
open(url,窗体名称,显示样式) | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
showModalDialog(url) | 打开一个新的浏览器窗口。此方法有返回值,为returnValue的值 |
<html>
<head>
<title> demo6-定时器 </title>
<style type="text/css">
#div1{border:1px solid green;width:200px;height:200px;}
#div2{border:1px solid blue;width:200px;height:200px;}
</style>
</head>
<body>
<div id="div1">div1————setInterval</div>
<div id="div2">div2————setTimeout</div>
<script type="text/javascript">
/*
setInterval:每个执行多长时间执行一次。两个参数,第一个是调用方法,第二个是指定间隔的时间
clearInterval:跳出循环
setTimeout:只会执行一次,第一个参数是调用的方法,第二个参数是设置在指定的毫秒数。如果想无限执行,请放在递归里面
脚本语言不是必须按照从上到下的顺序执行,不是必须前面的程序执行完毕后边的才可以执行,不是这样的。脚本语言可以调用即可运行
clearTimeot:跳出循环
注意:调用时,如果用双引号括住方法名则加括号,如果不使用双引号,千万记住不要加括号,否则报错
*/
var vle = "";
function random(){
var r = parseInt(Math.random()*100);
document.getElementById("div1").innerHTML += "<br />"+r;
if(vle != "")//只产生一个随机数
clearInterval(vle);
}
vle = setInterval(random,400);
//==========================================================================
var to1 = "",to2 = "";
function randomTimeout(){
var r = Math.floor(Math.random()*100);
document.getElementById("div2").innerHTML += "<br />"+r;
to1 = setTimeout(randomTimeout,400);
}
randomTimeout();
if(to1!=""){
clearTimeout(to1);
}
</script>
</body>
</html>
3.2 Location对象
属性 | 描述 |
---|---|
href | 设置或返回完整的 URL。(可用作调转地址,直接把此属性此某方法中赋值,然后事件调用方法既可) |
3.3 History对象
方法 | 描述 |
---|---|
back() | 加载 history 列表中的前一个 URL(跳转到上个界面) |
forward() | 加载 history 列表中的下一个 URL(跳转到下个页面) |
go(number) | 加载 history 列表中的某个具体页面(跳转到指定页面,参数是历史记录的下标,go(0)表示刷新当前页面,go(-1)===back() g(1)===forward()) |
3.4 Screen对象
3.5 Navigator对象
属性 | 描述 |
---|---|
appName | 返回浏览器的名称。 |
appVersion | 返回浏览器的平台和版本信息。 |
3.6 事件
3.6.1 鼠标事件
属性 | 值 | 描述 |
---|---|---|
onclick | 脚本 | 当鼠标被单击时执行脚本 |
ondblclick | 脚本 | 当鼠标被双击时执行脚本 |
onmousedown | 脚本 | 当鼠标按钮被按下时执行脚本 |
onmouseup | 脚本 | 当鼠标按钮被松开时执行脚本 |
onmousemove | 脚本 | 当鼠标指针移动时执行脚本 |
onmouseout | 脚本 | 当鼠标指针移出某元素时执行脚本 |
onmouseover | 脚本 | 当鼠标指针悬停于某元素之上时执行脚本 |
3.6.2 键盘事件
属性 | 值 | 描述 |
---|---|---|
onkeydown | 脚本 | 当键盘被按下时执行脚本 |
onkeypress | 脚本 | 当键盘被按下后又松开时执行脚本 |
onkeyup | 脚本 | 当键盘被松开时执行脚本 |
3.6.3 窗口事件
属性 | 值 | 描述 |
---|---|---|
onload | 脚本 | 当文档被载入时执行脚本(适用于body和frameset元素,页面一打开就执行此事件) |
onunload | 脚本 | 当文档被卸下时执行脚本(适用于body和frameset元素,页面一关闭就执行此事件) |
3.6.4 表单元素事件
属性 | 值 | 描述 |
---|---|---|
onchange | 脚本 | 当元素改变时执行脚本(<select>选择变换时调用可使用此事件) |
onsubmit | 脚本 | 当表单被提交时执行脚本(提交事件,定义在form中,调用格式必须是return 方法名(),而且此方法必须有返回值) |
onreset | 脚本 | 当表单被重置时执行脚本(必须定义在form中) |
onselect | 脚本 | 当元素被选取时执行脚本 |
onblur | 脚本 | 当元素失去焦点时执行脚本(失焦事件) |
onfocus | 脚本 | 当元素获得焦点时执行脚本(聚焦事件) |
3.6.5 代码演示
<html>
<head>
<title>demo10-聚焦于离焦</title>
<script type="text/javascript">
/*
onfocus:聚焦事件
onblur:失焦事件
*/
function myFocus(){
document.getElementsByName("username")[0].value = "";
}
function regMy(tel){
var text = tel.value;
var reg = /^[0-9]{11}/;
if(reg.test(text))
alert("输入的是一个电话号码");
else
alert("不是一个电话号码");
}
</script>
</head>
<body>
姓名:<input type="text" name="username" value="哈哈哈哈" οnfοcus="myFocus()"/>
电话:<input type="text" name="tel" οnblur="regMy(this)"/>
</body>
</html>
<html>
<head>
<title>demo11-提交重制事件</title>
<script type="text/javascript">
/*
提交重制事件
onsubmit 提交事件
onreset 重制事件
注意:
1.onsubmit和onreset都是针对表单说的,所以要在表单标签form内定义事件
2.onsubmit和onreset事件调用格式必须是return方法名
3.consubmit的方法必须有个返回值
*/
function myCheck(){
var usename = document.getElementsByName("username")[0].value;
var password = document.getElementsByName("password")[0].value;
if(usename==""){
alert("请输入用户名");
return false;//表示不用往服务端发送请求
}
if(password==""){
alert("请输入密码");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="" method="get" οnsubmit="return myCheck()">
用户名:<input type="text" name="username" /><br />
密码:<input type="text" name="password" /><br />
<input type="submit" value="提交" /><input type="reset" value="重制" />
</form>
</body>
</html>
4.DOM
4.1 XML DOM
4.1.1 Node对象
属性 | 描述 |
---|---|
childNodes | 返回节点到子节点的节点列表。(返回的是一个数组) |
firstChild | 返回节点的首个子节点。 |
lastChild | 返回节点的最后一个子节点。 |
nextSibling | 返回节点之后紧跟的同级节点。 |
parentNode | 返回节点的父节点。 |
previousSibling | 返回节点之前紧跟的同级节点。 |
nodeName | 返回节点的名称,根据其类型。 |
nodeType | 返回节点的类型。 |
nodeValue | 设置或返回节点的值,根据其类型。 |
方法 | 描述 |
---|---|
appendChild(newChild) | 向节点的子节点列表的结尾添加新的子节点。 |
cloneNode(布尔值) | 复制节点。(克隆节点,true为复制全部子节点,false为不复制子节点。无论true还是false,都会把属性复制) |
insertBefore(newChild,refChild) | 在指定的子节点前插入新的子节点。 |
removeChild(node) | 删除(并返回)当前节点的指定子节点。 |
replaceChild(newChild,oldChild) | 用新节点替换一个子节点。(替换后newChild节点会从原来的位置消失) |
4.1.2 Document对象
属性 | 描述 |
---|---|
createElement(节点名称) | 创建元素节点。 |
createTextNode(文本数据) | 创建文本节点。 |
4.1.3 Element对象
方法 | 描述 |
---|---|
getAttribute() | 返回属性的值。 |
setAttribute() | 添加新属性。 |
4.2 Html DOM
4.2.1 Document对象
属性 | 描述 |
---|---|
body | 提供对 <body> 元素的直接访问。对于定义了框架集的文档,该属性引用最外层的 <frameset>。 |
方法 | 描述 |
---|---|
getElementById(id名) | 返回对拥有指定 id 的第一个对象的引用。 |
getElementsByName(name名) | 返回带有指定名称的对象集合。 |
getElementsByTagName(标签名) | 返回带有指定标签名的对象集合。 |
4.2.2 Table对象
方法 | 描述 |
---|---|
createCaption() | 为表格创建一个 caption 元素。 |
insertRow(index) | 在表格中插入一个新行。(插入一行到指定位置) |
deleteRow(rowIndex) | 从表格删除一行。(删除指定索引的一行) |
4.2.3 TableRow对象
属性 | 描述 |
---|---|
rowIndex | 返回该行在表中的位置。 |
方法 | 描述 |
---|---|
deleteCell(cellIndex) | 删除行中的指定的单元格。 |
insertCell(index) | 在一行中的指定位置插入一个空的 <td> 元素。 |
4.2.4 TableCell对象
属性 | 描述 |
---|---|
cellIndex | 返回单元格在某行的单元格集合中的位置。 |
4.2.5 Input Checkbox对象
4.2.6 Select对象
集合 | 描述 |
---|---|
options[] | 返回包含下拉列表中的所有选项的一个数组。 |
属性 | 描述 |
---|---|
length | 返回下拉列表中的选项数目。 |
selectedIndex | 设置或返回下拉列表中被选项目的索引号。 |
size | 设置或返回下拉列表中的可见行数。 |
tabIndex | 设置或返回下拉列表的 tab 键控制次序。 |
multiple | 设置或返回是否选择多个项目。 |
4.2.7 代码演示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="xmlns=http://www.w3.org/1999/xhtml">
<head>
<title>demo9-城市联动 </title>
</head>
<body>
<select id="factory" οnchange="selectCity()">
<option>---请选择省份---</option>
</select>
<select id="city">
<option>---请选择省份---</option>
</select>
<script type="text/javascript">
var cityList = new Array();
cityList['北京市'] = ['朝阳区','东城区','西城区', '海淀区','宣武区','丰台区','怀柔','延庆','房山'];
cityList['上海市'] = ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'];
cityList['广州省'] = ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'];
cityList['深圳市'] = ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'];
cityList['重庆市'] = ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'];
cityList['天津市'] = ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'];
cityList['江苏省'] = ['南京市','苏州市','无锡市'];
cityList['浙江省'] = ['杭州市','宁波市','温州市'];
cityList['四川省'] = ['四川省','成都市'];
cityList['海南省'] = ['海口市'];
cityList['福建省'] = ['福州市','厦门市','泉州市','漳州市'];
cityList['山东省'] = ['济南市','青岛市','烟台市'];
cityList['江西省'] = ['江西省','南昌市'];
cityList['广西省'] = ['柳州市','南宁市'];
cityList['安徽省'] = ['安徽省','合肥市'];
cityList['河北省'] = ['邯郸市','石家庄市'];
cityList['河南省'] = ['郑州市','洛阳市'];
cityList['湖北省'] = ['武汉市','宜昌市'];
cityList['湖南省'] = ['湖南省','长沙市'];
cityList['陕西省'] = ['陕西省','西安市'];
cityList['山西省'] = ['山西省','太原市'];
cityList['黑龙江省'] = ['黑龙江省','哈尔滨市'];
cityList['其他'] = ['其他'];
var f = document.getElementById("factory");
for(var i in cityList){
f.add(new Option(i,i));
}
function selectCity(){
/*
//自己的方法
var city = document.getElementById("city");
city.length = 1;
var index = f.selectedIndex;
var a = 1;
for(var i in cityList){
if(a==index)
for(var b=0;b<cityList[i].length;b++){
city.add(new Option(cityList[i][b],cityList[i][b]));
}
a++;
}*/
//老师的方法
var index = f.selectedIndex;
var cityNode = f.options[index];
var arr = cityList[cityNode.value];
var city = document.getElementById("city");
city.length = 1;
for(var x=0; x<arr.length; x++){
city.add(new Option(arr[x]));
}
}
</script>
</body>
</html>