Enjoy it!

var Leeiio = {};
Leeiio.isFucked;
 
Leeiio.fuck = function(){
    var imgUrl = "http://twitter.com/favicon.ico?"; //You can change it to "http://www.facebook.com/favicon.ico?"
    imgUrl += new Date().getTime(); //add Time stamp to prevent the Browser's cache
    function removeElement(_element){
         var _parentElement = _element.parentNode;
         if(_parentElement){
                _parentElement.removeChild(_element);
         }
    }
    function testImg(isrc){
        var fuckimg = document.createElement('iframe'); //I used to createElement('img') but it have some problem in webkit
        fuckimg.src = imgUrl;
        fuckimg.style.cssText = "display:none";
        document.body.appendChild(fuckimg);
        fuckimg.timer = setTimeout(function(){
            alert("Fuck it!(You know fuck what right?)");
            fuckimg.src = null;
            fuckimg.onload = null;
            removeElement(fuckimg);
            Leeiio.isFucked = true;
        }, 3290);   //set timeout to connect to twitter
        fuckimg.onload = function (){
            clearTimeout(this.timer);
            alert("Nice!You are free man!");
            fuckimg.src = null;
            fuckimg.onload = null;
            removeElement(fuckimg);
            Leeiio.isFucked = false;
        }
    }
    testImg(imgUrl);
}
Leeiio.fuck();
 
var timeTest = setTimeout(function(){
    if(!Leeiio.isFucked){
        //add your code here that you want to
        alert('Fuck!');
    }
    clearTimeout(timeTest);
},4000);

See Demo here:http://leeiio.me/demo/fuck_yeah.html

假设有这么一段文本。

你好，我是一段文本。我链接到http://leeiio.me/test.html请大家多多指教。

那么我们可以这么写。

