`

javascript 读书笔记

阅读更多
1、 DOM(document object model)文档对象模型
脚本编程经常会被误解为Web上的某种脚步编程,实际上,纯粹的DOM脚本编程只是包括W3C DOM规范中所涵盖的特性和方法。
也算是说,不包括任何专用的浏览器特性。
2、 本书网站
http://friendsofed.com
http://advanceddomscripting.com
3、 检测document.body
当然,也不必每次都对将要使用的函数和方法进行检测,否则你要疯掉的。只需在脚本开始处对你打算使用的所有对象和方法进行一
次检测,而在万一遇到所需功能不可用时退出即可。
if (document.body && document.body.getElementsByTagName) {
// 使用document.body.getElementsByTagName的代码
}
4、 搜索引擎的爬虫(pot)和蜘蛛(spider)不支持JavaScript的程序
不要使用JavaScript生成内容了,Google的搜索爬虫程序能够下载网页及其中的CSS和JavaScript文件的传闻,但不会执行
JavaScript代码。所以对于公共网页中要给所有人看的重要内容,你不要完全依赖JavaScript来生成。
5、 为重用命名空间而进行规划
JavaScript不会抗议你多次声明同一个函数,它只是使用最后声明的版本。
6、 通过可重用的对象把事情简单化
搜索“Top 10 JavaScript”这几个关键词,将会得到一串大多数开发者赖以生存的常用函数。
7、 Prototype JavaScript框架(http://prototypejs.org)推而广之的$(),它可以为你节省很多输入工作量。而本质上看,$()只是
document.getElementById()的替代函数。
8、 包围函数(function(){})();
包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后的一对括号立即执行返回的未命名函数
例:(function(arg){alert(arg);})('This will show in the alert box');
例:(function(){
//代码开始处的命名空间也被包装在了一个if语句中,以便在多个文件中使用相同的命名空间。
if(!window.ADS){
window['ADS']={}}

function isCompatible(other){};
window['ADS']['isCompatible'] = isCompatible;

function $(){};
window['ADS']['$'] = $;

function addEvent(node,type,listener) {};
window['ADS']['addEvent'] = addEvent;

function removeEvent(node,type,listener) {};
window['ADS']['removeEvent'] = removeEvent;

function getElementsByClassName(className, tag, parent){ };
window['ADS']['getElementsByClassName'] = getElementsByClassName;

function toggleDisplay(node,value) { };
window['ADS']['toggleDisplay'] = toggleDisplay;

function insertAfter(node, referenceNode) { };
window['ADS']['insertAfter'] = insertAfter;

function removeChildren(parent) { };
window['ADS']['removeChildren'] = removeChildren;

function prependChild(parent, newChild) { };
window['ADS']['prependChild'] = prependChild;

})();
9、 一定要自己动手写代码,不要所见即所得(What you see is what you get)
10、JavaScript语法中的常见陷阱
a、区分大小写
b、单引号和双引号在JavaScript中没有大的区别
XHTML规范(http://www.w3.org/TR/xhtml1)要求所有XHTML属性值都必须使用双引号括起来。
对于inline的单引号必须转义:
var html = '<p class="a">Don\'t forget escape single quotes!</P>';
c、换行
使用字符串连接操作符(+)并将每一行用引号括起来。
var html = 'abc'
+ 'def'
+ 'ghi';//这是正确的方式
var html = 'abc\
def\
ghi';//这是不合适的方式,结果字符串的标签之间不会存在空白。
d、可选的分号和花括号
alert('hello')
alert('world')
alert('!')//这样的代码也会被解释为:
alert('hello');
alert('world');
alert('!');

if(a==b)
alert('true')
alert('false')//这样的代码会被解释为:
if(a==b){
alert('true');
}
alert('false');

但是编程时,强烈建议你无论什么情况下都要使用分号和花括号。
e、 重载
JavaScript中实际并不存在真正的重载而是更新替换比较合适。
如:function myFunction(a,b){alert(a+b);}
function myFunction(a){alert(a);}
//在真正支持重载的语言中,调用下面的函数:myFunction(1);将提示“1”,而调用下面这个myFunction(1,2);则会提示“3”
然而,如果在JavaScript中尝试以上过程,那么第二个声明的myFunction()将会替换第一个,因而接下来的两次调用都将执
行同一个函数,并且都提示“1”。
在JavaScript中,脚本在执行时不会顾及函数定义时的参数,而是直接使用在作用域链中最后定义的那个函数。
这意味着,相同名称的函数永远只存在一个实例。
//第一章 JavaScript基础
1、 JavaScript是一种脚本语言
它采用小程序段的方式实现编程,其基本结构形式与C,C++,VB,DELPHI十分的类似。但他不像这些语言一样,需要先编译,而是在程序
逐行地解释。JavaScript是一种基于对象的语言。它是动态的,无须经过web服务程序,它对用户行为的响应,是以事件驱动的方式
进行的。所谓事件驱动,就是指在网页中执行了某种操作所产生的动作,比如按下鼠标、移动窗口、选择菜单等都可以视为事件,当
事件发生后,会引起相应的事件响应。JavaScript是一种安全的语言,他不允许访问本地硬盘,并且不能将数据存入到服务器上,不
允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互,从而有效地防止服务器被攻击。
JavaScript只依赖浏览器,与操作系统无关,从而实现了“只编写一次,到处运行”的梦想。
2、 基本数据类型
数值型(整数和实数)、字符串型、布尔型和空值
JavaScript采用弱类型的形式,所以在使用的时候不必先声明,而是在使用或赋值的时候确定其数据类型的。当然也可以先声明该
数据类型,也就是在赋值时主动说明其数据类型。
3、 JavaScript中可以使用var声明变量
如:var x=“this is x”;用var定义的最大好处就是能及时发现代码中的错误,因为JavaScript是采用动态编译的,而动态编译时
不易发现代码中的错误,特别是变量的命名方面。
4、 调用外部脚本文件(值的提倡的)
<html>
<body>
<script language="javascript" src="hello.js">
</script>
</body>
</html>
5、 开发环境  IDE(集成开发环境)
jseclipse插件可以在http://www.eclipse.org在线安装和升级,也可以下载.jar文件后放置在Eclipse的features和plugins目录中。
Aptana Studio 是基于Eclipse的JavaScript集成开发环境,既可以独立安装,也可以选择安装成Eclipse的插件。可以在Apatana的
官方网站http://www.aptana.com 下载。就功能来说,apatana studio是最全面的。
6、 注释行 // 或/*     */
//第二章 JavaScript语法
1、 数据类型之间的转换
Number("123")和String(123)
JavaScript中字符串相连用“+”
如: 
<script language="javascript">
var varnumber = "123"+Number("456");
document.writeln(varnumber);
</script>
2、 访问简单数据类型必须在脚本中为变量赋值,然后才能在表达式中使用。如果使用未赋值的变量的值将为NaN 或 undefined
中石油反馈错误
1、信息编辑的时候,有特殊字符或格式的,(逗号改动一下就会发送失败)
2、信息发布和编辑的时候,编辑器没有滚动条。
3、编辑器的字体、大小等功能需要添加常用的。
3、JavaScript函数
1、一般把函数放到<head></head>块中,确保先定义后使用。
2、把<script language="javascript"></script>放到<body></body>中,程序会自动执行。
4、条件与循环语句
1、if(a==b)
with(document)
{
write("国庆节快乐");
}else
with(document)
{
write("国庆节快乐");
}
2、<script language="javascript">
switch(x)
{
case "今天是星期一":
document.write("今天是星期一");
break;
case "今天是星期二":
document.write("今天是星期二");
break;
case "今天是星期三":
document.write("今天是星期三");
break;
case "今天是星期四":
document.write("今天是星期四");
break;
case "今天是星期五":
document.write("今天是星期五");
break;
case "今天是星期六":
document.write("今天是星期六");
break;
case "今天是星期天":
document.write("今天是星期天");
break;
default:
with(document)
{
write("不确定的日子");
}
}
3、JavaScript支持三种循环语句
a、while b、do while c、for 此外还提供了label、break、continue语句用于控制流程
break语句可以终止循环;continue语句可以立即终止当前循环并进行下一循环;label语句用于声明break和continue语句所需的标记
//第三章 事件与对象
1、事件句柄:可视为对象的一个属性。事件句柄的名称由on事件名构成,比如Click事件,其对应的事件句柄就是OnClick事件。
事件:根据触发器的不同,事件可以分为鼠标事件、键盘事件、浏览器事件。
事件处理函数的指定方法为:事件句柄=事件处理函数或语句集
网页装载时,将触发Load事件,当装载另一网页时,会触发Unload事件。可以利用这个机会执行一些和退出相关的动作。
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>无标题文档</title>
<head>
<script language="javascript">
<!--
function myMethod1()
{
alert("1");
}
function myMethod2()
{
alert("2"); }
function myMethod3()
{
alert("3");
}
function method1()
{
document.getElementById("buttion2").onclick = myMethod1;
document.getElementById("buttion2").onclick = myMethod2;
document.getElementById("buttion2").onclick = myMethod3;
}
-->
</script>
</head>

<body>
<form >
<input type="buttion" id="buttion1" value="buttion1" onclick="myMethod1();myMethod2();myMethod3();" />
<input type="buttion" id="buttion2" value="buttion2" onclick="method1()" />
<input type="buttion" id="buttion3" value="buttion3"  />
</form>
<script language="javascript">
var btn3=document.getElementById("buttion3");
if(window.ActiveXObject)
{
btn3.attachEvent("onclick",myMethod1);
btn3.attachEvent("onclick",myMethod2);
btn3.attachEvent("onclick",myMethod3);
}
else
{
btn3.addEventListener("click",myMethod1,false);
btn3.addEventListener("click",myMethod2,false);
btn3.addEventListener("click",myMethod3,false);
}
</script>
</body>
</html>
本章小技巧:通过window.ActiveXObject属性是否存在来判断浏览器类型,只有IE浏览器支持这个属性。
3、对象
JavaScript是基于对象的,而不是面向对象的。之所以说它是一门基于对象的语言,主要是因为它没有提供抽象、继承、重载等
有关面向对象语言的许多功能,而是把其他语言所创建的复杂对象统一起来了,从而形成了强大的对象系统。
4、JavaScript内置的浏览器对象
window                                                          Navigator

Document                          History               Location

Anchor Applet Area Form Image Link
window对象表示浏览器窗口,具体代表HTML元素的属性
frames数组是window对象的属性,用来代表窗口中的所有的帧
Location属性代表当前URL指向的位置
Document属性指与窗口相关联的对象。包括所有显示对象的属性。Document对象的forms数组表示文档中所有的form对象。
form对象提供了通过elements数组对特定form中定义的各个元素的访问。
如:假设HTML文档定义了三个表单,则forms数组包含对应三个forms对象,其中第二个form对象拥有9个元素,其中第5个元素
是个单选按钮,则可以用下列语句访问这个单选按钮的名称。
document.forms[1].element[4].name
//也可以写成
window.document.forms[1].element[4].name
history属性指包含在特定窗口中访问过的URL清单
Navigator对象说明当前正在使用的浏览器的配置情况。AppName属性,获取浏览器的名称。。。。。
document的属性

5、对象方法劫持(JavaScript Function Hook)
所谓对象方法劫持:通过替换JavaScript对象方法的实现来达到劫持这个方法调用的目的
RIA:rich internet application
第四章 常见对象
1、JavaScript数组
Array对象的属性:
1、constructor(基于类的对象没有该属性)
<script language="javascript">
var classmate = new String("zhe shi yi ge xin string");
if (classmate.constructor == string){
with(document)
{
write(classmate);
}
}
</script>
2、length属性
array1=(1,2,3,4,5,6,7,8);
//定义一个新数组
array2=new Array[4];//数组长度与原数组不同也没有关系,会自动调整
array2=array1;
3、prototype属性
//所有的JavaScript内置对象都有一个只读的prototype属性。可以为原型添加功能,不可向对象赋予另外一个原型;但可以像用户自定义的
对象赋予新的原型。
function array_max()
{
....
....
}
Array.prototype.max = array_max;
4、其他对象方法 如:concat,join,pop,push,reverse,shift,slice,sort,splice,toLocaleString,toString,unshift,valueOf
5、关联数组是由无序的键和值组成的。
var someObj = new Array();
someObj.width = 5;
someObj.length = 1;
//可以使用两种方式:点运算符和数组访问语法
document.write(someObj.width+"<br>");
document.write(someObj["width"]+"<br>");
6、数组应用----记忆脚步动作
eval()作用是把传入的字符串所代表的动作予以执行。
eval(actions[actions.length-2]+"();");
redoAction()方法是content帧中定义的JavaScript方法,其作用是执行动作数组中最后一个动作(小标为动作数组长度-2的动作,注意下标为
动作数组长度-1的动作时当前动作)
top["content"].redoAction();
7、数学对象Math是一个固有对象,与array对象不同,math对象不能用new运算符创建。方法。属性直接可用,无需调用。
Math.PI 圆周率常数
数学对象              执行结果           意义           
Math.abs(-8)          8                  绝对值
Math.ceil(8.77)       9                  大于等于data的整数
Math.floor(8.77)      8                  小于等于data的整数
Math.round(8.77)      9                  四舍五入
Math.sqrt(9)          3                  平方根
Math.min(8,7)         7                  最小数
Math.max(8,7)         8                  最大数
Math.pow(3,2)         9                  次方
Math.random()         1.222236555855     0 - 1 之间的随机数
8、日期方法
getYear()08 getFullYear()2008 getMonth() getDate() getDay()星期  getHours() getMinutes() getSeconds()
getTime()求当前时间距离1970.1.1 00:00:00毫秒
Date.parse(date1) date1自从公元以来的毫秒数
toLocalString 中国式日期格式
9、字符串
JavaScript没有提供trim()方法
可以编写一个trim方法
String.prototype.trim=function()
{
return this.rtrim().ltrim();
}
//左边去除空格
String.prototype.ltrim=function()
{
return this.replace(/(^/s*)/g,"");
}
//右边去除空格
String.prototype.rtrim=function()
{
return this.replace(/(^/s*$)/g,"");
}
10、//window.confirm 参数就只有一个。显示提示框的信息。按确定,返回true;按取消返回false。
   <script>  
   var bln = window.confirm("确定吗?");  
   alert(bln)  
   </script>   

   //window.alert参数,只有一个,显示警告框的信息;无返回值。
   <script>  
   window.alert("确定。")  
   </script>  

//window.prompt参数,有两个,第一个参数,显示提示输入框的信息。第二个参数,用于显示输入框的默认值。返回,用户输入的值。  
   <script>  
   var str = window.prompt("请输入密码","password")  
   alert(str);  
   </script>
20100125高工反映问题
1、意见箱
2、软件专区
3、信息发布
11、indexOf()lastIndexOf()
第五章、JavaScript与浏览器
1、加载图片时可与把图片写在css中引入,因为浏览器优先加载css中的图片
//css.css
.bao
{
background:url("./bao.jpg") no-repeat;
}
.yu
{
background:url("./bao.jpg") no-repeat;
}
//js.js
function imageCache()
{
try{
document.addBehavior("#default#userData");
document.execCommand("BackgroundImageCache",false,true);
}catch(e){

}
}
imageCache();
//html
<div class="bao" onmouseover="this.className='yu'" onmouseout="this.className='bao'">animal</div>
<script language="javascript" src="js.js"></script>
2、属性
document.bgColor = "yellow";  //背景色
document.fgColor = "yellow"; //前景色                 
document.vlinkColor = "blue";   //链接               
document.linkColor = "green";
document.alinkColor = "red";
3、document.images.oImage.src="gl_1.gif";
document.lastModified//最后修改时间
4、只有IE支持all属性,所以可以用它来判断是否为IE
var isIE (document.all)?true:false;
5、navigator.plugins.length//浏览器插件
navigator.plugins[0].name
navigator.plugins[0].description
navigator.plugins[0].filename
document.anchors.length//锚点
document.cookie=""//是一种在web客户端和服务器之间传递信息的手段之一,客户端和服务端都可以生成cookie
cookie分为临时和永久两种:临时cookie,随浏览器的关闭而丢失,永久cookie在创建时就制定了过期时间,浏览器将其连同
失效时间一同持久化到文件系统中,ie把它默认到documents and settings\用户名\cookie目录下,其实他就是HTTP报文头
document.domain//当前服务器域名
document.forms//
document.referer//返回引用文档的URl地址,也就是用户是从哪一个页面链接到本页面的。
document.URL//得到网页的路径
document.title//
document对象的方法
document.open()//创建一个新的窗口或在指定的窗口中打开页面。
document.close();//用于关闭数据流
document.write()
document.writeln();//打印东西,这个有回车。
6、JavaScript可以通过Scripting.FileSystemObject这样的ActiveX控件访问本地的文件 Firefox则要借助JRE的支持
duzong:arcmap技术
window对象的属性
closed//用于返回指定窗口的实例是否已经关闭。如:<body onclick="self.close();">
defaultStatus//该属性用来设置状态条中的默认字符串。当浏览器的状态条不显示其他信息时,将显示这个默认字符串
<script language="javascript" type="text/javascript">
    window.defaultStatus = "最佳的JavaScript学习网站";
</script>
<a href="http://www.baidu.com" onmouseover="status='不能不去的JavaScript学习网站';return true">javascript交流区</a>
length//属性返回一个窗口内的子窗口数目,该属性与window.frames.length属性的值相同。
window.location.href="http://www.sina.com";//可用于操作当前页面的URL
opener.document.bgcolor//该属性返回打开当前窗口的window对象,opener属性不返回窗口名,而是返回另一个window对象
通过它可以访问打开当前窗口的父窗口属性。
<script language="javascript" type="text/javascript">
function passToOpener(color){
opener.document.bgColor = color;
self.close();
}
</script>
<center>
请选择你喜欢的颜色<br>
<font onclick="passToOpener('#CCFFFF')">蓝色</font>
<font onclick="passToOpener('#FFCCFF')">红色</font>
<a href="http://www.baidu.com">百度</a>
</center>

parent//属性是访问各个子窗口或框架所在的父窗口。
self//当前窗口的标志。
top//返回当前子窗口或框架的顶层窗口。该属性返回表示顶层窗口的window对象。与opener属性相似,top属性返回window对象
window.top.属性
window.top.方法()

<script language="javascript" type="text/javascript">
function test(){
var s="";
s += "\r\n页面可见区域宽: "+ document.body.clientWidth;
s += "\r\n页面可见区域高: "+ document.body.clientHeight;
s += "\r\n页面可见区域宽: "+ document.body.offsetWidth+"包括边线的宽";
s += "\r\n页面可见区域高: "+ document.body.offsetHeight+"包括边线的高";
s += "\r\n页面正文全文宽: "+ document.body.scrollWidth;
s += "\r\n页面正文全文高: "+ document.body.scrollHeight;
s += "\r\n页面被卷去的高: "+ document.body.scrollTop;
s += "\r\n页面被卷去的左: "+ document.body.scrollLeft;
s += "\r\n页面正文部分上: "+ window.screenTop;
s += "\r\n页面正文部分左: "+ window.screenLeft;
s += "\r\n屏幕分辨率的高: "+ window.screen.height;
s += "\r\n屏幕分辨率的宽: "+ window.screen.width;
s += "\r\n屏幕可用工作区高度: "+ window.screen.availHeight;
s += "\r\n屏幕可用工作区宽度: "+ window.screen.availWidth;
alert(s);
}
</script>
<center>
<font onclick="test()">查看我的信息</font>
</center>

window的对象的方法
1.alert()
2.confirm()
3.prompt()
4.print()
5.open()//window.open("http://www.hao123.com", "baidu","toolbar=no","menubar=no","scrollbars=yes","resizeable=no",width=600,height=400);
6.close()
7.blur()
8.focus()
9.moveBy()
10.moveTo()
11.resizeTo()
12.scrollBy()
13.scrollTo()
14.setInterval()//每隔一定的时间执行一个函数和表达式的目的。在动画中很有用。
15.clearInterval()
16.setTimeout();//可以用来做一个计数器
17.clearTimeout(ID)//这里的id是指setTimeout()方法返回的值。如 mytimeout
function showtime(){
mytime = new Date();
mytime = mytime.getHours()+":"+mytime.getMinutes()+":"+mytime.getSeconds();
document.form1.mytext.value=mytime;
var mytimeout = window.setTimeout("showtime()",1000);//每隔一秒调一次函数
}
setTimeout 和 setInterval 的区别 window对象有两个主要的定时方法,分别是setTimeout 和 setInteval  他们的语法基本上相同,但是完成的功能取有区别。
  setTimeout方法是定时程序,也就是在什么时间以后干什么。干完了就拉倒。

  setInterval方法则是表示间隔一定时间反复执行某操作。

  如果用setTimeout实现setInerval的功能,就需要在执行的程序中再定时调用自己才行。如果要清除计数器需要根据使用的方法不同,调用不同的清除方法:

javascript与框架frameset 框架操作
1、通过表单<form action="someAction" target="framename">
2、通过链接<a href="somepage" target="framename">
3、通过脚本parent.framesName.src="somepage"或parent.frames[index].src="somepage"
JavaScript与表单
<form action="someAction" onSubmit="return checkform()">可以通过onSubmit()属性验证表单合法,通过时,return true;这样表单就能提交
第七章 JavaScript数据类型
1、Number
var a = 1;
var a1 = 08;//八进制17
var a2 = 0x23;//十六进制17
在JavaScript中所有的运行结果是十进制数表示的。
document.write(a+a1+a2);//49
parseInt("08")   // 结果是“0” 因为被认为是八进制
number中存在一个特殊的值“NaN” “Not a Number” 表示非数值,它与自身不相等。“NaN==NaN” 返回false
///////////////////////////////////
1、CSS中position的absolute和relative的应用
之前老弄不明白,只能凭借一点短期内“虐出来的经验”制作需要的效果,后来仔细研究了一下Hutia的XScroller,并且仔细看了文档,才知道这个position属性其实是指本体对上级的定位。如果这么理解,就好办了。

默认的属性值都是static,静态。就不用多说了。最关键的是
relative(相对)以及absolute(绝对)。
往往我们如果是COPY别人的代码,会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果,而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦,而且几乎无法完美实现效果。我一开始也无能为力,后来发现只要把其上一级的样式属性position设置为relative就可以了。

也就是说,position的属性值的效果,直接受其容器样式中position属性值影响。
例如如下A-B的嵌套结构

<div id="A">
<div id="B">
</div>
</div>当A的position为relative时,B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档,而是针对id为A的这个div了。

这样在开发一些基于B/S应用程序的时候,就能很方便的添加一些UI元素,例如某一个活动层的关闭按钮等。

2、网页的宽度
<script language="javascript" type="text/javascript">
    function test(){
    var s="";
    s += "\r\n页面可见区域宽: "+ document.body.clientWidth;
    s += "\r\n页面可见区域高: "+ document.body.clientHeight;
    s += "\r\n页面可见区域宽: "+ document.body.offsetWidth+"包括边线的宽";
    s += "\r\n页面可见区域高: "+ document.body.offsetHeight+"包括边线的高";
    s += "\r\n页面正文全文宽: "+ document.body.scrollWidth;
    s += "\r\n页面正文全文高: "+ document.body.scrollHeight;
    s += "\r\n页面被卷去的高: "+ document.body.scrollTop;
    s += "\r\n页面被卷去的左: "+ document.body.scrollLeft;
    s += "\r\n页面正文部分上: "+ window.screenTop;
    s += "\r\n页面正文部分左: "+ window.screenLeft;
    s += "\r\n屏幕分辨率的高: "+ window.screen.height;
    s += "\r\n屏幕分辨率的宽: "+ window.screen.width;
    s += "\r\n屏幕可用工作区高度: "+ window.screen.availHeight;
    s += "\r\n屏幕可用工作区宽度: "+ window.screen.availWidth;
    alert(s);
    window.open("http://www.hao123.com", "baidu","toolbar=no","menubar=no","scrollbars=yes","resizeable=no",width=600,height=400);
    }
</script>
<center>
<font onclick="test()">查看我的信息</font>
</center>
javascript:document.body.innerHTML%20=%20"<textarea%20style='height:300;%20width:90%'>"+document.body.innerHTML+"</textarea>"   


//JS教程:childNodes与parentNode


如果你是高手,对于childNodes与parentNode并不陌生。其实他们就是DOM的两个特性/方法而以。

childNodes:表示对象的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性;

parentNode:表示对象的父级节点。

当我解释完这两个方法以后,可能有人会问,他们有什么用,嘿嘿,当然有用,我们下面有一个例子来说明他们的作用。
<ul id="abc">
      <li id="ccc"><ul>
         <li id="ddd">aaa</li>
         <li>aa</li>
         <li>dd</li>
         <li>dd</li>
         <li>dd</li>
      </ul></li>
      <li>das</li>
      <li>dadf</li>
      <li>dsaf</li>
      <li>sdafu <ul>
         <li>adfsaf</li>
         <li>sdaf</li>
         <li>sdaf</li>
         <li>asdf</li>
         <li>sfa</li>
      </ul> </li>
      <li>aa</li>
   </ul>
<script  type="text/javascript">
<!--
(function() {
   var ulList = document.getElementById("abc");
   var ulListChild = ulList.childNodes;
   for (var i=0; i<ulListChild.length; i+=1) {
      ulListChild[i].onmouseover = function() {
      this.style.border = "1px solid #ccc;";
      }
   }
})();
//-->
</script>
<script  type="text/javascript">
<!--
(function() {
   var ulList = document.getElementById("abc");
   var ulListLi = document.getElementById("ccc") ;
   var ulListLiLi = document.getElementById("ddd") ;
   alert(ulListLi.parentNode === ulList);//true
   alert(ulListLiLi.parentNode === ulList);//false
   alert(ulListLiLi.parentNode === ulListLi.childNodes[0]);//true
})();
//-->
</script>
不难看出他们之间的关系,ulListLi.childNodes[0]这里代表的是id为ccc下面的第一个元素,其实这里也可以写成firstChild,嘿嘿,以后在说这个方法。

注意:火狐在获取childNodes的时候,在计算上有一些特别。

//
a href=#与 a href=javascript:void(0) 的区别打开新窗口链接的几种办法2009年06月17日星期三 15:54<a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP

<a href="javascript:void(0)" onClick="window.open()"> 点击链接后,页面不动,只打开链接

<a href="#" onclick="javascript:return false;"> 作用同上,不同浏览器会有差异。

点击链接后,不想使页面滚到页首,就用href="javascript:void(0)",不要用href="#",return false也有类似作用

详解href="#"与href="javascript:void(0)"的区别

"#"包含了一个位置信息默认的锚点是#top 也就是网页的上端而javascript:void(0) 仅仅表示一个死链接这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首而javascript:void(0) 则不是如此所以调用脚本的时候最好用void(0)或者<input onclick><div onclick>等打开新窗口链接的几种办法1.window.open('url')2.用自定义函数        <script>
        function openWin(tag,obj)
        {
            obj.target="_blank";
            obj.href = "Web/Substation/Substation.aspx?stationno="+tag;
            obj.click();
        }
        </script><a href="javascript:void(0)" onclick="openWin(3,this)">LINK_TEST</a>window.location.href=""-------------------------------------------------------------------------------如果是个# ,就会出现跳到顶部的情况,个人收藏的几种解决方法:
1:<a href="####"></a>
2:<a href="javascript:void(0)"></a>
3:<a href="javascript:void(null)"></a>
4:<a href="#" onclick="return false"></a>
5:<span style="cursor:hand"></span>(好像在FF中不能显示)-------------------------------------------------------------------------------慎用JavaScript:void(0)今天调试CGI的时候,明明CGI程序已经执行,并且最后结果也是正确的,但是页面就是不刷新。在FireFox2.0下测试,结果却是正常的,IE6却偏偏不刷新!仔细调查了一下,发现cgi页面链接的是 <a href="javaScript:void(0)" OnClick="XXX_Func();" ….> only a sample </a>,问题就出在这个void(0)上!让我们先来看看JavaScript中void(0)的含义:JavaScript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值。
void 操作符用法格式如下:
1. javascript:void (expression_r_r_r)
2. javascript:void expression_r_r_r
expression_r_r_r是一个要计算的 JavaScript 标准的表达式。表达式外侧的圆括号是可选的,但是写上去是一个好习惯。我们可以使用 void 操作符指定超级链接。表达式会被计算但是不会在当前文档处装入任何内容。面的代码创建了一个超级链接,当用户点击以后不会发生任何事。当用户点击链接时,void(0) 计算为 0,但在 JavaScript 上没有任何效果。<a href="javascript:void(0)">单击此处什么也不会发生</a>也就是说,要执行某些处理,但是不整体刷新页面的情况下,可以使用void(0),但是在需要对页面进行refresh的情况下,那就要仔细了。其实我们可以这样用<a href="javascript:void(document.form.submit())">,这句话会进行一次submit操作。那什么情况下用void(0)比较多呢,无刷新,当然是Ajax了,看一下Ajax的web页面的话,一般都会看到有很多的void(0),:) ,所以在使用void(0)之前,最好先想一想,这个页面是否需要整体刷新。


使用javascript的时候,通常我们会通过类似:
<a href="#" onclick="javascript:方法">提交</a>
的方式,通过一个伪链接来调用javascript方法.这种方法有一个问题是:
虽然点击该链接的时候不会跳转页面.但是滚动条会往上滚,解决的办法是返回一个false.
如下所示:
<a href="#" onclick="javascript:方法;return false;">提交</a>

还可以用 ###

a href="javascript:void(0)" onclick="javascript:方法;return false;"提交
javascript:void(0)就不会向上跳了:)

还有一个方法是 #this
a href="#this" onclick="javascript:方法"

self:该变量指的是当前进行操作的窗口。
top:该变更永远指分割窗口最高层次的浏览器窗口。如果计划从分割窗口的最高层次开始执行命令,就可以用top变量。
parent:该变量指的是包含当前分割窗口的父窗口。如果在一个窗口内有分割窗口,而在其中一个分割窗口中又包含着分割窗口,则第2层的分割窗口可以用parent变量引用包含它的父分割窗口。
opener:指用WINDOW.OPEN等方式创建的新窗口对应的原窗口。
-------------------------------------------------------------------------------------------------------------------------
Ajax


event.srcElement从字面上可以看出来有以下关键字:事件,源 他的意思就是:当前事件的源,
我们可以调用他的各种属性 就像:document.getElementById("")这样的功能,
经常有人问 firefox 下的 event.srcElement 怎么用,在此详细说明:
IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即:
firefox 下的 event.target = IE 下的 event.srcElement
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.
以下是几种常见到的情况(IE下测试通过,如要测试firefox下的event.target可以修改并保存代码后用firefox打开测试):
event.srcElement.X显示一个控件的各种属性

<div id="div_001">
<form id="form_001">
<input type="button" id="button_001_id" name="button_001_Name" value=" 单击查看" class="button_001_Class" onclick="Get_srcElement(this)">
</form>
</div>
<script>
function Get_srcElement()
{
var srcElement=""
srcElement = srcElement + " " + "event.srcElement.id : " + event.srcElement.id
srcElement = srcElement + " " + "event.srcElement.tagName : " + event.srcElement.tagName
srcElement = srcElement + " " + "event.srcElement.type : " + event.srcElement.type
srcElement = srcElement + " " + "event.srcElement.value : " + event.srcElement.value
srcElement = srcElement + " " + "event.srcElement.name : " + event.srcElement.name
srcElement = srcElement + " " + "event.srcElement.className : " + event.srcElement.className
srcElement = srcElement + " " + "event.srcElement.parentElement.id : " + event.srcElement.parentElement.id
srcElement = srcElement + " " + "event.srcElement.getattribute : " + event.srcElement.getAttribute
alert(srcElement)
}
</script>
event.srcElement.selectedIndex一般使用在select对像上:
<select name="selectname" onchange="alert(event.srcElement.options[event.srcElement.selectedIndex].value)" >
<option value="001">1</option>
<option value="002">2</option>
<option value="003">3</option>
<option value="004">4</option>
<option value="005">5</option>
</select>

overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。

一提到清除浮动,我们就会想到另外一个CSS样式:clear:both,我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢?我们下面来详细的阐述一下。

<div id="wai">
<div id="nei"></div>
</div>

这是一个常用的div写法,下面我们来书写样式。大家可以在DMX中自己做试验

#wai{ width:500px;  background:#000; height:500px;}

#nei { float:left; width:600px; height:600px; background:red;}

可以看到,我给nei这个id加了一个浮动,我们常规的理解是,我们允许nei这个id的div的右边出现其他的内容,只要它的宽度不超过wai这个div和nei这个div的剩余值。

如果div wai中还包含其他的div,我不允许它出现在nei的右侧,我们则用样式clear:both指定这个div,不允许它浮动在nei右侧。

这些在ie6里面是正确的。但是在火狐或者其他浏览器里面,我们发现问题并非如此简单。我们发现,当nei这个div的宽度和高度都大于wai这个div的时候,wai并没有被内撑开而是依旧显示为我们指定的宽高。在我的例子中,都是500。

这个时候我不理解了,我搜索了很多的资料,但是都没能理解这是为什么,直到看到别人在类似的情况下给wai这个div加了一个overflow:hidden这个属性解决了这个问题。

我们直到overflow:hidden这个属性的作用是隐藏溢出,给wai加上这个属性后,我们的nei的宽高自动的被隐藏掉了。另外,我们再做一个试验,将wai这个div的高度值删除后,我们发现,wai的高度自动的被nei这个div的高度值给撑开了。

说到这里,我们再来理解一下“浮动”这个词的含义。我们原先的理解是,在一个平面上的浮动,但是通过这个试验,我们发现,这不仅仅是一个平面上的浮动,而是一个立体的浮动!

也就是说,当nei这个div加上浮动这个属性的时候,在显示器的侧面,它已经脱离了wai这个div,也就是说,此时的nei的宽高是多少,对于已经脱离了的wai来说,都是不起作用的。打个形象的比喻就是当JJ脱离BB的时候,JJ的大小对于BB是没有撑开的作用的(有点少儿不宜的感觉-_-|||)

OK,当我们全面的理解了浮动这个词的含义的时候,我们就理解overflow:hidden这个属性中的解释,清除浮动是什么意思了。也就是说,当我们给wai这个div加上overflow:hidden这个属性的时候,其中的nei等等带浮动属性的div的在这个立体的浮动已经被清除了,就好比JJ又进入了BB内,JJ的大小自然又会影响到BB的大小。

这就是overflow:hidden这个属性清除浮动的准确含义。

当我们没有给wai这个div设置高度的时候,nei这个div的高度,就会撑开wai这个div,而在另一个方面,我们要注意到的是,当我们给wai这个div加上一个高度值,那么无论nei这个div的高度是多少,wai这个高度都是我们设定的值。而当nei的高度超过wai的高度的时候,超出的部分就会被隐藏。这就是隐藏溢出的含义!

我相信,通过我的这些文字,大家对overflow:hidden这个属性有了全新的认识。希望大家和我一样,在div+css学习中能够不断的进步!搞了大半天,总算弄明白了为何用document.body.clientHeight,document.body.offsetHeight都没有办法获取网页可见区域的正确值,原来罪魁祸首是W3C定义的标准!!在新定义出来的标准下 document.documentElement.clientHeight在IE和火狐里都能获取正确值,下面一篇文章详细介绍了获取各种浏览器可见窗口大小这方面的差别:
<scrīpt>
function getInfo()
{
    var s = "";
    s += " 网页可见区域宽:"+ document.body.clientWidth;
    s += " 网页可见区域高:"+ document.body.clientHeight;
    s += " 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
    s += " 网页可见区域高:"+ document.body.offsetHeight + " (包括边线的宽)";
    s += " 网页正文全文宽:"+ document.body.scrollWidth;
    s += " 网页正文全文高:"+ document.body.scrollHeight;
    s += " 网页被卷去的高(ff):"+ document.body.scrollTop;
    s += " 网页被卷去的高(ie):"+ document.documentElement.scrollTop;
    s += " 网页被卷去的左:"+ document.body.scrollLeft;
    s += " 网页正文部分上:"+ window.screenTop;
    s += " 网页正文部分左:"+ window.screenLeft;
    s += " 屏幕分辨率的高:"+ window.screen.height;
    s += " 屏幕分辨率的宽:"+ window.screen.width;
    s += " 屏幕可用工作区高度:"+ window.screen.availHeight;
    s += " 屏幕可用工作区宽度:"+ window.screen.availWidth;
    s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
    s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
    //alert (s);
}
getInfo();
</scrīpt>
在我本地测试当中:
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得,很简单,很方便。
而在公司项目当中:
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话

在IE中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
?
在Opera中:
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
而如果没有定义W3C的标准,则
IE为:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
Opera为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

原文地址:http://www.css88.com/article.asp?id=133


--------------------------------------------------------------------------------

判断浏览器的类型:
var ua = navigator.userAgent.toLowerCase ();
var ōs = new Object();
os.isFirefox = ua.indexOf ("gecko") != -1;
os.isOpera = ua.indexOf ("opera") != -1;
os.isIE = !os.isOpera && ua.indexOf ("msie") != -1;

获取浏览器区域的大小://
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
//
function getPageScroll(){

var yScroll;
if (self.pageYOffset) {
  yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){  // Explorer 6 Strict
  yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
  yScroll = document.body.scrollTop;
}
arrayPageScroll = new Array('',yScroll)
return arrayPageScroll;
}

//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize(){

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {
  xScroll = document.body.scrollWidth;
  yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
  xScroll = document.body.scrollWidth;
  yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
  xScroll = document.body.offsetWidth;
  yScroll = document.body.offsetHeight;
}

var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
  windowWidth = self.innerWidth;
  windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
  windowWidth = document.documentElement.clientWidth;
  windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
  windowWidth = document.body.clientWidth;
  windowHeight = document.body.clientHeight;
}

// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
  pageHeight = windowHeight;
} else {
  pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
  pageWidth = windowWidth;
} else {
  pageWidth = xScroll;
}

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics