并不一定全，有的也可能不准确，比如新出的IE8、Chrome等都没有太多涉及，虽然最近做的一些项目也兼容了IE8、Chrome等，但都没来的及总结进去，后来就忘了…汗。大家一起慢慢完善吧。

javascript部分

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.x

8. 关于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.)elementName
window.frames["frameName"].elementName
在FF中则需要改成如下形式来执行，与IE兼容：
window.frames["frameName"].contentWindow.document.elementName
window.frames["frameName"].document.elementName

18. 对象宽高赋值问题
问题：
FireFox中类似 obj.style.height = imgObj.height 的语句无效
解决方法：
统一使用 obj.style.height = imgObj.height + “px”;

19. innerText的问题
问题：
innerText 在IE中能正常工作，但是 innerText 在FireFox中却不行
解决方法：
在非IE浏览器中使用textContent代替innerText

20. 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:auto

2. 高度问题
两上下排列或嵌套的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 + 子marign
IE里 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>，<strong> 和 <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属性放在下面

【转自】：蓝色理想论坛 作者：zaku
原帖链接：http://bbs.blueidea.com/thread-2941700-1-2.html

普通状态是一个输入框，当光标获取焦点时，出现字数记录和回复按钮

PS:上边那个小三角可不是用的图片。

普通状态效果如下：

获取焦点时：

字数限制的javascript代码如下:

1
2
3
4
5
6
7
8

$(function(){
	function maxLimit(){
		var num=$(this).val().substr(0,140);
		$(this).val(num);
		$(this).next().children("span").text($(this).val().length+"/140");
	};
	$("#textlimit").keyup(maxLimit);//调用方法
});

点击下面“运行”直接查看效果

经jQuery中文群的一位同仁指点，现把限制字数的子数值用一个参数传进来，以便函数重复利用 ]]> http://www.artcss.com/archives/831.html/feed 0 http://www.artcss.com/archives/821.html http://www.artcss.com/archives/821.html#comments Fri, 04 Jun 2010 11:29:21 +0000 Artcss http://www.artcss.com/?p=821 今天用jQuery写了个滑动导航菜单，加入了缓动展开的效果。比以前常用的用css伪类:hover+ie6模拟:hover的js写的那个效果好，所以拿出来分享一下，可能还可以更好的改进，欢迎大家多拍砖。

先看一下效果图

实例：Demo

用到的javascript代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(function(){
	$("ul.sub").parent().append("<span></span>");
	$("ul.sub ul").parent().append("<em></em>");
	$('#nav ul').closest('li').hover(function(){
		$(this).find("span").addClass("arrow");
		$(this).find("em").removeClass("arrow");
		$(this).children("ul").stop(true,true).slideDown('fast').show();
		$("#nav ul>li").hover(function(){$(this).addClass("hover")},
		function(){$(this).removeClass("hover")});
	},function(){
		$(this).children("ul").stop(true,true).hide();
		$(this).find("span").removeClass("arrow");
		$(this).find("em").addClass("arrow");
	})
});

点击下面“运行”直接查看效果

1、自动判断浏览器宽度。

当浏览器窗口小于1024时，工具条会自动隐藏

支持浏览器窗口拖拽

2、当拖动浏览器窗口大小时，工具条位置也会相应调整，始终保持贴在网页主体内容右侧。

用到的javascript代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

$(function(){
var name = $('#float_scroll'); //浮动工具条的ID
function showBar(time){
	setTimeout(function(){
		$(name).show();},time);
	}
function hideBar(time){
	setTimeout(function(){
		$(name).hide();},time);
}
$('.oClose').click(function(){
	$(name).hide();
		return false;
});
showBar(1000);
//hideBar(31000); //页面加载完毕多久后关闭工具条
var pageW = $(".edge").get(0).offsetWidth;//主体页面宽度;
function scrollBar(){
	var offset = $(window).height()/2 - $(name).height()/2 + $(document).scrollTop();
	var oLeft;
	if($(window).width() >= $(name).width()*2+pageW){
		oLeft = $(window).width()/2+pageW/2;
	}else if($(window).width() <= pageW){
		oLeft = pageW - $(name).width();
	}else{
		oLeft = $(window).width() - $(name).width();
	}
	$(name).animate({top:offset},{duration:200,queue:false});
	$(name).animate({left:oLeft},{duration:100,queue:false});
 
	$(".num").text($(window).width());
	$(".num2").text(oLeft);
}
scrollBar();
$(window).resize(scrollBar);
$(window).scroll(scrollBar);
});

点击下面“运行”直接查看效果

这是基于jquery写的一个Tab，选项卡标题的id和选项卡内容class的名称保持一致即可。

用到的javascript代码如下:

1
2
3
4
5
6
7
8
9

$(function(){
function oTab (){
	$(this).addClass("current").siblings().removeClass("current").parent().siblings()
	.hide().siblings("."+$(this).attr("id")).show();
}
//调用方法
$(".tabt span,.tabt2 span").mouseover(oTab);//同时调用两个或以上
$(".tabt3 span").click(oTab);
});

点击下面“运行”直接查看效果

下面是添加了定时器，tab自动切换的效果

用到的javascript代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

$(function(){
var i=0;
function oTab (){
	$(this).addClass("current").siblings().removeClass("current").parent().siblings()
	.hide().siblings("."+$(this).attr("id")).show();
	i = $(".tabt4 span").index(this);
}
//切换函数
function oStart(i){
	$(".tabt4 span").eq(i).addClass("current").siblings().removeClass("current");
	$("#auto dd").eq(i).show().siblings("dd").hide();
}
//自动切换
function oTimer(){
	oStart(i);
	i++;
	if(i==4) {
		i=0;
	}
}
//设置定时器
var myTimer = setInterval(oTimer,1000);
//鼠标悬停和移开的情况用hover
$("#auto").hover(function(){
	if(myTimer) {
		clearInterval(myTimer);
	}
},function(){
	myTimer = setInterval(oTimer,1000);
});
//调用方法
$(".tabt span,.tabt2 span,.tabt4 span").mouseover(oTab);
$(".tabt3 span").click(oTab);
});

