BlogJava-Vincent-文章分类-JavaScripthttp://www.blogjava.net/Vincent-chenxj/category/36155.htmlzh-cnMon, 24 Nov 2008 16:16:57 GMTMon, 24 Nov 2008 16:16:57 GMT60JavaScript的几种对象http://www.blogjava.net/Vincent-chenxj/articles/242412.htmlVincent-chenVincent-chenMon, 24 Nov 2008 16:00:00 GMThttp://www.blogjava.net/Vincent-chenxj/articles/242412.htmlhttp://www.blogjava.net/Vincent-chenxj/comments/242412.htmlhttp://www.blogjava.net/Vincent-chenxj/articles/242412.html#Feedback0http://www.blogjava.net/Vincent-chenxj/comments/commentRss/242412.htmlhttp://www.blogjava.net/Vincent-chenxj/services/trackbacks/242412.html阅读全文

Vincent-chen 2008-11-25 00:00 发表评论
]]>HTML DOM基础知识http://www.blogjava.net/Vincent-chenxj/articles/242411.htmlVincent-chenVincent-chenMon, 24 Nov 2008 15:58:00 GMThttp://www.blogjava.net/Vincent-chenxj/articles/242411.htmlhttp://www.blogjava.net/Vincent-chenxj/comments/242411.htmlhttp://www.blogjava.net/Vincent-chenxj/articles/242411.html#Feedback0http://www.blogjava.net/Vincent-chenxj/comments/commentRss/242411.htmlhttp://www.blogjava.net/Vincent-chenxj/services/trackbacks/242411.html一．什么是DOM
HTML文档对象模型（HTML Document Object Model）定义了访问和处理HTML文档的标准方法。HTML DOM 把HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

在1998年，W3C发布了第一级的DOM规范。这个规范允许访问和操作HTML页面中的每一个单独的元素。所有的浏览器都执行了这个标准，因此，DOM的兼容性问题也几乎难觅踪影了。

DOM可被JavaScript用来读取、改变HTML、XHTML以及XML文档。被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）：

Core DOM
定义了一套标准的针对任何结构化文档的对象

XML DOM
定义了一套标准的针对XML文档的对象

HTML DOM
定义了一套标准的针对HTML文档的对象。

二．文档树(节点树)
如下HTML文档：
Java代码 复制代码
  1. <html>   
  2.   <head>   
  3.     <title>DOM Tutorial</title>    
  4.   </head>    
  5.   <body>    
  6.     <h1>DOM Lesson one</h1>    
  7.     <p>Hello world!</p>    
  8.   </body>    
  9. </html>  


1)除文档节点之外的每个节点都有父节点。

2)大部分元素节点都有子节点。

3)当节点分享同一个父节点时，它们就是同辈（同级节点）

4)节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点

5)节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点

三．节点信息
每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
nodeName（节点名称） ,nodeValue（节点值）, nodeType（节点类型）

1.nodeName
nodeName属性含有某个节点的名称。
元素节点的nodeName是标签名称
属性节点的nodeName是属性名称
文本节点的nodeName永远是#text
文档节点的nodeName永远是#document
注释：nodeName所包含的XML元素的标签名称永远是大写的

2.nodeValue
对于文本节点，nodeValue属性包含文本。
对于属性节点，nodeValue属性包含属性值。
nodeValue属性对于文档节点和元素节点是不可用的。

3.nodeType
nodeType属性可返回节点的类型。

最重要的节点类型是：
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

四．查找节点
1．通过使用 getElementById() 和getElementsByName()和 getElementsByTagName() 方法

2.通过使用一个元素节点的childNodes,parentNode、firstChild以及lastChild属性

根节点
有两种特殊的文档属性可用来访问根节点：
document.documentElement  可返回存在于XML以及HTML文档中的文档根节点
document.body  对HTML页面的特殊扩展，提供了对<body>标签的直接访问
  • E417d542-064b-4c2e-a529-fe4d3da6957e-thumb
  • 大小: 19.1 KB