var text = "你好，我是一段文本。我链接到http://leeiio.me/test.html请大家多多指教。";
var regexp = /((http|ftp|https|file):\/\/([\w\-]+\.)+[\w\-]+(\/[\w\-\.\/?\@\%\!\&=\+\~\:\#\;\,]*)?)/ig;
text = text.replace(regexp,"<a href='$1'>$1</a>");
console.log(text);

但是如果URL中带有中文，那么以上的就不顶事了。

虽然我们不应该用中文作为URL的一部分，已经把中文部分encode掉，但是很多人比如粗心的写wordpressd的人，通常不指定Slug，那么很多URL自然也就带上了标题的中文了。比如：

假设有这么一段文本。

你好，我是一段文本。我链接到http://leeiio.me/这是一篇测试.html 请大家多多指教。

那么应该把正则改成这样

var text = "你好，我是一段文本。我链接到http://leeiio.me/这是一篇测试.html 请大家多多指教。";
var regexp = /((http|ftp|https|file):\/\/([\w\-]+\.)+[\w\-]+(\/[\w\u4e00-\u9fa5\-\.\/?\@\%\!\&=\+\~\:\#\;\,]*)?)/ig;
text = text.replace(regexp,"<a href='$1'>$1</a>");
console.log(text);

不过如果以上这段文本在”html”和”请”字中间没有空格的话，也会错误地把后面的”请大家多多指教。”识别为URL的一部分，所以说也并不是十分完美。而且如果标题是汉文呢？日文呢？就不行了，因为刚才正则中增加的\u4e00-\u9fa5只是中文的编码区间。

既然如此我们就使用更加暴力的正则吧。比如这么一段文本：

你好，我是一段文本。我链接到http://leeiio.me/这是一篇测试.html 请大家多多指教。
こんにちは、私はテキストをしています。私はこれはテストですhttp://leeiio.me/にリンクしています.Html のは、展覧会をしてください。
안녕, 난 텍스트입니다. 나는 이것은 테스트입니다 http://leeiio.me/에연결할수있습니다.HTML 을 전시주세요.

对应的正则匹配换成这种

var text = "你好，我是一段文本。我链接到http://leeiio.me/这是一篇测试.html 请大家多多指教。こんにちは、私はテキストをしています。私はこれはテストですhttp://leeiio.me/にリンクしています.Html のは、展覧会をしてください。안녕, 난 텍스트입니다. 나는 이것은 테스트입니다 http://leeiio.me/에연결할수있습니다.HTML 을 전시주세요.";
var regexp = /((http|ftp|https|file):[^'"\s]+)/ig;
text = text.replace(regexp,"<a href='$1'>$1</a>");
console.log(text);

最终的匹配结果是：

你好，我是一段文本。我链 接到<a href=’http://leeiio.me/这是一篇测试.html’>http://leeiio.me/这是一篇测试.html< /a> 请大家多多指教。こんにちは、私はテキストをしています。私はこれはテストです<a href=’http://leeiio.me/にリンクしています.Html’>http://leeiio.me/にリンクしていま す.Html のは、展覧会をしてください。안녕, 난 텍스트입니다. 나는 이것은 테스트입니다 <a href=’http://leeiio.me/에연결할수있습니다.HTML’>http://leeiio.me/에연결할수있습니 다.HTML 을 전시주세요.

当然同上，网址和文字之间得用空格隔开，不然还是会把后面的文字部分也识别为URL的一部分。对于英文文本就显得很有用了，因为英文单词之间肯定都是会用空格隔开的麽。所以也希望大家养成好习惯，在一段文本中URL部分和文本之间用空格隔开。

PS:识别一个邮件地址变成email则可以这么干

var text = "你好，我是一段文本。我的email地址：test@test.com";
var regexp = /[a-z0-9_\-+=.]+@[a-z0-9\-]+(\.[a-z0-9-]+)+/ig;
text = text.replace(regexp,function(h){return"<a href='mailto:"+h+"'>"+h+"</a>"});
console.log(text);

大家的意见以及建议呢？

Name: text-overflow-mode
Value: clip | ellipsis | ellipsis-word

clip : 　不显示省略标记（…），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符。
ellipsis-word : 　当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个词（word）。

至于为什么一开始我说text-overflow是一个比较特殊的样式呢？因为我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50个汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text-overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了（表现上是超出部分显示省略标记…）。

text-overflow: ellipsis属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。Via.

那么，如果我们要给p标签定义text-overflow:ellipsis就可以这么写：

p {
      white-space: nowrap;
      width: 100%;                  /* IE6 需要定义宽度 */
      overflow: hidden;             
 
      -o-text-overflow: ellipsis;    /* Opera */
      text-overflow:    ellipsis;    /* IE, Safari (WebKit) */
   }

使用样式前：

我是一段测试文字，请分别用IE，Safari，chrome，opera浏览器查看我哦！

使用样式后：

我是一段加长过的测试文字，请分别用IE，Safari，chrome，opera浏览器查看我哦！哈哈哈，看到省略号了么？

浏览器兼容状况

OH,FML!Firefox不支持这个属性！这回，Firefox你也太另类了吧！还有别的办法么，当然有，方法还挺多的。
比如Mozilla developer center推荐的-moz-binding CSS属性。Mozilla developer center给出的理由是text-overflow没有W3C的规范…但是因为Firefox支持XUL，一种XML的用户界面语言。并且Firefox还支持XBL，一种XML绑定语言，这样我们就可以使用Mozilla developer center推荐的-moz-binding CSS属性来绑定XUL里的ellipsis属性了。

1.XUL方式

首先，我们创建XUL，它应该被保存为ellipsis.xml：

<?xml version="1.0"?>  
<bindings   
  xmlns="http://www.mozilla.org/xbl"  
  xmlns:xbl="http://www.mozilla.org/xbl"  
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"  
>  
    <binding id="ellipsis">  
        <content>  
            <xul:window>  
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>  
            </xul:window>  
        </content>  
    </binding>  
</bindings>

然后我们需要把这个xml文件放到一个目录，原来的css需要加一条，变成这样

p {
      white-space: nowrap;
      width: 100%;                  /* IE6 需要定义宽度 */
      overflow: hidden;             
 
      -o-text-overflow: ellipsis;    /* Opera */
      text-overflow:    ellipsis;    /* IE, Safari (WebKit) */
      -moz-binding: url('ellipsis.xml#ellipsis');    /* Firefox */
   }

虽然Firefox通过XUL的方式实现了ellipsis，但是还是需要注意以下这些问题：
1.经过XUL处理过的文本你将不能被选中，按理说-moz-user-select: text; 属性将允许文本被选中，但是我没有试验成功。
2.如果你给父元素绑定了XUL，那么子元素的内容将变得不可见。例如：

It is a longhaha long long long long text!

如果你只是给p节点绑定了XUL，那么在Firefox下你将看不到haha这个内容。
它的源代码实际上是：

<p>It is a long<em> haha</em> long long long long text!</p>

参考资料:

http://www.w3.org/TR/2003/CR-css3-text-20030514/

http://www.quirksmode.org/css/contents.html

https://bugzilla.mozilla.org/show_bug.cgi?id=312156

https://developer.mozilla.org/En/XUL

https://developer.mozilla.org/En/XUL/Description

http://www.rikkertkoppes.com/thoughts/2008/6/

http://www.w3.org/TR/xbl/

http://www.w3.org/TR/css3-text/

2.Javascript方式

既然XUL无法完美解决Firefox下文字溢出显示…，那么我们就求助javascript吧，当然，并不是古老的截取一定数目的字符来实现。
这里以jQuery为例，代码如下：

(function($) {
	$.fn.ellipsis = function(enableUpdating){
		var s = document.documentElement.style;
		if (!('textOverflow' in s || 'OTextOverflow' in s)) {
			return this.each(function(){
				var el = $(this);
				if(el.css("overflow") == "hidden"){
					var originalText = el.html();
					var w = el.width();
 
					var t = $(this.cloneNode(true)).hide().css({
                        'position': 'absolute',
                        'width': 'auto',
                        'overflow': 'visible',
                        'max-width': 'inherit'
                    });
					el.after(t);
 
					var text = originalText;
					while(text.length > 0 && t.width() > el.width()){
						text = text.substr(0, text.length - 1);
						t.html(text + "...");
					}
					el.html(t.html());
 
					t.remove();
 
					if(enableUpdating == true){
						var oldW = el.width();
						setInterval(function(){
							if(el.width() != oldW){
								oldW = el.width();
								el.html(originalText);
								el.ellipsis();
							}
						}, 200);
					}
				}
			});
		} else return this;
	};
})(jQuery);

这段js的原理很简单，就是通过不断的比较宽度值，然后逐个缩短字符宽度，当最后宽度合适的时候，停止循环，就实现了文字溢出显示…的效果。
这段js还需要一段css来配合。

.overflow {
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

js里有个判断就是当样式里出现text-overflow或者-o-text-overflow的时候，便不会执行这段js。因为支持这两个属性的浏览器可以自己实现ellipsis效果。

这两种方法都可以实现Firefox下ellipsis的效果，如何取舍使用，具体还得根据你要运用到的项目的具体情况来具体分析，XUL实现的方法的不足之处在以上已经很详尽地列举了，如果你可以避免或者说这些无关你项目的大问题，那么XUL不失一个好方法。

至于其他的一些方法你可能在网上也有看到，比如用:after伪类来实现等，个人不推荐，所以我这里也不细说了，如果你有更好的方法，也希望能与我分享，谢谢观看！

2011.09.28更新：Firefox7已经支持text-overflow:ellipsis了，enjoy it!

你知道，IE是个脑残儿浏览器，不管是什么版本，纵使版本号越来越大，可总是让人觉得这玩意儿跟标准老是扯不上暧昧。可是，你知道，只要世上还有 windows 操作系统，IE就永生不灭，阿门。对于代码工作者来说，自然是苦不堪言，为了考虑IE的兼容问题，不管是写 CSS 还是 JS，往往都要对 IE 特别对待，这就少不了做些判断。本文不讨论如何区分 IE 的样式，仅是 JS 判定 IE 浏览器。

这个目前世界上最短的 Javascript 判定 IE 浏览器的方法来自一个俄人,又是俄人！它已经在各版本的 IE 以及目前其他流行的浏览器上经过测试，基于 IE 的 Bug，微软虽然已经意识到，但是从来没有纠正过。

<script type='text/javascript'>
var ie = !-[1,];
alert(ie);
</script>

以上代码运行结果：IE 下返回true，其他标准浏览器返回false。!-[1,]，仅仅只有 6 bytes！

不过如果反过来判断，标准浏览器返回 true 而 IE 返回 false的话，则可以再缩短一个byte。

<script type='text/javascript'>
notIe = -[1,];
 
if(-[1,]){
// 标准浏览器代码
}else{
// IE Only的代码
}
</script>

看完了这些，你们是不是很好奇这些是怎么运行的？请继续看下文。

这个 Bug 产生的原因是 IE 会添加一个空数组元素到数组元素的总数里。

[1,]. Length

标准浏览器会返回 1 (基于标准的 ECMAscript ，在数组最后的逗号”,”会被忽略，这是为了方便在一列里显示以及自动生成等)，但是 IE 会返回 2。当你打印这个数组的时候 IE 将会返回 “1, “，也就是两个元素，而其他标准浏览器将会返回 “1″。

这很容易验证，比如在 IE 和 FF中运行以下代码：

<script type='text/javascript'>
alert([,]==',');
//这是8个字符判定IE
</script>

[1,]实际上浏览器的操作是toString()转换成字符串的操作，-[1,]是将字符串强制转换为数字。而 IE 将会返回 NaN，但是遗憾的是 NaN 并不是一个数字，因为[1,]转换成字符串后的”1,”里面带有逗号。而其他标准浏览器会返回 -1，这是一个非 0 的数字。

你知道，NaN 转换成 Boolean 型将返回 false，所以-[1,]在 IE 下将返回 false。而任何非 0 的数字转换成 Boolean 型(例如-1)，在 标准浏览器下都将返回 true。所以我们得到了一个判定结果，!-[1,]在 IE 下返回true，而在其他标准浏览器下返回 false。也就达到了区分判定 IE 浏览器的目的。

当然，如前文所说，这个 Bug 其实微软很早就已经知道，但是却一直没有去修复它，所以在未来的 > IE8 的 IE 浏览器也就不确定是否依旧可以，不过基本上这么多代的 IE 都没有修复，未来的 IE 也不太会去修复的样子。

以下是其他的一些区分判定 IE 浏览器的代码，也可以参考下:

<script type='text/javascript'>
// Option from Dean Edwards:
var ie = /*@cc_on!@*/false;
 
// Use the commented line:
var ie//@cc_on=1;
 
// Variation (shorter variable):
var ie = '\v'=='v';
 
/ / Option to Gareth Hayes (former record-holder):
var ie = !+"\v1";
</ script>

参考文章：
Самое короткое определение IE
32 bytes, ehr … 9, ehr … 7!!! to know if your browser is IE

翻译正文如下：

为了庆祝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常规 (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

原文地址: http://jquery14.com/day-01
译文地址: UXD2
原译者署名:coolnalu

所以我用 jQuery 对这个效果的代码进行了重新编写，请看下面的代码：

var sweetTitles = {
    x : 10,                             // @Number: x pixel value of current cursor position
    y : 20,                             // @Number: y pixel value of current cursor position
    tipElements : "a",                  // @Array: Allowable elements that can have the toolTip,split with ","
    noTitle : true,                     //if this value is false,when the elements has no title,it will not be show
    init : function() {
        var noTitle = this.noTitle;
        $(this.tipElements).each(function(){
            $(this).mouseover(function(e){
                if(noTitle){
                    isTitle = true;
                }else{
                    isTitle = $.trim(this.title) != '';
                }
                if(isTitle){
                    this.myTitle = this.title;
                    this.myHref = this.href;
                    this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+"..." : this.myHref);
                    this.title = "";
                    var tooltip = "<div id='tooltip'><p>"+this.myTitle+"<em>"+this.myHref+"</em>"+"</p></div>";
                    $('body').append(tooltip);
                    $('#tooltip')
                        .css({
                            "opacity":"0.8",
                            "top":(e.pageY+20)+"px",
                            "left":(e.pageX+10)+"px"
                        }).show('fast');
                }
                }).mouseout(function(){
                    if(this.myTitle != null){
                        this.title = this.myTitle;
                        $('#tooltip').remove();
                    }
                }).mousemove(function(e){
                    $('#tooltip')
                    .css({
                        "top":(e.pageY+20)+"px",
                        "left":(e.pageX+10)+"px"
                    });
                });
        });
    }
};
$(function(){
    sweetTitles.init();
});

代码是不是很简单，记住不要忘了载入 jQuery 库哦。

当然光有效果没有样式还不行，需要制定一些 css 样式才能让整个效果显得更加美妙。以下是我的 css，供参考。

body div#tooltip { position:absolute;z-index:1000;max-width:220px;width:auto !important;width:220px;background:#000;text-align:left;padding:5px;min-height:1em;}
body div#tooltip p { margin:0;padding:0;color:#fff;font:12px verdana,arial,sans-serif; }
body div#tooltip p em { display:block;margin-top:3px;color:#f60;font-style:normal;font-weight:bold; }

View Demo Sweet Titles for jQuery

ZIP File22.75 kB 共被下载947次

2010.11.27更新：增加选项设置当没有title属性的时候不显示sweetTitle。

有时候浏览器变得缓慢或者网络十分缓慢的时候，当你点击了一个链接，你要做的就是对着页面傻看着，页面既不刷新，也没有任何提示，并没有给用户一个好的引导。一些并不是网络从业者的访客可能都不知道你的网站到底怎么了，明明点击了链接却没有反应，从而造成了不好的印象。所以我觉得，为什么不给出一些提示来告诉他们页面正在加载中呢(当他们点击了某个链接的时候)。

$('a').click(function(){
	$(this).text('loading...');
});

以上这段代码就是改变你所点击的链接的文本为 loading…当然你如果只想让局部的链接有这种效果的话，自己去选择对象吧。

也许你也已经注意到本站在点击链接的时候，除了链接文本变为 loading…之外，还会在左上角弹出页面加载的提示，虽然都是些噱头的功能，但是无疑会让用户觉得很眩，多少会吸引用户的注意力从而让等待显得不那么漫长。

我的做法是在你的模板里放置如下代码( CSS 自行控制，别忘了让其绝对定位到顶部)：

<div id="clickload">页面假装异步加载中...</div>

然后就是使用 jQuery 来控制以上的 Div 的显示：

$('a').click(function(){
	$(this).text('loading...');
	$('#clickload').show();
});

不过有一点要提醒的是，显然你不能对全站的 a 链接都启用这个效果，因为还有一些 a 链接是在新窗口打开外链或者是 # 或者是 javascript 的，当你点击那些链接的时候当前页面显然不会跳转到新的页面，那么左上角弹出的提示显然也不会被刷新掉，所以你需要对 a 进行过滤。

我只做了简单的过滤，排除了那些新窗口打开的外链

$('a[href*="http://leeiio.me"]')

当然具体还得因你自己的站而对 a 进行筛选，你可以选择只针对侧边栏的链接啊或者导航链接啊或者只是文章标题等。

很简单对吧，说了只是小细节了。谢谢大家捧场！

2009.11.11更新：增加鼠标中间点击链接的事件捕获处理。(顺便祝广大光棍朋友早日“脱光”！)
当你用鼠标中键新窗口打开链接的时候还是会触发事件，导致文字变成“Loading…”，那么我们就要对鼠标的事件进行处理了，处理的代码如下：

$('a').click(function(e){
	if(e.which == 2){
              return true;
        }else{
              $(this).text('loading...');
	      $('#clickload').show();
        }
});

2009.11.22更新：页面由window.location打开。
不知道为什么，在IE和Opera中用jquery的click(fn)函数，会丢失默认的事件也就是只执行了click(fn)函数里面写的事件，而默认的打开页面的事件丢失了，Firefox和Chrome都是正常的。不知道是不是jQuery函数的问题，往知情者告知哈。现在的解决方案代码如下：

$('a').click(function(e){
	if(e.which == 2){
              return true;
        }else{
              $(this).text('loading...');
	      $('#clickload').show();
              window.location = $(this).attr('href');
        }
});

先看这段代码：

<script type="text/javascript">
/* 
Dev by CssRain.cn 
Test in IE6,IE7,Firefox3,Chrome
感谢 CssRain的这段插件代码
*/
jQuery.fn.CRselectBox = jQuery.fn.sBox = function(options){
	options = $.extend({
		animated : false
	},options);
	var _self = this;
	/*构建结构*/
	var _parent = _self.parent();
	var wrapHtml = '<div class="CRselectBox"></div>';
	var $wrapHtml = $(wrapHtml).appendTo(_parent);
	var selectedOptionValue = _self.find("option:selected").attr("value");
	var selectedOptionTxt = _self.find("option:selected").text();
	var name = _self.attr("name");
	var id = _self.attr("id");
	var inputHtml = '<input type="hidden" value="'+selectedOptionValue+'" name="'+name+'" id="'+id+'"/>';
	$(inputHtml).appendTo($wrapHtml);
	var inputTxtHtml = '<input type="hidden" value="'+selectedOptionTxt+'" name="'+name+'_CRtext" id="'+id+'_CRtext"/>';
	$(inputTxtHtml).appendTo($wrapHtml);
	var aHtml = '<a class="CRselectValue" href="#">'+selectedOptionTxt+'</a>';
	$(aHtml).appendTo($wrapHtml);
	var ulHtml = '<ul class="CRselectBoxOptions"></ul>';
	var $ulHtml = $(ulHtml).appendTo($wrapHtml);
	var liHtml = "";
	_self.find("option").each(function(){
		if($(this).attr("selected")){
			liHtml += '<li class="CRselectBoxItem"><a href="#" class="selected" rel="'+$(this).attr("value")+'">'+$(this).text()+'</a></li>';
		}else{
			liHtml += '<li class="CRselectBoxItem"><a href="#" rel="'+$(this).attr("value")+'">'+$(this).text()+'</a></li>';
		}
	});
	$(liHtml).appendTo($ulHtml);
	/*添加效果*/
	$( $wrapHtml, _parent).hover(function(){
		$(this).addClass("CRselectBoxHover");
	},function(){
		$(this).removeClass("CRselectBoxHover");
	});
	$(".CRselectValue",$wrapHtml).click(function(){
		$(this).blur();	
		if( $(".CRselectBoxOptions",$wrapHtml).is(":hidden") ){
			if(options.animated){
				$(".CRselectBoxOptions").slideUp("fast");
				$(".CRselectBoxOptions",$wrapHtml).slideDown("fast");
			}else{
				$(".CRselectBoxOptions").hide();
				$(".CRselectBoxOptions",$wrapHtml).show();
			}
		}
		return false;
	});
	$(".CRselectBoxItem a",$wrapHtml).click(function(){
		$(this).blur();
		var value = $(this).attr("rel");
		var txt = $(this).text();
		$("#"+id).val(value);
		$("#"+id+"_CRtext").val(txt);
		$(".CRselectValue",$wrapHtml).text(txt);
		$(".CRselectBoxItem a",$wrapHtml).removeClass("selected");
		$(this).addClass("selected");
		if(options.animated){
			$(".CRselectBoxOptions",$wrapHtml).slideUp("fast");
		}else{
			$(".CRselectBoxOptions",$wrapHtml).hide();
		}
		return false;
	});
	$(document).click(function(event){
		if( $(event.target).attr("class") != "CRselectBox" ){
			if(options.animated){
			$(".CRselectBoxOptions",$wrapHtml).slideUp("fast");
			}else{
				$(".CRselectBoxOptions",$wrapHtml).hide();
			}
		}
	});
	_self.remove();
	return _self;
}
 
})
</script>

当然既然是 jQuery 实现的，自然别忘了载入 jQuery 的库哦！
-Via

至于怎么用呢，看下面这段代码：

<script type="text/javascript">
$(function(){
	$("#abc").CRselectBox();      //#abc 为你的下拉框select的ID
</script>

只要给你的下拉框 Select 一个 ID 值即可，其余的就交给上述的 jQuery 插件了。

CSS部分自行定义：

.CRselectBox {}
.CRselectBoxHover {}
.CRselectBox a.CRselectValue {}
.CRselectBoxOptions {}
.CRselectBoxOptions a{}
.CRselectBoxOptions a:hover{}
.CRselectBoxOptions a.selected{}
/* 解决 firefox 点击放大出现虚线框，从而导致滚动条的问题  */
.CRselectBox a { 
	outline: none; 
	text-decoration:none;
}
.CRselectBox a:focus { 
	outline: none; 
	text-decoration:none;
}

View Demo jQuery Select

ZIP File34.45 kB 共被下载1856次

CSS Naked Day 的来历

CSS Naked Day，也称 CSS 裸奔节或 CSS 裸奔日。

在裸奔节这天，参加裸奔节的Blog 将会去除页面上所有的 CSS 样式和广告裸奔整整一天,通过这个节日来重视 CSS 的重要性.当然你的网站如果是用 table 来布局的话这个节日对你来说并不是很合适.在2006年有将近800个国际知名网站参与这个节日.而今年CSS Naked Day将由之前的24小时改为48小时!

CSS Naked Day 的目的

推动Web标准、提倡简洁为美、使用正确的 (x)html 语义标记、良好的层次结构。暂时把页面设计抛弃，直接展示<body>内容！

历届CSS Naked Day的举办时间

第一届 CSS 裸奔节：2006年4月5日

第二届 CSS 裸奔节：2007年4月5日

第三届 CSS 裸奔节：2008年4月9日

第四届 CSS 裸奔节：2009年4月9日

- Via

你可以前往官方网站查看更多的介绍以及了解如何加入这个活动。

然后，回到本文的重点。因为我的博客很多时候都是处在调试中的，并且很多插件诸如 Simple Tags 是直接在标签里给元素加上 CSS 的，所以如果想要“裸奔”光是去除 .css 文件是远远不够的，那么有没有一种强制的方法呢？我昨晚就在想这样一种方法。于是被我想到了。也就是本文介绍如何 “强制脱衣” ，也就是教你如何强制去除网站的 CSS ！

实现原理：众所周知，CSS 调用有三种方法，一种是 link 方式，一种是 <style></style> 包裹方式，最后一种就是直接且暴力的 style=”" 方式，通过 Javascript 代码，强制禁用 type=”text/css” 的 link 或者 让 link 链接 css 的 href=”" 为空，且让 <style></style>
被清除或者禁用，且让 style=”" 为空 或者去除。

这里提供两种方法，一种是最普通的 Javascript 来实现，另外一种是通过目前的最流行的 Javascript 库 jQuery 来实现。

第一种（普通版）：

<script type="text/JavaScript">	
// 用style方式引用的css
var style=document.getElementsByTagName('style');
var s='Style:' + style.length;
for (i=0; i<style.length; i++)
{
    /*s += style.item(i) + '|';*/
    style.item(i).disabled=true;
}
 
// 用link方式引用的css
var link = document.getElementsByTagName('link');
s += 'Link:' + link.length;
for (i=0; i<link.length; i++)
    if ('text/css' == link.item(i).type)
        {
            /*s += link.item(i).href + "|\\n";*/
            link.item(i).disabled=true;
        }
 
// 任意对象的style=""
var obj = document.getElementsByTagName('body').item(0).childNodes;
var obj = document.getElementsByTagName('*');
s += 'Obj:' + obj.length;
for (i=0; i<obj.length; i++)
{   
    obj1 = obj.item(i);
    if (obj1.attributes.getNamedItem('style'))
    {
        s += obj1.nodeName + obj1.attributes.getNamedItem('style').value + "\\n";
        obj1.attributes.getNamedItem('style').value = "";
    }
}
</script>

只需将以上这段 JS 代码插入你的网页中即可。

接着是第二种（jQuery版）

<script type="text/JavaScript">		
$(document).ready(function(){
	// 用link方式引用的css
	$("link").attr("type", function() { 
		if ($(this).attr("type") == "text/css")
			$(this).attr("href","");
	}); 
 
	// 任意对象的style=""
		$("*").removeAttr("style");
 
	// 用style方式引用的css
	$("style").remove();
});
</script>

如果你的网站启用了 jQuery 库的话，那么毫不犹豫地用第二种吧，你看代码是何其简洁啊！

最后祝大家裸奔愉快！