2.document.getElementById("p1").style.color="blue";
3.引用js文件： <script src="script.js"></script>
javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，
所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；
而如果是通过事件调用执行的function那么对位置没什么要求的。
4.单行注释，在注释内容前加符号 “//”。 多行注释以"/*"开始，以"*/"结束。
5.确认（ confirm 消息对话框）返回值: Boolean值
6.提问（ prompt 消息对话框）
prompt(str1, str2);
参数说明：
str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改
1. 点击确定按钮，文本框中的内容将作为函数返回值
2. 点击取消按钮，将返回null
7.打开新窗口（window.open）
open() 方法可以查找一个已经存在或者新建的浏览器窗口。
语法：
window.open([URL], [窗口名称], [参数字符串])
参数说明:
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_selft"具有特殊意义的名称。
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
top/left/width/height/menubar/toolbar/scrollbars/status
例如:打开http://www.baidu.com网站，大小为300px * 200px，无菜单，无工具栏，无状态栏，有滚动条窗口：
<script type="text/javascript"> window.open('http://www.baidu.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>
注意：运行结果考虑浏览器兼容问题。
8.闭窗口（window.close）
close()关闭窗口
用法：
window.close(); //关闭本窗口
或
<窗口对象>.close(); //关闭指定的窗口
<!--==========================================DOM BEGIN======================================================================-->
9.认识DOM-->HTML文档可以说由节点构成的集合，三种常见的DOM节点:
1). 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2). 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3). 属性节点:元素属性，如<a>标签的链接属性href="http://www.baidu.com"。
4). document.getElementById(“id”) 通过ID获取元素，返回值为：null或[object HTMLParagraphElement]
5）innerHTML 属性
innerHTML 属性用于获取或替换 HTML 元素的内容。
6）改变HTML样式：Object.style.property=new style;
backgroundColor/height/width/color/font/fontFamily/fontSize等
mychar.style.color="red";
7）显示和隐藏（display属性）
style.display=none/block。。。
var mychar = document.getElementById("con");
mychar.style.display="none";
8)控制类名（className 属性）
className 属性设置或返回元素的class 属性。
语法：
object.className = classname
注意：====函数名不要用css或者html关键字，如hidden等（否则不生效）
<!--==========================================DOM END======================================================================-->
10.JS变量（区分大小写）
不允许使用JavaScript关键字和保留字做变量名
1）关键字 new/finally/catch/default/throw/in/delete/do/instanceof/typeof/break/else/var/case/for/switch/while/if/try
2）保留字 abstract/enum/int/short/bollean/export/interface/static/byte/extends/long/super/char/final/native/synchronized/
/class/float/package/thtows/const/goto/private/transient/debugger/implements/protected/volatile/double/import/public
3)操作符之间的优先级（高到低）:
算术操作符(+-*/) → 比较操作符(><...) → 逻辑操作符(&& || ! ) → "="赋值符号
如果同级的运算是按从左到右次序进行,多层括号由里向外。
4)数组：var myarray= new Array(8); //创建数组，存储8个数据
1.创建的新数组是空数组，没有值，如输出，则显示undefined。
2. 虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。
数组赋值：
var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
第二种方法：
var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）
注意：数组存储的数据可以是任何类型（数字、字符、布尔值等）
3.数组属性length
5）二维数组
二维数组的表示: myarray[ ][ ]
定义：
var myarr=new Array(); //先声明一维
for(var i=0;i<2;i++){ //一维长度为2
myarr[i]=new Array(); //再声明二维
for(var j=0;j<3;j++){ //二维长度为3
myarr[i][j]=i+j; // 赋值，每个数组元素的值为i+j
}
}
或者：var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3, ]]
注意: 二维数组的两个维度的索引值也是从0开始，两个维度的最后一个索引值为长度-1。
11.事件
onclick/onmouseover(鼠标经过事件）/onmouseout（鼠标移开事件）/onchange（文本框内容改变事件）
/onselect（文本框内容被选中事件）/onfocus（光标聚集）/onblur（光标离开）/onload（网页导入）/ onunload （关闭网页）
1）加载页面时，触发onload事件，事件写在<body>标签内。
2）退出页面：<script type="text/javascript">
window.onunload = onunload_message;
function onunload_message(){
alert("您确定离开该网页吗？");
}
</script>
3）获取元素的值设置和获取方法为：
例：赋值：document.getElementById(“id”）.value = 1；
取值：var = document.getElementById(“id”）.value；
使用parseInt()函数可解析一个字符串,并返回一个整数
12.JavaScript内置对象
1）Date 日期对象
document.write(weekday[date.getDay()]);
getDay():返回星期几：0-6
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
get/setFullYear() 返回/设置日期,用四位数表示
get/setYear()
get/setMonth()
get/setHours()
get/setMinutes()
get/setSeconds()
get/setTime() 返回/设置时间（毫秒为单位）
var d = new Date(2012, 10, 1); //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日
<script type="text/javascript">
//通过javascript的日期对象来得到当前的日期，并输出。
var date = new Date();
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//成绩是一长窜的字符串不好处理，找规律后分割放到数组里更好操作哦
var scoreStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
scoreStr = scoreStr.split(";");
var len = scoreStr.length;
var score = 0 ;
var sum = 0;
var i = 0 ;
for (i = 0 ; i < len ; i++ )
{
score = scoreStr[i].split(":");
sum += parseInt(score[1]);
}
//从数组中将成绩撮出来，然后求和取整，并输出。
document.write(sum/len);
</script>
2）字符串对象
charAt()
indexOf(substring,startpos)返回指定的字符串首次出现的位置
字符串分割split()
stringObject.split(separator,limit):limit分割次数
提取字符串substring()
stringObject.substring(starPos,stopPos)
如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。
提取指定数目的字符substr()
stringObject.substr(startPos,length)
3）Math对象
abs(x):绝对值 ceil()向上取整 floor（）向下取整 round()四舍五入 random()随机数
4）Array数组
数组连接 concat ()
concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。
指定分隔符连接数组元素join() arrayObject.join(分隔符)
var myarr = new Array(3);
myarr[0] = "I";
myarr[1] = "love";
myarr[2] = "JavaScript";
document.write(myarr.join());
-----------》I,love,JavaScript
颠倒数组元素顺序 reverse ()
选定元素 slice ()
slice() 方法可从已有的数组中返回选定的元素。
语法
arrayObject.slice(start,end)
1. 可使用负值从数组的尾部选取元素。
start:-1指最后一个元素，-2倒数第二个元素
2.如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
3. String.slice() 与 Array.slice() 相似。
数组排序sort()
1.如果不指定<方法函数>，则按unicode码顺序排列。
2.如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。
<script type="text/javascript">
function sortNum(a,b) {
return a - b;
//升序，如降序，把“a - b”该成“b - a”
}
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr + "<br>");
document.write(myarr.sort(sortNum));
</script>
1.document.write("hello");
2.document.getElementById("p1").style.color="blue";
3.引用js文件：<script src="script.js"></script>
javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，
所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；
而如果是通过事件调用执行的function那么对位置没什么要求的。
4.单行注释，在注释内容前加符号 “//”。 多行注释以"/*"开始，以"*/"结束。
5.确认（confirm消息对话框）返回值: Boolean值
6.提问（prompt消息对话框）
prompt(str1, str2);
参数说明：
str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改
1. 点击确定按钮，文本框中的内容将作为函数返回值
2. 点击取消按钮，将返回null
7.打开新窗口（window.open）
open() 方法可以查找一个已经存在或者新建的浏览器窗口。
语法：
window.open([URL], [窗口名称], [参数字符串])
参数说明:
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_selft"具有特殊意义的名称。
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
top/left/width/height/menubar/toolbar/scrollbars/status
例如:打开http://www.baidu.com网站，大小为300px * 200px，无菜单，无工具栏，无状态栏，有滚动条窗口：
<script type="text/javascript"> window.open('http://www.baidu.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>
注意：运行结果考虑浏览器兼容问题。
8.闭窗口（window.close）
close()关闭窗口
用法：
window.close(); //关闭本窗口
或
<窗口对象>.close(); //关闭指定的窗口
<!--==========================================DOM BEGIN======================================================================-->
9.认识DOM-->HTML文档可以说由节点构成的集合，三种常见的DOM节点:
1). 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2). 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3). 属性节点:元素属性，如<a>标签的链接属性href="http://www.baidu.com"。
4). document.getElementById(“id”) 通过ID获取元素，返回值为：null或[object HTMLParagraphElement]
5）innerHTML 属性
innerHTML 属性用于获取或替换 HTML 元素的内容。
6）改变HTML样式：Object.style.property=new style;
backgroundColor/height/width/color/font/fontFamily/fontSize等
mychar.style.color="red";
7）显示和隐藏（display属性）
style.display=none/block。。。
var mychar = document.getElementById("con");
mychar.style.display="none";
8)控制类名（className 属性）
className 属性设置或返回元素的class 属性。
语法：
object.className = classname
注意：====函数名不要用css或者html关键字，如hidden等（否则不生效）
<!--==========================================DOM END======================================================================-->
10.JS变量（区分大小写）
不允许使用JavaScript关键字和保留字做变量名
1）关键字 new/finally/catch/default/throw/in/delete/do/instanceof/typeof/break/else/var/case/for/switch/while/if/try
2）保留字 abstract/enum/int/short/bollean/export/interface/static/byte/extends/long/super/char/final/native/synchronized/
/class/float/package/thtows/const/goto/private/transient/debugger/implements/protected/volatile/double/import/public
3)操作符之间的优先级（高到低）:
算术操作符(+-*/) → 比较操作符(><...) → 逻辑操作符(&& || ! ) → "="赋值符号
如果同级的运算是按从左到右次序进行,多层括号由里向外。
4)数组：var myarray= new Array(8); //创建数组，存储8个数据
1.创建的新数组是空数组，没有值，如输出，则显示undefined。
2.虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。
数组赋值：
var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
第二种方法：
var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）
注意：数组存储的数据可以是任何类型（数字、字符、布尔值等）
3.数组属性length
5）二维数组
二维数组的表示: myarray[ ][ ]
定义：
var myarr=new Array(); //先声明一维
for(var i=0;i<2;i++){ //一维长度为2
myarr[i]=new Array(); //再声明二维
for(var j=0;j<3;j++){ //二维长度为3
myarr[i][j]=i+j; // 赋值，每个数组元素的值为i+j
}
}
或者：var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3, ]]
注意: 二维数组的两个维度的索引值也是从0开始，两个维度的最后一个索引值为长度-1。
11.事件
onclick/onmouseover(鼠标经过事件）/onmouseout（鼠标移开事件）/onchange（文本框内容改变事件）
/onselect（文本框内容被选中事件）/onfocus（光标聚集）/onblur（光标离开）/onload（网页导入）/onunload（关闭网页）
1）加载页面时，触发onload事件，事件写在<body>标签内。
2）退出页面：<script type="text/javascript">
window.onunload = onunload_message;
function onunload_message(){
alert("您确定离开该网页吗？");
}
</script>
3）获取元素的值设置和获取方法为：
例：赋值：document.getElementById(“id”）.value = 1；
取值：var = document.getElementById(“id”）.value；
使用parseInt()函数可解析一个字符串,并返回一个整数
12.JavaScript内置对象
1）Date日期对象
get/setDate()
get/setFullYear() 返回/设置日期,用四位数表示
get/setYear()
get/setMonth()
get/setHours()
get/setMinutes()
get/setSeconds()
get/setTime() 返回/设置时间（毫秒为单位）
getDay() 返回星期，返回的是0-6的数字，0 表示星期天。
var d = new Date(2012, 10, 1); //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日
<script type="text/javascript">
//通过javascript的日期对象来得到当前的日期，并输出。
var date = new Date();
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//定义数组对象,给每个数组项赋值 var mynum=mydate.getDay();//返回值存储在变量mynum中 document.write(mydate.getDay());//输出getDay()获取值 document.write("今天是："+ weekday[mynum]);/
//成绩是一长窜的字符串不好处理，找规律后分割放到数组里更好操作哦
var scoreStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
scoreStr = scoreStr.split(";");
var len = scoreStr.length;
var score = 0 ;
var sum = 0;
var i = 0 ;
for (i = 0 ; i < len ; i++ )
{
score = scoreStr[i].split(":");
sum += parseInt(score[1]);
}
//从数组中将成绩撮出来，然后求和取整，并输出。
document.write(sum/len);
</script>
2）字符串对象
charAt ()
indexOf (substring,startpos)返回指定的字符串首次出现的位置
字符串分割split()
stringObject.split(separator,limit):limit分割次数
提取字符串substring()
stringObject.substring(starPos,stopPos)
如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。
提取指定数目的字符substr()
stringObject.substr(startPos,length)
3）Math对象
abs(x):绝对值 ceil()向上取整 floor（）向下取整 round()四舍五入 random()随机数
4）Array数组数组连接concat()
concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。
指定分隔符连接数组元素join() arrayObject.join(分隔符)
var myarr = new Array(3);
myarr[0] = "I";
myarr[1] = "love";
myarr[2] = "JavaScript";
document.write(myarr.join());
-----------》I,love,JavaScript
颠倒数组元素顺序reverse()
选定元素slice()
slice() 方法可从已有的数组中返回选定的元素。
语法
arrayObject.slice(start,end)
1. 可使用负值从数组的尾部选取元素。
start:-1指最后一个元素，-2倒数第二个元素
2.如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
3. String.slice() 与 Array.slice() 相似。
数组排序sort()
1.如果不指定<方法函数>，则按unicode码顺序排列。
2.如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。
<script type="text/javascript">
function sortNum(a,b) {
return a - b;
//升序，如降序，把“a - b”该成“b - a”
}
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr + "<br>");
document.write(myarr.sort(sortNum));
</script>
13.浏览器对象
1）window::window.open
2)定时器：计时器setInterval()
setInterval("clock()",1000)
或
setInterval(clock,1000)
取消定时器：
语法：
clearInterval(id_of_setInterval)
参数说明:
id_of_setInterval：由 setInterval() 返回的 ID 值。
3）History 对象
window.history.[属性|方法]
window.history.length:返回浏览器历史列表的URL的数量
window.history.back():加载history列表中的前一个URL
window.history.forward()：加载history列表中的下一个URL ==window.history.go(1);
window.history.go(number)：加载history列表中的某个具体页面
4)Location对象
location用于获取或设置窗体的URL，并且可以用于解析URL。
http://www.abc.com:8080/list.php?courseid=8&chapterid=86#mediaid118
hash:设置或者返回从#号开始的URL值 #mediaid118
host：设置或者返回主机名和当前URL的端口号 http://www.abc.com:8080
hostname:设置或者返回URL的主机名 http://www.abc.com
href:设置或者返回完整的URL http://www.abc.com:8080/list.php?courseid=8&chapterid=86#mediaid118
pathname:设置或者返回当前URL的路径部分 /list.php
port:设置或者返回当前URL的端口号 8080
protocol:设置或者返回当前URL的协议 http
search:设置或者返回从问号（？)开始的URL（查询部分）?courseid=8&chapterid=86
location对象的方法：
assign()加载新的文档
reload()重新加载当前文档
replace()用新的文档代替当前文档
5）Navigator对象
Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
appCodeName:浏览器代码名的字符串表示
appName:返回浏览器的名称
appVersion:返回浏览器的平台的版本信息
platform:返回运行浏览器的操作系统平台
userAgent:返回客户机发送服务器的user-agent头部的值
6） screen对象（ window.screen =screen)
availHeight/availWidth:窗口可以使用的屏幕高度/宽度，单位像素
colorDepth/pixelDepth:用户浏览器表示的颜色位数
height/width:屏幕的高度/宽度
==================================DOM================================
14.DOM
1)getElementsByName()方法 getElementsByName() 方法返回的是元素的数组
2)getElementsByTagName()方法 :根据标签名获取元素
3）getAttribute()方法 通过元素节点的属性名称获取属性的值。
4）setAttribute()方法
5）DOM节点的重要属性：nodeName、nodeValue、nodeType
1. 元素节点的 nodeName与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
nodeType:
元素 1
属性 2
文本 3
注释 8
文档 9
6)访问子结点的第一和最后项:node.firstChild/ lastChild
7)访问父节点parentNode
访问祖节点:
elementNode.parentNode.parentNode
8)访问兄弟节点
nodeObject.nextSibling nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
nodeObject.previousSibling previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
9）插入节点 appendChild ()
var otest = document.getElementById("my_ul");
var newnode = document.createElement("li");
var newtext = document.createTextNode("PHP");
newnode.appendChild(newtext);
otest.appendChild(newnode);
10)插入节点insertBefore(newnode,node);
var otest = document.getElementById("my_ul");
var newnode = document.createElement("li");
var newtext = document.createTextNode("PHP");
otest.insertBefore(newnode,otest.childNodes[1]);
11)删除节点 nodeObject.removeChild(node)
把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。
如果要完全删除对象，给 x 赋 null
function clearText() {
var content=document.getElementById("content");
// 在此完成该函数
var children = content.childNodes;
var len = children.length;
for ( i = len-1 ; i >=0 ; i-- )
{
content.removeChild(children[i]);
}
12)替换元素节点node.replaceChild (newnode,oldnew )
oldnode.parentNode.replaceChild(newnode,oldnode);
13)创建元素节点document.createElement(tagName)
创建文本节点document.createTextNode(data)
document.body.appendChild(element);
14)浏览器窗口可视区域大小
var w= document.documentElement. clientWidth
|| document.body.clientWidth;
var h= document.documentElement. clientHeight
|| document.body.clientHeight;
15)网页尺寸scrollHeight
var w=document.documentElement. scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement. scrollHeight
|| document.body.scrollHeight;
网页尺寸offsetHeight
offsetHeight = clientHeight + 滚动条 + 边框。
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;
网页卷去的距离与偏移量
scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。
scrollTop :设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。
offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。
offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。
div.offsetTop
overflow:auto---->滚动条
16)编程练习：表格删除、增加
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
window.onload = function(){
Highlight();
}
function addOne(obj){
var tbody = document.getElementById('table').lastChild; /tbody,tr是加到tbody中的
var tr = document.createElement('tr');
var td = document.createElement("td");
td.innerHTML = "<input type='text'/>";
tr.appendChild(td);
td = document.createElement("td");
td.innerHTML = "<input type='text'/>";
tr.appendChild(td);
td = document.createElement("td");
td.innerHTML = "<a href='javascript:;' οnclick='deleteRow(this)'>删除</a>";
tr.appendChild(td);
tbody.appendChild(tr);
Highlight();
}
function deleteRow(obj) {//调用的时候传入调用者本身
var tbody = document.getElementById('table').lastChild;
var tr = obj.parentNode.parentNode;
tbody.removeChild(tr);
}
function Highlight(){
var tbody = document.getElementById('table').lastChild;
trs = tbody.getElementsByTagName('tr');
for(var i =1;i<trs.length;i++){
trs[i].onmouseover = function(){
this.style.backgroundColor ="#f2f2f2";
}
trs[i].onmouseout = function(){
this.style.backgroundColor ="#fff";
}
}
}
</script>
</head>
<body>
<table border="1" width="50%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" οnclick="deleteRow(this)">删除</a></td>
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" οnclick="deleteRow(this)">删除</a></td>
</tr>
</table>
<input type="button" value="添加一行" οnclick="addOne()" />
</body>
</html>
=========================== end DOM====================
17）tab标签效果
<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
*{padding:0px;margin: 0px;font:12px normal "microsoft yahei";}
#tabs {width:290px;padding:5px;height:150px;margin:20px;}
#tabs ul{list-style:none;display: block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;}
#tabs ul li{background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0px 3px;border:1px solid #aaaaaa;border-bottom:none;display:inline-block;width:60px;text-align: center;}
#tabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid #fff;}
#tabs div{height:120px;line-height: 25px;border:1px solid #336699;border-top:none;padding:5px;}
.hide{display: none;}
</style>
<script type="text/javascript">
window.onload = function(){
var oTab = document.getElementById("tabs");
var oUl = oTab.getElementsByTagName("ul")[0];
var oLis = oUl.getElementsByTagName("li");
var oDivs= oTab.getElementsByTagName("div");
for(var i= 0,len = oLis.length;i<len;i++){
oLis[i].index = i;
oLis[i].onclick = function() {
for(var n= 0;n<len;n++){
oLis[n].className = "";
oDivs[n].className = "hide";
}
this.className = "on";
oDivs[this.index].className = "";
}
};
}
</script>
</head>
<body>
<div id="tabs">
<ul>
<li class="on">房产</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div>
275万购昌平邻铁三居 总价20万买一居<br>
200万内购五环三居 140万安家东三环<br>
北京首现零首付楼盘 53万购东5环50平<br>
京楼盘直降5000 中信府 公园楼王现房<br>
</div>
<div class="hide">
40平出租屋大改造 美少女的混搭小窝<br>
经典清新简欧爱家 90平老房焕发新生<br>
新中式的酷色温情 66平撞色活泼家居<br>
瓷砖就像选好老婆 卫生间烟道的设计<br>
</div>
<div class="hide">
通州豪华3居260万 二环稀缺2居250w甩<br>
西3环通透2居290万 130万2居限量抢购<br>
黄城根小学学区仅260万 121平70万抛!<br>
独家别墅280万 苏州桥2居优惠价248万<br>
</div>
</div>
</body>
</html></span>
3671
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
