HTML_JavaScript基础入门

1、JavaScript基本语法

JavaScript的主要作用
1，客户端表单验证
2，页面动态效果
3，动态改变页面内容
什么是JavaScript
JavaScript是基于对象和事件驱动的、具有一定安全特性的脚本语言。和xhtml与css一样，JavaScript是在浏览器端解释并被执行的。
*实事上，JavaScript也可以在服务器端运行，但我们不涉及这方面的内容。
1995年网景公司第一次把JavaScript运用到互联网上。微软在IE3.0中发布了Jscript。为了统一其语法或特性，欧洲计算机制造商协会(ECMA)制定了ECMA-262标准，该标准定义了叫做ECMAScript的脚本语言，之后国际标准化组织和国际电工委员会(ISO/IEC)也采纳了ECMAScript。
*需要注意的是：ECMAScript是一种开放的、国际上广为接受的、标准的脚本语言规范。该规范只描述了以下内容：
? 语法
? 变量和数据类型
? 运算符
? 逻辑控制语句
? 关键字、保留字
? 对象
JavaScript的组成
核心语法(ECMAScript)，ECMAScript不与任何浏览器绑定，没有任何用户输入输出的方法。这实际上就为不同公司对这个标准进行扩展提供了可能性。
浏览器对象模型(BOM)，提供了独立于内容的与浏览器窗口进行交互的对象。使用BOM可以实现于html的交互。该模型以窗体为基础，将html与浏览器看成一个整体。统一进行对象化。

文档对象模型(DOM)，是html文档对象模型定义的一套标准方法，是由W3C定义的，用来访问和操纵html文档。该模型以Html文档为核心，将html对象化成一个完整的树型结构。
脚本的基本结构与脚本执行原理
<script type="text/javascript">

</script>
*需要注意的是： 在JavaScript语句外面最好是加上注释标签，这样做的好处是如果浏览器不支持JavaScript语句，则浏览器是会忽略嵌入到html文档中的JavaScript语句。
脚本的执行原理：
1，浏览器接收用户的请求，如：一个用户在浏览器的地址栏中输入要访问的页面。
2，向服务器端请求某个包含JavaScript脚本的页面，浏览器把请求消息发关到应用服务器端，等待服务器端的响应。
3，应用服务器端向浏览器发关响应消息，即把含有脚本的html文件发送到浏览器客户端，然后由浏览器从上至下逐条解析html标签和JavaScript脚本，并将页面效果呈现给用户。
使用客户端脚本的好处有以下两点：
1，含脚本的页面只下载一次，这样能减少不必要的网络通信。
2，脚本程序是由浏览器客户执行，而不是由服务器端执行的，因此能减轻服务器端的压力。
例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>输出Hello Wordl</title>
<script type="text/javascript">
document.write("使用JavaScript脚本循环输出helloworld");
for(var i=0;i<5;i++){
document.write("<h3>Hello World</h3>");
}
document.write("<h1>Hello World</h1>");
</script>
</head>
<body>
</body>
</html>
在网页中引用JavaScript的方式
1，使用<script>标签，<script>的位置并不是固定的，可以包含在<head>…</head>或<body>…</body>中的任何地方。
2，使用外部JavaScript文件，将JavaScript代码写入一个外部的文本文件中，以*.js为后缀。然后把*.js文件指定给<script>标签中的src属性。
例如：<script src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
需要注意的是：在外部文件中不能包含<script>标签。一般来说*.js文件都放在专门存放js文件的js目录中。
3，直接在html标签中，一般在html中直接使用javaScript是为了将某事件与事件处理程序连接起来。
例如：<input type="button" value="删除" onclick="deleteNote(<s:property value="id" />);" />
JavaScript核心语法
变量的声明与赋值
JavaScript是一种弱类型语言，没有明确的数据类型，也就是说，在声明时，不需要指定变量的类型，变量的类型由赋给变量的值决定。
使用关键字var声明，格式如下：
var 合法的变量名;
例：
var width=20;
var x,y,z=10; //z=10，x，y没有赋值
这里需要注意的是：
1， JavaScript是区分大小写的。
2，由于JavaScript是一种弱类型语言，所以允许不声明变量而直接使用，系统将会自动声明该变量，如：x=88;