Vincent-chen 2008-11-24 23:58 发表评论
]]>getElementById与getElementsByName 与getElementsByTagName总结http://www.blogjava.net/Vincent-chenxj/articles/242410.htmlVincent-chenVincent-chenMon, 24 Nov 2008 15:57:00 GMThttp://www.blogjava.net/Vincent-chenxj/articles/242410.htmlhttp://www.blogjava.net/Vincent-chenxj/comments/242410.htmlhttp://www.blogjava.net/Vincent-chenxj/articles/242410.html#Feedback0http://www.blogjava.net/Vincent-chenxj/comments/commentRss/242410.htmlhttp://www.blogjava.net/Vincent-chenxj/services/trackbacks/242410.html1.getElementById
作用：一般页面里ID是唯一的，用于准备定为一个元素
语法： document.getElementById(id)
参数：id :必选项为字符串(String)
返回值：对象; 返回相同id对象中的第一个，按在页面中出现的次序,如果无符合条件的对象，则返回 null
Java代码 复制代码
  1. example：document.getElementById("id1").value;  


2.getElementsByName
作用：按元素的名称查找，返回一个同名元素的数组
语法： document.getElementsByName(name)
参数：name :必选项为字符串(String)
返回值：数组对象; 如果无符合条件的对象，则返回空数组，按在页面中出现的次序
Java代码 复制代码
  1. example：document.getElementsByName("name1")[0].value;   
  2. document.getElementsByName("name1")[1].value;  


3.getElementsByTagName
作用：按HTML标签名查询，返回一个相同标签元素的数组
语法： object.getElementsByTagName(tagname) object可以是document或event.srcElement.parentElement等
参数：tagname:必选项为字符串(String)，根据HTML标签检索。
返回值：数组对象; 如果无符合条件的对象，则返回空数组，按在页面中出现的次序
Java代码 复制代码
  1. example：document.getElementsByTagName("p")[0].childNodes[0].nodeValue;   
  2. document.getElementsByTagName("p")[1].childNodes[0].nodeValue  


Vincent-chen 2008-11-24 23:57 发表评论
]]>总结JS打印方法http://www.blogjava.net/Vincent-chenxj/articles/242407.htmlVincent-chenVincent-chenMon, 24 Nov 2008 15:51:00 GMThttp://www.blogjava.net/Vincent-chenxj/articles/242407.htmlhttp://www.blogjava.net/Vincent-chenxj/comments/242407.htmlhttp://www.blogjava.net/Vincent-chenxj/articles/242407.html#Feedback0http://www.blogjava.net/Vincent-chenxj/comments/commentRss/242407.htmlhttp://www.blogjava.net/Vincent-chenxj/services/trackbacks/242407.html对JS的打印方法总结一下，方便日后查阅。

一．用JS自带函数打印

直接调用
Java代码 复制代码
  1. <a href="javascript:window.print();">打印</a>  


二．IEWebBrowser组件

介绍

http://support.microsoft.com/default.aspx?scid=kb%3BEN-US%3BQ267240#top
http://support.microsoft.com/kb/q247671/#appliesto

Java代码 复制代码
  1. <OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>    
  2. <input name=Button onClick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开>   
  3. <input name=Button onClick=document.all.WebBrowser.ExecWB(2,1) type=button value=关闭所有>   
  4. <input name=Button onClick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为>    
  5. <input name=Button onClick=document.all.WebBrowser.ExecWB(6,1) type=button value=打印>   
  6. <input name=Button onClick=document.all.WebBrowser.ExecWB(6,6) type=button value=直接打印>   
  7. <input name=Button onClick=document.all.WebBrowser.ExecWB(7,1) type=button value=打印预览>   
  8. <input name=Button onClick=document.all.WebBrowser.ExecWB(8,1) type=button value=页面设置>   
  9. <input name=Button onClick=document.all.WebBrowser.ExecWB(10,1) type=button value=属性>   
  10. <input name=Button onClick=document.all.WebBrowser.ExecWB(17,1) type=button value=全选>   
  11. <input name=Button onClick=document.all.WebBrowser.ExecWB(22,1) type=button value=刷新>   
  12. <input name=Button onClick=document.all.WebBrowser.ExecWB(45,1) type=button value=关闭>  


三．使用ScriptX.cab控件

1．下载ScriptX.cab控件

官网http://www.meadroid.com/scriptx/index.asp

2．使用object元素，修改codebase，classid的值

这里调用控件ScriptX.cab
Java代码 复制代码
  1. <OBJECT id="factory" style="DISPLAY: none" codeBase="${rootUrl}js/smsx.cab#VVersion=6,3,435,20"  classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" viewastext></OBJECT>  


这段代码用来加载cab文件，clsid和codebase必须要和你下载的cab中的信息对应，否则组件会加载错误，这两项其实不难找，只要你用winrar打开你下载的cab文件，然后找到扩展名是.inf的文件，然后打开之，就能看到了。

