IT博客-十三郎的IT生活-随笔分类-JS

网页 unicode

十三郎 — Thu, 05 Mar 2009 03:51:00 GMT

原理;

网页(HTML)Unicode的格式是黄中间的那一部分是字符的UNICODE编码,前后都是标志位;

实现代码就很简单了:

String s = "&#" + (int)'黄' + ";"

s就是转换后的UNICODE码了.

十三郎 2009-03-05 11:51 发表评论

JS格式化/反格式化工具

十三郎 — Wed, 11 Feb 2009 03:34:00 GMT

反格式化工具：
http://tool.chinaz.com/Tools/JsFormat.aspx

格式化工具：
http://www.codeandcoffee.com/2006/10/02/compress-your-javascript/
http://www.wxwdesign.cn/article/244.htm

十三郎 2009-02-11 11:34 发表评论

iframe背景透明

十三郎 — Tue, 13 Jan 2009 01:54:00 GMT

十三郎 2009-01-13 09:54 发表评论

js操作cookie

十三郎 — Wed, 06 Aug 2008 01:43:00 GMT

function getCookie(name)
{
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
    if(arr != null) return unescape(arr[2]); return null;
}
function setCookie(name,value)
{
    var exp = new Date();
    exp.setTime(exp.getTime()+365*24*60*60*1000);
    document.cookie = name+"="+escape(value)+";expires="+exp.toGMTString();
}

十三郎 2008-08-06 09:43 发表评论

clientHeight、offsetHeight和scrollHeight

十三郎 — Fri, 07 Mar 2008 10:08:00 GMT

我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释，这里说的是 document.body，如果是 HTML 控件，则又有不同，点击这里查看。

这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

clientHeight
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

说明
以上基于 DTD HTML 4.01 Transitional，如果是 DTD XHTML 1.0 Transitional 则意义又会不同，在 XHTML 中这三个值都是同一个值，都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器。下载或浏览测试文件。

十三郎 2008-03-07 18:08 发表评论

关于处理GET方式提交的含有特殊字符的参数

十三郎 — Thu, 28 Feb 2008 15:42:00 GMT

特殊特殊字符的含义
————————————————————————————
　　字符　　　　特殊字符的含义　　　　　　　URL编码
　 #　　　　　　用来标志特定的文档位置　　　%23
　 %　　　　　　对特殊字符进行编码　　　　　%25
　 &　　　　　　分隔不同的变量值对　　　　　%26
　 +　　　　　　在变量值中表示空格　　　　　%2B
　 \　　　　　　表示目录路径　　　　　　　　%2F
　 =　　　　　　用来连接键和值　　　　　　　%3D
　 ?　　　　　　表示查询字符串的开始　　　　%3F

十三郎 2008-02-28 23:42 发表评论

document.execCommand()函数可用参数解析

十三郎 — Thu, 21 Feb 2008 03:31:00 GMT