数据类型
JavaScript提供了常用的基本数据类型
? undefined 未定义类型，当声明的变量没有初始化时，该变量的默认值是undefined。
需要注意的是：undefined就是这个类型唯一的值。
? null 空类型，是一个表示“什么都没有”的占位符，在ECMAScript中把null与undefined定义为相等。即
alert(null==undefined); //返回值为true
需要注意的是：null是一个特殊的object
? number 数值类型，可以表示任意一个有限数值，整数、浮点数、十进制、八进制、十六进制都可以。
需要注意的是：八进制和十六进制，首数字必须是0。NaN是number中的一个特殊值，表示非数。NaN是number类型的。
? string 字符串类型，被单引号或双引号括起来的文本，ECMAScript不对字符或字符串加以区别，都是字符串。
? boolean 布尔类型，只包含两个值true和false。
? object 对象类型，是一种引用类型
可以使用typeof运算符，测试某个变量属于哪种数据类型，语法为：
typeof(变量或值)
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>typeof的功能和用法演示</title>
<script type="text/javascript">
document.write("<h2>对变量或值调用typeof运算符返回值：</h2>");
var width,height=10,name="rose";
var arrlist=new Date();
document.write(typeof(width)+"<br>");
document.write(typeof(height)+"<br>");
document.write(typeof(name)+"<br>");
document.write(typeof(true)+"<br>");
document.write(typeof(null)+"<br>");
document.write(typeof(arrlist));
</script>
</head>

<body>
</body>
</html>
运算符
略
逻辑控制语句
if语句，语句结构与Java完全一样。
switch语句，语句结构与Java基本一样，只是与Jdk7之前的版本不同的是，switch可以使用字符串。
for/while/do…while语句，语句结构与Java完全一样。
中断循环语句，break：退出整个循环/continue：退出当前循环，根据控制表达式进行下一次循环。
注释
单行注释 //
多行注释 /* … */
常用的输入/输出
1，alert()方法
语法：
window.alert(sMessage) ，可简写成alert(sMessage)
参数：
sMessage :　可选项。字符串(String)。指定在对话框内要被显示的信息。如果忽略此参数，将不显示任何信息。
例子：
alert("haha");
window.alert("Dream is my reality .");
*该方法只作为提示使用，不对脚本的运行起任何时候作用。
2，confirm()方法
例子：confirm("你确信要转去xxx？");
*该方法有一个返回值，返回值是为用户的选择。
if(confirm("Are you sure?")) {
alert("haha");
}
3，prompt()方法
例子：var name=prompt("请输入您的名字","");
*该方法有一个返回值，该返回是用户的输入，该方法的两个参中，前一个是对话框中的提示，后一个是默认值，一般为空。