3．调用控件脚本

Print.js文件
Java代码 复制代码
  1. function setPrintBase(headerText,footerText,rootUrl) {   
  2.   
  3.     // -- advanced features  ，未曾使用过，有待确认。   
  4.   
  5.         //factory.printing.SetMarginMeasure(2); // measure margins in inches   
  6.   
  7.         //factory.SetPageRange(false, 1, 3);// need pages from 1 to 3   
  8.   
  9.         //factory.printing.printer = "HP DeskJet 870C";   
  10.   
  11.         //factory.printing.copies = 2;   
  12.   
  13.         //factory.printing.collate = true;   
  14.   
  15.         //factory.printing.paperSize = "A4";   
  16.   
  17.         //factory.printing.paperSource = "Manual feed"   
  18.   
  19.     var header = (headerText==null||headerText=="")?'默认页眉':headerText;   
  20.   
  21.     var footer = (footerText==null||footerText=="")?'默认页角':footerText;   
  22.   
  23.   factory.printing.header = "&b"+header+"&b" ;   
  24.   
  25.   factory.printing.footer = "&b"+footer;   
  26.   
  27.   factory.printing.portrait = true;   
  28.   
  29.   factory.printing.leftMargin =10.00;   
  30.   
  31.   factory.printing.topMargin =10.00;   
  32.   
  33.   factory.printing.rightMargin =10.00;   
  34.   
  35.   factory.printing.bottomMargin =10.00;   
  36.   
  37. }  



例子
Java代码 复制代码
  1. <%@ page contentType="text/html;charset=GBK"%>   
  2.   
  3. <html>   
  4. <head>   
  5. <meta http-equiv="imagetoolbar" content="no">   
  6. <script language="javascript" src="print.js"></script>   
  7. <style media="print">   
  8. .Noprint   {DISPLAY:   none;}   
  9. </style>   
  10. <title>打印测试</title>   
  11. </head>   
  12. <OBJECT id="factory" style="DISPLAY: none" codeBase="smsx.cab#VVersion=6,3,435,20"  classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" viewastext></OBJECT>   
  13.   
  14. <script defer>   
  15. function window.onload() {      
  16. setPrintBase('页眉','页脚');   
  17. }   
  18. </script>   
  19. <body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">   
  20. <center class="Noprint">   
  21.  <input type=button value="打印" onclick="factory.printing.Print(true)">    
  22. <input type=button value="页面设置" onclick="factory.printing.PageSetup()">    
  23.  <input type=button value="打印预览" onclick="factory.printing.Preview()">              
  24. <input type="button" value="关闭" onclick="window.close();">   
  25. </center>   
  26.    <center>   
  27.       <table width="100%" border="0" cellpadding="0" cellspacing="0">   
  28.           <tr><td align="center"><b>内容</b></td></tr>   
  29.        </table>   
  30.     </center>   
  31. </body>   
  32. </html>  


四．对比

1．Window.print调用方便，但功能简单

2．功能更强大，但使用IEWebBrowser有时会报JS没有权限的错误。

3．ScriptX控件功能也比较强大，目前在使用这种方式。


Vincent-chen 2008-11-24 23:51 发表评论
]]>学习Cookiehttp://www.blogjava.net/Vincent-chenxj/articles/242406.htmlVincent-chenVincent-chenMon, 24 Nov 2008 15:48:00 GMThttp://www.blogjava.net/Vincent-chenxj/articles/242406.htmlhttp://www.blogjava.net/Vincent-chenxj/comments/242406.htmlhttp://www.blogjava.net/Vincent-chenxj/articles/242406.html#Feedback0http://www.blogjava.net/Vincent-chenxj/comments/commentRss/242406.htmlhttp://www.blogjava.net/Vincent-chenxj/services/trackbacks/242406.html看到好多网站提供记住用户名或密码的功能,上网搜了些关于cookie的文章学习整理一下.
一.什么是Cookies?

你会问，什么是cookies呢? cookie 是浏览器保存在用户计算机上的少量数据。它与特定的WEB页或WEB站点关联起来，自动地在WEB浏览器和WEB服务器之间传递。

