JavaScript MVC框架PK：Angular、Backbone、CanJS与Ember
http://www.csdn.net/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember
一个好的js method 网站查询方法， 有browser兼容的介绍
http://help.dottoro.com/ljvtddtm.php
HTML转义字符
转义字符串(Escape Sequence)又称字符实体(Character Entity)。在HTML定义转义字符串有两个原因：
第一个原因是像<”和“>这类符号已被用来表示HTML标签不能直接作为文本中的符号使用。为了在文本中使用HTML在文档中使用这些符号需要定义其转义字符串。当解释程序遇到此类字符串时，将其解释为真实字符。输入转义字符串时，应严格遵守字母大小写的规则。
第二个原因是有些字符在ASCII没有定义字符集中，因此需要使用转义字符串来表示。
Browser兼容
table 的 td 的width 为0 的话， padding（left, right） 如果设置了值，在IE 和Chrome 下显示效果不同。在Chrome宽度可能在中间。在jsp 中 使用request.getHeader("User-Agent");IE:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; .NET CLR 1.1.4322; .NET CLR 2.0.50727; CIBA; .NET4.0C; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)Chrome:Mozilla/5.0 (Windows NT 5.2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36FirefoxMozilla/5.0 (Windows NT 5.2; rv:23.0) Gecko/20100101 Firefox/23.0window 没有 console 对象IE 与 FIREFOX 相容性问题 由 Kiang 发布於 08月23日 (23963 次浏览)以下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila Firefox1. document.form.item 问题(1)现有问题:现有的程序码中有很多 document.formName.item("itemName") 这种语法不能存在 MF 下执行(2)解决方案:改用 document.formName.elements["elementName"](3)其它参见 22. 集合项目问题(1)现有问题:许多集合类项目在现有程序码中使用 ()，IE 能接受，MF 不能。(2)解决方案:改用 [] 如：document.forms("formName") 改为 document.forms["formName"]。又如：document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1](3)其它3. window.event(1)现有问题:使用 window.event 无法在 MF 上执行(2)解决方案:MF 的 event 只能在事件现场使用，这个问题暂时无法解决。可以这样灵活:原程式码(可在IE中执行)：<input type="button" name="someButton" value="提交" οnclick="javascript:gotoSubmit()"/>...<script language="javascript">function gotoSubmit() { ...alert(window.event); // use window.event...}</script>新程式码(可在IE和MF中执行)：<input type="button" name="someButton" value="提交" οnclick="javascript:gotoSubmit(event)"/>...<script language="javascript">function gotoSubmit(evt) { evt = evt ? evt : (window.event ? window.event : null);...alert(evt); // use evt...}</script>另外，如果新程式码中的第一行没有改变，则与旧程式码相同（即 gotoSubmit 如果调用没有给出参数)，仍然只能在IE执行，但不会出错。因此，这个计划 tpl 部分仍与旧程式码兼容。4. HTML 项目的 id 作为项目名称的问题(1)现有问题在 IE 中，HTML 项目的 ID 可以作为 document 直接使用下属项目的变数名称。 MF 中不能。(2)解决方案用 getElementById("idName") 代替 idName 作为项目变数。5. 用idName字串获取项目问题(1)现有问题在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 项目，在MF 中不能。(2)解决方法用 getElementById(idName) 代替 eval(idName)。6. 变数名与某 HTML 项目 id 相同的问题(1)现有问题在 MF 因为项目 id 不作为 HTML 因此，可以使用项目名称 HTML 项目 id 变数名称相同，IE 中不能。(2)解决方案宣布变数时，全部添加 var ，避免歧义，这样在 IE 也可以正常执行。另外，最好不要取和 HTML 项目 id 为了减少错误，相同的变数名称。(3)其它参见 问题47. event.x 与 event.y 问题(1)现有问题在IE 中，event 项目有 x, y 属性，MF中没有。(2)解决方案在MF中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。故采用 event.clientX 代替 event.x。在IE 也有这个变数。event.clientX 与 event.pageX 有微妙的区别(当整个页面有滚动条时)，但大多数时候都是等效的。若要完全一样，可以稍微麻烦一点：mX = event.x ? event.x : event.pageX;然後用 mX 代替 event.x(3)其它event.layerX 在 IE 与 MF 具体意义是否有差异尚未测试。8. 关於frame(1)现有问题在 IE中 可以用window.testFrame取得该frame，mf中不行(2)解决方案在frame的使用方面mf和ie主要区别是：如果在frame以下属性写在标签中：<frame src="xx.htm" id="frameId" name="frameName" />那麽ie可以通过id或者name访问这个frame对应的window项目而mf只可以通过name来访问这个frame对应的window项目如上所述frame标签写在顶层widow裡面的htm裡面，那麼可以這樣訪問ie： window.top.frameId或者window.top.frameName來訪問這個window項目mf： 只能這樣window.top.frameName來訪問這個window項目另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")來訪問frame標籤並且可以通過window.top.document.getElementById("testFrame").src = 'xx.htm'來切換frame的內容也都可以通過window.top.frameName.location = 'xx.htm'來切換frame的內容關於frame和window的描述可以參見bbs的『window與frame』文章以及/test/js/test_frame/目錄下面的測試----adun 2004.12.09修改9. 在mf中，自己定義的屬性必須getAttribute()取得10.在mf中沒有 parentElement parement.children 而用parentNode parentNode.childNodeschildNodes的下標的含義在IE和MF中不同，MF使用DOM規範，childNodes中會插入空白文本節點。一般可以通過node.getElementsByTagName()來迴避這個問題。當html中節點缺失時，IE和MF對parentNode的解釋不同，例如<form><table><input/></table></form>MF中input.parentNode的值為form, 而IE中input.parentNode的值為空節點MF中節點沒有removeNode方法，必須使用如下方法 node.parentNode.removeChild(node)11.const 問題(1)現有問題:在 IE 中不能使用 const 關鍵字。如 const constVar = 32; 在IE中這是語法錯誤。(2)解決方法:不使用 const ，以 var 代替。12. body 項目MF的body在body標籤沒有被瀏覽器完全讀入之前就存在，而IE則必須在body完全被讀入之後才存在13. url encoding在js中如果書寫url就直接寫&不要寫&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';frm.action = url那麼很有可能url不會被正常顯示以至於參數沒有正確的傳到服務器一般會服務器報錯參數沒有找到當然如果是在tpl中例外，因為tpl中符合xml規範，要求&書寫為&一般MF無法識別js中的&14. nodeName 和 tagName 問題(1)現有問題：在MF中，所有節點均有 nodeName 值，但 textNode 沒有 tagName 值。在 IE 中，nodeName 的使用好像有問題（具體情況沒有測試，但我的IE已經死了好幾次）。(2)解決方法：使用 tagName，但應檢測其是否為空。15. 元素屬性IE下 input.type屬性為只讀，但是MF下可以修改16. document.getElementsByName() 和 document.all[name] 的問題(1)現有問題：在 IE 中，getElementsByName()、document.all[name] 均不能用來取得 div 元素（是否還有其它不能取的元素還不知道）。來源： webjx.com 整理 (責任編輯:webjx) 1. document.form.item 问题(1)现有问题：现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在Firefox(火狐)下运行(2)解决方法：改用 document.formName.elements["elementName"](3)其它参见 22. 集合类对象问题(1)现有问题：现有代码中许多集合类对象取用时使用 ()，IE 能接受，Firefox(火狐)不能。(2)解决方法：改用 [] 作为下标运算。如：document.forms("formName") 改为 document.forms["formName"]。又如：document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1](3)其它3. window.event(1)现有问题：使用 window.event 无法在火狐浏览器上运行(2)解决方法：火狐 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：原代码(可在IE中运行)： <br /><input type="button" name="someButton" value="提交" οnclick="javascript:gotoSubmit()"/><br />...<br /><script language="javascript"><br />function gotoSubmit() {<br />...<br />alert(window.event); // use window.event<br />...<br />}<br /></script>新代码(可在IE和火狐中运行)： <input type="button" name="someButton" value="提交" οnclick="javascript:gotoSubmit(event)"/><br />...<br /><script language="javascript"><br />function gotoSubmit(evt) {<br />evt = evt ? evt : (window.event ? window.event : null);<br />...<br />alert(evt); // use evt<br />...<br />}<br /></script>此外，如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。4. HTML 对象的 id 作为对象名的问题(1)现有问题在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在火狐中不能。(2)解决方法用 getElementById("idName") 代替 idName 作为对象变量使用。5. 用idName字符串取得对象的问题(1)现有问题在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在火狐中不能。(2)解决方法用 getElementById(idName) 代替 eval(idName)。6. 变量名与某 HTML 对象 id 相同的问题(1)现有问题在 火狐 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE中能。(2)解决方法在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。(3)其它参见 问题47. event.x 与 event.y 问题(1)现有问题在IE 中，event 对象有 x, y 属性，火狐中没有。(2)解决方法在火狐中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。故采用 event.clientX 代替 event.x。在IE 中也有这个变量。event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。如果要完全一样，可以稍麻烦些：mX = event.x ? event.x : event.pageX;然后用 mX 代替 event.x(3)其它event.layerX 在IE与火狐中都有，具体意义有无差别尚未试验。8. 关于frame(1)现有问题在 IE中 可以用window.testFrame取得该frame，火狐中不行(2)解决方法在frame的使用方面火狐和ie的最主要的区别是：如果在frame标签中书写了以下属性：<frame src="xx.htm" id="frameId" name="frameName" />那么ie可以通过id或者name访问这个frame对应的window对象而火狐只可以通过name来访问这个frame对应的window对象例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问ie： window.top.frameId或者window.top.frameName来访问这个window对象火狐： 只能这样window.top.frameName来访问这个window对象另外，在火狐和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容关于frame和window的描述可以参见bbs的‘window与frame’文章以及/test/js/test_frame/目录下面的测试----adun 2004.12.09修改9. 在火狐中，自己定义的属性必须getAttribute()取得10.在火狐中没有 parentElement parement.children 而用parentNode parentNode.childNodeschildNodes的下标的含义在IE和火狐中不同，火狐使用DOM规范，childNodes中会插入空白文本节点。一般可以通过node.getElementsByTagName()来回避这个问题。当html中节点缺失时，IE和火狐对parentNode的解释不同，例如<form><table><input/></table></form>火狐中input.parentNode的值为form, 而IE中input.parentNode的值为空节点火狐中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)11.const 问题(1)现有问题:在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。(2)解决方法:不使用 const ，以 var 代替。12. body 对象火狐的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在13. url encoding在js中如果书写url就直接写&不要写&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器一般会服务器报错参数没有找到当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&一般火狐无法识别js中的&14. nodeName 和 tagName 问题(1)现有问题：在火狐中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象有问题（具体情况没有测试，但我的IE已经死了好几次）。(2)解决方法：使用 tagName，但应检测其是否为空。15. 元素属性IE下 input.type属性为只读，但是火狐下可以修改16. document.getElementsByName() 和 document.all[name] 的问题(1)现有问题：在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素（是否还有其它不能取的元素还不知道）。分享到：11. chrome不支持modalDiaologreturnValue也获取不了值需使用window.opener.returnValue10.Firefox 的JRE插件安装9. safari -- 苹果 opera 是挪威欧普拉软件公司开发的8. 判断用户浏览器类型navigator.userAgent是描述用户代理信息7.java.security.cert.CertificateParsingException: no more data allowed for version 1 certificate出现这个错误的原因是数字证书的版本低了。可能这个数字证书和当前运行的程序没有关系。 可以在IE--> Tools-->Internet Options里的证书里面去找版本为V1 的， 删掉就可以了6.Apparently, in internet explorer 8, addToFavorites() MUST be called manually via user action, not onload or through other event. This is to prevent abuse, but it is very burdensome in certain instances. To get around this, on load, I trigger a pop-up that says "Are you sure you want to add this page to favorites?". When the end user clicks the "yes" button, this button triggers the addToFavorites() method. Which then triggers the real add to favorites popup. This is not a great solution, since it adds an extraneous pop-up, but it works.Windows Internet Explorer 8 and later. For security reasons, the AddFavorite method must be called as a response to a user-initiated action, such a mouse click. If called from a different context, such as the onload event of the body element, the AddFavorite method fails silently.5. IE9以下直接可以使用window.external.AddFavorite(url,title)添加收藏 firefox、safari等定义了 window.sidebar可以使用window.sidebar.addPanel(title,url,"") opera 需要通过rel=sidebar的a标签（<a href="url" title="title" rel="sidebar">添加收藏</a> ） 点击来实现 但是动态创建这种a标签是不行的（document.createElement('a')） onclick 返回值为false是不行的（οnclick="return false;"） chrome 等就只能用户自己来按Ctrl+D了 function AddFavorite(elem,url,title){ if(window.sidebar){//Firefox window.sidebar.addPanel(title,url,""); return false; }else if(window.external && window.external.AddFavorite){//IE window.external.AddFavorite(url,title); return false; }else if(window.opera && window.print){//Opera Hotlist elem.setAttribute('href',url); elem.setAttribute('title',title); elem.setAttribute('rel','sidebar'); elem.click(); return true; }else{//Other browser,For example:opera chrome alert(title+"\n"+url+"\n请使用快捷键 Ctrl+D 来手动添加书签！"); return false; }}Chrome官方解释，在设计时就决定了不允许通过js代码添加收藏。如果用户喜欢你的站点的话，他完全可以自己来。通过Ctrl+D快捷键或者地址栏的chrome addfavorite star来添加书签收藏。 4.IE8出于安全性的考虑，上传文件时屏蔽了真实的本地文件路径，而以“C:\fakepath\”取代之。可以通过设置浏览器安全选项得到真实路径： Internet选项 -> 安全 -> 自定义级别 -> 将本地文件上载至服务器时包含本地目录路径 -> 选“启动” -> 确定=================================================================================================================这是我总结多年的一个小文档，主要内容是Javascript和CSS浏览器兼容总结，最近看见有人咨询浏览器兼容的问题，就贡献出来。并不一定全，有的也可能不准确，比如新出的IE8、Chrome等都没有太多涉及，虽然最近做的一些项目也兼容了IE8、Chrome等，但都没来的及总结进去，后来就忘了…汗。大家一起慢慢完善吧。3. web开发调试利器http://www.css88.com/archives/9652. 不同浏览器对JavaScript的Date对象的支持http://www.sj33.cn/jc/wyjc/jsjc/200610/10226.htmljavascript部分1. document.form.item 问题问题：代码中存在 document.formName.item(“itemName”) 这样的语句，不能在FF下运行解决方法：改用 document.formName.elements["elementName"]2. 集合类对象问题问题：代码中许多集合类对象取用时使用()，IE能接受，FF不能解决方法：改用 [] 作为下标运算，例：document.getElementsByName(“inputName”)(1) 改为 document.getElementsByName(“inputName”)[1]3. window.event问题：使用 window.event 无法在FF上运行解决方法：FF的 event 只能在事件发生的现场使用，此问题暂无法解决。可以把 event 传到函数里变通解决：onMouseMove = “functionName(event)”function functionName (e) { e = e || window.event; ……}4. HTML对象的 id 作为对象名的问题问题：在IE中，HTML对象的 ID 可以作为 document 的下属对象变量名直接使用，在FF中不能解决方法：使用对象变量时全部用标准的 getElementById(“idName”)5. 用 idName 字符串取得对象的问题问题：在IE中，利用 eval(“idName”) 可以取得 id 为 idName 的HTML对象，在FF中不能解决方法：用 getElementById(“idName”) 代替 eval(“idName”)6. 变量名与某HTML对象 id 相同的问题问题：在FF中，因为对象 id 不作为HTML对象的名称，所以可以使用与HTML对象 id 相同的变量名，IE中不能解决方法：在声明变量时，一律加上 var ，以避免歧义，这样在IE中亦可正常运行最好不要取与HTML对象 id 相同的变量名，以减少错误7. event.x 与 event.y 问题问题：在IE中，event 对象有x,y属性，FF中没有解决方法：在FF中，与 event.x 等效的是 event.pageX ，但event.pageX IE中没有故采用 event.clientX 代替 event.x ，在IE中也有这个变量event.clientX 与 event.pageX 有微妙的差别，就是滚动条要完全一样，可以这样：mX = event.x ? event.x : event.pageX;然后用 mX 代替 event.x8. 关于frame问题：在IE中可以用 window.testFrame 取得该frame，FF中不行解决方法：window.top.document.getElementById(“testFrame”).src = ‘xx.htm’window.top.frameName.location = ‘xx.htm’9. 取得元素的属性在FF中，自己定义的属性必须 getAttribute() 取得10. 在FF中没有 parentElement，parement.children 而用 parentNode，parentNode.childNodes问题：childNodes 的下标的含义在IE和FF中不同，FF的 childNodes 中会插入空白文本节点解决方法：可以通过 node.getElementsByTagName() 来回避这个问题问题：当html中节点缺失时，IE和FF对 parentNode 的解释不同，例如：<form><table><input/></table></form>FF中 input.parentNode 的值为form，而IE中 input.parentNode 的值为空节点问题：FF中节点自己没有 removeNode 方法解决方法：必须使用如下方法 node.parentNode.removeChild(node)11. const 问题问题：在IE中不能使用 const 关键字解决方法：以 var 代替12. body 对象FF的 body 在 body 标签没有被浏览器完全读入之前就存在，而IE则必须在 body 完全被读入之后才存在这会产生在IE下，文档没有载入完时，在body上appendChild会出现空白页面的问题解决方法：一切在body上插入节点的动作，全部在onload后进行13. url encoding问题：一般FF无法识别js中的&解决方法：在js中如果书写url就直接写&不要写&14. nodeName 和 tagName 问题问题：在FF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值，在IE中，nodeName 的使用有问题解决方法：使用 tagName，但应检测其是否为空15. 元素属性IE下 input.type 属性为只读，但是FF下可以修改16. document.getElementsByName() 和 document.all[name] 的问题问题：在IE中，getElementsByName()、document.all[name] 均不能用来取得 div 元素是否还有其它不能取的元素还不知道（这个问题还有争议，还在研究中）17. 调用子框架或者其它框架中的元素的问题框架问题繁体字网的前段设计师曾做过详细的讲解，简单来说，在IE中，可以用如下方法来取得子元素中的值document.getElementById(“frameName”).(document.)elementNamewindow.frames["frameName"].elementName在FF中则需要改成如下形式来执行，与IE兼容：window.frames["frameName"].contentWindow.document.elementNamewindow.frames["frameName"].document.elementName18. 对象宽高赋值问题问题：FireFox中类似 obj.style.height = imgObj.height 的语句无效解决方法：统一使用 obj.style.height = imgObj.height + “px”;19. innerText的问题问题：innerText 在IE中能正常工作，但是 innerText 在FireFox中却不行解决方法：在非IE浏览器中使用textContent代替innerText20. event.srcElement和event.toElement问题问题：IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性解决方法：var source = e.target || e.srcElement;var target = e.relatedTarget || e.toElement;21. 禁止选取网页内容问题：FF需要用CSS禁止，IE用JS禁止解决方法：IE: obj.onselectstart = function() {return false;}FF: -moz-user-select:none;22. 捕获事件问题：FF没有setCapture()、releaseCapture()方法解决方法：IE:obj.setCapture();obj.releaseCapture();FF:window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);if (!window.captureEvents) { o.setCapture();}else { window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);}if (!window.captureEvents) { o.releaseCapture();}else { window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);}CSS部分div类1. 居中问题div里的内容，IE默认为居中，而FF默认为左对齐可以尝试增加代码margin:auto2. 高度问题两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}3. clear:both;不想受到float浮动的，就在div中写入clear:both;4. IE浮动 margin 产生的双倍距离#box { float:left;width:100px;margin:0 0 0 100px; //这种情况之下IE会产生200px的距离display:inline; //使浮动忽略}5. padding 问题FF设置 padding 后，div会增加 height 和 width，但IE不会 （* 标准的 XHTML1.0 定义 dtd 好像一致了）高度控制恰当，或尝试使用 height:100%;宽度减少使用 padding但根据实际经验，一般FF和IE的 padding 不会有太大区别，div 的实际宽 = width + padding ，所以div写全 width 和 padding，width 用实际想要的宽减去 padding 定义6. div嵌套时 y 轴上 padding 和 marign 的问题FF里 y 轴上 子div 到 父div 的距离为 父padding + 子marignIE里 y 轴上 子div 到 父div 的距离为 父padding 和 子marign 里大的一个FF里 y 轴上 父padding=0 且 border=0 时，子div 到 父div 的距离为0，子marign 作用到 父div 外面7. padding，marign，height，width 的傻瓜式解决技巧注意是技巧，不是方法：写好标准头<!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”>高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div宽尽量用margin，慎用padding，width算准实际要的减去padding列表类1. ul 标签在FF中默认是有 padding 值的，而在IE中只有margin有值先定义 ul {margin:0;padding:0;}2. ul和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成: {list-style:none;margin:0px;padding:0px;}显示类1. display:block,inline 两个元素display:block; //可以为内嵌元素模拟为块元素display:inline; //实现同一行排列的的效果display:table; //for FF,模拟table的效果display:block 块元素，元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度<div>，<p>，<h1>，<form>，<ul> 和 <li> 是块元素的例子display:inline 就是将元素显示为行内元素，元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。<span>，<a>，<label>，<input>，<img>，<label> 和 <em> 是 inline 元素的例子2. 鼠标手指状显示全部用标准的写法 cursor: pointer;背景、图片类1. background 显示问题全部注意补齐 width，height 属性2. 背景透明问题IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);IE: filter: alpha(opacity=10);FF: opacity:0.6;FF: -moz-opacity:0.10;最好两个都写，并将opacity属性放在下面
认证
一． BASIC认证概述在HTTP协议进行通信的过程中，HTTP协议定义了基本认证过程以允许HTTP服务器对WEB浏览器进行用户身份证的方法，当一个客户端向HTTP服务 器进行数据请求时，如果客户端未被认证，则HTTP服务器将通过基本认证过程对客户端的用户名及密码进行验证，以决定用户是否合法。客户端在接收到HTTP服务器的身份认证要求后，会提示用户输入用户名及密码，然后将用户名及密码以BASE64加密，加密后的密文将附加于请求信息中， 如当用户名为anjuta，密码为：123456时，客户端将用户名和密码用“：”合并，并将合并后的字符串用BASE64加密为密文，并于每次请求数据 时，将密文附加于请求头（Request Header）中。HTTP服务器在每次收到请求包后，根据协议取得客户端附加的用户信息（BASE64加密的用户名和密码），解开请求包，对用户名及密码进行验证，如果用 户名及密码正确，则根据客户端请求，返回客户端所需要的数据;否则，返回错误代码或重新要求客户端提供用户名及密码。二． BASIC认证的过程1． 客户端向服务器请求数据，请求的内容可能是一个网页或者是一个其它的MIME类型，此时，假设客户端尚未被验证，则客户端提供如下请求至服务器:Get /index.html HTTP/1.0Host:www.google.com2． 服务器向客户端发送验证请求代码401,服务器返回的数据大抵如下：HTTP/1.0 401 UnauthorisedServer: SokEvo/1.0WWW-Authenticate: Basic realm="google.com"Content-Type: text/htmlContent-Length: xxx3． 当符合http1.0或1.1规范的客户端（如IE，FIREFOX）收到401返回值时，将自动弹出一个登录窗口，要求用户输入用户名和密码。4． 用户输入用户名和密码后，将用户名及密码以BASE64加密方式加密，并将密文放入前一条请求信息中，则客户端发送的第一条请求信息则变成如下内容：Get /index.html HTTP/1.0Host:www.google.comAuthorization: Basic xxxxxxxxxxxxxxxxxxxxxxxxxxxx注：xxxx....表示加密后的用户名及密码。5． 服务器收到上述请求信息后，将Authorization字段后的用户信息取出、解密，将解密后的用户名及密码与用户数据库进行比较验证，如用户名及密码正确，服务器则根据请求，将所请求资源发送给客户端：三． BASIC认证的缺点HTTP基本认证的目标是提供简单的用户验证功能，其认证过程简单明了，适合于对安全性要求不高的系统或设备中，如大家所用路由器的配置页面的认证，几乎 都采取了这种方式。其缺点是没有灵活可靠的认证策略，如无法提供域（domain或realm）认证功能，另外，BASE64的加密强度非常低，可以说仅 能防止sohu的搜索把它搜到了。当然，HTTP基本认证系统也可以与SSL或者Kerberos结合，实现安全性能较高（相对）的认证系统四． BASIC认证的JAVA实现代码 HttpSession session=request.getSession(); String user=(String)session.getAttribute("user"); String pass; if(user==null){ try{ response.setCharacterEncoding("GBK"); PrintWriter ut=response.getWriter(); String authorization=request.getHeader("authorization"); if(authorization==null||authorization.equals("")){ response.setStatus(401); response.setHeader("WWW-authenticate","Basic realm=\"请输入管理员密码\""); out.print("对不起你没有权限！！"); return; } String userAndPass=new String(new BASE64Decoder().decodeBuffer(authorization.split(" ")[1])); if(userAndPass.split(":").length<2){ response.setStatus(401); response.setHeader("WWW-authenticate","Basic realm=\"请输入管理员密码\""); out.print("对不起你没有权限！！"); return; } user=userAndPass.split(":")[0]; pass=userAndPass.split(":")[1]; if(user.equals("111")&&pass.equals("111")){ session.setAttribute("user",user); RequestDispatcher dispatcher=request.getRequestDispatcher("index.jsp"); dispatcher.forward(request,response); }else{ response.setStatus(401); response.setHeader("WWW-authenticate","Basic realm=\"请输入管理员密码\""); out.print("对不起你没有权限！！"); return; } }catch(Exception ex){ ex.printStackTrace(); } }else{ RequestDispatcher dispatcher=request.getRequestDispatcher("index.jsp"); dispatcher.forward(request,response); }
js basic
js get operator systemhttp://stackoverflow.com/questions/13487856/get-specific-windows-version-by-javascripthttp://stackoverflow.com/questions/4006420/detect-windows-version-with-javascriptSearchResultTemplate.jsp?CHART_SN=51%26DATA_SN=37%26VIEW=V_PROJECT_CONFIG_VIEWCHART_SN=51&DATA_SN=37&VIEW=V_PROJECT_CONFIG_VIEW在iframe 中 ， %26 和 & 的转化Javascript 最佳实践1. 第一次给变量赋值时，别忘记var关键字给一个未声明的变量赋值，该变量会被自动创建为全局变量，在JS开发中，应该避免使用全局变量。2. 使用===替换==[10] == 10 var s1 = [10]; var s2 = 10; alert(s1==s2);3. 使用分号来作为行终止字符 4. 创建构造函数 function Person(firstName, lastName){ this.firstName = firstName; this.lastName = lastName; } var Saad = new Person("Saad", "Mousliki"); 5. 应当小心使用typeof、instanceof和constructor var arr = ["a", "b", "c"]; typeof arr; // return "object" arr instanceof Array // true arr.constructor(); //[] 6. 创建一个Self-calling函数 , 被称为自我调用的匿名函数或立即调用函数表达式（LLFE） (function(){ // some private code that will be executed automatically })(); (function(a,b){ var result = a+b; return result; })(10,20) 7. 给数组创建一个随机项 var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119]; var randomItem = items[Math.floor(Math.random() * items.length)];8. 在特定范围里获得一个随机数 var x = Math.floor(Math.random() * (max - min + 1)) + min; 9. 在数字0和最大数之间生成一组随机数 var numbersArray = [] , max = 100; for( var i=1; numbersArray.push(i++) < max;); // numbers = [0,1,2,3 ... 100]10 . 生成一组随机的字母数字字符 function generateRandomAlphaNum(len) { var rdmstring = ""; for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2)); return rdmString.substr(0, len); } 11.打乱数字数组 var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; numbers = numbers.sort(function(){ return Math.random() - 0.5}); /* the array numbers will be equal for example to [120, 5, 228, -215, 400, 458, -85411, 122205] */ 12. 字符串tim函数 String.prototype.trim = function(){return this.replace(/^\s+|\s+$/g, "");}; 13. 数组追加 var array1 = [12 , "foo" , {name "Joe"} , -2458]; var array2 = ["Doe" , 555 , 100]; Array.prototype.push.apply(array1, array2); /* array1 will be equal to [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */14. 将参数对象转换为数组 var argArray = Array.prototype.slice.call(arguments); 15. 验证一个给定参数是否为数字 function isNumber(n){ return !isNaN(parseFloat(n)) && isFinite(n); } 16. 验证一个给定的参数为数组 function isArray(obj){ return Object.prototype.toString.call(obj) === '[object Array]' ; } 注意，如果toString()方法被重写了，你将不会得到预期结果。或者你可以这样写：[js] view plaincopy在CODE上查看代码片派生到我的代码片 Array.isArray(obj); // its a new Array method 同样，如果你使用多个frames，你可以使用instancesof，如果内容太多，结果同样会出错。[js] view plaincopy在CODE上查看代码片派生到我的代码片 var myFrame = document.createElement('iframe'); document.body.appendChild(myFrame); var myArray = window.frames[window.frames.length-1].Array; var arr = new myArray(a,b,10); // [a,b,10] // instanceof will not work correctly, myArray loses his constructor // constructor is not shared between frames arr instanceof Array; // false 17. 从数字数组中获得最大值和最小值 var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; var maxInNumbers = Math.max.apply(Math, numbers); var minInNumbers = Math.min.apply(Math, numbers); 18.清空数组 var myArray = [12 , 222 , 1000 ]; myArray.length = 0; // myArray will be equal to []. 19. 不要用delete从数组中删除项目开发者可以使用split来代替使用delete来删除数组项。与其删除数组中未定义项目，还不如使用delete来替代。 var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; // return 11 delete items[3]; // return true items.length; // return 11 /* items will be equal to [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */也可以…… var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; // return 11 items.splice(3,1) ; items.length; // return 10 /* items will be equal to [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */delete方法应该删除一个对象属性。 20.使用length属性缩短数组如上文提到的清空数组，开发者还可以使用length属性缩短数组。 var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ]; myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124]. 如果你所定义的数组长度值过高，那么数组的长度将会改变，并且会填充一些未定义的值到数组里，数组的length属性不是只读的。 myArray.length = 10; // the new array length is 10 myArray[myArray.length - 1] ; // undefined <script src="/folder/file.js"></script> 以上需要加上工程名 类似样，才能找到js 文件 <script src="/工程名/folder/file.js"></script> 页面自动跳转：<TITLE>ALPS Dashboard</TITLE><META name="description" content="ALPS Dashboard Forward"><META name="keywords" content="ALPS Dashboard"><META name="robots" content="index,follow,all"><meta http-equiv="refresh" content="0; URL=http://mtkplmap1:7001/alpsdb"> <a class="buttonbar-entry-href" href="javascript:window.close()" title="Do not save password" target="mainframe"> Cancel </a><a href="javascript:window.close()" target="mainframe">Cancel</a>target 会导致窗口一直关不掉如果在css、js文件的地址后面加上如 ?v=123 的版本号， 每次发布都自动增1， 那么就可以比较好的解决此问题。 js switch 可以使用 str 型offsetWidth 得到动态table 的宽度。如果table 没有设置width 或是 style 中没有这是width的话， 使用width 就无法得到table的宽度了。ajax 返回不能以status为key浏览器控制台 console.log(e.toString());26.ajax 返回不要返回 status, 也不要返回空值25. 关闭页面触发onbeforeunload 24.FF下不能通过window.event来获取event的对象window.event 是IE独有的，其他的浏览器如要使用的话，需要从触发的地方传入 eventonclick = doclick(event)23. === 与 ==的区别使用“==”时，如果两边类型不同，js引擎会把它们转换成相同类型然后在进行比较，而“===”则不会进行类型转换，因此当两边不是属于同一个类型，肯定不相等22.Renderer.prototype.draw = function(canvas,graph){ var t = this; graph.nodes.forEach(function(e){ alert(t.drawNode); t.drawNode(canvas,e.graph); }); graph.edges.forEach(function(e){ t.drawEdge(canvas,e.graph); }); gantt.serverList };这个地方必须要使用var t = this;， 否则调用不到定义的方法。21.能通过Array.prototype.slice转换为真正的数组的带有length属性的对象。这种对象有很多，比较特别的是arguments对象，还有像调用getElementsByTagName,document.childNodes之类的，它们都返回NodeList对象都属于伪数组。我们可以通过Array.prototype.slice.call(fakeArray)将伪数组转变为真正的Array对象。 20.好用的高质量JavaScript库一览(1)http://developer.51cto.com/art/201203/323308.htm19. 12种不宜使用的Javascript语法 http://www.ruanyifeng.com/blog/2010/01/12_javascript_syntax_structures_you_should_not_use.html18. <script>有个defer属性w3学校给出defer的解释是“规定是否对脚本执行进行延迟，直到页面加载为止。”只给出了延迟，并没有给出多个17. indexOf lastIndexOf slide 16. a:link，定义正常链接的样式； a:visited，定义已访问过链接的样式； a:hover，定义鼠标悬浮在链接上时的样式； a:active，定义鼠标点击链接时的样式。 15. js日期格式http://cqujsjcyj.iteye.com/blog/116958514. JavaScript客户端写二进制文件(转) http://blog.csdn.net/mqgh2007/article/details/4730445CGI(Common Gateway Interface)是HTTP服务器与你的或其它机器上的程序进行“交谈”的一种工具，其程序须运行在网络服务器上。 13.JavaScript读取文件内容实例http://www.bsdown.com/html/201003/514.html12.用IE的“工具”去删除cookie，但是发现cookie删除不了如果没有添加Expires ,cookie是根当前的IE线程而存在的。你通过IE的“工具”来删除是不行的。当你关闭IE， cookie就消失了。11.全部替换ss.replace(/vend.rdsrv2/g,"vend_rdsrv2");10.for(i in test){ alert(i);//i就是test的属性名 alert(test.i);//test.i就是属性值}<script language="javascript">var MAX_DUMP_DEPTH = 10;function dumpObj(obj, name, indent, depth) { if (depth > MAX_DUMP_DEPTH) { return indent + name + ": <Maximum Depth Reached>\n"; } if (typeof obj == "object") { var child = null; var output = indent + name + "\n"; indent += "\t"; for (var item in obj) { try { child = obj[item]; } catch (e) { child = "<Unable to Evaluate>"; } if (typeof child == "object") { output += dumpObj(child, item, indent, depth + 1); } else { output += indent + item + ": " + child + "\n"; } } return output; } else { return obj; }}</script>function writeObj(obj){ 2 var description = "";3 for(var i in obj){ 4 var property=obj[i]; 5 description+=i+" = "+property+"\n";6 } 7 alert(description);8 }9.out.write(mBuf.toString());out.flush();8. json格式{"anthor" : "Addis" , "age" : "23", "books":[ {"name":"C++"} ,{ "name" : "JAVA"}, {"name": "Flash ActionScript3.0"} ] }7. endWith扩展# <SCRIPT type="text/javascript" language="JavaScript"> # function test(){ # var a = "abcdef".startWith("abc"); # alert("a : "+a); # var b = "abcdef".endWith("def"); # alert("b : "+b); # } # String.prototype.endWith=function(str){ # if(str==null||str==""||this.length==0||str.length>this.length) # return false; # if(this.substring(this.length-str.length)==str) # return true; # else # return false; # return true; # } # # String.prototype.startWith=function(str){ # if(str==null||str==""||this.length==0||str.length>this.length) # return false; # if(this.substr(0,str.length)==str) # return true; # else # return false; # return true; # } # # </SCRIPT> 6.var iTop= document.body.scrollTop;scrollTop5. 1）. 链接的 onclick 事件被先执行，其次是 href 属性下的动作（页面跳转，或 javascript 伪链接）； 2）. 假设链接中同时存在 href 与 onclick，如果想让 href 属性下的动作不执行，onclick 必须得到一个 false 的返回值。不信，你可以将 goGoogle 函数中的 return false 注释掉； 3）. 如果页面过长有滚动条，且希望通过链接的 onclick 事件执行操作。应将它的 href 属性设为 javascript:void(0);，而不要是 #，这可以防止不必要的页面跳动； 4. 如果在链接的 href 属性中调用一个有返回值的函数，当前页面的内容将被此函数的返回值代替； 5. 在按住Shift键的情况下会有所区别。 6. 今天我遇到的问题，在IE6.0里以href的形式访问不到parentNode。 7. 尽量不要用javascript:协议做为A的href属性，这样不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。4.event对象： http://www.congci.com/item/141在javascript中，我们要常常用到event对象来处理一些事件，但是IE和Firefox下event对象的属性是不同的。1）.keyCode||which||charCode IE下支持keyCode，不支持which，charCode。 Firefox下支持keyCode，除功能键外，其他键值始终为0，Firefox下支持which和charCode属性 要获取兼容IE和Firefox的键值，有如下方法： 在函数调用时传递event 2）.event.srcElement||event.target 在IE下，event对象有srcElement属性，没有target属性。在火狐下，event对象有target属性，没有srcElement属性解决办法很简单：3）.event.x,event.y||event.pageX,event.pageY IE下event对象有event.x,event.y属性，而Firefox下没有。Firefox下有event.pageX,event.PageY属性，而IE下没有。解决办法： var mx = event.x?event.x:event.pageX;4）attachEvent()||addEventListener()IE下支持attachEvent()方法，而Firefox下支持addEventListener()方法。attachEvent("eventType",fun)eventType是指事件类型,fun是指调用事件的函数addEventListener("eventType",fun,flag)addEventListener方法的前两个参数和attachEvent方法一样，flag参数则是一个 Boolean 值，指明该结点是否以DOM中所谓的捕捉模式来侦听事件。对于一个典型的事件侦听器来说，第三个参数应该为false（假）。3.在js中，延迟执行函数有两种，setTimeout和setInterval，用法如下：setTimeout("test()","2000"); //2000毫秒后执行test()函数，只执行一次。setInterval("test()","2000"); //每隔2000毫秒执行一次test()函数，执行无数次。var interval = window.setInterval("test()","2000");window.clearInterval(interval); //停止执行setInterval循环。当我们想让test()函数每隔2000毫秒执行一次，执行10000毫秒后停止执行时，可以用两者三者结合使用来实现。var interval2 = window.setInterval("openit2()",2000);setTimeout(function() {window.clearInterval(interval2);},10000);2. confirm的使用if(confirm("确认提交")){ }1. function trim(str){ return str.replace(/(^\s*)|(\s*$)/g, "");}2. Modal Window. (模式窗口)子窗口没有处理完就不能处理父窗口3. var i=parseInt("123"); var f=parseFloat("12.3");4. radio没有readOnly5.执行iframe中的javascript方法document.getElementById("iframeId").contentWindow.functionName(); - IE ，firefox都兼容window.frames['framename'].functionName(); 只适用于IE6.“·”符号可以使用两种方式：1、直接使用中文的标点符号“·”；2、使用其实体字符“•”；7. firefox中不能用 cursor:handstyle="cursor:hand;"在IE中能正常显示成手；在firefox中却不能正常显示如果改用 style="cursor:pointer;"则在两个浏览器下都能正常显示8.window.status="欢迎来到JavaScript的世界";在FireFox浏览器中 【工具】-->【选项】-->【内容】-->启用JavaScript的【高级】-->将【修改状态栏的内容】打上√ 即可9. 1.倒计定时器：timename=setTimeout("function();",delaytime); 2.循环定时器：timename=setInterval("function();",delaytime); 10.在 firefox 下的手形样式不是 cursor: hand 而是 cursor: pointer11. toLowerCase(),toUpperCase(). 大小写转换str.toLowerCase() 12. js 引用 js文件document.write("<script language=\"JavaScript\" src=\"../mediatek/com/userSelect/object.js\"></script>")document.write("<script language=\"JavaScript\" src=\"../mediatek/com/userSelect/array.js\"></script>") document.write("<script language=\"JavaScript\" src=\"../mediatek/com/userSelect/map.js\"></script>") 13. 判断浏览器的类型<script language="JavaScript">function getOs(){ var OsObject = ""; if(navigator.userAgent.indexOf("MSIE")>0) { return "MSIE"; } if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ return "Firefox"; } if(isSafari=navigator.userAgent.indexOf("Safari")>0) { return "Safari"; } if(isCamino=navigator.userAgent.indexOf("Camino")>0){ return "Camino"; } if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ return "Gecko"; } } alert("您的浏览器类型为:"+getOs());</script> 14. isNaN 判断是否是数字
Navigation Bar
100 Great CSS Menu Tutorials http://www.noupe.com/css/100-great-css-menu-tutorials.html 30 Cutting Edge Examples Of CSS Navigation http://www.1stwebdesigner.com/css/cutting-edge-examples-css-navigation/ 30 Exceptional CSS Navigation Techniques http://sixrevisions.com/css/30-exceptional-css-navigation-techniques/ 40 Premium CSS Menu and Navigation Solutions http://www.tripwiremagazine.com/2012/06/css-menu-and-navigation.html 55 Wonderful CSS Navigation Menu Designs http://inspirationfeed.com/inspiration/55-wonderful-css-navigation-menu-designs/SSO
具体是采用Kerberos 还是NTLM验证方式取决于以下三种情况1.客户端以ip地址访问服务器不管客户端跟服务器是否在域、也不管客户端是否以域帐号登陆，只要客户端以ip地址访问服务器， 那么客户端就会选择NTLM方式验证 并且不会直接发送客户端登录用户的用户名和密码给服务器 而是会弹出一个对话框要求用户输入用户名和口令，然后发送到服务端验证。 您可以避免在使用 IP 地址或名称中包含句点的企业内部网服务器上出现这种提示，方法是，在 Internet Explorer 的“本地 Intranet”设置中，列出包含 IP 地址的服务器，或是列出包含句点的服务器名称。可以通过依次单击“工具”、“Internet 选项”、“本地 Intranet”、“站点”、“高级”来访问“本地 Intranet”设置部分。然后在“将该网站添加到区域中”输入 http://127.0.0.1 或其他相关站点的 URL。 下面总结的都是在客户端以机器名访问服务器的情况。2. 服务器在域，客户端以域帐号登陆如果客户端的机器在域中，同时登陆用户又是以域用户登录，那么IE选择Kerberos验证方式。3. 其他情况IE都选择采用NTLM验证方式。出来上述的两种情况，其他情况，客户端都选择NTLM验证，并首先尝试把登录客户端用户的用户名和密码传送给服务器验证， 如果验证通过了，被直接授权访问； 如果验证没通过，客户端弹出对话框要求输入用户名和密码，然后再传送到服务端验证，直到验证通过。集成 Windows 身份验证Ke