语法约定
1，大小写的区分
JavaScript关键字，全部小写
内置对象，以大写字母开头
DOM对象全部小写，其方法为多个单词时为大小写混合，通常第一个字母是小写，之后首字母大写，如：getElementById()
2，变量、对象和函数的名称
声明变量、对象或函数时，其名称可以包括大写字母、小写字母、数字、下划线和美元符号$，但必须以字母、下划线或$开头。
3，分号，ECMAScript允许开发者自行决定是否以分号结束一行代码。
程序调试
调试工具
alert()
2、函数和Window对象
函数
JavaScript中的函数类似于Java中的方法，但是不用定义函数属于哪个类，也不用使用“对象名.方法名()”的方式调用函数。可以直接调用函数名称来使用函数。JavaScript函数有如下特点：
1，是完成特定功能并可以随时随地运行的语句。
2，可以在一个或多个页面中被多次调用。
3，完成相对独立的部分功能，充分独立、任务单一。
4，可以接收参数也可以返回值。
JavaScript的函数有两种：JavaScript自带的系统函数；自定义函数。
常用系统函数
1，parseInt()/parseFloat()函数，解析一个字符串，并返回一个整数。
运行过程详解：首先检查依次检查字符串，是否是有效数字，如果不是则返回NaN，并终止方法；如果是则进行转换。
例子：
<script type="text/javascript">
var num1=parseInt("78.89");
var num2=parseInt("456color");
var num3=parseInt("ta36");
document.writeln(num1+","+num2+","+num3);
</script>
var num1=parseFloat("78.89");
var num2=parseFloat("456color");
var num3=parseFloat("ta36");
document.write(num1+","+num2+","+num3);
2，isNaN()函数用检查其参数是否是非数字。
var flag1=isNaN("12.5");
var flag2=isNaN("12.5s");
var flag3=isNaN("45.34.45");
document.write(flag1+","+flag2+","+flag3);
自定义函数
1，创建函数
function 函数名(参数1,参数2){
JavaScript语句;
}
*函数中的参数是可选的。
*当函数需要返回值的时候，需要用return语句从函数中带出返回值。
2，调用函数
函数的调用一般和表单元素的事件接合使用，调用格式一般为：事件名=”函数名”;
3，匿名函数——没有函数名的函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var tempFunction=function(count){
for(var i=0;i<count;i++){
document.write("hello world<br/>");
}
}
</script>
</head>
<body>
<form>
<input type="button" value="点一下" onclick="tempFunction(9)" />
</form>
</body>
</html>
变量的作用域
全局变量与局部变量
全局变量是在所有函数之外声明的变量，其作用范围是该变量定义后的所有语句。
局部变量是在函数内部声明的变量，只有在该函数中且位于该变量之后的代码可以使用这个变量。
Window对象
常用属性
screen，有关客户端的屏幕和显示性能的信息。
history，有关客户访问过的URL的信息。
Location，有关当前URL的信息。
常用方法
prompt
alert
confirm
close，关闭浏览器窗口
Open，打开一个新的浏览器窗口，加载给定URL所指定的文档
setTimeout，在指定的毫秒数后调用函数或计算机表达式
setInterval，按照指定的周期(以毫秒计)来调用函数或表达式
方法的使用是：window.方法名();
*由于window对象表示当前窗口对象，是一个全局对象，所以也可以省略window，比如前面学的alert实现应该写成window.alert();
如：
window.open("url","窗口名称","窗口特征");
window.close();
常用事件
onload，一个页面或一幅图像完成加载事件。
onmouseover，鼠标移到某元素之上事件。
onclick，单击某个对象。
onkeydown，某个键盘按键被按下。
onchange，域的内容被改变。
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>window对象演示例子</title>
<script type="text/javascript">
/*弹出窗口*/
function open_adv(){
window.open("adv.html");
}
/*弹出固定大小窗口，并且无菜单栏等*/
function open_fix_adv(){
window.open("adv.html","","height=380,width=320,toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resizable=0");
}
/*全屏显示*/
function fullscreen(){
window.open("plan.html","","fullscreen=yes");
}
/*弹出确认消息框*/
function confirm_msg(){
if(confirm("你相信自己是最棒的吗？")){
alert("有信心必定会赢，没信心一定会输！");
}
}
/*关闭窗口*/
function close_plan(){
window.close();
}

</script>
</head>

<body>
<form action="" method="post">
<p>
<input name="open1" type="button" value="弹出窗口" onclick="open_adv()" /></p>
<p><input name="open2" type="button" value="弹出固定大小窗口，且无菜单栏等" onclick="open_fix_adv()"/></p>
<p><input name="full" type="button" value="全屏显示" onclick="fullscreen()"/></p>
<p><input name="con" type="button" value="打开确认窗口" onclick="confirm_msg()"/></p>
<p><input name="c" type="button" value="关闭窗口" onclick="close_plan()"/></p>
</form>
</body>
</html>
Date对象
Date对象是JavaScript内置的对象。创建方式如下：
var date1=new Date(); //没有参数默认返回当前日期
var date2=new Date("July 15,2013,16:34:28");
document.writeln(date1);
document.write(date2);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>时钟特效</title>
<script type="text/javascript">

function disptime(){
var today = new Date(); //获得当前时间
var hh = today.getHours(); //获得小时、分钟、秒
var mm = today.getMinutes();
var ss = today.getSeconds();
/*设置div的内容为当前时间*/
document.getElementById("myclock").innerHTML="<h1>现在是："+hh+":"+mm+":"+ss+"<h1>";
}
</script>
</head>

<body onload="disptime()">
<div id="myclock"></div>
</body>
</html>
定时函数
SetTimeout()函数在指定的毫秒数后调用函数或计算机表达式。只调用一次。
setInterval()函数可按指定的周期(以毫秒计)来调用函数或计算表达式。该方法运行后会不停的调用函数，直到窗口关闭或被其他方法强制停止。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>时钟特效</title>
<script type="text/javascript">