比如，如果你运行的是Windows操作系统，使用Internet Explorer上网，那么你会发现在你的“Windows”目录下面有一个子目录，叫做“Temporary Internet Files”。如果你有空看看这个目录，就会发现里面有一些文件，文件名称看起来就象电子邮件地址。比如在我机器上的这个目录里，就有 “XX@support.microsoft.com”这样的文件。这是一个cookie 文件，这个文件从哪来呢？猜一猜，它来自微软的支持站点。
对于管理细小的、不重要的、不想保存在中央数据库里的细节信息，Cookies 是个很不错的方案。（这不是说大家的名字不重要。）比如，目前网站上不断增长的自定义服务，可以为每个用户定制他们要看的内容。如果你设计的就是这样一个站点，那么你怎么来管理这样的信息：一个用户喜欢绿色的菜单条，而另一个喜欢红色的。确实是个累人的问题。不过，这样的信息，可以很安全地记录到cookie，并保存在用户的计算机上，而你自己的数据库空间可以留给更长久更有意义的数据。

总结 Cookies 对于安全用途，通常很有用。我不想在此就这一问题过于深入，只是提供一个示例，可以看到如何使用在一段时间之后过期的cookies来保证站点安全：

1. 使用用户名和口令，通过 SSL 登录。
2. 在服务器的数据库里检查用户名和口令。如果登录成功，建立一个当前时间标签的消息摘要 (比如 MD5) ，并把它保存在cookie和服务器数据库里。把用户的登录时间保存在服务器数据库里面的用户记录里。
3. 在进行每个安全事务时（用户处于登录状态的任何事务），把cookie的消息摘要和保存在服务器数据库里的摘要进行比较，如果比较失败，就把用户引导到登录界面。
4. 如果第3步检查通过，那么检查当前时间和登录时间之音经过的时间是否超过允许的时间长度。如果用户已经超时，那么就把用户引到登录界面。
5. 如果第3步和第4步都通过了，那么把登录时间重新设置成当前时间，允许事务发生。那些需要你登录的安全站点，可能多数使用的都是和这里介绍的类似的方法。


二.Cookie的构成

     Cookies最初设计时，是为了CGI编程。但是，我们也可以使用Javascript脚本来操纵cookies。

     在Javascript脚本里，一个cookie 实际就是一个字符串属性。当你读取cookie的值时，就得到一个字符串，里面当前WEB页使用的所有cookies的名称和值。每个cookie除了name名称和value值这两个属性以外，还有四个属性。这些属性是： expires过期时间、 path路径、 domain域、以及 secure安全。

1.Expires–过期时间

   指定cookie的生命期。具体是值是过期日期。如果想让cookie的存在期限超过当前浏览器会话时间，就必须使用这个属性。当过了到期日期时，浏览器就可以删除cookie文件，没有任何影响。

2.Path–路径

      指定与cookie关联的WEB页。值可以是一个目录，或者是一个路径。如果http://www.zdnet.com/devhead/index.html 建立了一个cookie，那么在http://www.zdnet.com/devhead/目录里的所有页面，以及该目录下面任何子目录里的页面都可以访问这个cookie。这就是说，在http://www.zdnet.com/devhead/stories/articles 里的任何页面都可以访问http://www.zdnet.com/devhead/index.html建立的cookie。但是，如果http://www.zdnet.com/zdnn/ 需要访问http://www.zdnet.com/devhead/index.html设置的cookes，该怎么办？这时，我们要把cookies 的path属性设置成“/”。在指定路径的时候，凡是来自同一服务器，URL里有相同路径的所有WEB页面都可以共享cookies。现在看另一个例子：如果想让 http://www.zdnet.com/devhead/filters/ 和http://www.zdnet.com/devhead/stories/共享cookies，就要把path设成“/devhead”。

3.Domain–域

       指定关联的WEB服务器或域。值是域名，比如zdnet.com。这是对path路径属性的一个延伸。如果我们想让 catalog.mycompany.com 能够访问shoppingcart.mycompany.com设置的cookies，该怎么办? 我们可以把domain属性设置成“mycompany.com”，并把path属性设置成“/”。FYI：不能把cookies域属性设置成与设置它的服务器的所在域不同的值。

4.Secure–安全

     指定cookie的值通过网络如何在用户和WEB服务器之间传递。这个属性的值或者是“secure”，或者为空。缺省情况下，该属性为空，也就是使用不安全的HTTP连接传递数据。如果一个 cookie 标记为secure，那么，它与WEB服务器之间就通过HTTPS或者其它安全协议传递数据。不过，设置了secure属性不代表其他人不能看到你机器本地保存的cookie。换句话说，把cookie设置为secure，只保证cookie与WEB服务器之间的数据传输过程加密，而保存在本地的cookie文件并不加密。如果想让本地cookie也加密，得自己加密数据。