点击下面“运行”直接查看效果

String 字符串类型:字符串是用单引号或双引号来说明的。（使用单引号来输入包含引号的字符串。）如：“The cow jumped over the moon.”

数值数据类型：JavaScript 支持整数和浮点数。整数可以为正数、0 或者负数；浮点数可以包含小数点、也可以包含一个 “e”（大小写均可，在科学记数法中表示“10的幂”）、或者同时包含这两项。

Boolean 类型：可能的 Boolean 值有 true 和 false。这是两个特殊值，不能用作 1 和 0。

Undefined 数据类型：一个为 undefined 的值就是指在变量被创建后，但未给该变量赋值以前所具有的值。

Null 数据类型：null 值就是没有任何值，什么也不表示。

object类型：除了上面提到的各种常用类型外，对象也是JavaScript中的重要组成部分，这部分将在后面章节详细介绍。

在 JavaScript 中变量用来存放脚本中的值，这样在需要用这个值的地方就可以用变量来代表，一个变量可以是一个数字，文本或其它一些东西。

　　 JavaScript是一种对数据类型变量要求不太严格的语言，所以不必声明每一个变量的类型，变量声明尽管不是必须的，但在使用变量之前先进行声明是一种好的习惯。可以使用 var 语句来进行变量声明。如：var men = true; // men 中存储的值为 Boolean 类型。

变量命名:JavaScript 是一种区分大小写的语言，因此将一个变量命名为 computer 和将其命名为 Computer是不一样的。
　　另外，变量名称的长度是任意的，但必须遵循以下规则：
　　 1.第一个字符必须是一个字母（大小写均可）、或一个下划线(_)或一个美元符 ($)。
　　 2.后续的字符可以是字母、数字、下划线或美元符。
　　 3.变量名称不能是保留字。

需要注意js里面var，它控制了变量的作用范围。函数内的变量只要带有var，那么函数内用的这个变量就和函数外的无关。

原文地址：http://www.javaeye.com/topic/427150

原文地址: http://jquery14.com/day-01

jQuery 1.4 发布啦

为了庆祝jQuery的四周岁生日, jQuery的团队荣幸的发布了jQuery Javascript库的最新主要版本! 这个版本包含了大量的编程，测试，和记录文档的工作，我们为此感到很骄傲。

我要以个人的名义感谢 Brandon Aaron, Ben Alman, Louis-Rémi Babe, Ariel Flesler, Paul Irish, Robert Kati?, Yehuda Katz, Dave Methvin, Justin Meyer, Karl Swedberg, and Aaron Quint。谢谢他们在修复BUG和完成这次发布上所做的工作。

下载(Downloading)

按照惯例，我们提供了两份jQuery的拷贝，一份是最小化的(我们现在采用Google Closure作为默认的压缩工具了)，一份是未压缩的(供纠错或阅读)。

• jQuery压缩 (23kb Gzipped)
• jQuery常规 (234kb)
• jQuery1.4API中文文档手册chm (154kb)

另外，Google也在他们的服务器上放置了一份jQuery的拷贝。这份拷贝会自动的最小化然后压缩 – 并且放在Google最快的缓存服务器上。

• http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

你可以在你的站点上直接引用上面的URL，这样就可以享受迅速加载jQuery的性能优势了。

就jQuery1.4来说，我们努力的减少大规模升级中的麻烦 – 通过保持所有public函数的签名。即使如此，还请通读可能会造成问题的变更列表，这样能够了解哪些变更可能会给你的应用造成问题。

(功能) Features

下面的内容概括了jQuery1.4里加入的变更和功能。另外所有的变更都已经在jQuery 1.4 的文档里记录了。

热门方法经过了性能上的大”检修”

不少比较热门的和常用的jQuery方法在1.4里被重写了。(译注:重写了方法的内部，外部调用没有大幅度改变) 我们分析源码的时候发现我们能够获得大幅的性能提升，通过把jQuery和自己比较: 查看内部函数被调用了多少次，然后努力降低源码的复杂度(译注:计算机算法中的Complexity)

View the cropped chart.

在1.4版里我们显著的降低了大部分热门jQuery方法的的复杂度。

更易用的设置函数 (Easy Setter Functions)

算来已经有一阵了，你们已经可以给.attr()传递一个函数，然后这个函数的结果会被用来赋给相应的HTML属性(attribute)上。这个功能现在被移植到所有的设置函数了: .css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), 以及 .toggleClass().

另外, 对于下面几个方法，当前的值会被作为第2个变量传递给这个函数。.css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .offset(), .addClass(), .removeClass(), 以及 .toggleClass().

这样代码就可以这样写:

// 找出所有A标签里的'&'字符，然后用一个span标签包围
$('a').html(function(i,html){
  return html.replace(/&/gi,'&');
});

// 给一些链接的title属性加些信息
$('a[target]').attr("title", function(i,title){
  return title + " (新窗口打开)";
});

Ajax

嵌套参数的序列化 (jQuery.param() 文档, Commit 1, Commit 2)

jQuery 1.4在jQuery.param方法里加入了嵌入参数序列化的支持，借用了PHP编程里兴起的，而后又被Ruby on Rails推广开来的方式。
举例来说，
{foo: ["bar", "baz"]} 会被序列化为 “foo[]=bar&foo[]=baz”.