function disptime(){
var today = new Date(); //获得当前时间
var hh = today.getHours(); //获得小时、分钟、秒
var mm = today.getMinutes();
var ss = today.getSeconds();
/*设置div的内容为当前时间*/
document.getElementById("myclock").innerHTML="<h1>现在是："+hh+":"+mm+":"+ss+"<h1>";
/*
使用setTimeout在函数disptime()体内再次调用setTimeout
设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟显示
var myTime=setTimeout("disptime()",1000);
*/
}
/*使用setInterval()每间隔指定毫秒后调用disptime()*/
var myTime = setInterval("disptime()",1000);

</script>
</head>

<body>
<div id="myclock"></div>
</body>
</html>
*需要注意的是：setTimeout()只执行函数一次，如果要多次调用函数，需要使用setInterval()或者让被调用的函数再次调用setTimeout()；
JavaScript时间函数的进一步解析
setTimeout("调用方法","延时调用") 延时调用只调用方法一次，是不能重复的。
setInterval("调用方法","间隔调用") 间隔调用重复调用方法。

延时调用的时候，在方法内部设置setTimeout方法
function setTimer(){
var today=new Date();
var hour=today.getHours();
var minute=today.getMinutes();
var second=today.getSeconds();
var time=hour+":"+minute+":"+second;
document.getElementById("myTime").innerHTML="当前时间是："+time; //往某个对象中写入字符符
setTimeout("setTimer()",1000);
}

间隔调用的时候，在方法的外部设置setInterval方法
function setTimer(){
var today=new Date();
var hour=today.getHours();
var minute=today.getMinutes();
var second=today.getSeconds();
var time=hour+":"+minute+":"+second;
document.getElementById("myTime").innerHTML="当前时间是："+time; //往某个对象中写入字符符
}
setInterval("setTimer()",1000);

完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function setTimer(){
var today=new Date();
var hour=today.getHours();
var minute=today.getMinutes();
var second=today.getSeconds();
var time=hour+":"+minute+":"+second;
document.getElementById("myTime").innerHTML="当前时间是："+time; //往某个对象中写入字符符
//setTimeout("setTimer()",1000);
}
var timeId=setInterval("setTimer()",1000);
</script>
</head>

<body onload="setTimer()">
<div id="myTime"></div>
</body>

</html>

关于时间函数的补充内容
时间停止与重新开启
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function time(){
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
if(s<10){
s="0"+s;
}
document.getElementById("timer").innerHTML=h+":"+m+":"+s;
//setTimeout("time()",1000);
}
var stop=setInterval("time()",100);
function stopfun(obj){
if(obj.value=="时间停止"){
clearInterval(stop);
obj.value="时间启动";
}else{
obj.value="时间停止"
stop=setInterval("time()",1000);
}

}
</script>
</head>

<body>
<div id="timer" ></div>
<input type="button" value="时间停止" onclick="stopfun(this)" />
</body>
</html>

history对象与location对象
history
back() 后退
forward() 前进
go(n) n小于0时，后退；n大于0是前进；n等于0是刷新当前页面。
一般用法：history.back();
location
href属性转向，相当于<a>中的href
reload() 当前页面重新刷新，相当F5
一般用法：location.reload()
location.href="网页地址";

关于javascript:的说明：
javascript: javascript的伪协议

<input type="button" value="xxx" onclick="test1()" />
<a href="xx.html">....</a>
<a href="javascript:test()" >...</a>

Document的属性
URL 返回当前页面的地址
一般用法：document.write(document.URL);
返回的是：file://C:\Documents and Settings\Administrator\桌面\test2.html
标准的返回应该是：http://localhost:8080/MyProject/index.jsp
http://www.sohu.com/Live/list.jsp
原因：我们的测试环境没有使用服务器/浏览器的机制，而是直接在客户机上运行。所以效果有所差异。
referrer 返回当前页面是从哪个页面定位过来的。常用于网络广告投放的站点认证。