2D-Position 允许通过拖曳移动绝对定位的对象。
AbsolutePosition 设定元素的 position 属性为“absolute”(绝对)。
BackColor 设置或获取当前选中区的背景颜色。
BlockDirLTR 目前尚未支持。
BlockDirRTL 目前尚未支持。
Bold 切换当前选中区的粗体显示与否。
BrowseMode 目前尚未支持。
Copy 将当前选中区复制到剪贴板。
CreateBookmark 创建一个书签锚或获取当前选中区或插入点的书签锚的名称。
CreateLink 在当前选中区上插入超级链接，或显示一个对话框允许用户指定要为当前选中区插入的超级链接的 URL。
Cut 将当前选中区复制到剪贴板并删除之。
Delete 删除当前选中区。
DirLTR 目前尚未支持。
DirRTL 目前尚未支持。
EditMode 目前尚未支持。
FontName 设置或获取当前选中区的字体。
FontSize 设置或获取当前选中区的字体大小。
ForeColor 设置或获取当前选中区的前景(文本)颜色。
FormatBlock 设置当前块格式化标签。
Indent 增加选中文本的缩进。
InlineDirLTR 目前尚未支持。
InlineDirRTL 目前尚未支持。
InsertButton 用按钮控件覆盖当前选中区。
InsertFieldset 用方框覆盖当前选中区。
InsertHorizontalRule 用水平线覆盖当前选中区。
InsertIFrame 用内嵌框架覆盖当前选中区。
InsertImage 用图像覆盖当前选中区。
InsertInputButton 用按钮控件覆盖当前选中区。
InsertInputCheckbox 用复选框控件覆盖当前选中区。
InsertInputFileUpload 用文件上载控件覆盖当前选中区。
InsertInputHidden 插入隐藏控件覆盖当前选中区。
InsertInputImage 用图像控件覆盖当前选中区。
InsertInputPassword 用密码控件覆盖当前选中区。
InsertInputRadio 用单选钮控件覆盖当前选中区。
InsertInputReset 用重置控件覆盖当前选中区。
InsertInputSubmit 用提交控件覆盖当前选中区。
InsertInputText 用文本控件覆盖当前选中区。
InsertMarquee 用空字幕覆盖当前选中区。
InsertOrderedList 切换当前选中区是编号列表还是常规格式化块。
InsertParagraph 用换行覆盖当前选中区。
InsertSelectDropdown 用下拉框控件覆盖当前选中区。
InsertSelectListbox 用列表框控件覆盖当前选中区。
InsertTextArea 用多行文本输入控件覆盖当前选中区。
InsertUnorderedList 切换当前选中区是项目符号列表还是常规格式化块。
Italic 切换当前选中区斜体显示与否。
JustifyCenter 将当前选中区在所在格式化块置中。
JustifyFull 目前尚未支持。
JustifyLeft 将当前选中区所在格式化块左对齐。
JustifyNone 目前尚未支持。
JustifyRight 将当前选中区所在格式化块右对齐。
LiveResize 迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观，而不是只在移动或缩放完成后更新。
MultipleSelection 允许当用户按住 Shift 或 Ctrl 键时一次选中多于一个站点可选元素。
Open 打开。
Outdent 减少选中区所在格式化块的缩进。
OverWrite 切换文本状态的插入和覆盖。
Paste 用剪贴板内容覆盖当前选中区。
PlayImage 目前尚未支持。
Print 打开打印对话框以便用户可以打印当前页。
Redo 重做。
Refresh 刷新当前文档。
RemoveFormat 从当前选中区中删除格式化标签。
RemoveParaFormat 目前尚未支持。
SaveAs 将当前 Web 页面保存为文件。
SelectAll 选中整个文档。
SizeToControl 目前尚未支持。
SizeToControlHeight 目前尚未支持。
SizeToControlWidth 目前尚未支持。
Stop 停止。
StopImage 目前尚未支持。
StrikeThrough 目前尚未支持。
Subscript 目前尚未支持。
Superscript 目前尚未支持。
UnBookmark 从当前选中区中删除全部书签。
Underline 切换当前选中区的下划线显示与否。
Undo 撤消。
Unlink 从当前选中区中删除全部超级链接。
Unselect 清除当前选中区的选中状态。

JavaScript--execCommand指令集

浮沉聚散变化又再,但是总可卷土重来.

天若有情天亦老,人间正道是沧桑.

都怪我,太执着,却也等不到花开叶落.

Please select above letters, then click following buttons:

NAME="Button11">

普通的方式是激活一个进入编辑状态，命令如下

IframeNamer.document.designMode="On"

字体--宋体、黑体、楷体等

execCommand("fontname","",字体)

字号--字号大小

execCommand("fontsize","",字号)

加重

execCommand("Bold")

斜体

execCommand("Italic")

下划线

execCommand("Underline")

删除线

execCommand("StrikeThrough")

上标

execCommand("SuperScript")

下标

execCommand("SubScript")

有序排列--数字序号

execCommand("InsertOrderedList")

无序排列--圆点序号

execCommand("InsertUnorderedList")

向前缩进

execCommand("Outdent")

向后缩进

execCommand("Indent")

居左

execCommand("JustifyLeft")

居右

execCommand("JustifyRight")

居中

execCommand("JustifyCenter")

剪切

execCommand("Cut")

拷贝

execCommand("Copy")

粘贴

execCommand("Paste")

覆盖

execCommand("Overwrite")

取消操作--IE5.0以后可以无限取消

execCommand("Undo")

重复操作

execCommand("Redo")

设置链接--若按以下写法，在IE5.0版本中会激活一个内建窗口，可以完成输入链接的功能，而且还可以选择MAILTO、FTP等各种链接类型，比较方便

execCommand("CreateLink")

在IE4.0中，没有内建链接输入窗口，所以就需要用以下方式嵌入链接

execCommand("CreateLink","",TURL)

插入图片--由于IE中嵌入的可编控件是针对本地资源的，所以其默认的图片资源来自本地，所以基于WEB内容的编辑最好自己做输入框，然后用如下命令实现。