在jQuery 1.3版里, {foo: ["bar", "baz"]} 曾被序列化为 “foo=bar&foo=baz”. 但是，这样做没用办法将只含有一个元素的阵列编码。如果你需要旧的序列化方式，你可以设置传统Ajax设置来进行切换。(使用jQuery.ajaxSettings.traditional进行全局切换，或者根据情况单独切换。

总共有3种方式可以切换到旧的序列化方式:

// 全局改变序列化方式 (使用旧的)
jQuery.ajaxSettings.traditional = true;

// 指定情况使用旧的序列化方式
jQuery.param( stuff, true );

// 针对一个单独的Ajax请求使用旧的序列化方式
$.ajax({ data: stuff, traditional: true });

更多信息参见: jQuery.param() 文档, jQuery.ajax() 文档, Commit, Code

JSON和脚本类型通过”content-type”自动识别。 (jQuery.ajax 文档, Commit 1, Commit 2)

如果一个Ajax请求的回复的媒体类型是JSON(application/json), dataType默认设为”json”(如果dataType没有被指明)。另外，如果回复的媒体类型是Javascript(application/javascript), dataType默认设为”script”(同样，如果dataType没有明确指明), 这种情况下，脚本会自动运行。

加入了Etag的支持 (jQuery.ajax() 文档, Commit)

默认设置下, jQuery会忽略Ajax请求的”Last-Modified”页头。这样做是为了忽略浏览器的缓存。设置ifModified:true就可以使jQuery使用可用的缓存。jQuery1.4还会发出”If-None-Match”的页头如果你设置了ifModified选项。

严格JSON模式，本地的JSON.parse方法 (jQuery.ajax() 文档, Commit 1, Commit 2, Commit 3)

jQuery 1.3和以前的版本曾使用Javascript的eval对引入的JSON解析。1.4版则会使用本地的JSON解析器，前提是如果有本地的解析器可用。它也会对引入的JSON进行校验。所以在jQuery.getJSON方法里，或当一个Ajax请求的dataType是”json”的时候，jQuery会拒绝不合标准的JSON(例如{foo: "bar"})。

序列化HTML5的元素 (jQuery.param() 文档, Commit)

新的HTML5输入方法 (比如’datetime’和’range’)在序列化.serialize()一个表单的时候会被包括在内。

Ajax请求的环境 (jQuery.ajax() 文档, Commit)

你可以附加一个”环境”到Ajax请求上，所有的回调函数里都会拥有同样的”环境”设置(这样可以简化你的代码，尽可能避免使用闭合,或是其他对象)。

jQuery.ajax({
    url: "test.html",
    context: document.body,
    success: function(){
        jQuery(this).addClass("done");
    }
});

请求成功回调函数的第三个参数会被设为原始的XHR对象 (jQuery.ajax() 文档, Commit)

所有的Ajax请求的成功回调函数现在都会收到原始的XMLHttpRequest对象，作为第三个参数。之前这个XHR对象只能通过$.ajax一类方法的返回值来获取。

明确设置”Content-Type” (jQuery.ajax() 文档, Commit)

在1.3版，如果没有实际数据发送，jQuery.ajax的contentType会被忽略。1.4版里，contentType将总是和请求一同发送。这修复了某些后台凭靠”Content-Type”页头判断回复类别所造成的问题。

明确设置JSONP回调函数的名字 (jQuery.ajax 文档, Commit)

你可以使用jQuery.ajax()方法的jsonpCallback选项，通过名字来指定JSONP的回调函数。

防止启动前跨域XHR (Commit)

跨域Ajax(针对提供支持的浏览器)将更易用，因为默认设置下，启动前XHR被阻止了。(TODO)

jQuery.ajax()现在使用”onreadystatechange”事件替换了计时器 (Commit)

使用”onreadystatechange”替换了轮流探询，Ajax请求现在将使用更少的资源

元素属性 (Attributes)

.css()和.attr() 的性能被优化了。

<

.attr()方法多了一个设置函数作为参数 (.attr() 文档)

你不但可以将一个函数用在.attr()里，还可以在这个函数里使用属性的当前值。

jQuery('<img src="enter.png" alt="enter your name" />')
.attr("alt", function(index, value) {
    return "Please, " + value;
});

.val( Function ) (.val() 文档)

<input class="food" type='text' data-index="0" />
<input class="food" type='text' data-index="1" />

jQuery("input:text.food").hide();

jQuery("<ul class='sortable'><li>Peanut Butter</li><li>Jelly</li></ul>"

)
  .sortable()
  .bind("endsort", function() {
    $(":text.food").val(function() {
      return $("ul.sortable li:eq(" + $(this).attr("data-index")  + ")").text();
    });
  });

text和CDATAHTML元素也支持.text()方法了 (.text() 文档, Commit)

核心 (Core)

快捷元素创建 (jQuery() 文档, Commit)

现在当你需要使用jQuery函数创建一个元素的时候，你可以同时附递一个对象来指定属性值和事件:

jQuery("
", {
    id: "foo",
    css: {
        height: "50px",
        width: "50px",
        color: "blue",
        backgroundColor: "#ccc"
    },
    click: function() {
       $(this).css("backgroundColor", "red");
    }
}).appendTo("body");

对象里的键值的名字与相关的jQuery的方法的名字是对应的，对象的值会被作为参数传递给jQuery的方法。

(译注:譬如$("<a>link</a>", {css:{background:"#ccc"}});相当于$("<a>link</a>")).css("background", "#ccc");

.eq(-N), .get(-N) (负指数) (.eq() 文档, .get() 文档, Commit)

你现在可以在.get()和.eq()方法里使用负数。譬如，你要选择倒数第2个div元素，或者是倒数第2个DOM对象:

$("div").eq(-2);
$("div").get(-2);

