学习JavaScript比较快速有效的方法是先熟悉一些基本的概念，然后经常查看网站中所使用的JavaScript源代码，积累一些有用的函数。长期不用且容易忘记的东西，
取好在计算机上留有留份。
只要熟悉了HTML，CSS。了解了DOM对象事件模型，了解了DOM对象之间的各种关系，又掌握了一些编程技巧和JavaScript语法，就可以编写出实现各种功能的代码。
现在的软件越做越大，涉及到的技术也越来越复杂，凭个人之力已经很难完整的完成一个软件，而且软件技术的更新很快，已经没有时间让你去学好每一门技术，所在
在当前这个时代，更要学会借力。把别人已经实现的东西或经验，拿来为我所用。
现在有一种说法， 程序员离开了网站，就无法编程，要学会拿来主义，将别人的东西拿为自己所用。在编写一个JavaScript程序之前，先百度一些别人写好的程序，
然后仔细分析一遍，看能不能达到预期的效果。
下面是第六章的张孝祥的内容：
第六讲，脚本编程的相关技术
兼容Ie和NS的JavaScript代码：
两种浏览器之间的一些差别：
检查浏览器的类别：
通常有两种方式来检测浏览器的类别：
第一种方法：在IE中，页面上的每个可编程元素都是document.all集合中的一项，而在NS中，页面中的每个层，都是document.layers集合的一项，所以通过检查这些专有对象的存在与否，就可以判断出浏览器的类别。使用这种方法判断的程序代码如下：
var ns=(document.layers)?true:false;
var ie=(document.all)?true:false;
function check(){
if(ns){
}
if(ie){
}
}
第二种方法是通过检测navigator对象的appName属性值来判断类别。
如下代码：
var ns=(navigator.appName=="Netscape")?true:false;
层对象的引用：
在Ie中，<div></div>与<span></span>都可定义层，<div>用于定义较大的块，<span>用于定义较小的文本行，NS同样支持这两个标记，但也引入了另外两个定义层的标记，<layer><ilayer>
<div id="layer1" style="position:absolute;left:200;top:200"></div>
在IE中和NS中引用这个层分别不同的方式是：
document.all.layer1或document.all["layer1"];
document.layers.layer1或document.layers["layer1"];
在IE中:layer1.style.left
在NS：document.layer1.left
层的显示和隐藏：
层对象的visibility属性有三个：
inherit元素的可见性与父元素的可见性相同。
visible,show,在IE中为visible,在NS中为show
hidden,hide在IE中为hidden,在NS中为hide.
如下一段代码是对其以上所学的简单应用：
<html>
<head></head>
<body οnlοad="setInterval('change()',1000)">
<div id="layer1" name="layer1" style="border-style:Double;border-color:'red';position:absolute;left:'200';top:'100';border-size:'1px'" width='100px' height='100px'>一个块</div>
<script type="text/javascript">
<!--
var bVisible=true;
var block;
var ns=(document.layers)?true:false;
var ie=(document.all)?true:false;
if(ns)
block=document.layer1;
if(ie)
block=layer1.style;
function showObject(obj){
if(ns)
obj.visibility="show";
if(ie)
obj.visibility="visible";
}
function hideObject(obj){
if(ns)
obj.visibility="hide";
if(ie)
obj.visibility="hidden";
}
function change(){
if(bVisible)
showObject(block);
else
hideObject(block);
bVisible=!bVisible;
}
//-->
</script>
</body>
</html>
层的定位
CSS-P的top,left,width,height等属性定义了层的位置和大小，在IE和NS中定义这些位置的方式完全一样，但读取这些属性的方式完全不一样，在IE中，这些属性的返回值并不是一个整数，而是在整数的后面加上px,为些，IE专门定义了pixelTop,pixelLeft,pixelWidth,pixelHeight,来分别对应CSS-P中的top,left,width,height来读取整数值，要读取一个整数值，使用如下的形式。parseInt(block.left)
浏览器客户端的宽度，在IE中是document.body.clientWidth,在NS中是window.innerWidth,
浏览器的滚动条向下滚动了多少像素，在IE中是document.body.scrollTop, 在NS中是window.pageYOffset.
第十三章 样式与定位
动态网页DHTML是静态网页，网页样式表，以及JavaScript语言基于DOM的组合效果。由于各种浏览器提供的动态网页的实现方法各不相同，因此在使用时应当注意其使用规范。
动态网页的基本任务就是根据用户的需要，动态地改变网页元素的内容或表现形式。对于JavaScript来说，动态网页的实现如下：
在网页元素中设置事件处理器，当用户对网页元素进行处理时，可自动调用网页处理器的JavaScript函数。
在JAvaScript中得到需要改变的网页元素对象。
通过网页元素的属性和方法改变网页元素的内容。（文字，按钮，文本框）或其表现方式，字体，颜色，背景色，位置，尺寸。
13.1 网页对象模型与网页元素对象
网页对象模型描述的是网页中各元素的组成结构及其相互间的关系，为JavaScript提供了得到元素对象的方法，随着网页技术的发展，产生了三种对象模型方法，从而提供了三种得到网页元素对象的方法。
HTML对象模型方法：HTML对象模型是通过其结构层次得到每一个对象，使用这种代码时，需要清楚地知道当前所处理的网页元素对象在网页结构层次中的位置，。
DHTML对象模型
DHTML对象模型方法是为JavaScript提供了得到网页对象的另外方法，使用时可以不必具体了解文档对象模型的结构层次。而直接使用网页中的元素对象，。该对象具有如下特点：网页中的每一对标记就是一个元素对象。为得到网页中的对象，可以为每一个标记赋值一个惟一的id.可通过document.getElementById方法得到所需的方法。
可以获取网页文本框中输入的内容。显示和修改网页中文字的内容。处理网页中的表格内容：
关于处理网页中的表格内容：
通过<table></table>标记的id属性可以得到表格对象，或通过innerHTML插入表格对象。
通过表格对象的insertRow方法在表格中插入行。
对过行对象的insertCell方法在行中插入表格元素。
通过表格元素对象的innerHTML方法添加表格元素中的内容。
通过行对象的deleteCell方法可以删除行中的表格对象。
通过表格对象的deleteRow方法可以删除表格中的行。
例如下面的代码所示：
<html>
<head>
<title></title>
</head>
<body style="margin:40px;">
<table id="maintb" border="1">
<tr><th width="80">姓名</th><th="250">单位</th></tr>
<tr id="row0"><td>张三</td><td>北京中软科技公司</td><td><input type="button" value="删除" οnclick="deleterow(0);"></td></tr>
<tr id="row1"><td>李四</td><td>北京中软科技公司</td><td><input type="button" value="删除" οnclick="deleterow(1);"></td></tr>
</table>
<br>
<div>
<span id="new">
姓名：<input type="text" name="newname" id="newname"><br>
单位: <input type="text" name="newcompany" id="newcompany">
<input type="button" value="新增" οnclick="addrow();">
</span></div>
<script language="javascript">
<!--
function addrow(){
var tableobj=document.getElementById("maintb");
var newrowobj=tableobj.insertRow(tableobj.rows.length);
var newnamecell=newrowobj.insertCell(newrowobj.cells.length);
var newcompanycell=newrowobj.insertCell(newrowobj.cells.length);
var newbuttoncell=newrowobj.insertCell(newrowobj.cells.length);
newnamecell.innerHTML=document.getElementById("newname").value;
newcompanycell.innerHTML=document.getElementById("newcompany").value;
newbuttoncell.innerHTML='<input type="button" value="删除" οnclick="deleterow('+(tableobj.rows.length-1)+')">';
}
function deleterow(index){
var tableobj=document.getElementById("maintb");
tableobj.deleteRow(index);
}
//-->
</script>
</body>
</html>
13.1.3 W3C对象模型方法
该对象模型将网页结构做为树状结点处理，每一个结点代表网页中的一个元素，对应于HTML中的一对标记，因此，当通过id得到某一结点的元素对象后，就可以通过结点方便的得到其相关的其他网页对象。
1.显示和修改结点内容
通过结点对象的nodeValue方法得到网页中结点处网页元素对象的内容。
通过文档对象的createElement,createTextNode,方法新建结点元素对象。
通过结点对象的appendChild方法添加新的结点
通过结点对象的replaceNode方法改变结点内容。
2.显示和修改表格内容
要使用W3C文档对象来处理表格，表格中必须包括<tbody></tbody>标记，。
通过文档对象的createElement("table")方法创建新表格对象，或通过id得到表格对象
通过文档对象的createElement("tbody"),createElement("tr"),createElement("td")新建元素对象。
通过表格元素对象的innerHTML方法添加表格元素中的内容。
通过结点的appendChild,removeChild方法删除结点对象。
13.2 动态网页样式
通过JavaScript不仅可以改变网页标签对象中的样式属性，而且可以动态改变在外部样式网页文件或内部网页样式表定义的样式，即可以在样式表中动态添加，修改或删除网页样式定义。同网页中的其他元素一样，网页样式表也是文档的一个子对象。
如下：
<head>
<link rel="stylesheet" href="a.css" type="text/css" id="outercss">
<style id="innercss">
</style>
</head>
在DOM中，可以通过styleSheet数组可以得到样式表对象，例如，上例中的网页样式表对象可用下面的方式表示：
document.styleSheets[0]
document.styleSheets[1]
不同的浏览对于添加样式定义有不同的语法规则。在IE中：
var styleobj=document.styleSheets[0];
styleobj.addRule("body","background-color:gray");
syleobj.removeRule(0);
styleobj.rules[1].style.fontsize="12px";
在Netscape中:
var styleobj=document.styleSheets[1];
styleobj.insertrule("body{background-color:gray}",0};
styleobj.deleterule(0);
styleobj.cssRules[1].style.fontsize="12px";
13.2.5 改变网页样式表
13.3网页对象动态定位
默认状态下，HTML网页中的内容都是按照网页元素的顺序出现的，在网页样式技术出现以前，网页内容大都用表格方式进行。使用样式技术后，网页元素的内容可以在网页中精确布局。
13.3.1 绝对位置与相对位置
在网页样式表定义中，属性position有两个属性值，分别为absolute绝对定位和relative相对位置。这两个值表示定位元素对象的基准点依据。
绝对位置表示当前元素对象的基准点为上一级元素对象设置的left，top位置，如果上一级元素对象没有设置left，top属性，以body对象的原点为基准。
相对位置表示当前元素对象的位置将按照网页内容顺序排版，相对移动left,top.
设置绝对位置可以不按网页元素顺序精确定位在屏幕上，设置相对位置可以使网页元素随浏览器窗口尺寸变化而相对改变。默认为相对位置。
用z-index设置网页元素顺序
如果在定位元素的过程中，两个元素重叠了，那么，设置样式中的z-index属性可以得到重叠了的两个元素的前后顺序，其属性值可以设置为auto,或者数字，当为auto时，将按时HTML中出现的顺序。后者会出现在前者的上方，当设置为数字时，数值较大的会出现在上方。
13.3.3 坐标位置及尺寸
网页中元素对象的坐标位置和尺寸，可以通过网页样式表的方法或者DOM来得到，在网页样式表中，定位网页元素对象使用left,top,right,bottom属性，设置宽度和高度使用width,height.这些网页样式属性在JavaScript中使用网页元素对象.style.网页样式属性名进行引用，通过这种方法可方便地设置网页元素对象的位置及尺寸，但是只有在网页样式表中定义了上述属性时，才可对其引用。
DOM提供了各种类型的元素对象定位及尺寸属性，这些属性基本上只用于读取，属性名中包含client的宽度和高度是真正能够显示网页内容的区域，属性名中包含offset的宽度和高度是包括了元素对象在内的所有区域，属性名中包含scroll的宽度和高度是表示的所有全部网页内容的区域。
13.3.4 控制网页元素对象的显示与隐藏
通过display,visibility,来控制元素内容的显示与隐藏。
13.4 构建跨浏览器的DHTML库
有时候，需要编写跨浏览器的JavaScript代码，需要支持以下三种不同的技术：
Netscape中特有的<layer>标签
IE中<div>标签定位的all[]类集。
由<div>标签定位的DOM兼容浏览器。
<html>
<head>
<style>
#block{
width:100px;
height:100px;
border:1px solid #000;
position:relative;
top:20px;
left:100px;
}
</style>
</head>
<body>
<div id="block">
</div>
</body>
</html><html>
<head>
<style>
div{
width:100px;
height:100px;
}
#layer1{
position:absolute;
left:30px;
top:30px;
background:#000080;
opacity:0.2;
filter:Alpha(opacity='20');
}
#layer2{
background:#FDBDD7;
}
</style>
</head>
<body>
<div id="layer1" ></div>
<div id="layer2" ></div>
</body>
</html><head></head>
<body>
<textarea cols="500" rows="500" name="textarea1" id="textarea1">
将这个文本区域设置的很大，以便出现滚动条。
</textarea>
<div id="float_icon" style="visibility:hidden;position:absolute;top:0px;left:0px"><a href="#"><img src="31.jpg"></a></div>
<script type="text/javascript">
var dirx=1;
var diry=1;
var xpos=0;
var ypos=0;
var float_icon=document.getElementById("float_icon");
float_icon.style.top=0;
document.body.all.float_icon.style.left=0;
document.body.all("float_icon").style.visibility="visible";
window.setInterval("move()",100);
function move(){
xpos+=2*dirx;
ypos+=2*diry;
float_icon.style.top=ypos;
float_icon.style.left=xpos;
if(xpos<=0||xpos+float_icon.offsetWidth>=document.body.clientWidth)
dirx=-dirx;
if(ypos<=0||ypos+float_icon.offsetHeight>=document.body.clientHeight)
diry=-diry;
}
</script>
</body>
</html>
<html>
<head>
<style>
.floatl{
font-size:13px;
color:blue;
width:150px;
height:150px;
border:1px solid #000;
float:left;
}
.floatr{
font-size:13px;
color:blue;
width:150px;
height:150px;
border:1px solid #000;
float:right;
}
</style>
</head>
<body>
<span class="floatl">
</span>
<span class"floatl">
</span>
<div style="clear:both"></div>
<span class="floatr">
</span>
<span class="floatr">
</span>
</body>
</html>
<html>
<head></head>
<body οnlοad="setInterval('change()',1000)">
<div id="layer1" name="layer1" style="border-style:Double;border-color:'red';position:absolute;left:'200';top:'100';border-size:'1px'" width='100px' height='100px'>一个块</div>
<script type="text/javascript">
<!--
var bVisible=true;
var block;
var ns=(document.layers)?true:false;
var ie=(document.all)?true:false;
if(ns)
block=document.layer1;
if(ie)
block=layer1.style;
function showObject(obj){
if(ns)
obj.visibility="show";
if(ie)
obj.visibility="visible";
}
function hideObject(obj){
if(ns)
obj.visibility="hide";
if(ie)
obj.visibility="hidden";
}
function change(){
if(bVisible)
showObject(block);
else
hideObject(block);
bVisible=!bVisible;
}
//-->
</script>
</body>
</html>
<html>
<head>
<title></title>
</head>
<body style="margin:40px;">
<table id="maintb" border="1">
<tr><th width="80">姓名</th><th="250">单位</th></tr>
<tr id="row0"><td>张三</td><td>北京中软科技公司</td><td><input type="button" value="删除" οnclick="deleterow(0);"></td></tr>
<tr id="row1"><td>李四</td><td>北京中软科技公司</td><td><input type="button" value="删除" οnclick="deleterow(1);"></td></tr>
</table>
<br>
<div>
<span id="new">
姓名：<input type="text" name="newname" id="newname"><br>
单位: <input type="text" name="newcompany" id="newcompany">
<input type="button" value="新增" οnclick="addrow();">
</span></div>
<script language="javascript">
<!--
function addrow(){
var tableobj=document.getElementById("maintb");
var newrowobj=tableobj.insertRow(tableobj.rows.length);
var newnamecell=newrowobj.insertCell(newrowobj.cells.length);
var newcompanycell=newrowobj.insertCell(newrowobj.cells.length);
var newbuttoncell=newrowobj.insertCell(newrowobj.cells.length);
newnamecell.innerHTML=document.getElementById("newname").value;
newcompanycell.innerHTML=document.getElementById("newcompany").value;
newbuttoncell.innerHTML='<input type="button" value="删除" οnclick="deleterow('+(tableobj.rows.length-1)+')">';
}
function deleterow(index){
var tableobj=document.getElementById("maintb");
tableobj.deleteRow(index);
}
//-->
</script>
</body>
</html>
<html>
<head>
<style>
#p{
width:500px;
height:500px;
border:1px solod #000;
position:relative;
left:100px;
top:100px;
background:lightgray;
}
#c{
width:50px;
height:50px;
border:1px solod #000;
position:absolute;
left:100px;
top:100px;
background:red;
}
</style>
</head>
<body>
<div id="p">
<div id="c">
</div>
</div>
<script>
var c=document.getElementById("c");
var limitx=450;
var limity=450;
var dirx=0;
var diry=0;
var cx=c.offsetLeft;
var cy=c.offsetTop;
var randomx=3;
var randomy=3;
setInterval(function(){
c.style.left=cx+(dirx?-randomx:randomx)+'px';
c.style.top=cy+(diry?-randomy:randomy)+'px';
cx=parseInt(c.style.left);
cy=parseInt(c.style.top);
if(cx>=limitx){
dirx=1;
c.style.left=limitx+'px';
randomx=Math.random()*5+1;
}
else
if(cx<=0){
dirx=0;
c.style.left=0+'px';
randomx=Math.random()*4+1;
}
if(cy<=0)
{diry=0;
c.style.top=0+'px';
randomy=Math.random()*3+1;
}
else
if(cy>=limity){
diry=1;
c.style.top=limity+'px';
randomy=Math.random()*2+1;
}
},10);
</script>
</body>
</html>
815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