三.操作Cookies

     请记住，cookie就是文档的一个字符串属性。要保存cookie，只要建立一个字符串，格式是name=（名称＝值），然后把文档的 document.cookie 设置成与它相等即可。比如，假设想保存表单接收到的用户名，那么代码看起来就象这样：

Java代码 复制代码
  1. document.cookie = "username=" + escape(form.username.value);  


在这里，使用 escape() 编码函数非常重要，因为cookie值里可能包含分号、逗号或者空格。这就是说，在读取cookie值时，必须使用对应的unescape()函数给值解码。

1.cookie的四个属性

name=[; expires=][; domain=][; path=][; secure]

名称=<值>[; expires=<日期>][; domain=<域>][; path=<路径>][; 安全],  和 应当用对应的值替换。

2.应当使用GMT格式
可以使用Javascript脚本语言的日期类Date的.toGMTString() 方法得到这一GMT格式的日期值。

3.方括号代表这项是可选的
  比如在 [; secure]两边的方括号代表要想把cookie设置成安全的，就需要把"; secure" 加到cookie字符串值的后面。如果"; secure" 没有加到cookie字符串后面，那么这个cookie就是不安全的。

4.不要把尖括号<> 和方括号[] 加到cookie里
（除非它们是某些值的内容）设置属性时，不限属性，可以用任何顺序设置。

  下面是一个例子，在这个例子里，cookie "username" 被设置成在15分钟之后过期，可以被服务器上的所有目录访问，可以被"mydomain.com"域里的所有服务器访问，安全状态为安全。
Java代码 复制代码
  1. // Date() 的构造器设置以毫秒为单位   
  2. // .getTime() 方法返回时间，单位为毫秒   
  3. // 所以要设置15分钟到期，要用60000毫秒乘15分钟   
  4. var expiration = new Date((new Date()).getTime() + 15 * 60000);   
  5. document.cookie = "username=" + escape(form.username.value)+ "; expires ="  
  6. + expiration.toGMTString() + "; path=" + "/" + "; _   
  7. domain=" + "mydomain.com" + "; secure";  


读取cookies值有点象个小把戏，因为你一次就得到了属于当前文档的所有cookies。

// 下面这个语句读取了属于当前文档的所有cookies
Java代码 复制代码
  1. var allcookies = document.cookie;  


现在，我们得解析allcookies变量里的不同cookies，找到感兴趣的指定cookie。这个工作很简单，因为我们可以利用Javascript语言提供的扩展字符串支持。

如果我们对前面分配的cookie "username" 感兴趣，可以用下面的脚本来读取它的值。
Java代码 复制代码
  1. // 我们定义一个函数，用来读取特定的cookie值。   
  2. function getCookie(cookie_name)   
  3. {   
  4. var allcookies = document.cookie;   
  5. var cookie_pos = allcookies.indexOf(cookie_name);   
  6.   
  7. // 如果找到了索引，就代表cookie存在，   
  8. // 反之，就说明不存在。   
  9. if (cookie_pos != -1)   
  10. {   
  11. // 把cookie_pos放在值的开始，只要给值加1即可。   
  12. cookie_pos += cookie_name.length + 1;   
  13. var cookie_end = allcookies.indexOf(";", cookie_pos);   
  14. if (cookie_end == -1)   
  15. {   
  16. cookie_end = allcookies.length;   
  17. }   
  18.   
  19. var value = unescape(allcookies.substring(cookie_pos, cookie_end));   
  20. }   
  21. return value;   
  22. }  


// 调用函数
Java代码 复制代码
  1. var cookie_val = getCookie("username");  


  上面例程里的 cookie_val 变量可以用来生成动态内容，或者发送给服务器端CGI脚本进行处理。现在你知道了使用Javascript脚本操纵cookies的基本方法。但是，如果你跟我一样，那么我们要做的第一件事，就是建立一些接口函数，把cookies处理上的麻烦隐藏起来。不过，在你开始编程之前，稍候片刻。这些工作，早就有人替你做好了。你要做的，只是到哪去找这些接口函数而已。

   比如，在David Flangan的Javascript: The Definitive Guide 3rd Ed.这本书里，可以找到很好的cookie应用类。你也可以在Oreilly的WEB站点上找到这本书里的例子。本文最后的链接列表里，有一些访问这些cookie示例的直接链接。

