JQuery确实是个很好用的库，你可以不用考虑很多细节方面的事情。但很作为一个web前端，处理和了解浏览器差异一个重要问题。下面将介绍一些总结，先介绍没有使用js库的情况。

1. setAttribute方法设置元素类名

在jQuery中，直接使用attr()方法即可，可在原生的JS中，

1 //这个是W3C的标准，在兼容W3C标准的浏览器中有效，可是，IE才是国内用户的主旋律
2 element.setAttribute('class','newClassName')
3 //这样的设置在IE中才能有效
4 element.setAttribute('className','newClassName')
5 //所有浏览器有效(只要支持javascript)
6 element.className = 'newClassName'

好了，开篇说完了，这篇文章的目的也就是介绍浏览器差异的同时使前端的朋友们了解如果用最有效的方法去解决问题，下面继续。

2. FireFox没有window.event对象

FireFox没有window.event对象，只有event对象,IE里只支持window.event,而其他主流浏览器两者都支持,所以一般写成：

1 function handle(e)
2 {
3     e = e || event;
4     ...
5 }

3. DOMContentLoaded事件原理

对window.onload事件是当页面解析/DOM树建立完成，并完成了如图片、脚本、样式表等所有资源的下载后才触发的。这对于很多实际的应用而言有点太"迟"了，比较影响用户体验。为了解决这个问题，FF中便增加了一个DOMContentLoaded方法，与onload相比，该方法触发的时间更早，它是在页面的DOM内容加载完成后即触发，而无需等待其他资源的加载(这个也就是jquery.ready()事件的实现原理)。

01 //以下是jQuery 1.4.2版本的原版分析
02 bindReady: function() {
03 　　if ( readyBound ) {
04 　　　　return;
05 　　}
06 　　readyBound = true;
07 　　// Catch cases where $(document).ready() is called after the
08 　　// browser event has already occurred.
09 　　if ( document.readyState === "complete" ) {
10 　　　　return jQuery.ready();
11 　　}
12 　　// Mozilla, Opera and webkit nightlies currently support this event
13 　　if ( document.addEventListener ) {
14 　　// Use the handy event callback
15 　　　　document.addEventListener( "DOMContentLoaded", DOMContentLoaded,false );
16 　　　　// A fallback to window.onload, that will always work
17 　　　　window.addEventListener( "load", jQuery.ready, false );
18 　　　　// If IE event model is used
19 　　} else if ( document.attachEvent ) {
20 　　　　// ensure firing before onload,
21 　　　　// maybe late but safe also for iframes
22 　　　　document.attachEvent("onreadystatechange", DOMContentLoaded);
23 　　　　// A fallback to window.onload, that will always work
24 　　　　window.attachEvent( "onload", jQuery.ready );
25 　　　　// If IE and not a frame
26 　　　　// continually check to see if the document is ready
27 　　　　var toplevel = false;
28 　　　　try {
29 　　　　　　toplevel = window.frameElement == null;
30 　　　　} catch(e) {}
31 　　　　if ( document.documentElement.doScroll && toplevel ) {
32 　　　　　　doScrollCheck();
33 　　　　}
34 　　}
35 }

设计思路 - 将Webkit与Firefox同等对待，都是直接注册DOMContentLoaded事件，但是由于Webkit是在525以上版本才引入的，因此存在兼容性的隐患。 对于IE，首先注册document的onreadystatechange事件，经测试，该方式与window.onload相当，依然会等到所有资源下载完毕后才触发。 之后，判断如果是IE并且页面不在iframe当中，则通过setTiemout来不断的调用documentElement的doScroll方法，直到调用成功则出触发DOMContentLoaded。1 jQuery对于IE的解决方案的原理是，在IE下，DOM的某些方法只有在DOM解析完成后才可以调用，doScroll就是这样一个方法，反过来当能调用doScroll的时候即是DOM解析完成之时，与prototype中的document.write相比，该方案可以解决页面有iframe时失效的问题。此外，jQuery似乎担心当页面处于iframe中时，该方法会失效，因此实现代码中做了判断，如果是在iframe中则通过document的onreadystatechange来实现，否则通过doScroll来实现。不过经测试，即使是在iframe中，doScroll依然有效。

4. 学会使用IE的条件注释

许多前端总是在抱怨万恶的IE,确实,处理兼容性的问题确实会越来越恶心,可是没有办法,既然没有办法改变,那么请享受...

01 <!--[if IE]>
02 <h1>您正在使用IE浏览器</h1>
03 <![endif]-->
04 <!--[if IE 5]>
05 <h1>版本 5</h1>
06 <![endif]-->
07 <!--[if IE 5.0]>
08 <h1>版本 5.0</h1>
09 <![endif]-->
10 <!--[if IE 5.5]>
11 <h1>版本 5.5</h1>
12 <![endif]-->
13 <!--[if IE 6]>
14 <h1>版本 6</h1>
15 <![endif]-->
16 <!--[if IE 7]>
17 <h1>版本 7</h1>
18 <![endif]-->

先总结到这里吧，希望能对新手或者有需要的人有所帮助。

最新文章

  1. node访问iis使用keep-alive设置不当
  2. 玩转单元测试之DBUnit
  3. ha456.jar打开dump文件报Unsupported major.minor version 51.0异常
  4. [CLR via C#]18. Attribute
  5. acl拒绝访问流量
  6. 老叶观点：MySQL开发规范之我见
  7. (原创)3.2 AddOwner和OverrideMetadata的区别
  8. Keil Mdk5.0 破解包 和谐包【worldsing笔记】
  9. Azure PowerShell 创建虚拟机
  10. 定义Foo() 函数，弹出对话框提示当前选中的是第几个单选框
  11. Swift 字符串连接
  12. BigDecimal类的简单使用方法
  13. PHP新手之学习数组声明
  14. 命令提示符-bash-4.1$错误解决
  15. vue+nginx编译部署
  16. 《团队-爬取豆瓣top250-开发文档》
  17. 3.定时器的使用（以通俗易懂的语言解释JavaScript）
  18. 虚拟机安装oracle重新启动后oracle em起不来 ORA-01034: ORACLE not available
  19. 配置iSCSI部署网络存储
  20. ceph mon更换ip地址

热门文章

  1. ruby URI类
  2. windows程序内部运行机制
  3. 动态规划----FatMouse’s Speed（HDU 1160）
  4. XStream轻松转换xml和java对象
  5. 【数据结构】 List 简单实现
  6. 【APUE】Chapter14 Advanced I/O
  7. 「个人训练」Can you solve this equation?（HDU-2199）
  8. Python 3 学习笔记之——面向对象
  9. static 关键字解析（转）
  10. 解决ecplise安装mybatipse插件时报找不到jar包的错