execCommand("InsertImage","",ImgURL)

字体颜色

execCommand("ForeColor","",CColor)

十三郎 2008-02-21 11:31 发表评论

Javascript：动态载入Javascript 和CSS 文件

十三郎 — Tue, 15 Jan 2008 07:16:00 GMT

常见的载入 Javascript (.js) 和CSS (.css)文件的方法一般是在网页的部分添加一个引用。如下所示：

Code (xHtml)

在大多数情况下，这样操作完全可以满足我们的需要，但是在 Ajax 应用越来越多的今天，你可能需要一种能够动态加载 *.js 和 *.css 文件的方法。

简单而言，要动态载入一个.js 文件或.css 文件，首先需要利用DOM 方法为文档创建一个"script" 或"link" 元素，然后为它们指定合适的属性，最后利用element.appendChild()方法将元素添加到文档树中理想的位置。以下是实现代码：

Code (Javascript)

function LoadJsCssFile(filename, filetype){
if (filetype=="js"){ //如果是.js文件
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src",filename);
}
else if (filetype=="css"){ //如果是.css文件
var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href",filename);
}
if (typeof fileref != "undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
LoadJsCssFile("myscript.js", "js"); //动态载入.js 文件
LoadJsCssFile("javascript.php", "js"); //将".php" 文件作为.js 文件动态载入
LoadJsCssFile("main.css", "css"); //动态载入.css 文件

此外，还可以添加一个新方法，在载入.js 或.css 文件前判断此文件是否已经加载，从而避免重复加载。代码如下：

Code (Javascript)

var filesadded = "" //已经加载的文件列表
function CheckLoadJsCssFile(filename, filetype){
if (filesadded.indexOf("["+filename+"]")==-1){
LoadJsCssFile(filename, filetype);
filesadded += "["+filename+"]"; //从表单中加载的文件列表
}
else
alert('该文件已经添加！');
}
CheckLoadJsCssFile("myscript.js", "js") //加载成功
CheckLoadJsCssFile("myscript.js", "js") //文件存在，不再加载

十三郎 2008-01-15 15:16 发表评论

js innerHTML 问题

十三郎 — Tue, 11 Dec 2007 06:51:00 GMT

相信很多Ajax初学者都会遇到：用innerhtml插入的JS脚本无法执行，用Google搜了很久，找了两个不错的解决方案...

方案1:来自济南大学马秉尧老师的innerhtml.js

JavaScript代码

/* innerhtml.js
* Copyright Ma Bingyao
* Version: 1.9
* LastModified: 2006-06-04
* This library is free. You can redistribute it and/or modify it.
* http://www.coolcode.cn/?p=117
*/
var global_html_pool = [];
var global_script_pool = [];
var global_script_src_pool = [];
var global_lock_pool = [];
var innerhtml_lock = null;
var document_buffer = "";
function set_innerHTML(obj_id, html, time) {
if (innerhtml_lock == null) {
innerhtml_lock = obj_id;
}
else if (typeof(time) == "undefined") {
global_lock_pool[obj_id + "_html"] = html;
window.setTimeout("set_innerHTML('" + obj_id + "', global_lock_pool['" + obj_id + "_html']);", 10);
return;
}
else if (innerhtml_lock != obj_id) {
global_lock_pool[obj_id + "_html"] = html;
window.setTimeout("set_innerHTML('" + obj_id + "', global_lock_pool['" + obj_id + "_html'], " + time + ");", 10);
return;
}
function get_script_id() {
return "script_" + (new Date()).getTime().toString(36)
+ Math.floor(Math.random() * 100000000).toString(36);
}
document_buffer = "";
document.write = function (str) {
document_buffer += str;
}
document.writeln = function (str) {
document_buffer += str + "\n";
}
global_html_pool = [];
var scripts = [];
html = html.split(/<\/script>/i);
for (var i = 0; i < html.length; i++) {
global_html_pool[i] = html[i].replace(/"");
scripts[i] = {text: '', src: '' };
scripts[i].text = html[i].substr(global_html_pool[i].length);
scripts[i].src = scripts[i].text.substr(0, scripts[i].text.indexOf('>') + 1);
scripts[i].src = scripts[i].src.match(/src\s*=\s*(\"([^\"]*)\"|\'([^\']*)\'|([^\s]*)[\s>])/i);
if (scripts[i].src) {
if (scripts[i].src[2]) {
scripts[i].src = scripts[i].src[2];
}
else if (scripts[i].src[3]) {
scripts[i].src = scripts[i].src[3];
}
else if (scripts[i].src[4]) {
scripts[i].src = scripts[i].src[4];
}
else {
scripts[i].src = "";
}
scripts[i].text = "";
}
else {
scripts[i].src = "";
scripts[i].text = scripts[i].text.substr(scripts[i].text.indexOf('>') + 1);
scripts[i].text = scripts[i].text.replace(/^\s*<\!--\s*/g, "");
}
}
var s;
if (typeof(time) == "undefined") {
s = 0;
}
else {
s = time;
}
var script, add_script, remove_script;
for (var i = 0; i < scripts.length; i++) {
var add_html = "document_buffer += global_html_pool[" + i + "];\n";
add_html += "document.getElementById('" + obj_id + "').innerHTML = document_buffer;\n";
script = document.createElement("script");
if (scripts[i].src) {
script.src = scripts[i].src;
if (typeof(global_script_src_pool[script.src]) == "undefined") {
global_script_src_pool[script.src] = true;
s += 2000;
}
else {
s += 10;
}
}
else {
script.text = scripts[i].text;
s += 10;
}
script.defer = true;
script.type = "text/javascript";
script.id = get_script_id();
global_script_pool[script.id] = script;
add_script = add_html;
add_script += "document.getElementsByTagName('head').item(0)";
add_script += ".appendChild(global_script_pool['" + script.id + "']);\n";
window.setTimeout(add_script, s);
remove_script = "document.getElementsByTagName('head').item(0)";
remove_script += ".removeChild(document.getElementById('" + script.id + "'));\n";
remove_script += "delete global_script_pool['" + script.id + "'];\n";
window.setTimeout(remove_script, s + 10000);
}
var end_script = "if (document_buffer.match(/<\\/script>/i)) {\n";
end_script += "set_innerHTML('" + obj_id + "', document_buffer, " + s + ");\n";
end_script += "}\n";
end_script += "else {\n";
end_script += "document.getElementById('" + obj_id + "').innerHTML = document_buffer;\n";
end_script += "innerhtml_lock = null;\n";
end_script += "}";
window.setTimeout(end_script, s);
}

在线DEMO:http://test.coolcode.cn/innerhtml/
JS调用方法:

JavaScript代码

set_innerHTML('要插入innerhtml的ID名称', '要插入的代码');

方案2:来自www.ajaxwing.com的innerHTML简单版

JavaScript代码

/*

* 描述：跨浏览器的设置 innerHTML 方法

*       允许插入的 HTML 代码中包含 script 和 style

* 作者：kenxu

* 日期：2006-03-23

* 参数：

*    el: 合法的 DOM 树中的节点

*    htmlCode: 合法的 HTML 代码

* 经测试的浏览器：ie5+, firefox1.5+, opera8.5+

*/

var setInnerHTML = function (el, htmlCode) {

    var ua = navigator.userAgent.toLowerCase();

    if (ua.indexOf('msie') >= 0 && ua.indexOf('opera') < 0) {

        htmlCode = 'for IE

' + htmlCode;
        htmlCode = htmlCode.replace(/]*)>/gi,

                                    '');

        el.innerHTML = htmlCode;

        el.removeChild(el.firstChild);

    } else {

        var el_next = el.nextSibling;

        var el_parent = el.parentNode;

        el_parent.removeChild(el);

        el.innerHTML = htmlCode;

        if (el_next) {

            el_parent.insertBefore(el, el_next)

        } else {

            el_parent.appendChild(el);

        }

    }

}

调用方法:

JavaScript代码

setInnerHTML('DOM 树中的节点', '要插入的代码');

简单版充分利用了浏览器自身的特性，执行效率高，兼容性好。唯一的缺点就是脚本中不能包含 document.write。

十三郎 2007-12-11 14:51 发表评论

JavaScript中支持面向对象的基础

十三郎 — Tue, 27 Nov 2007 13:06:00 GMT

6.1.1 用定义函数的方式定义类
在面向对象的思想中，最核心的概念之一就是类。一个类表示了具有相似性质的一类事物的抽象，通过实例化一个类，可以获得属于该类的一个实例，即对象。
在JavaScript中定义一个类的方法如下：
function class1(){
       //类成员的定义及构造函数
}
这里class1既是一个函数也是一个类。可以将它理解为类的构造函数，负责初始化工作。

6.1.2 使用new操作符获得一个类的实例
在前面介绍基本对象时，已经用过new操作符，例如：
new Date();
表示创建一个日期对象，而Date就是表示日期的类，只是这个类是由JavaScript内部提供的，而不是由用户定义的。
new操作符不仅对内部类有效，对用户定义的类也同样有效，对于上节定义的class1，也可以用new来获取一个实例：
function class1(){
       //类成员的定义及构造函数
}
var obj1=new class1();
抛开类的概念，从代码的形式上来看，class1就是一个函数，那么是不是所有的函数都可以用new来操作呢？是的，在JavaScript中，函数和类就是一个概念，当对一个函数进行new操作时，就会返回一个对象。如果这个函数中没有初始化类成员，那就会返回一个空的对象。例如：
//定义一个hello函数
function hello(){
      alert("hello");
}
//通过new一个函数获得一个对象
var obj=new hello();
alert(typeof(obj));
从运行结果看，执行了hello函数，同时obj也获得了一个对象的引用。当new一个函数时，这个函数就是所代表类的构造函数，其中的代码被看作为了初始化一个对象。用于表示类的函数也称为构造器。

6.1.3 使用方括号（[ ]）引用对象的属性和方法
在JavaScript中，每个对象可以看作是多个属性（方法）的集合，引用一个属性（方法）很简单，如：
对象名.属性（方法）名
还可以用方括号的形式来引用：
对象名["属性（方法）名"]
注意，这里的方法名和属性名是一个字符串，不是原先点（? ）号后面的标识符，例如：
var arr=new Array();
//为数组添加一个元素
arr["push"]("abc");
//获得数组的长度
var len=arr["length"];
//输出数组的长度
alert(len);

图6.1显示了执行的结果。
由此可见，上面的代码等价于：
var arr=new Array();
//为数组添加一个元素
arr.push("abc");
//获得数组的长度
var len=arr.length;
//输出数组的长度
alert(len);
这种引用属性（方法）的方式和数组类似，体现了JavaScript对象就是一组属性（方法）的集合这个性质。
这种用法适合不确定具体要引用哪个属性（方法）的情况，例如：一个对象用于表示用户资料，用一个字符串表示要使用的那个属性，就可以用这种方式来引用：

在这段代码中，使用一个下拉列表框让用户选择查看哪个信息，每个选项的value就表示用户对象的属性名称。这时如果不采用方括号的形式，可使用如下代码来实现：
function show(slt){
      if(slt.selectedIndex!=0){
              if(slt.value=="age")alert(user.age);
              if(slt.value=="sex")alert(user.sex);
      }
}
而使用方括号语法，则只需写为：
alert(user[slt.value]);
方括号语法像一种参数语法，可用一个变量来表示引用对象的哪个属性。如果不采用这种方法，又不想用条件判断，可以使用eval函数：
alert(eval("user."+slt.value));
这里利用eval函数的性质，执行了一段动态生成的代码，并返回了结果。
实际上，在前面讲述document的集合对象时，就有类似方括号的用法，比如引用页面中一个名为“theForm”的表单对象，以前的用法是：
document.forms["theForm"];
也可以改写为：
document.forms.theForm;
forms对象是一个内部对象，和自定义对象不同的是，它还可以用索引来引用其中的一个属性。

6.1.4 动态添加、修改、删除对象的属性和方法
上一节介绍了如何引用一个对象的属性和方法，现在介绍如何为一个对象添加、修改或者删除属性和方法。
其他语言中，对象一旦生成，就不可更改，要为一个对象添加、修改成员必须要在对应的类中修改，并重新实例化，程序也必须重新编译。JavaScript提供了灵活的机制来修改对象的行为，可以动态添加、修改、删除属性和方法。例如：先用类Object来创建一个空对象user：
var user=new Object();
1．添加属性
这时user对象没有任何属性和方法，可以为它动态的添加属性，例如：
user.name="jack";
user.age=21;
user.sex="male";
通过上述语句，user对象具有了三个属性：name、age和sex。下面输出这三个语句：
alert(user.name);
alert(user.age);
alert(user.sex);
由代码运行效果可知，三个属性已经完全属于user对象了。
2．添加方法
添加方法的过程和添加属性类似：
user.alert=function(){
     alert("my name is:"+this.name);
}
这就为user对象添加了一个方法“alert”，通过执行它，弹出一个对话框显示自己的名字：
user.alert();

图6.2显示了执行的结果。
3．修改属性和方法
修改一个属性和方法的过程就是用新的属性替换旧的属性，例如：
user.name="tom";
user.alert=function(){
      alert("hello,"+this.name);
}
这样就修改了user对象name属性的值和alert方法，它从显示“my name is”对话框变为了显示“hello”对话框。
4．删除属性和方法
删除一个属性和方法的过程也很简单，就是将其置为undefined：
user.name=undefined;
user.alert=undefined;
这样就删除了name属性和alert方法。
在添加、修改或者删除属性时，和引用属性相同，也可以采用方括号（[]）语法：
user["name"]="tom";
使用这种方式还有一个特点，可以使用非标识符字符串作为属性名称，例如标识符中不允许以数字开头或者出现空格，但在方括号（[]）语法中却可以使用：
user["my name"]="tom";
需要注意，在使用这种非标识符作为名称的属性时，仍然要用方括号语法来引用：
alert(user["my name"]);
而不能写为：
alert(user.my name);
事实上，JavaScript中的每个对象都是动态可变的，这给编程带来了灵活性，也和其他语言产生了区别。

6.1.5 使用大括号（{ }）语法创建无类型对象
传统的面向对象语言中，每个对象都会对应到一个类。上一节讲this指针时提到，JavaScript中的对象其实就是属性（方法）的一个集合，并没有严格意义上类的概念。所以它提供了一种简单的方式来创建对象，即大括号（{}）语法：
{
      property1:statement,
      property2:statement2,
      …,
      propertyN:statmentN
}
通过大括号括住多个属性或方法及其定义（这些属性或方法用逗号隔开），来实现对象的定义，这段代码就直接定义个了具有n个属性或方法的对象，其中属性名和其定义之间用冒号（:）隔开。例如：

第一行定义了一个无类型对象obj，它等价于：
var obj=new Object();
接着定义了一个对象user及其属性和方法。注意，除了最后一个属性（方法）定义，其他的必须以逗号（,）结尾。其实，使用动态增减属性的方法也可以定义一个完全相同的user对象，读者可使用前面介绍的方法实现。
使用这种方式来定义对象，还可以使用字符串作为属性（方法）名，例如：
var obj={"001":"abc"}
这就给对象obj定义了一个属性“001”，这并不是一个有效的标识符，所以要引用这个属性必须使用方括号语法：
obj["001"];
由此可见，无类型对象提供了一种创建对象的简便方式，它以紧凑和清晰的语法将一个对象体现为一个完整的实体。而且也有利于减少代码的体积，这对JavaScript代码来说尤其重要，减少体积意味着提高了访问速度。

6.1.6 prototype原型对象
prototype 对象是实现面向对象的一个重要机制。每个函数（function）其实也是一个对象，它们对应的类是“Function”，但它们身份特殊，每个函数对象都具有一个子对象prototype。即prototype表示了该函数的原型，而函数也是类，prototype就是表示了一个类的成员的集合。当通过 new来获取一个类的对象时，prototype对象的成员都会成为实例化对象的成员。
既然prototype是一个对象，可以使用前面两节介绍的方法对其进行动态的修改，这里先给出一个简单的例子：
//定义了一个空类
function class1(){
      //empty
}
//对类的prototype对象进行修改，增加方法method
class1.prototype.method=function(){
      alert("it's a test method");
}
//创建类class1的实例
var obj1=new class1();
//调用obj1的方法method
obj1.method();

图6.3显示了执行的结果。

十三郎 2007-11-27 21:06 发表评论

JavaScript中的Node相关内容介绍

十三郎 — Thu, 25 Oct 2007 02:04:00 GMT

Node往往被翻译为节点，在一个对象（可以简单的理解为是HTML页面中），一个属性name="aaa"可以是一个节点，一个< div id="aaa">……< /div>也可以是一个节点，在< body>……< /body>中的，也是一个大大的节点。下面是一些有关Node的属性和方法，并没有包含部分不兼容IE和FF内容的讲解。

Node的属性介绍：

nodeType：显示节点的类型
nodeName：显示节点的名称
nodeValue：显示节点的值
attributes：获取一个属性节点
firstChild：表示某一节点的第一个节点
lastChild：表示某一节点的最后一个子节点
childNodes：表示所在节点的所有子节点
parentNode：表示所在节点的父节点
nextSibling：紧挨着当前节点的下一个节点
previousSibling：紧挨着当前节点的上一个节点
ownerDocument：（不知）

Node有各种各样的节点，我们先花一些时间认识他们，同时一并了解nodeType，nodeName和nodeValue属性：
名称：元素节点
nodeType：ELEMENT_NODE
nodeType值：1
nodeName：元素标记名
nodeValue：null