四.Cookies 的隐患

1.Cookies 安全性
   因为某些原因Cookies 的名声很不好。许多人利用cookies做一些卑鄙的事情，比如流量分析、点击跟踪。Cookies 也不是非常安全，特别是没有secure属性的cookies。不过，即使你用了安全的cookies，如果你和别人共用计算机，比如在网吧，那么别人就可以窥探计算机硬盘上未加密保存的cookie文件，也就有可能窃取你的敏感信息。所以，如果你是一个WEB开发人员，那么你要认真考虑这些问题。不要滥用cookies。不要把用户可能认为是敏感的数据保存在cookies里。如果把用户的社会保险号、信用卡号等保存在cookie里，等于把这些敏感信息放在窗户纸下，无异于把用户投到极大危险之中。一个好的原则是，如果你不想陌生人了解你的这些信息，那就不要把它们保存在cookies里。

2.cookies还有一些实际的限制
  Cookies保留在计算机上，不跟着用户走。如果用户想换计算机，那么新计算机无法得到原来的cookie。甚至用户在同一台计算机上使用不同浏览器，也得不到原来的cookie：Netscape 不能读取Internet Explorer 的cookies。

  3.用户不愿意接受cookies
  所以不要以为所有的浏览器都能接受你发出的cookies。如果浏览器不接受cookies，你要保证自己的WEB站点不致因此而崩溃或中断。

4.WEB 浏览器能保留的cookies不一定能超过300个
  也没有标准规定浏览器什么时候、怎么样作废cookies。所以达到限制时，浏览器能够有效地随机删除cookies。浏览器保留的来自一个WEB服务器上的cookies，不超过20个，每个cookie的数据（包括名称和值），不超过4K字节.

  [b]总之，注意保持cookie简单。不要依赖cookies的存在，不要在每个cookie里保存太多信息。不要保存太多的cookes。但是，抛除这些限制，在技巧高超的WEB管理员手里，cookie的概念是一个有用的工具。

Vincent-chen 2008-11-24 23:48 发表评论
]]>几种JS框架http://www.blogjava.net/Vincent-chenxj/articles/242404.htmlVincent-chenVincent-chenMon, 24 Nov 2008 15:47:00 GMThttp://www.blogjava.net/Vincent-chenxj/articles/242404.htmlhttp://www.blogjava.net/Vincent-chenxj/comments/242404.htmlhttp://www.blogjava.net/Vincent-chenxj/articles/242404.html#Feedback0http://www.blogjava.net/Vincent-chenxj/comments/commentRss/242404.htmlhttp://www.blogjava.net/Vincent-chenxj/services/trackbacks/242404.html以前看到网站有好多人在讨论Prototype之类的东西，一直没太在意，最近偶尔在网上查了一下，才知道他是什么东西，看来自己太落后了，有点脱离社会很久的感觉，呵呵。
在网上狂搜了一阵，把一些JS框架的相关资料整理下,为以后学习用.

一．Prototype
   prototype.js是由Sam Stephenson写的一个javascript类库。这个构思奇妙，而且兼容标准的类库，能帮助你轻松建立有高度互动的web2.0特性的富客户端页面
官方网站
http://www.prototypejs.org/

使用手册，关于各函数的注释
http://www.cnblogs.com/thinhunan/archive/2006/04/01/364404.html

【Prototype 1.4.0】源码解读----全文注释版 坚强2002最新奉献
http://www.cnblogs.com/me-sa/articles/605263.html

二．MooTools
  MooTools是一个简洁，模块化，面向对象的JavaScript框架。它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。Mootools跟prototypejs相类似，语法几乎一样。但它提供的功能要比prototypejs多，而且更强大。比如增加了动画特效、拖放操作等等。建议大家可以用它来代替prototypejs。

官网：http://mootools.net/

三．jQuery
jQuery 是一个新型的JavaScript库.

jQuery是一个简洁快速的JavaScript库，它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。jQuery的设计会改变你写JavaScript代码的方式。

jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不用的应用程序。

jQuery是一个轻量级的脚本，其代码非常小巧，JavaScript包只有15K左右。

jQuery支持CSS1-CSS3,以及基本的xPath

jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+

官网：http://jquery.com/

四.DOJO
  Dojo是一个非常强大面向对象，开源的JavaScript工具箱。它为开发Web胖客户端程序提供了一套完整的Widget和一些特效操作。