Document的方法
getElementById找标签中id属性的属性值
document.getElementById("mydiv")<div id="mydiv"></div>
getElementsByName找标签中name属性的属性值，可能是多个，返回值是一个数组。
document.getElemnetByName("ipnut2")<input type="radio" name="input2" />
<input type="radio" name="input2" />
getElementsByTagName找标签中的标签名。
document.getElementsByTagName("img")
例子：
function all_input(){
var aInput=document.getElementsByTagName("input");\\获取标签名为input的所有的标签
var sStr=""; \\准备变量备用
for(var i=0;i<aInput.length;i++){ \\循环
sStr+=aInput[i].value+"<br />";\\拼接字符串
}
document.getElementById("s").innerHTML=sStr; \\打印到页面上
}
*aInput是一个数组 aInput[0]是数组中的第一个元素，也就是页面中第一个input标签对象

显示与隐藏
两个CSS中的重要的属性：visibility="visible"|"hidden" display="none"|"block"|"inline"
visibility属性，真正的显示或隐藏，如果设成hidden则不显示，但依然占位。(不显示时，也无法接收事件了)
display属性，主要的作用是改变某个标签的块级或行级。辅助作用可以让某个标签消失。如果设成none，则不显示，也不占位。

style属性，JavaScript用来修改CSS中的值的属性，例子：
var o=document.getElemnetById("ab");
o.style.display="none";
语法：
javaScript对象.style.CSS="";

树型菜单的完整的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>制作树形菜单</title>
<style type="text/css">
body{font-size:13px;
line-height:20px;
}
a{font-size: 13px;
color: #000000;
text-decoration: none;
}
a:hover{font-size:13px;
color: #ff0000;
}
img {
vertical-align: middle;
border:0;
}
.no_circle{list-style:none;
display:none;
}
</style>
<script type="text/javascript">
function show(d1){
if(document.getElementById(d1).style.display=='block'){
document.getElementById(d1).style.display='none'; //触动的层如果处于显示状态，即隐藏
}
else{
document.getElementById(d1).style.display='block'; //触动的层如果处于隐藏状态，即显示
}
}
</script>
</head>

<body>
<b><img src="images/fold.gif">树形菜单：</b>
<ul><a href="javascript:onclick=show('art') "><img src="images/fclose.gif">文学艺术</a></ul>
<ul id="art" class="no_circle">
<li><img src="images/doc.gif" >先锋写作</li>
<li> <img src="images/doc.gif" >小说散文</li>
<li><img src="images/doc.gif" >诗风词韵</li>
</ul>
<ul><a href="javascript:onclick=show('photo') "><img src="images/fclose.gif">贴图专区</a></ul>
<ul id="photo" class="no_circle">
<li><img src="images/doc.gif" >真我风采</li>
<li> <img src="images/doc.gif" >视频贴图</li>
<li><img src="images/doc.gif" >行行摄摄</li>
<li><img src="images/doc.gif" >Flash贴图</li>
</ul>
<ul><a href="javascript:onclick=show('home') "><img src="images/fclose.gif">房产论坛</a></ul>
<ul id="home" class="no_circle">
<li><img src="images/doc.gif" >我要买房</li>
<li> <img src="images/doc.gif" >楼市话题</li>
<li><img src="images/doc.gif" >我要卖房</li>
<li><img src="images/doc.gif" >租房心语</li>
<li><img src="images/doc.gif" >二手市场</li>
</ul>
<ul><a href="javascript:onclick=show('game') "><img src="images/fclose.gif">娱乐八卦</a></ul>
<ul id="game" class="no_circle">
<li><img src="images/doc.gif" >红楼一梦</li>
<li> <img src="images/doc.gif" >笑话论坛</li>
<li><img src="images/doc.gif" >休闲生活</li>
<li><img src="images/doc.gif" >大话春秋</li>
</ul>
</body>
</html>

路径问题：
绝对路径不要用。
相对路径

DOM：对Html文档对象进行操作的一组方法。有时把被DOM操作的Html称为DHTML。

文档的对象化
<html>
<head>
<title></title>
</head>
</html>

nodeType属性：规定节点的类型。*nodeType是只读的。
最重要的节点类型是：
元素类型节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
其中Node.ELEMENT_NODE的值就是1

W3C规定了三种DOM模型：Core DOM、HTML DOM、XML DOM

DOM中的层次结构
parentNode 当前节点的父节点
firstChild 当前节点的第一个子节点
lastChild 当前节点的最后一个子节点