新的.first()和.last()方法 (.first() 文档, .last() 文档, Commit)

方便起见, 新增的.first()和.last()方法等同于.eq(0)和.eq(-1).

新的.toArray()方法 (.toArray() 文档, Commit)

.get()方法自始就是从jQuery集合里返回一个阵列。为了能够更明确, 你可以用.toArray()来达到一样的效果。(译注:这里应该是为了以后的版本留出空间，譬如以后可能会加入.toList()方法，到时候就会易于区分。) 不过，和.get()不一样的是，.toArray()不接受参数。

jQuery()返回一个空集 (jQuery() 文档, Commit)

在jQuery 1.3中,jQuery()方法返回仅包括document的jQuery集合。这个可以用来创建一个空集，然后动态加入一些元素。注: jQuery().ready()方式在1.4中依然有效，但是被指示陈旧了。请使用jQuery(document).ready()或者jQuery(function(){})。

jQuery(“TAG”) (Element Selector 文档, Commit)

当使用单个标签名字的时候jQuery会使用更快捷的路径。

jQuery(“<div>”), jQuery(“<div/>”) 和 jQuery(“<div></div>”) (jQuery() 文档, Commit)

现在这三个方法都使用同一个代码路径了(document.createElement), 来优化jQuery("<div></div>")的性能。注意，如果你指定了属性，将会使用浏览器本身的语法分析(通过设置innerHTML)。

样式 (CSS)

.css()方法在性能是以前的2倍。

.addClass(), .removeClass(), 和 .hasClass()这几个方法在性能上是以前的3倍

.toggleClass()可以切换多个css类了 (.toggleClass() 文档, Commit)

你可以通过.toggleClass()调用多个css类的名字来切换他们。

$("div").toggleClass("current active");

数据

.data()返回对象, .data(Object)设置对象 (.data() 文档, Commit 1, Commit 2)

有时候你可能需要在一个元素上附加一个复杂的对象。一个常见的例子是你需要从一个元素身上复制所有的数据到令一个元素上。在jQuery 1.4里, 不使用任何参数调用.data()时，.data会返回一个复杂对象。(译注: 包含所有键-值对的对象。) 调用.data(Object) 则会设置这个对象。注意这个对象还包括了元素上绑定的事件，所以用的时候要小心。

除非需要, 不然不会创建数据缓存。 (Commit 1, Commit 2, Commit 3)

jQuery使用一个独特的自定义属性来获取特定元素上附加的数据。当查找数据，但是没有新加的数据的时候，jQuery会尽量避免创建这个自定义属性。这样可能会提高性能，同时还会在这种情况下避免污染DOM。

效果 (Effects)

单个属性缓进缓出 (Per-property Easing 文档, Commit)

除了能够给一个动态效果指定缓进出函数外，你现在可以指定每个属性的缓进出函数了。James Padolsey的blog上有更进一步的信息和演示。

$("#clickme").click(function() {
  $("div").animate({
    width: ["+=200px", "swing"],
    height: ["+=50px", "linear"],
  }, 2000, function() {
      $(this).after("<div>Animation complete.</div>");
  });
});

事件 (Events)

新方法: jQuery.proxy() (jQuery.proxy() Documenation, Commit 1, Commit 2)

如果你需要保证一个函数内的”this”恒定地保持某个值, 你可以用jQuery.proxy获得一个相同作用域的函数。

var obj = {
  name: "John",
  test: function() {
    alert( this.name );
    $("#test").unbind("click", obj.test);
  }
};

$("#test").click( jQuery.proxy( obj, "test" ) );

多个事件绑定 (.bind() 文档)

你可以通过递入一个对象来一次性绑定元素的多个事件。

$("div.test").bind({
  click: function(){
    $(this).addClass("active");
  },
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
});

‘change’和’submit’事件规范化 (Change 文档, Submit 文档)

普通的或是即时的change和submit事件可以在各种浏览器上稳定工作了。我们覆盖了IE里的change和submit, 替换为与其他浏览器相同的事件。

新的事件: ‘focusin’ and ‘focusout’ (.focusin() 文档, .focusout() 文档, Commit)

focusin和focusout在一般情况下等同于focus和blur, 但是多了向父元素传递的作用。如果你自己编写你的事件代理模式(TODO), 这个功能将对你有很大帮助。请注意对focus和blur使用live()方法将不会起作用; 在设计的时候我们根据 DOM事件规范决定不使其向父元素传递事件。

$("form").focusout(function(event) {
    var tgt = event.target;
    if (tgt.nodeName == "INPUT" && !tgt.value) {
        $(tgt).after("nothing here");
    }
});

所有的事件都可以成为即时事件 (.live() 文档)

除了ready, focus (用focusin), 和 blur (用focusout)以外, 所有能用.bind()绑定的事件都可以成为即时事件。

在live()所支持的事件里，我们对能够支持下面这几个额外的事件感到尤其骄傲。通过.live()里的事件代理, 1.4版实现了对change, submit, focusin, focusout, mouseenter, 以及mouseleave事件的跨浏览器支持。

注: 如果你需要即时的focus事件，你应该用focusin和focusout, 而不要用focus和blur, 因为就像前面提到的, focus和blur不向上传递。

还有, live()也接受数据对象作为参数了, 同bind()方法一样 (Commit)

live/die也支持环境变量了 (Commit)

现在可以在绑定事件的时候给选择符指定一个环境。如果环境被指定了, 只有属于这个环境下的元素才会被绑定事件。在创建即时事件的时候, 元素本身不需要已经被定义, 但是环境必须被创建。

确定ready事件至少含有body元素 (Commit)

jQuery现在会检查body是不是存在，如果不存在，会对body进行轮流探询。

在不需要手动处理内存溢出的非IE浏览器中, 卸载的速度提高了。 (Commit)

