我要评论一、javascript
1、什么是javascript（js）
（1）javascript是嵌入html中的代码，在浏览器中执行的脚本语言，具有与java和c语言类似的语法。
（2）一种网页编程技术，用来向html页面添加交互行为。
（3）直接嵌入html页面中。
（4）由浏览器解释代码并执行代码，不进行预编译。
注：
js是脚本语言，即没有编译器。js与java没有任何关系。js是基于对象的，java是面向对象的。
面向对象：是先有一个抽象的对象描述（类）， 然后根据这个描述去构建新的对象（实例化对象）
基于对象： 是先有一个具体的对象，然后根据这个具体的对象，再去创建新的对象（实例化对象）
2、js特点
（1）是脚本语言，可以使用任何文本编辑工具编写。
（2）由浏览器内置的javascript引擎执行代码。
解释执行：事先不编译，逐行执行。
基于对象：内置大量现成对象。
（3）使用场景：
客户端数据的计算。
客户端表单合法性验证。
浏览器的事件触发。
网页特殊显示效果制作。
服务器的异步数据提交。
3、如何使用js（其用法类似于css的用法）
（1）事件定义式： 直接在事件定义时写js。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jsdemo</title>
</head>
<body>
<!-- 注意，单双引号不要写错了 -->
<!-- 事件定义式定义一个按钮，当鼠标点击时，跳出一个对话框-->
<input type="button" value="sure" onclick="alert('hello');"/>
</body>
</html>
（2）嵌入式：直接写在<script></script>标签中。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jsdemo</title>
<!-- 嵌入式的js写在<script>标签中 -->
<script type="text/javascript">
/*要调用的js需要定义在函数中，
function 函数名（参数）{函数体}
*/
function show(){
alert('hi');
}
</script>
</head>
<body>
<!-- 嵌入式需在<script>标签中写函数，然后调用该函数。-->
<input type="button" value="cancel" onclick="show()"/>
</body>
</html>
（3）文件调用式（推荐，有时也称为无干扰脚本编程）：代码位于独立的（.js）文件中，然后在（.html）文件中通过<script>标签来引用（.js）文件。其中<script>标签可以存在于<head>或者<body>标签中。
【举例：】
【test.html】
<!doctype html>
<html>
<head>
<title>如何使用js</title>
<meta charset="utf-8" />
<!-- 引用js需使用<script>标签,且必须写成双标签，且标签内部不要添加任何内容 -->
<script type="text/javascript" src="../js/test.js"></script>
</head>
<body >
<!-- 文件调用式,先使用<script>双标签引用js文件，然后再调用函数。-->
<input type="button" value="submit" onclick="show()" />
</body>
</html>
【test.js】
/*.js文件等价于<script>标签 ，即写函数即可*/
function show(){
alert("hello world!!!");
}
二、javascript基础语法
1、基本规则：
（1）语句大小写敏感，使用分号（建议使用）或者换行结束。语句由表达式、关键字、运算符组成。使用unicode字符集编写。
（2）单行注释（//） 、多行注释（/* */）。
（3）标识符：
不以数字开头，由字母、数字、下划线(_)以及美元（$）组成。js中存在代表特定含义的保留字，不能将保留字定义为标识符。命名时最好有意义。
（4）变量：
变量声明：统一使用关键字var声明变量，但变量引用的数据是有类型的。
变量初始化：使用“=”赋值，没有初始化的变量则自动取值为undefined。
比如：
var name = "tom";
var age = 18;
（5）数据类型（js基于对象）：
特殊类型： null(空)、undefined(未定义)。
内置对象（基本类型）：number(数字)，string(字符串)，boolean(布尔)，function(函数)，array(数组)。
外部对象：window(浏览器对象)，document(文档对象)。
自定义对象：object(自定义对象)。
number不区分整数与浮点数，所有数字均采用64位浮点格式存储，类似double格式。整数默认是10进制，16进制需加上0x，八进制需加0 。浮点数默认为小数点记录，也可以使用指数记录。
（6）数据类型自动转换
数字加字符串：数字转换为字符串。
数字加布尔值：true转换为1，false转为0。
字符串加布尔值：布尔值转为字符串true或false。
布尔值加布尔值：布尔值转换为数值1或0。
（7）数据类型转换函数
1、tostring()：将所有数据类型转换为string类型。
比如：
a.tostring();
2、parseint()：强制转为整数，如果不能转换，则返回nan（not a number）。
比如：
paserint("5.5")返回5，
parseint(6.12)返回6 。
3、parsefloat()：强制转为浮点数，如果不能转换，则返回nan。
比如：
parsefloat("6.12")返回6.12 。
4、typeof()：查询当前类型，返回string/number/boolean/object/function/undefined。
比如：
type("test" + 3) 返回string.
5、isnan()：判断被检测的表达式经过转换后是否是一个数。不是数则返回true，否则返回false。
比如：
isnan("56")返回false。
isnan(parseint("56"))返回false。
isnan(parseint("aaa"))返回true。
6、eval()：函数用于计算表达式字符串，或者用于执行字符串中的js代码，如果参数中没有合法的表达式和语句，那么会抛出异常。
【举例：（计算平方值）】
<!doctype html>
<html>
<head>
<title>计算平方</title>
<meta charset="utf-8" />
<script>
//计算输入数字的平方
function cal(){
//获取文本框，并从中取值
var num = document.getelementbyid("num");
//获取span，并向其取值。
var result = document.getelementbyid("result");
//获取文本框中的值
var n = num.value;
//如果文本框没有任何输入内容，则从文本框中获取的是""，不是null
if(n=="" || isnan(n)){
//如果n为空，或者n不为数字，则不计算平方并给出提示
//innerhtml是元素的内容
result.innerhtml = "请输入数字";
}else{
//输入的是数字，计算平方
result.innerhtml = n*n;
}
}
</script>
</head>
<body>
<input type="text" id="num"/>
<input type="button" value="平方" onclick="cal()"/>
=
<span id="result"></span>
</body>
</html>
【举例：】
eval("1 + 2");
eval("ad");
eval("3*3*3");
eval("a = 1, b = 3, a + b");
eval("a = 1; b = 3; a + b;");
eval(1 + 3);
（8）运算符
1、算术运算符：
+，-，*，/，%，++，--。
注意：
java中5/2=2.
js中5/2=2.5 。
2、关系运算符：
>, < , >=, <=, ==, != ， ===(全等，类型相同、数值相同)， !==(不全等)。
关系表达式的值为true或false。
3、逻辑运算：
!（逻辑非）, &&（逻辑与）, ||（逻辑或）。
注：
1 || 2 的值为 1
2 || 1 的值为 2
2 || null 的值为 2
null || 2 的值为 2
1 && 2 的值为 2
2 && 1 的值为 1
1 && null 的值为 null
null && 1 的值为 null
4、条件运算（三目/元运算）：
表达式？结果1：结果2;
先计算表达式的值，若为true，那么结果为结果1的值，若为false，那么为结果2的值。
【举例：（猜数字）】
<!doctype html>
<html>
<head>
<title>猜数字</title>
<meta charset="utf-8" />
<script>
/*
生成一个随机数(1~100)，由于存在函数外部，故为全局变量，
此代码在页面加载时执行。
*/
var init_num = parseint(math.random()*100)+1;
//实现猜数字的函数
function guess(){
//获取文本框
var input = document.getelementbyid("num");
//获取段落
var p = document.getelementbyid("result");
//获取文本框的值
var n = input.value;
if(n=="" || isnan(n)){
p.innerhtml="请输入1~100间的整数";
}else{
//进行比较
if(n < init_num){
p.innerhtml="小了";
}else if(n > init_num){
p.innerhtml="大了";
} else{
p.innerhtml="对了";
}
}
}
</script>
</head>
<body>
<input type="text" id="num" />
<input type="button" value="猜吧" onclick="guess()" />
<p id="result" ></p>
</body>
</html>
（9）流程控制
程序逻辑结构：顺序（默认）、循环、分支。
分支：if-else语句，switch-case语句。
循环：for语句，while语句，do-while语句。
java中的条件表达式必须返回布尔值（true或false），而js的表达式可以返回任何类型的值（比如nan，null，0，”“， undefined等均表示false）。即在js中任意数据均能作为表达式，如果是非空的数据，则表示true，若为空（nan，null，0，”“， undefined）的数据，则表示false。
"a" ? 1 : 2 的值为1
0 ? 1 : 2 的值为2
null ? 1 : 2 的值为2
【举例：（计算阶乘）】
<!doctype html>
<html>
<head>
<title>计算阶乘</title>
<meta charset="utf-8" />
<script>
function cal(){
//获取文本框
var input = document.getelementbyid("num");
//获取span
var span = document.getelementbyid("result");
//获取文本框的值,其返回的是字符串，若计算数字，内部会自动转型
var n = input.value;
if(n=="" || isnan(n) || n<1 || n>100){
//输入的数字不能为空，非数字，小于1，大于100
span.innerhtml = "请输入1~100间的整数";
}else{
//计算阶乘
var sum = 1;
for(var i=1; i <= n; i++){
sum*=i;
}
span.innerhtml = sum;
}
}
</script>
</head>
<body>
<input type="text" id="num"/>
<!-- html5规范，可以将按钮写成<button> -->
<button onclick="cal()">阶乘</button>
=
<span id="result"></span>
</body>
</html>
2、js对象
（1）对象分类：
内置对象。比如string，number等。
外部对象。window对象，document对象。
自定义对象。
（2）如何使用对象？
【对象包含属性和方法。】
访问对象属性：
格式：
对象.属性;
【访问对象方法：】
格式：
对象.方法名();
（3）常用内置对象
1、string对象。
2、number对象。
3、boolean对象。
4、array对象。
5、math对象。
6、date对象。
7、regexp对象（正则表达式）。
8、function对象。
【string对象：】
【创建格式:】
var str1 = "hello world";
var str2 = new string("hello world");
【常用方法：】
str1.tolowercase();//将字符串全改为小写
str1.touppercase();//将字符串全改为大写
str1.charat(index);//返回指定位置的字符，从0开始计数
str1.charcodeat(index); //返回指定位置的unicode编码，index指位置。
str1.indexof(findstr, [index]);//返回字符串所在的位置索引，如不存在，返回-1。findstr为查找的字符串，index为开始查找的位置（可以省略）
str1.lastindexof(findstr, [index]);//从尾部（index表示指定开始位置）开始向前查找。
str1.substring(start, [end]);//获取字符串（包含头不包含尾），start为开始位置，end为结束位置（可省略）。
str1.replace(findstr, tostr);//返回替换后的字符串（只换一个），替换子字符串，findstr为查找的字符串，tostr为替换的字符串。
str1.split(bystr, [howmany]);//返回分割后的字符串数组，bystr为分割的字符串，howmany指定返回数组的最大长度（可以省略）。
【举例：】
var str1 = "hello world";
str1.tolowercase();
str1.touppercase();
str1.charat(4);
str1.charcodeat(0);
str1.indexof("l", 2);
str1.lastindexof("l", 2);
str1.substring(3, 6);
str1.replace("ll", "hihi");
str1.split(" ", 1);
【array对象：】
数组是一种可以存储一组信息的变量。
【创建格式：】
var a1 = new array();
var a2 = new array(7);
var a3 = new array(111, "a" , true);
var a4 = [100, 200, 300];
【添加数据：】
向数组中添加数据：
可以直接使用 a1[4] = 5; 指定位置赋值。
可以使用a1.push(5);进行赋值。
可以使用a1.pop()取元素。
【常用方法：】
a1.reverse(); //将数组倒转。
a1.tostring()；//输出数组。
a1.sort();//数组排序（由小到大排序），可能会排序错误。
a1.sort(compare);//自定义一个compare方法。
js中预置的比较方法默认返回2个数相减的值，然后基于此值做出排序。比较方法可以进行置换，即修改比较方法，从而对排序产生影响。
【举例：】
var a = [8, 5, 9, 4, 40];
a.sort();
function compare(i, j) {return j - i;}
a.sort(compare);
a.reverse();
【math对象：】
math对象用于执行数学任务，无需创建，直接使用math调用其属性与方法即可。
比如：math.pi, math.round(3.56)（四舍五入函数）， math.e等。
【常用方法：】
三角函数：math.sin(x), math.cos(x), math.tan(x)等。
计算函数：math.sqrt(x), math.log(x), math.exp(x)等。
数值比较函数：math.abs(x), math.max(x,y...), math.random(), math.round(x)等。
【举例：】
math.pi
math.round(3.56)
math.e
math.sqrt(6)
【date对象：】
date对象用于处理日期和时间，封装了系统时间毫秒数。
创建date对象：
var date = new date();//当前系统时间
var date = new date("2019/10/20");//自定义时间
【常用方法：】
gettime();//读时间毫秒数
settime();//写时间毫秒数
读时间分量：getdate(), getday(), getfullyear()等。
写时间分量：setdate(), setday(), setfullyear()等。
转为字符串：tostring(), tolocaletimestring(), tolocaledatestring();
【举例：】
var date1 = new date();
date1.tostring();
var date2 = new date("2019/10/20");
date2.tostring();
date1.gettime();
date1.tolocaletimestring();
date1.tolocaledatestring();
【function对象:】
js中的函数即为function对象。
函数名就是指向function对象的引用，使用函数名可以访问函数的对象。
【创建格式1：】
function 函数名([参数]){
函数体;
return 返回值; //可选操作，若不写，默认为undefined
}
【创建格式2：】
var functionname = function([参数]){
函数体;
return 返回值; //可选操作
}
【函数的返回值：】
默认值：undefined；
可以使用return返回具体的值。
【函数的参数：】
1、js的函数没有重载。
2、调用时只要函数名一样，那么无论传入多少个参数，那么均为同一个函数。
3、没有接受到实参的参数值均为undefined。
4、所有的参数传递给arguments对象（数组对象）。
【举例：】
举例：（使用arguments实现类似方法的重载）
//求和，计算传入的数据和
function add(){
var sum = 0;
for (var i=0; i<arguments.length; i++){
sum+=arguments[i];
}
return sum;
}
add(1,2,3);
add(1,2,3,4,5,6);
3、事件
事件是用户在访问页面时执行的操作。当浏览器探测到一个事件时，比如用鼠标单击或按键，它可以触发与这个事件相关联的 javascript 对象，这些对象称为事件处理程序（ event handler）。
【分类：】
【鼠标事件：】
onclick(); // 鼠标点击时触发。相当于一次onmousedown与onmouseup。
ondblclick();// 鼠标双击事件。
onmousedown();// 鼠标落下事件。
onmouseup();// 鼠标弹起事件。
onmouseover();// 鼠标悬浮事件。
onmouseout();// 鼠标离开事件。
【键盘事件：】
onkeydown();// 键盘落下事件。
onkeyup();// 键盘弹起事件。
【状态事件：】
onload();// 是页面加载事件,当用户进入页面而且所有页面元素都完成加载时，就会触发这个事件。
onunload();// 当用户离开网页时，就会触发 onunload 事件处理程序（慎用）。
onchange();// 是值改变事件，当值发生改变时触发。多用于下拉选择框（<select> <option>）的值改变事件处理。
onfocus();// 获取光标事件/光标移入事件。（比如点击一个文本框，那么会有一个光标在闪）
onblur();// 鼠标的光标切换时触发。（比如光标从一个文本框移入另一个文本框）
onerror();// 当页面上发生 javascript 错误时，可能会触发 onerror 事件处理程序。
onsubmit();// 是表单提交事件，在点击提交按钮时触发。提交按钮触发时，先调用onsubmit方法，若该方法返回true，则提交表单，返回false则不提交。
//常用于拦截提交的目的。 如果没有此事件，那么不管输入的数据是否正确，其都能正确跳转页面。
【以onload为例：】
【格式：】
<body onload="start();"></body>
<!--
图片轮播
要求：
1、在页面上增加一组图片。
2、默认显示为第一章。
3、设置每n秒切换下一张图片并显示。
-->
<!doctype html>
<html>
<head>
<title>图片轮播</title>
<meta charset="utf-8" />
<style type="text/css">
ul{
//去掉图片前的点
list-style-type: none;
border: 1px solid #ccc;
width: 480px;
height: 360px;
margin: 0;
padding: 0;
}
li{
width: 480px;
height: 360px;
margin: 0;
padding: 0;
}
.show{
display: block;
}
.hide{
display: none;
}
</style>
<script type="text/javascript">
var index = 0;//循环次数
/*每个一秒执行一次，先将所有图片全部隐藏，然后在显示一张图片*/
function start(){
setinterval(function(){
var ul=document.getelementbyid("photos");
//取ul标签下所有li子元素
var lis=ul.getelementsbytagname("li");
//将所有li隐藏
for(var i=0;i<lis.length;i++){
lis[i].classname="hide";
}
//显示下一个li,将其显示
index++;
lis[index%lis.length].classname="show";
}, 1000);
}
</script>
</head>
<!-- onload是页面加载事件，表示在页面加载后调用start函数 -->
<body onload="start();">
<ul id="photos">
<li class="show"><img src="../images/f1.jpg" /></li>
<li class="hide"><img src="../images/f2.jpg" /></li>
<li class="hide"><img src="../images/f3.jpg" /></li>
<li class="hide"><img src="../images/f4.jpg" /></li>
</ul>
</body>
</html>
4、bom、dom
（1）bom（browser object model）
浏览器对象模型，用来访问和操作浏览器窗口，使js有能力与浏览器进行交互。通过使用bom，可移动窗口，更改状态栏文本、执行其他不与页面内容发生直接联系的操作。没有相关标准，但被广泛支持。根为window。
（2）dom（document object model）
文档对象模型，用来操作文档。定义了访问与操作html文档的标准方法，应用程序通过对dom树的操作，实现对html文档数据的操作。根为document。
（3）window对象
window表示浏览器窗口，所有的js全局对象、函数以及变量均自动成为window对象的成员。能被window对象所调用。
【常用属性（子对象）：】
document：窗口中显示的html文档对象（dom）。
history：浏览过窗口的历史记录对象。
location：窗口文件地址对象。
screen：当前屏幕对象。
navigator：浏览器的相关信息。
【常用方法：】
alert(str); //提示对话框，显示str字符串的内容。
confirm(str);//确认对话框，显示str字符串的内容，按“确定”按钮返回true，否则返回false。
//周期性定时器：以一定的时间间隔执行代码，循环往复。
//常用于周期时钟，计时器等。
setinterval(exp, time); 周期性触发代码exp（执行语句），time为时间周期，单位为毫秒。
clearinterval(tid); 停止启动的定时器，tid为启动的定时器对象。
//一次性定时器：在一个设定的时间间隔后执行代码，而不是在函数被调用后立即执行。原理同周期性计时器，但只执行一次。
//常用于提示，比如弹出一个信息框，然后过几秒就会隐藏掉。
settimeout(exp, time)； //一次性触发代码exp。返回已经启动的定时器。
cleartimeout(tid);//停止启动的定时器。
【举例：（动态时钟，使用周期性定时器）】
<!doctype html>
<html>
<head>
<title>动态时钟</title>
<meta charset="utf-8" />
<script type="text/javascript">
var id;//启用的定时器id
function start(){
//使用周期性定时器，每个1000ms执行一次function
id = setinterval(function() {
var now = new date();
var time = now.tolocaletimestring();
var span = document.getelementbyid("clock");
span.innerhtml = time;
}, 1000);
}
function stop(){
//根据定时器id，停止定时器
clearinterval(id);
}
</script>
</head>
<body>
<div>
当前时间：
<span id="clock"></span>
</div>
<div>
<input type="button" value="启动" onclick="start()"/>
<input type="button" value="停止" onclick="stop()" />
</div>
</body>
</html>
【举例：（消息提示并自动消失，使用一次性定时器）】
<!doctype html>
<html>
<head>
<title>动态提示信息并自动消失</title>
<meta charset="utf-8" />
<style type="text/css">
.hide{
display:none;
}
.show{
display:block;
}
</style>
<script type="text/javascript">
function del(){
//假设已删除成功，显示信息，并过2秒将其隐藏
var p = document.getelementbyid("msg");
p.classname = ".show";
var id = settimeout(function() {
p.classname = "hide";
cleartimeout(id);
}, 2000);
}
</script>
</head>
<body>
<!-- 当点击删除按钮成功时，弹出一个信息框，并过了几秒后自动消失 -->
<p>
<button onclick="del();">删除</button>
</p>
<p class="hide" id="msg">操作成功！</p>
</body>
</html>
（4）window常用子对象
【screen对象：】
包含有关客户端显示屏幕的信息。常用于获取屏幕的分辨率和色彩。
【常用属性：】
width/height/availwidth/availheight（宽、高、可用宽、可用高）。
【history对象：】
包含用户（浏览器窗口中）访问过的url。
【常用属性：】
length；浏览器历史列表中url数量。
【常用方法：】
history.back(), (相当于单击一次后退按钮)
history.forward(),（相当于单击一次前进按钮）
history.go(num),（单击num次按钮，num>0 则表示单击前进按钮， num<0 则表示单击后退按钮 ）
【location对象：】
包含有关当前url的信息，常用于获取和改变当前浏览的网址。
【常用属性：】
href；当前窗口正在浏览的网页地址。
location.href="http://www.baidu.com";相当于跳转到百度页面。
【方法：】
reload(); //重新载入当前网址，相当于按下刷新按钮。
【navigator对象：】
包含有关浏览器的信息。常用于获取客户端浏览器和操作系统信息。
【常用属性：】
navigator.useragent;
【举例：（以screen对象为例）】
var screen = window.screen;
screen.width;
screen.height;
screen.availwidth;
screen.availheight;
（5）window子对象--document
当网页被加载时，浏览器会扫描页面的内容，并创建页面的文档对象模型（一种树形结构），javascript 将文档树中的每一项都当做对象，并进行操作（增删改查）。故js能改变页面中的所有html元素、属性、css样式以及对页面所有事件做出反应。
树中的每个对象也称为树的节点（ node）。如果节点包含 html 标签，那么它就称为元素节点（ element node），否则，就称为文本节点（ text node）。再细分的话，又包括文档节点，注释节点，属性节点（如下图：从某网站上copy下来的）。
【查找节点】
1、通过id查询。document.getelementbyid(string idname);若id错误，则返回null。
2、通过标签名称查询。document.getelementsbytagname(string name);返回一个长为length的数组，根据指定标签名返回所有元素。若标签名错误，返回一个长为0的数组。
3、通过节点关系（层次）查询。
node.parentnode遵循文档的上下层次结构，查找单个父节点。
node.childnodes遵循文档的上下层次结构，查找多个子节点（不常用，其将空格视为孩子）。
4、通过name属性查询。document.getelementbyname(string name)；根据标签的name属性来查询。常用于单选框、复选框。
【读取、修改节点信息：】
1、获取节点名称。
格式：
节点.nodename
其中：
元素节点和属性节点的节点名称为标签或属性名，
文本节点的名称为#text，
文档节点的名称为#document。
举例：
document.nodename; //结果为"#document"
2、获取节点类型。
格式：
节点.nodetype：
其中：
根据返回数值不同来判断节点类型。
返回1为元素节点，
返回2为属性节点，
返回3为文本节点，
返回8为注释节点，
返回9为文档节点。
举例：
document.nodetype; //结果为9
3、设置元素节点的内容，
通过innertext设置或获取位于对象起始和结束标签内的文本（纯文本）。
通过innerhtml设置或获取位于对象起始和结束标签内的html（带标签的文本）。
举例：
document.getelementsbytagname("p")[1].innerhtml;
4、获取节点属性，
getattribute(); //方法根据属性名称获取属性的值。
setattrinbute(); //方法根据属性名称设置属性的值。
removeattribute(); //方法根据属性名称删除属性的值。
举例：
document.getelementsbytagname("p")[1].getattribute("id");
5、元素节点的样式,
style属性：
style.color; //设置节点标签颜色
node.style.fontsize; //设置节点标签的字体大小
举例：
document.getelementsbytagname("p")[1].style.color = "red";
document.getelementsbytagname("p")[1].style.fontsize = "80px";
classname属性；（相当于改class属性值）
node.classname;
举例：
document.getelementsbytagname("p")[1].classname = "show";
【增加节点：】
增加节点步骤：
1、创建节点（此时页面中无显示）。
var newnode = document.createelement(elementname); //返回新创建的节点。
举例：
var newnode = document.createelement("input"); //创建一个input标签对象
newnode.type = "text"; //设置为文本框
newnode.value = "sure"; //设置文本框初始值为 sure
newnode.style.color = "red"; //设置文本框字体的颜色
2、添加节点（将新节点作为某个节点的子节点）。
parentnode.appendchild(newnode); //将新节点作为父节点的最后一个节点追加。
parentnode.insertbefore(newnode, refnode); //新节点位于参考节点（refnode）前。
举例：
document.getelementsbytagname("p")[0].appendchild(newnode);
【删除节点：】
node.removechild(childnode); //删除某节点（node）的子节点（childnode），若子节点b中还有子节点c，那么会将整个子节点b删除。
一般写成：childnode.parentnode.removechild(childnode);
举例：
newnode.parentnode.removechild(newnode);
【举例：（联动菜单实现）】
<!--
举例：（联动菜单）
要求：
1、创建省、市下拉选项框。
2、当改变省份时，重置市。
-->
<!doctype html>
<html>
<head>
<title>联动菜单</title>
<meta charset="utf-8" />
<script type="text/javascript">
//1、提前预置每个省对应的市
var cities = [
["请选择"],
["青岛", "济南", "烟台"],
["杭州", "宁波", "温州"],
["南京", "无锡", "苏州"]
];
function change() {
//2、获取当前选中的省
var province = document.getelementbyid("province");
var pindex = province.value;
//3、删除所有的市
//var city = document.getelementbyid("city");
//var options = city.getelementsbytagname("option");
//for(var i=0;i<options.length;i++){
//options[i].parentnode.removechild(options[i]);
//}等价于
city.innerhtml = "";
//4、重新添加这个省下的市
var pcities = cities[pindex];
for (var i = 0; i < pcities.length; i++) {
//创建option节点
var option = document.createelement("option");
//设置新节点属性
option.setattribute("value", i);
option.innerhtml = pcities[i];
//将新节点追加到城市下拉选项框中
city.appendchild(option);
}
}
</script>
</head>
<body>
<!-- option的内容时下拉选项显示的值。
option的value是select节点的返回值。
onchange是值改变事件，当值发生改变时触发。 -->
省：
<select id="province" onchange="change();">
<option value="0">请选择</option>
<option value="1">山东省</option>
<option value="2">浙江省</option>
<option value="3">江苏省</option>
</select> 市：
<select id="city">
<option>请选择</option>
</select>
</body>
</html>
5、自定义对象
（1）自定义对象是一种特殊的数据类型，由属性和方法封装而成。
属性指与对象有关的值。
格式：
对象名.属性名。
方法指对象可以执行的行为或可以完成的功能。
格式：
对象名.方法名()。
（2）创建自定义的对象的方法：
【第一种：直接创建对象：（此种方法不推荐，可复用性差，代码维护不易）】
【格式：】
<script type="text/javascript">
function f1(){
var teacher = new object();
//添加属性
teacher.name = "苍#null";
teacher.age = 40;
//添加方法
teacher.work = function(){
alert("hi");
};
alert(teacher.name+": "+teacher.age);
teacher.work();
}
</script>
【第二种：（利用构造器创建）】
【格式：】
<script type="text/javascript">
function f2(){
//创建对象
var s = new student("jarry", 30);
//使用对象
alert(s.name+": "+s.age);
s.work();
}
//预置一个带有格式要求的对象
function student(name, age){
this.name = name;
this.age = age;
this.work = function(){
alert("hello");
};
}
</script>
【第三种：（使用json创建对象）】
【格式：】
<script type="text/javascript">
function f3(){
var programmer = {
"name" : "tom",
"age" : 25,
"work" : function(){alert("hehe");}
};
alert(programmer.name + ": " + programmer.age);
programmer.work();
}
</script>
【还有原型模式创建等...，未完待续...】
【举例：】
<!doctype html>
<html>
<head>
<title>创建自定义对象</title>
<meta charset="utf-8" />
<script type="text/javascript">
//使用第一种方式创建对象
function f1(){
var teacher = new object();
teacher.name = "苍#null";
teacher.age = 40;
teacher.work = function(){
alert("hi");
};
alert(teacher.name+": "+teacher.age);
teacher.work();
}
//第二种方式
function f2(){
//创建对象
var s = new student("jarry", 30);
//使用对象
alert(s.name+": "+s.age);
s.work();
}
//预置一个带有格式要求的对象
function student(name, age){
this.name = name;
this.age = age;
this.work = function(){
alert("hello");
};
}
//使用第三种
function f3(){
var programmer = {
"name" : "tom",
"age" : 25,
"work" : function(){alert("hehe");}
};
alert(programmer.name + ": " + programmer.age);
programmer.work();
}
</script>
</head>
<body>
<!-- 第一种，直接new一个对象 -->
<button onclick="f1();">按钮1</button>
<!-- 第二种，使用自定义构造函数,然后new一个构造函数 -->
<button onclick="f2();">按钮2</button>
<!-- 第三种，使用json来创建对象,常用于服务端相关 -->
<button onclick="f3();">按钮3</button>
</body>
</html>
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论