对节点的操作：
1，createElement(标签名); 创建一个元素节点
2，createTextNode(文本); 创建一个文本节点
3，appendChild(对象名); 1在某个对象后追加一个对象
4，insertBefore/insertAfter(新对象名,旧对象名); 在旧对象前面插入一个新对象
5，cloneNode(boolean); 把一个对象克隆到另一个位置，参数为真是深克隆，参数为假是浅克隆。
6，removeChild(对象名); 移开(删除)一个对象
*document.body.removeChild(dNode);
7，replaceChild(新对象名,旧对象名) 把一新节点替换旧的节点
*document.body指的是<body>标签的对象
*需要注意的是：
1，用createElement方法和createTextNode方法生成的对象，默认是处于游离状态的，并不包含在文档内。
2，appendChild方法是把某对象挂到文档的某个对象上(是为该对象的子对象)。
3，标签名与对象名是不一样的，标签名指的是标签的名字，如<img>标签标签名为"img"。对象名是用户声明的。

访问和设置属性
Core DOM
var a1=document.getElemnetById("a");
a1.setAttribute("href","test.html");
Html DOM
var a1=document.getElemnetById("a");
a1.href="test.html";

表格的相关操作
1，表格对象
属性：rows[] 返回包含表格中所有行的一个数组
方法：
tableObject.insertRow(index)
*tableObject一般是通过document.getElementById()方法获取的表格对象。
*新行将被插入index所在行之前。若index等于表中的行数，则新行将被附加到表的末尾。
*若参数index小于0或大于等于表中的行数，该方法将抛出异常。
tablerowObject.deleteCell(index)
*参数index 是要删除的表元在行中的位置。
例子：
document.getElementById('myTable').insertRow(0)//myTable是一个<table>的id。
var row=document.getElementById(rowId).rowIndex; //删除行所在表格中的位置，其中参数rowId是行的id。
document.getElementById("myTable").deleteRow(row);

2，表格行对象(tableRow)
属性：
cells[] 返回行中的所有的列对象(单元格)
rowIndex 返回行的位置
方法：
tablerowObject.insertCell(index)
*新单元格将被插入当前位于index指定位置之前。如果index等于行中的单元格数，则新单元格被附加在行的末尾。
tablerowObject.deleteCell(index)
*参数 index 是要删除的表元在行中的位置。

3，单元格对象(tableCell)
属性：
cellIndex
innerHTML
align
className

4，常用操作
获取表格中的总行数: var trCnt = table.rows.length; (table为Id )
获取每行中的总列数：
for (var i=0; i<trCnt; i++)
table.rows[i].cells.length;

常用代码总结：
1，document.getElementById("fruit").getAttribute("src");//获取某个标签的src属性的属性值
2,
var favor=document.getElementsByName("enjoy"); //获取多个标签对象
for(var i=0;i<favor.length;i++){ //遍历对象
if(favor[i].checked==true){
"\n"+favor[i].getAttribute("value");//获取每个标签中的value属性的属性值
}
}
3，
var imgs=document.getElementsByTagName("img"); //获取文档中所有的<img>标签对象
imgs[0].setAttribute("src","images/grape.jpg"); //重新设置其中的第一个标签的src的值
4，uRow.setAttribute("style","font-weight:bold;text-align:center;background-color: #cccccc;");//对某个对象的style属性进行设置

对节点的基本操作例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//初始化
function test(){
var node0=document.createElement("div");
var node1=document.createElement("a");
var nodeh3=document.createElement("h3");
var node2=document.createTextNode("我是一个a标签");
nodeh3.appendChild(node2);//向a标签中添加文本
node1.setAttribute("href","test.html");
node1.setAttribute("id","a1");
node1.appendChild(nodeh3);
node0.appendChild(node1);
var node3=document.createElement("p");
node3.setAttribute("id","p1");

node3.innerHTML="我是一个p标签";//第2种向标签中添加内容的方法
//第1种向标签中添加内容的方法
//var textNode1=document.createTextNode("我是p标签中的内容");
//node3.appendChild(textNode1);
document.body.appendChild(node1);
document.body.appendChild(node3);
}
//删除一个节点
function test1(){
var node0=document.getElementById("p1");
node0.parentNode.removeChild(node0);
}
//克隆一个节点
function test2(){
var node0=document.getElementById("a1");
var node1=node0.cloneNode(true);
var node2=document.createElement("div");
node2.setAttribute("id","div2");
node2.appendChild(node1);
document.body.appendChild(node2);
}
</script>