官网：http://dojotoolkit.org/

五.EXT
   Ext(yui-ext)是一组扩展自Yahoo!UI，具有CS风格的Web用户界面组件。主要UI包括：dialog，grid，layout，tabs等。

官网：http://extjs.com/

Vincent-chen 2008-11-24 23:47 发表评论
]]>javascript小结(二)http://www.blogjava.net/Vincent-chenxj/articles/242402.htmlVincent-chenVincent-chenMon, 24 Nov 2008 15:43:00 GMThttp://www.blogjava.net/Vincent-chenxj/articles/242402.htmlhttp://www.blogjava.net/Vincent-chenxj/comments/242402.htmlhttp://www.blogjava.net/Vincent-chenxj/articles/242402.html#Feedback0http://www.blogjava.net/Vincent-chenxj/comments/commentRss/242402.htmlhttp://www.blogjava.net/Vincent-chenxj/services/trackbacks/242402.html
一.链接提交form
Java代码 复制代码
  1. <script language="javascript" >   
  2.        function Search(page){   
  3.     searchForm.action="finance/manageExpend.do?method=searchCashExpend&curPage="+page;   
  4.         document.searchForm.submit();    
  5. }   
  6.  </script>   
  7.   
  8. <a href="javascript:Search(<%=page%>)">页码</a>  


二.刷新
刷新iframe
Java代码 复制代码
  1. document.all.frameName.src=url ;  


刷新指定url
Java代码 复制代码
  1. Window.location.href=url  


刷新本页
Java代码 复制代码
  1. wondow.location.reload()  


刷新图片
Java代码 复制代码
  1. document.all.Image1.src=url;  



三.返回主页/前页
Java代码 复制代码
  1. 返回前页：使用OnClick="history.go(-1)"  
  2. 返回主页：使用OnClick='top.location.href="index.jsp"'  
  3. <a href="javascript:history.back()">后退</a>   
  4. <a href="javascript:history.go()">前进</a>   
  5. <a href="javascript:location.reload()">刷新</a>  


四、window.open()
1.语法
Java代码 复制代码
  1. window.open(pageURL,name,parameters)  

其中：
pageURL 为子窗口路径
name 为子窗口句柄
parameters 为窗口参数(各参数用逗号分隔)
2.例子
Java代码 复制代码
  1. <SCRIPT>    
  2. window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')    
  3. </SCRIPT>  

   脚本运行后，page.html将在新窗体newwindow中打开，宽为100，高为400，距屏顶0象素，屏左0象素，无工具条，无菜单条，无滚动条，不可调整大小，无地址栏，无状态栏。请对照。

3、各项参数
上例中涉及的为常用的几个参数，除此以外还有很多其他参数,其中yes/no也可使用1/0；pixel value为具体的数值，单位象素。

参数 | 取值范围 | 说明

Java代码 复制代码
  1. alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后    
  2. alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上    
  3. depended | yes/no | 是否和父窗口同时关闭    
  4. directories | yes/no | Nav2和3的目录栏是否可见    
  5. height | pixel value | 窗口高度    
  6. hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键    
  7. innerHeight | pixel value | 窗口中文档的像素高度    
  8. innerWidth | pixel value | 窗口中文档的像素宽度    
  9. location | yes/no | 位置栏是否可见    
  10. menubar | yes/no | 菜单栏是否可见    
  11. outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度    
  12. outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度    
  13. resizable | yes/no | 窗口大小是否可调整    
  14. screenX | pixel value | 窗口距屏幕左边界的像素长度    
  15. screenY | pixel value | 窗口距屏幕上边界的像素长度    
  16. scrollbars | yes/no | 窗口是否可有滚动栏    
  17. titlebar | yes/no | 窗口题目栏是否可见    
  18. toolbar | yes/no | 窗口工具栏是否可见    
  19. Width | pixel value | 窗口的像素宽度    
  20. z-look | yes/no | 窗口被激活后是否浮在其它窗口之上  


五.禁止复制文本

Java代码 复制代码
  1. <body oncontextmenu='return false' //不能弹出右键菜单   
  2.  ondragstart='return false'  禁止鼠标在网页上拖动   
  3. onselectstart ='return false'  可以实现对文本的选择与否的控制,默认可选,false 不可选   
  4. onselect='document.selection.empty()'  
  5.  oncopy='document.selection.empty()'    
  6. onbeforecopy='return false'  控制复制事件    
  7. onmouseup='document.selection.empty()'> 