DOM操作 (Manipulation)

在jQuery 1.4里一系列的DOM操作方法的性能都有巨大的提升。

.append(), .prepend(), .before(), and .after()的性能提高了。

.html()的性能提高到以前的3倍。

.remove()和.empty()的速度则达到以前的4倍.

新方法: .detach() (.detach() 文档, Commit)

detach()将一个元素从DOM里移除, 但是并不卸载关联的事件处理函数。这个方法可用于暂时性的将一个元素移除，执行相关操作，然后返回。

var foo = $("#foo").click(function() {
    // 相关操作
});
foo.detach();
// foo保留了相关处理函数
foo.appendTo("body");

新的unwrap()方法 (documentation, commit)

unwrap()方法拿到一个已知的父元素的子元素，然后将父元素用子元素替换。(译注: 将子元素从”包裹”里拿出来, 因名unwrap)。如此这般:

<body>
    <div>
        <p>annie</p> <p>davey</p> <p>stevie</p>
    </div>
</body>

$('div').unwrap();

<body>
   <p>annie</p> <p>davey</p> <p>stevie</p>
</body>

domManip方法里的缓存 (commit)

jQuery会将jQuery("<div>")和.after("<div>")一类方法创建的节点记入缓存。这样, 对于利用这些方法, 使用字符串进行DOM操作的页面，性能将有极大的提高。

无连接的节点间的before, after, replaceWith操作 (commit)

现在你可以对还没有放置到DOM Tree上的节点进行before, after, 和replaceWith的操作了。意味着你可以先对节点进行复杂的操作, 待完成后再放到合适的DOM位置上。这样也能尽量避免操作过程中造成重新排版。

jQuery("<div>").before("<p>Hello</p>").appendTo("body")

.clone(true) 也会复制关联数据 (clone 文档, commit)

1.3版中, .clone(true)虽然也是深度复制, 但是没有复制关联的数据。1.4版里，它则会复制数据, 同时还包括所有的事件。这点上和jQuery.extend在语义想同的, 所以普通对象和阵列会被复制, 但是自定义的对象则不会。

位移 (Offset)

.offset( coords | Function ) (.offset() 文档, commit)

现在可以设置元素的位移了! 和所有的设置函数一样, offset也可以接受一个函数作为第二个参数。

队列 (Queueing)

队列经历了一次大修, 使用队列会比使用默认的fx更易掌握。

新的 .delay() 方法 (.delay() 文档, commit)

.delay()方法会根据参数滞后若干毫秒执行队列里剩下的对象。默认的它会使用”fx”队列。但你可以选择性的通过delay方法的第二个参数选择其他队列。(译注:每个队列都以一个名字识别。)

$("div").fadeIn().delay(4000).fadeOut();

队列里的next (.queue() 文档, commit)

jQuery 1.4版里, 当队列里的一个函数被调用的时候，第一个参数会被设为另一个函数。当后者被调用的时候, 会自动排除队列里的下一个对象, 以此来推动队列到下一步。