</head>

<body onload="test()">
<br/>
<input type="button" value="删除<p>" onclick="test1()" />
<input type="button" value="复制<a>" onclick="test2()" />
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>操作表格</title>
<style type="text/css">
body{
font-size:13px;
line-height:25px;
}
table{
border-top: 1px solid #333;
border-left: 1px solid #333;
width:300px;
}
td{
border-right: 1px solid #333;
border-bottom: 1px solid #333;
}
.center{
text-align:center;
}

</style>
<script type="text/javascript">
function addRow(){
var fRow=document.getElementById("row3");
var newRow=document.createElement("tr") ; //创建行节点
var col1=document.createElement("td"); //创建单元格节点
col1.innerHTML="幸福从天而降"; //为单元格添加文本
var col2=document.createElement("td");
col2.innerHTML="¥18.50";
col2.setAttribute("align","center");
newRow.appendChild(col1); //把单元格添加到行节点中
newRow.appendChild(col2);
document.getElementById("row3").parentNode.insertBefore(newRow,fRow); //把行节点添加到表格末尾
}
function updateRow(){
var uRow=document.getElementById("row1");
//标题行设置为字体加粗、文本居中显示，背景颜色为灰色
uRow.setAttribute("style","font-weight:bold;text-align:center;background-color: #cccccc;");
}

function delRow(){
var dRow=document.getElementById("row2"); //访问被删除的行
dRow.parentNode.removeChild(dRow); //删除行
}
function copyRow(){
var oldRow=document.getElementById("row3"); //访问复制的行
var newRow=oldRow.cloneNode(true); //复制指定的行及子节点
document.getElementById("myTable").appendChild(newRow); //在指定节点的末尾添加行
}
</script>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" id="myTable">
<tr id="row1">
<td>书名</td>
<td>价格</td>
</tr>
<tr id="row2">
<td>看得见风景的房间</td>
<td class="center">¥30.00</td>
</tr>
<tr id="row3">
<td>60个瞬间</td>
<td class="center">¥32.00</td>
</tr>
</table>
<input name="b1" type="button" value="增加一行" onclick="addRow()" />
<input name="b2" type="button" value="删除第2行" onclick="delRow()"/>
<input name="b3" type="button" value="修改标题样式" onclick="updateRow()"/>
<input name="b4" type="button" value="复制最后一行" onclick="copyRow()" />

</body>
</html>

获取和设置CSS样式的方法：
1，标签对象.style.CSS样式属性名只能获取和设置行内的CSS样式。
2，标签对象.className.CSS类名
*需要注意的是：style和className是同级别的。

复习：CSS有几种写法：
1，行内的CSS。<input type="text" value="新增" style="xxx:12px;xxx:xxx" />
2，内部CSS
<style>
...
</style>
3，外部样式文件:xxx.css

获取类样式的方法
currentStyle 是微软的技术，也就是说只被IE系列浏览器支持。
getComputedStyle() DOM的技术，最早是firefox实现的，目前大多数浏览器都支持(包括新一代的IE也支持)。
用法：
标签对象.currentStyle.样式//currentStyle与style的用法是基本一样的。
document.defaultView.getComputedStyle(标签对象,null).样式
*第二个参数null，指的是某一个伪类，如果没有则为null。

测试是IE还是firefox的例子：
if(adverObject.currentStyle){ //测试一下curentStyle属性是否有值，如果有则是IE，如果是undefined则是firefox
adverTop=parseInt(adverObject.currentStyle.top);//采用IE中独有的方式进行计算
adverLeft=parseInt(adverObject.currentStyle.left);
}
else{
adverTop=parseInt(document.defaultView.getComputedStyle(adverObject,null).top);//采用DOM的方式进行计算
adverLeft=parseInt(document.defaultView.getComputedStyle(adverObject,null).left);
}
*需要注意的是：当if中小括号中的值为null,undefined,0的时候，与为false一样。

秒客网

HTML_JavaScript基础入门

相关文章