Vincent-chen 2008-11-24 23:43 发表评论
]]>javascript小结(一)http://www.blogjava.net/Vincent-chenxj/articles/242399.htmlVincent-chenVincent-chenMon, 24 Nov 2008 15:25:00 GMThttp://www.blogjava.net/Vincent-chenxj/articles/242399.htmlhttp://www.blogjava.net/Vincent-chenxj/comments/242399.htmlhttp://www.blogjava.net/Vincent-chenxj/articles/242399.html#Feedback0http://www.blogjava.net/Vincent-chenxj/comments/commentRss/242399.htmlhttp://www.blogjava.net/Vincent-chenxj/services/trackbacks/242399.html1.网页技术分为三个方面：静态网页、网页美工、动态网页。
2.DHTML(动态HTML)是一种通过各种技术的综合而得以实现的概念，包括三部分：HTML、Script(JavaScrip or VBScript)、CSS(Cascading Style Sheets)。

1.删除提示

1)<a  href="#" onclick="return(confirm('删除后无法恢复,您确定删除吗?'))">删除</a>

2)JS
<a  href="#" >删除</a>
<script language="JavaScript" type="text/javascript">
function delete_confirm(){
if(event.srcElement.outerText=="删除" || event.srcElement.value=="删除")
  event.returnValue=confirm("删除后将不能恢复，您确认执行删除操作么？");
}
document.onclick=delete_confirm;
</script>

2.点击按钮探出提示
<input type=button value="reload" onclick="javascript:reload()">

<script type="text/javascript">
function reload() {

if (confirm("确认?"))
{
var url="#";
window.location.href=url;
}
}

3.点击链接弹出提示

<a  href="确认后的连接地址" onclick="return(confirm('想要的提示信息?'))">显示信息</a>

4.onchange（）用法
<select name="year" onchange="javascript:changeYear()">
<OPTION OPTION>
</SELECT>

<SCRIPT language="javascript">
function changeYear(){
  var url = ....;
window.location.href = url;
}
</SCRIPT>


5.根据选择的radio转向不同的URL
<input type="Radio" name="id" value="1" checked></td>
<input type="Radio" name="id" value="2" checked></td>
<input type="Radio" name="id" value="3" checked></td>

<SCRIPT language="javascript">
function WhichOneisChecked(obj) {
for (var i = 0;i < obj.elements.length;i++){
if (obj.elements[i].checked == true){
var weekLogId=obj.elements[i].value;
var url="......";
window.location.href = url;
}
}
}
</SCRIPT>


6.radio 全选
function checkAll(e, itemName)
{
  var aa = document.getElementsByName(itemName);
  for (var i=0; i<aa.length; i++)
   aa[i].checked = e.checked;
}
function check(e, allName)
{
  var all = document.getElementsByName(allName)[0];
  if(!e.checked) all.checked = false;
  else
  {
    var aa = document.getElementsByName(e.name);
    for (var i=0; i<aa.length; i++)
     if(!aa[i].checked) return;
    all.checked = true;
  }
  
<input type=checkbox checked name=allTeams onclick="checkAll(this, 'teamIds')">

<input type="checkbox" name="teamIds" checked value="<%=.....%>" onclick="check(this, 'allTeams')">

7.DIV 的显示、隐藏
链接实现
<script language="javascript">
  function showLay(divId){
        var objDiv = eval(divId);
        if (objDiv.style.display=="none"){
                eval("sp"+divId+".innerHTML='隐藏'");
                objDiv.style.display="";
        }else{
                eval("sp"+divId+".innerHTML='查看'");
                objDiv.style.display="none";
        }}
  </script>

   <td>
      <a href="#"  onclick="showLay('Layer1')"><span id="spLayer1">查看</span></a>
      <br>
      <div id="Layer1" style="display:none;">......</div>
     </td>

按钮实现
<SCRIPT LANGUAGE="JavaScript">
function hidden_show()
{
var obj = document.getElementById("Layer1");
if(obj.style.visibility == "")
  obj.style.visibility = "hidden";
else
  obj.style.visibility = "";
}
</SCRIPT>
<td>
      <INPUT TYPE="button" onclick="hidden_show();" value="hidden/show">
     <br>
      <div id="Layer1" >
       <%=weekPlan%>
      </div>
     </td>


Vincent-chen 2008-11-24 23:25 发表评论
]]>