jQuery("div").queue("ajax", function(next) {
  var self = this;
  jQuery.getJSON("/update", function(json) {
    $(self).html(json.text);
    next();
  };
}).queue("ajax", function() {
  $(this).fadeIn();
});

.clearQueue() (clearQueue 文档, commit)

队列可以被清空了。这个方法会移除队列里所有未执行的函数, 但不会移除正在运行的函数。无参数的情况下调用.clearQueue()方法将会清空默认的”fx”队列。

选择符 (Selectors)

“#id p”效率更高 (commit)

所有以ID开头的选择符都得到了优化, 能够在瞬间得到返回值。所有以ID为开头的选择符速度将一直快于其他选择符。

页面遍访 (Traversing)

.index(), .index(String) (index 文档, commit)

.index() 方法经过重写, 变得更加直观和灵活。

你可以获得一个元素相对于同父元素的指数:

// 计算第一个 <li class="current"> 元素在它所有的同父元素中的指数:
$("li.current").index()

你也可以获得一个元素在一个jQuery元素集合中的指数, 这个集合可以用一个选择符或者是一个DOM元素来指定:

// 计算这个 <h3 id="more-info"> 元素在页面上所有 <h3> 元素里的指数:
$("#more-info").index("h3")

新的.has()方法 (has 文档, commit)

这个方法相当于选择符里的:has()过滤法。它拿到一个jQuery集合,返回含有指定选择符的元素。

新的 .nextUntil(), .prevUntil(), .parentsUntil() 方法 (.nextUntil() 文档, .prevUntil() 文档, .parentsUntil() 文档, commit)

新的”until”方法类似于.nextAll(), .prevAll(), 和.parents()。区别是可以用一个选择符来停止元素探索。

.add(String, Element) (.add() 文档, commit)

可以给.add()方法指定环境了。这个功能可以用于在一个调用链中加入和操作额外元素(比如Ajax请求里返回的新元素)。

.closest(filter, DOMElement) (.closest() 文档, commit)

可以通过closest方法的第2个参数设置一个DOMElement环境。给closest设置一个环境一般能够提高这个方法的运行速度。这个优化也适用live(), 因为这个方法内部调用了closest()。

常用工具 (Utilities)

jQuery.isEmptyObject() (jQuery.isEmptyObject() 文档, commit)

如果对象,em>没有任何属性, 该方法将返回true。jQuery.isEmptyObject()方法不对参数进行任何检查, 所以请保证参数是一个对象。

jQuery.isPlainObject() (jQuery.isPlainObject(), commit )

如果一个对象是通过字符创建的(译注:{}),jQuery.isPlainObject()返回true; 如果对象是其他类别的对象(译注:如new Object())或者是基本类型, 则返回false。

jQuery.contains() (jQuery.contains() 文档, commit)

如果两个参数都是DOM节点，并且第二个节点是嵌套在第一个节点内部的话, jQuery.contains()返回true。反之返回false。

jQuery.noop (jQuery.noop() 文档, commit)

是个空的函数, 可以用在必须要有一个函数的情况下。(译注: noop是No Operation的意思。)

jQuery.unique() (jQuery.unique() 文档)

jQuery 1.4版中, jQuery.unique()方法返回结果里的元素是按照他们在页面里的顺序排序的。由于在创建jQuery集合的时候jQuery使用jQuery.unique()方法, 所以jQuery方法返回的集合也是按照他们在页面里的顺序排列的。

其他 (Miscellaneous)

jQuery.browser以浏览器引擎为中心 (jQuery.browser 文档, commit)

例如, 你可以通过jQuery.browser.webkit探测引擎是否是Webkit。

改进了对applets的处理 (commit 1, commit 2)

jQuery不再试图在Java applets上绑定事件或是数据了(绑定事件或是数据会出现错误)。

不再使用arguments.callee (commit)

为了顺应Caja的要求, 同时也因为即将开始应用的ECMAScript 5规范里将其标记为陈旧, 我们将jQuery核心中所有用到arguments.callee的代码都移除了。

用Closure Compiler替换了YUI Min (commit)

内部重组 (Internal Reorganization)

在1.4版的开发过程中的一个重点是要建立一个更易读, 更易懂的代码库。为了达到这个目标我们树立了一系列编写代码规范的向导。

下面是一些主要的变化:

• 旧的’core.js’文件被分成了’attribute.js’, ‘css.js’, ‘data.js’, ‘manipulation.js’, ‘traversing.js’, and ‘queue.js’.
• ready事件被移入了’core.js’ (因为它是jQuery的一个基本组成之一)。
• 大部分核心代码都符合新的代码规范.
• css和属性的逻辑被划分开来, 不再如以往相互缠绕。

测试 (Testing)

jQuery 1.4版发布过程中我们修复了207个问题 (比较之下1.3版里有97个修复)。

jQuery 1.4.此外, 测试的数量从jQuery 1.3.2中的1504例升到了1.4中的3060例。

所有测试都在主要浏览器里完全通过了。(Safari 3.2, Safari 4, Firefox 2, Firefox 3, Firefox 3.5, IE 6, IE 7,
IE 8, Opera 10.10, and Chrome)

我们尽量试图减小jQuery 1.4对大规模升级可能造成的麻烦 – 保持所有公开函数的签名不变。即使如此, 请通读下面的列表以保证你对可能对你的应用造成问题的变更。

• .add()不再简单的将结果串联到一起, 结果将会被混合到一起, 然后根据他们在页面里的顺序排列。
• .clone(true)将复制事件和数据, 而不仅是事件。
• jQuery.data(elem) 不再返回id, 取而代之的是元素的对象缓存。
• jQuery() (无参数) 不再自动转换成jQuery(document)了。
• 通过.val(“…”)获得一个option或一个checkbox的值不再有歧义(将总是根据value属性选择, 而不是根据text的值)。(Commit)
• jQuery.browser.version现在将返回引擎的版本.
• 现在起将对引入的JSON更严格, 如果JSON的格式不符将会报错。如果你需要对不符合JSON严格格式的Javascript进行估值, 你必须设置请求的文件类型为纯文本, 然后用eval()来对内容估值。
• 参数序列化默认会按照PHP/Rails的风格进行。你可以通过jQuery.ajaxSettings.traditional = true;来切换到旧的序列化方式。你也可以针对个别请求进行切换, 在调用jQuery.ajax的时候递入{traditional: true}
• 内部的jQuery.className被移除了。
• jQuery.extend(true, …)不再扩展复杂对象或是阵列。(TODO)
• 如果一个Ajax请求没有指定dataType, 而返回的数据类型是”text/javascript”, 那么回复将会被执行。之前, 必须明确的指定dataType。
• 设置Ajax 请求的”ifModified”属性会将ETags纳入考虑。

我们还针对1.4版中可能造成问题的变更编写了一个向后兼容的插件。如果你升级到1.4以后出现问题, 可以在引入1.4版的文件之后引入这个插件。

如何使用这个插件:

<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/jquery.compat-1.3.js"></script>

原始数据和测试页面

性能测试中我们使用了下列测试套包:

• Attributes
• Class
• DOM Manipulation
• Empty/Remove
• Function Call Profiling: 1.3.2 1.4.

结果的原始数据 (所有的数据都是 1.3.2 vs. 1.4):

函数调用的次数
547    3
760    3
500    200
896    399
23909    299
307    118
28955    100
28648    201
1662    593

DOM嵌入
558    317
1079    624
1079    516
1155    829
436    332
196    194
243    169

HTML
116    46
281    78
313    78
234    63
134    43
43    42
91    27

CSS/属性
703    370
1780    1250
1765    1250
1157    749
629    498
346    184
333    161

CSS
114    52
203    93
118    93
109    47
116    54
58    24
54    22

CSS类
553    138
1578    546
1515    501
1033    327
769    298
229    80
173    41

移除/清空
3298    286
9030    2344
7921    1703
5282    1266
2898    303
1166    140
1034    122

最近做一个专题，用裁切有点大材小用，而且着急上线，就写了个简单js来满足头像自适应预留位置大小。

具体要求如下：

1、当用户上传的头像宽和高均小于指定大小（200X150）时，图片按实际大小显示，且水平垂直居中

2、当用户上传的头像宽或高大于指定大小（200X150）时，分两种情况：

• 如果比3:4扁的话，则宽度缩为200，高度根据宽度自适应，且水平垂直居中。
• 如果比3:4窄的话，则高度缩为150，宽度根据高度自适应，且水平垂直居中。

用到的javascript代码如下[jQuery版]：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

$(document).ready(function() {
$("#tt a").click(function(){
	$("#tt a").removeClass("on");
	$(this).addClass("on");
	$(".userbox img").hide();
	var userPic = $("."+$(this).attr("id"));
	userPic.show();
	var url = userPic.attr("src");	//获取当前图片的ID
	$("#yuanshi").attr("src",url);
	$("#yuanshi").hide();
	$("#yuanshi").show("slow");
 
	var userW = userPic.width();
	var userH = userPic.height();
	var bool = false;
	if(userW<200 && userH<150 ){	//判断如果图片高宽均小于指定大小时的情况
		userW = userW;
		userH = userH;
		bool =true;
	}else{
		if(userH/userW < 3/4){
			userPic.css("width",200);
		}else{
			userPic.css("height",150);
		}
	}
	if(userH < 150){	//设置图片垂直居中
		var userTop;
		if(bool){
			userTop = (150 - userH)/2;
		}else{
			userH  = userH*200/userW;
			userTop = (150 - userH)/2;
		}
		userPic.css("margin-top",userTop);
	}else{
		userPic.css("margin-top","0px");
	}
});
$("#tt a:first").addClass("on");
$(".userbox img:not(:first)").hide();
});

点击下面“运行”直接查看效果

1、$fx()
简介：$fx()是一个轻量级的动画库，一些复杂的动画，可以由多个简单的动画效果进行组合，但是提供的是混淆压缩过的代码，对于研究动画源码的朋友可能特别不爽
API：http://fx.inetcat.com/manuals.php
主页:http://fx.inetcat.com/

2、JSTweener
简介：原始大小14K，支持大多数的动画特效
演示地址：http://svn.coderepos.org/share/l … es/transitions.html
主页地址：http://coderepos.org/share/wiki/JSTweener

3、FX 2.0
简介：代码清晰，支持多种形变动画，而且2.0版本在不局限于px单位，支持了em, %,
演示地址：http://www.ryanmorr.com/tests/fx2/
主页地址：http://ryanmorr.com/archives/fx- … animation-framework

4、JsCharts
简介：用js生成图表，包括柱状图，饼状图，流线图
演示地址：http://www.jscharts.com/examples
主页地址：http://www.jscharts.com/

5、Raphael
简介：也许你看了效果后会觉得唉，这有什么特别的，但是查看它的源码的时候，你会被震到，不信就去看看呗，里边的效果实在是太神奇了，虽然目前你根本用不上….
演示地址：http://raphaeljs.com/dragon.html
主页地址：http://raphaeljs.com/dragon.html

6、Reflection.js
简介：倒影实现,如果是在个人项目中，还是可以用得上的，唉，感叹，现在是可供选择的效果太充足了，而实际真正用到项目中的确是寥寥无几，只能这么说，就目前的web项目在交互方面 只能打个不及格。现在貌似国外都是研究者，而我们只是应用者，而且应用得还不到位。
主页地址：http://cow.neondragon.net/stuff/reflection/
脚本地址:  http://cow.neondragon.net/stuff/reflection/reflection.js (27K)

7、leigeber
简介：准确的说 这不是一个库，而是一些效果集，但是这对于我们来说却是非常实用的，每个效果都在3K左右，
效果列表：http://www.leigeber.com/category/javascript/
主页地址：http://www.leigeber.com/

8、Shortcuts.js
简介：在web2.0+时代，web应用中的快捷键开始大量使用,而且开始流行起来，google reader 和 Gmail等应用更是引领这一潮流，但是作为开发者，搞定键盘的绑定却不是一件轻松的事情，而shortCuts则以更优的方式解决了这一问题。
演示地址：http://www.openjs.com/scripts/events/keyboard_shortcuts/
主页地址：http://www.openjs.com/scripts/events/keyboard_shortcuts/

9、Amberjack (4K)
简介：这个效果我觉得用在商城上 挺合适的，比如一些打折信息，热卖商品等，只是网站官方极力推销的，用这种方式到不失为一种好方法，当然反对的声音肯定挺多的…
演示地址：http://amberjack.org/skins/custo … skinId=black_beauty
主页地址：http://amberjack.org

10、Blackbird (10K)
简介：alert()的替代方案，现如今耳目下通常开发者都是使用自己制造的弹出层对话框，但是这款的设计思路确是仿照一些软件的控制台日志的方式，把信息都集中于一个面板上，对于用户来说，这其实是一件好事，对自己的操作所产生的结果至少一目了然，web 应用发展新时代，这个东东会成为一个趋势吧。对了，还支持快捷键.
演示地址：http://www.gscottolson.com/blackbirdjs/
主页地址：http://www.gscottolson.com/

原文地址：http://bbs.blueidea.com/thread-2943411-1-1.html

其实我们天天在想到底哪一天IE6才会真正死去，但是从2001年发布以来，IE6一直统治着国内的浏览器市场，直到现在还占据着国内50%以上的浏览器市场份额。

但是我想，无论你是普通用户还是网站开发人员或者是国内的浏览器开发者，我们都应该采取一些措施，共同促进IE6的灭亡。

如果你是IE6的忠实用户，请尽快升级你的IE6

给你一个升级IE6的理由？好吧：

1. 你和你的公司正在受到安全威胁。这个没有更好的理由来反驳了吧？就连国际知名的大公司如Google、yahoo等都因为使用IE6而受到严重攻击，还有哪家公司的IE6不会受到攻击呢？
2. 世界上各国政府都在建议大家升级浏览器。在IE6的0day漏洞被曝光之后，德国、法国和澳大利亚等国政府纷纷号召国民放弃使用IE6；
3. 就连微软自己都建议你放弃IE6。微软安全研究与预防博客发文称，IE6受0day漏洞影响最为严重，IE8基本不受该漏洞影响。事实上，微软也不止一次号召用户升级浏览器。
4. 这不是IE6的最后一个严重安全漏洞。IE6从发布到现在不知道出现过多少严重的安全漏洞，而这次远不是终结，它还有至少144个漏洞！
5. 微软在2014年之后将不再对IE6提供支持。2014年很久远吗？或者你相信2012年就是世界末日？
6. IE6对web标准的支持缺乏。IE6的技术还是10年前的，互联网技术经过10年的发展已经能够发生了巨大的改变，网站前端技术在不断进步，更先进的CSS、HTML和Javascript等技术已经能给用户带来更好的体验——而IE6用户将无法体验这些先进的内容。比如，前端观察用到的一些CSS3特性将无法在IE6甚至是IE8中体验到。
7. 国内的一部分企业开始要求员工升级浏览器。比如腾讯公司，已经要求所有员工将IE6升级到IE7。
8. IE6太过时了，国外网友大部分都不再使用IE6了。统计显示，目前国外用户已经逐渐淘汰IE6了。IE8和Firefox是主流(via 人民网)。
9. 国外各大网站开始明确表示将不再支持IE6。比如 Google 将停止支持IE 6 用户必须至少升至IE 7。

(部分参考自：http://mashable.com/2010/01/18/5-more-reasons-why-ie6-must-die/)

如果这几个理由都不够，那么请看国外统计的坚持使用IE6的原因，当然这里有些调侃的意味，如果你正好是其中一种情况，请不要生气 :) ：

当然在国内，坚持使用IE6的用户可能还是因为另外两个原因：

1. 习惯了IE6的操作方式，不喜欢IE7和其它浏览器的tab式浏览。当然一个人的习惯是最重要的。tab的浏览器方式是谁发明的已经不可考了，不过Opera和Firefox纷纷使用，后来国内的maxthon浏览器也采用了那种方式，然后到06年IE7的时候，也采用了tab的方式。这说明tab是一种很好的浏览方式，高效、方便，不然广大网民早就开始反对这种方式了，而各大浏览器也不会坚持下去了。所以建议你尝试一下新技术，从你的习惯中走出来。
2. IE6比较快，IE7和IE8太慢了。IE7和IE8的确太慢了，不过新版的Firefox 3.6和Chrome一直是很快的哦。

前端开发人员可以争取放弃兼容IE6

如果你是一名光荣的前端开发人员，希望你能尽可能的做更多的事情来让IE6更快的死去：

1. 以身作则，自己放弃IE6。从前端观察和其它技术网站的访问统计上看，IE6的用户比例竟然还有30%以上，这让我很震惊。作为一名前端开发者，用IE6做自己的主浏览器，那么你做的网站应该也不会在IE7/8以及其它更先进的浏览器中做测试的吧？
2. 说服你的BOSS或客户，放弃兼容IE6。有必要为了让网站在IE6中和其它浏览器中表现一直而花掉2倍甚至是3倍的时间和精力吗？我认为对不同的浏览器，可以采取适当的区分——让网站在现代浏览器如Firefox 3.5+、Chrome/Safari和Opera中实现最佳的表现，而在IE中实现相对比较差的界面——当然在不影响布局和功能的情况下。
3. 号召你的朋友弃用IE6。号召你身边的朋友使用IE7/8或者Firefox、Chrome等浏览器。另外，很多人都有个人博客，可以在自己的博客上号召IE6用户升级他们的浏览器。你也可以参与到众多的促进IE6升级的在线项目中来，比如 webrebuild.org的IE６升级活动以及效果很不错的IE6 Update中。

浏览器厂商应该负更多的责任

想起的一句话：此地钱多人傻，速来！这当然只是笑话。

不过据说现在中国网民数量已经高达3.6亿！而且这个数字还在不断增长。这显然是一个巨大的市场。

所以最近各大公司纷纷涉足浏览器市场，各自都推出自有品牌的浏览器，在Maxthon、世界之窗、腾讯TT、绿色浏览器等混战多年的情况下又出现搜狐浏览器、新浪浏览器和360浏览器。但是它们无一不是以IE为内核的(maxthon和搜狐浏览器有IE和webkit双内核的版本)，没有自己的内核。所以各位网民，不要以为你用了所谓“安全”浏览器你的电脑就安全了，它的内核IE本身都是不安全的，这些外壳浏览器谈何安全——不过有些浏览器会添加一些可以避免你误操作的功能。

对国内的浏览器市场来说，我认为这种“战国纷争”的局面是很不错的，至少能够普及一点儿“浏览器”知识，提高网民对互联网和互联网安全的认识。

但是我认为国内的浏览器厂商应该负起更多的责任。

你们的浏览器产品确实有很多特色，也有很多很有用或者很酷的功能，比较重视中国人的使用习惯。但是当用户因为IE的漏洞而被攻击的时候，你们会承担责任吗？还是将责任推到微软那里？这似乎有些不公平哦～～

对IE来说，最安全的、功能最强、稳定性最好的应该就是IE8了，如果你们能够推动用户去升级他们的内核到最新版，肯定能降低你们要为安全承担的风险。另外，减少一个内核支持也会减少你们的开发和维护支出吧。

总结

让IE6退出历史舞台，不是一朝一夕的事情，用户的惰性让他不愿意主动去升级，微软的浏览器升级模式又那么古老（而Firefox的提示升级和Chrome的后台自动升级模式倒省去了不少麻烦）。所以我们只有靠自己的力量来推动IE6的灭亡了。

转自：http://www.qianduan.net/let-ie6-faster-dead.html