<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>前端思考：专注前端开发，关注用户体验 &#187; Javascript</title>
	<atom:link href="http://www.artcss.com/archives/category/js/feed" rel="self" type="application/rss+xml" />
	<link>http://www.artcss.com</link>
	<description>一个像素的距离...</description>
	<lastBuildDate>Sat, 12 Feb 2011 03:34:07 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>详解：JavaScript数据类型[转]</title>
		<link>http://www.artcss.com/archives/747.html</link>
		<comments>http://www.artcss.com/archives/747.html#comments</comments>
		<pubDate>Tue, 13 Apr 2010 15:07:21 +0000</pubDate>
		<dc:creator>Artcss</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.artcss.com/?p=747</guid>
		<description><![CDATA[JavaScript 有六种数据类型。主要的类型有 number、string、object 以及 Boolean 类型,其他两种类型为 null 和 undefined。 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 是一种区分大小写的语言，因此将一个变量命名为 [...]]]></description>
			<content:encoded><![CDATA[<p>JavaScript 有六种数据类型。主要的类型有 number、string、object 以及 Boolean 类型,其他两种类型为 null 和 undefined。</p>
<p>String 字符串类型:字符串是用单引号或双引号来说明的。（使用单引号来输入包含引号的字符串。）如：“The cow jumped over the moon.”</p>
<p>数值数据类型：JavaScript 支持<span id="more-747"></span>整数和浮点数。整数可以为正数、0 或者负数；浮点数可以包含小数点、也可以包含一个 “e”（大小写均可，在科学记数法中表示“10的幂”）、或者同时包含这两项。</p>
<p>Boolean 类型：可能的 Boolean 值有 true 和 false。这是两个特殊值，不能用作 1 和 0。</p>
<p>Undefined 数据类型：一个为 undefined 的值就是指在变量被创建后，但未给该变量赋值以前所具有的值。</p>
<p>Null 数据类型：null 值就是没有任何值，什么也不表示。</p>
<p>object类型：除了上面提到的各种常用类型外，对象也是JavaScript中的重要组成部分，这部分将在后面章节详细介绍。</p>
<p>在 JavaScript 中变量用来存放脚本中的值，这样在需要用这个值的地方就可以用变量来代表，一个变量可以是一个数字，文本或其它一些东西。</p>
<p>　　 JavaScript是一种对数据类型变量要求不太严格的语言，所以不必声明每一个变量的类型，变量声明尽管不是必须的，但在使用变量之前先进行声明是一种好的习惯。可以使用 var 语句来进行变量声明。如：var men = true; // men 中存储的值为 Boolean 类型。 </p>
<p>变量命名:JavaScript 是一种区分大小写的语言，因此将一个变量命名为 computer 和将其命名为 Computer是不一样的。<br />　　另外，变量名称的长度是任意的，但必须遵循以下规则： <br />
　　 1.第一个字符必须是一个字母（大小写均可）、或一个下划线(_)或一个美元符 ($)。 <br />
　　 2.后续的字符可以是字母、数字、下划线或美元符。 <br />
　　 3.变量名称不能是保留字。
</p>
<p>需要注意js里面var，它控制了变量的作用范围。函数内的变量只要带有var，那么函数内用的这个变量就和函数外的无关。</p>
<div class="cnt">
<p>var a；<br />c=new function(){var a=1;alert(typeof(a));};<br />alert(typeof(a));<br />结果为：number，undefined；</p>
<p>var a=1；<br />c=new function(){alert(typeof(a));var a=1;};<br />alert(typeof(a));<br />结果为：undefined，number；</p>
<p>var a；<br />c=new function(){alert(typeof(a));a=1;};<br />alert(typeof(a));<br />结果为：undefined，number；</p>
<p>var a；</p>
<p>c=new function(){var a=1;alert(typeof(a));};可以在c里面用this.a来访问全局变量a</p>
<p>============</p>
<p>说出它们的值</p>
<p>1、typeof(NaN) number、typeof(Infinity) number、typeof(null) object、typeof(undefined) undefined<br />2、NaN == NaN false<br />3、NaN != NaN true<br />4、NaN &gt;= NaN false<br />5、null == undefined true<br />6、null &gt;= undefined false<br />7、null &lt;= undefined false<br />8、parseInt(“123abc”) 123<br />9、”123abc” &#8211; 0 NaN<br />10、Infinity &gt; 10 true<br />11、Infinity &gt; “abc” false<br />12、Infinity == NaN false<br />13、true == 1 ture<br />14、new String(“abc”) == “abc” true<br />15、new String(“abc”) === “abc” false 完全相同</p>
<p><strong>关系运算符</strong><span>（&lt;、&gt;、&lt;=、&gt;=）</span></p>
<ul type="disc">
<li>试图将 expression1 和 expression2 都转换为数字。</li>
<li>如果两表达式均为字符串，则按字典序进行字符串比较。</li>
<li>如果其中一个表达式为 <strong>NaN</strong>，返回 <strong>false</strong>。</li>
<li>负零等于正零。</li>
<li>负无穷小于包括其本身在内的任何数。 </li>
<li>正无穷大于包括其本身在内的任何数。</li>
</ul>
<p><strong>相等运算符</strong><span> （==、!=）</span></p>
<ul type="disc">
<li>如果两表达式的类型不同，则试图将它们转换为字符串、数字或 Boolean 量。 </li>
<li>
<strong>NaN</strong>与包括其本身在内的任何值都不相等。
</li>
<li>负零等于正零。</li>
<li>null 与 null 和 undefined 相等。 </li>
<li>相同的字符串、数值上相等的数字、相同的对象、相同的 Boolean 值或者（当类型不同时）能被强制转化为上述情况之一，均被认为是相等的。</li>
<li>其他比较均被认为是不相等的。</li>
</ul>
<p><strong>恒等运算符</strong><span> （===、!==）</span></p>
<p>除了不进行类型转换，并且类型必须相同以外，这些运算符与相等运算符的作用是一样的。</p>
<p>说出它们的输出结果</p>
<p>1、<br />var a = “123abc”;<br />alert(typeof(a++)); string，++运算符在typeof时候没有执行<br />alert(a); NaN</p>
<p>2、a是string类型<br />var a = “123abc”;<br />a.valueOf = function(){return parseInt(a);}<br />alert(++a); NaN<br />alert(a-0); NaN</p>
<p>3、a是object类型<br />var a = new Object();<br />a.toString = function(){return “123abc”;}<br />a.valueOf = function(){return parseInt(a);}<br />alert(++a);124<br />alert(a-0);124</p>
<p>4、<br />String.prototype.valueOf = function(){<br />return parseFloat(this);<br />}<br />alert(“123abc” &gt; 122); false<br />alert(new String(“123abc”) &gt; 122); true</p>
<p>5、<br />var s = new String(“abc”);<br />alert(typeof(s) == typeof(“abc”));false<br />alert(s === “abc”);false<br />alert(s.toString() == s);true</p>
<p>6、<br />var a = new Object();<br />a.toString = function(){return “a”};<br />var b = new Object();<br />b.toString = function(){return “b”};<br />alert(a&gt;b);<br />a.valueOf = function(){return 1};<br />b.valueOf = function(){return 0};<br />alert(a&gt;b);</p>
<p>7、<br />function step(a){<br />return function(x)<br />{<br />return x + a++;<br />}<br />}<br />var a = step(10);<br />var b = step(20);<br />alert(a(10));<br />alert(b(10));</p>
</div>
<p>原文地址：<a href="http://www.javaeye.com/topic/427150">http://www.javaeye.com/topic/427150</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.artcss.com/archives/747.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>jQuery1.4官方文档中文版[转]</title>
		<link>http://www.artcss.com/archives/677.html</link>
		<comments>http://www.artcss.com/archives/677.html#comments</comments>
		<pubDate>Mon, 22 Feb 2010 02:47:59 +0000</pubDate>
		<dc:creator>Artcss</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[chm]]></category>
		<category><![CDATA[中文文档]]></category>

		<guid isPermaLink="false">http://blog.artskin.cn/?p=677</guid>
		<description><![CDATA[2010年1月14号, 恰逢jQuery四周年纪念日, jQuery的团队早早便开始了1.4版发布的准备工作, 并以每天一则公告的方式进行庆祝, 活动将持续14天。发布的首日, jQuery的团队首先列出了1.4版中的重大改进。我个人认为这篇文档是这几天以来内容比较充实的一篇文档。所以翻译过来, 以便同僚日后可以参考。时间仓促, 可能有几处不太明确的地方, 或是原文就草草带过, 可能会不大通畅。欢迎讨论或提出意见，以便共同进步。 原译者:coolnalu 原文地址: http://jquery14.com/day-01 .wp_syntax { color: #100; background-color: #f9f9f9; border: 1px solid silver; margin: 0 0 1.5em 0; overflow: auto; } .wp_syntax div{ vertical-align: top; padding: 2px 4px; } .entry h2{ background: #eeeeee; padding: 5px; } jQuery 1.4 发布啦 为了庆祝jQuery的四周岁生日, jQuery的团队荣幸的发布了jQuery Javascript库的最新主要版本! 这个版本包含了大量的编程，测试，和记录文档的工作，我们为此感到很骄傲。 我要以个人的名义感谢 Brandon [...]]]></description>
			<content:encoded><![CDATA[<p>2010年1月14号, 恰逢jQuery四周年纪念日, jQuery的团队早早便开始了1.4版发布的准备工作, 并以每天一则公告的方式进行庆祝, 活动将持续14天。发布的首日, jQuery的团队首先列出了1.4版中的重大改进。我个人认为这篇文档是这几天以来内容比较充实的一篇文档。所以翻译过来, 以便同僚日后可以参考。时间仓促, 可能有几处不太明确的地方, 或是原文就草草带过, 可能会不大通畅。欢迎讨论或提出意见，以便共同进步。<br />
<strong>原译者:coolnalu</strong></p>
<p><span id="more-69"></span><br />
<a href="http://jquery14.com/day-01">原文地址: http://jquery14.com/day-01</a></p>
<style>
.wp_syntax {
  color: #100;
  background-color: #f9f9f9;
  border: 1px solid silver;
  margin: 0 0 1.5em 0;
  overflow: auto;
}
.wp_syntax div{
  vertical-align: top;
  padding: 2px 4px;
}
.entry h2{
  background: #eeeeee;
  padding: 5px;
}
</style>
<h3>jQuery 1.4 发布啦</h3>
<p>为了庆祝jQuery的四周岁生日, jQuery的团队荣幸的发布了jQuery Javascript库的最新主要版本! 这个版本包含了大量的编程，测试，和记录文档的工作，我们为此感到很骄傲。</p>
<p>我要以个人的名义感谢 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和完成这次发布上所做的工作。</p>
<h4>下载(Downloading)</h4>
<p>按照惯例，我们提供了两份jQuery的拷贝，一份是最小化的(我们现在采用<a href="http://code.google.com/closure/compiler/">Google Closure</a>作为默认的压缩工具了)，一份是未压缩的(供纠错或阅读)。</p>
<ul>
<li><a href="http://code.jquery.com/jquery-1.4.min.js">jQuery压缩</a> (23kb <a href="http://www.julienlecomte.net/blog/2007/08/13/">Gzipped</a>)</li>
<li><a href="http://code.jquery.com/jquery-1.4.js">jQuery常规</a> (234kb)</li>
<li><a href="http://blog.artskin.cn/?page_id=486">jQuery1.4API中文文档手册chm</a> (154kb)</li>
</ul>
<p>另外，Google也在他们的服务器上<a href="http://code.google.com/apis/ajaxlibs/documentation/index.html">放置了一份jQuery的拷贝</a>。这份拷贝会自动的最小化然后压缩 &ndash; 并且放在Google最快的缓存服务器上。</p>
<ul>
<li><a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js</a></li>
</ul>
<p>你可以在你的站点上直接引用上面的URL，这样就可以享受迅速加载jQuery的性能优势了。</p>
<p>就jQuery1.4来说，我们努力的减少大规模升级中的麻烦 &ndash; 通过保持所有public函数的签名。即使如此，还请通读<a href="#backwards">可能会造成问题的变更列表</a>，这样能够了解哪些变更可能会给你的应用造成问题。</p>
<h3>(功能) Features</h3>
<p>下面的内容概括了jQuery1.4里加入的变更和功能。另外所有的变更都已经在<a href="http://api.jquery.com/category/version/1.4/">jQuery 1.4 的文档</a>里记录了。</p>
<h4>热门方法经过了性能上的大”检修”</h4>
<p>不少比较热门的和常用的jQuery方法在1.4里被重写了。(译注:重写了方法的内部，外部调用没有大幅度改变) 我们分析源码的时候发现我们能够获得大幅的性能提升，通过把jQuery和自己比较: 查看内部函数被调用了多少次，然后努力<a href="http://ejohn.org/blog/function-call-profiling/">降低源码的复杂度</a>(译注:计算机算法中的Complexity)</p>
<p><a rel="lightbox[69]" href="http://www.uxd2.com/wp-content/uploads/2010/01/01-funccall.jpg"><img width="500" height="375" alt="常用jQuery方法调用频率" src="http://www.uxd2.com/wp-content/uploads/2010/01/01-funccall.jpg" title="常用jQuery方法调用频率" class="alignnone size-full wp-image-74"></a><br />
<small><a href="http://www.flickr.com/photos/jeresig/4271691293/" title="# of Function Calls for Popular jQuery Methods by John Resig, on Flickr">View the cropped chart.</a></small></p>
<p>在1.4版里我们显著的降低了大部分热门jQuery方法的的复杂度。</p>
<h4>更易用的设置函数 (Easy Setter Functions)</h4>
<p>算来已经有一阵了，你们已经可以给<code><a href="http://api.jquery.com/attr">.attr()</a></code>传递一个函数，然后这个函数的结果会被用来赋给相应的HTML属性(attribute)上。这个功能现在被移植到所有的设置函数了: <code><a href="http://api.jquery.com/css">.css()</a></code>, <code><a href="http://api.jquery.com/attr">.attr()</a></code>, <code><a href="http://api.jquery.com/val">.val()</a></code>, <code><a href="http://api.jquery.com/html">.html()</a></code>, <code><a href="http://api.jquery.com/text">.text()</a></code>, <code><a href="http://api.jquery.com/append">.append()</a></code>, <code><a href="http://api.jquery.com/prepend">.prepend()</a></code>,  <code><a href="http://api.jquery.com/before">.before()</a></code>, <code><a href="http://api.jquery.com/after">.after()</a></code>, <code><a href="http://api.jquery.com/replaceWith">.replaceWith()</a></code>, <code><a href="http://api.jquery.com/wrap">.wrap()</a></code>, <code><a href="http://api.jquery.com/wrapInner">.wrapInner()</a></code>, <code><a href="http://api.jquery.com/offset">.offset()</a></code>, <code><a href="http://api.jquery.com/addClass">.addClass()</a></code>, <code><a href="http://api.jquery.com/removeClass">.removeClass()</a></code>, 以及 <code><a href="http://api.jquery.com/toggleClass">.toggleClass()</a></code>.</p>
<p>另外, 对于下面几个方法，当前的值会被作为第2个变量传递给这个函数。<code><a href="http://api.jquery.com/css">.css()</a></code>, <code><a href="http://api.jquery.com/attr">.attr()</a></code>, <code><a href="http://api.jquery.com/val">.val()</a></code>, <code><a href="http://api.jquery.com/html">.html()</a></code>, <code><a href="http://api.jquery.com/text">.text()</a></code>, <code><a href="http://api.jquery.com/append">.append()</a></code>, <code><a href="http://api.jquery.com/prepend">.prepend()</a></code>, <code><a href="http://api.jquery.com/offset">.offset()</a></code>, <code><a href="http://api.jquery.com/addClass">.addClass()</a></code>, <code><a href="http://api.jquery.com/removeClass">.removeClass()</a></code>, 以及 <code><a href="http://api.jquery.com/toggleClass">.toggleClass()</a></code>.</p>
<p>这样代码就可以这样写:</p>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="javascript"><span style="color: rgb(0, 102, 0); font-style: italic;">// 找出所有A标签里的'&amp;'字符，然后用一个span标签包围</span>
$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'a'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">html</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>i<span style="color: rgb(51, 153, 51);">,</span>html<span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>
  <span style="color: rgb(0, 0, 102); font-weight: bold;">return</span> html.<span style="color: rgb(102, 0, 102);">replace</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 102); font-style: italic;">/&amp;/gi</span><span style="color: rgb(51, 153, 51);">,</span><span style="color: rgb(51, 102, 204);">'<span class="amp">&amp;</span>'</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>

<span style="color: rgb(0, 102, 0); font-style: italic;">// 给一些链接的title属性加些信息</span>
$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'a[target]'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">attr</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"title"</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>i<span style="color: rgb(51, 153, 51);">,</span>title<span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>
  <span style="color: rgb(0, 0, 102); font-weight: bold;">return</span> title <span style="color: rgb(51, 153, 51);">+</span> <span style="color: rgb(51, 102, 204);">" (新窗口打开)"</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</div>
</div>
<h4>Ajax</h4>
<p><strong>嵌套参数的序列化</strong> (<a href="http://api.jquery.com/jQuery.param/">jQuery.param() 文档</a>, <a href="http://github.com/jquery/jquery/commit/50d78e7658382d2a2f5149cae7a6572f78ce403f">Commit 1</a>, <a href="http://github.com/jquery/jquery/commit/67089eedf6f84acd9c16ea2a6dadadf7b13a7c84">Commit 2</a>)</p>
<p>jQuery 1.4在jQuery.param方法里加入了嵌入参数序列化的支持，借用了PHP编程里兴起的，而后又被Ruby on Rails推广开来的方式。<br />
举例来说，<br />
<code>{foo: ["bar", "baz"]}</code> 会被序列化为 “foo[]=bar&amp;foo[]=baz”.</p>
<p>在jQuery 1.3版里, <code>{foo: ["bar", "baz"]}</code> 曾被序列化为 “foo=bar&amp;foo=baz”. 但是，这样做没用办法将只含有一个元素的阵列编码。如果你需要旧的序列化方式，你可以设置传统Ajax设置来进行切换。(使用<code>jQuery.ajaxSettings.traditional</code>进行全局切换，或者根据情况单独切换。</p>
<p>总共有3种方式可以切换到旧的序列化方式:</p>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="javascript"><span style="color: rgb(0, 102, 0); font-style: italic;">// 全局改变序列化方式 (使用旧的)</span>
jQuery.<span style="color: rgb(102, 0, 102);">ajaxSettings</span>.<span style="color: rgb(102, 0, 102);">traditional</span> <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">true</span><span style="color: rgb(51, 153, 51);">;</span>

<span style="color: rgb(0, 102, 0); font-style: italic;">// 指定情况使用旧的序列化方式</span>
jQuery.<span style="color: rgb(102, 0, 102);">param</span><span style="color: rgb(0, 153, 0);">(</span> stuff<span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">true</span> <span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>

<span style="color: rgb(0, 102, 0); font-style: italic;">// 针对一个单独的Ajax请求使用旧的序列化方式</span>
$.<span style="color: rgb(102, 0, 102);">ajax</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">{</span> data<span style="color: rgb(51, 153, 51);">:</span> stuff<span style="color: rgb(51, 153, 51);">,</span> traditional<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">true</span> <span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</div>
</div>
<p>更多信息参见: <a href="http://api.jquery.com/jQuery.param/">jQuery.param() 文档</a>, <a href="http://api.jquery.com/jQuery.ajax/">jQuery.ajax() 文档</a>, <a href="http://github.com/jquery/jquery/commit/39518945047413f1185682078043e70e0c5c9091">Commit</a>, <a href="http://github.com/jquery/jquery/blob/master/src/ajax.js#L175">Code</a></p>
<p><strong>JSON和脚本类型通过”content-type”自动识别。</strong> (<a href="http://api.jquery.com/jQuery.ajax/">jQuery.ajax 文档</a>, <a href="http://github.com/jquery/jquery/commit/787f271052220c20787104f0eba6441aedac22ff">Commit 1</a>, <a href="http://github.com/jquery/jquery/commit/6861b5d4eb16222ed5ea623af6ce75362b55d1d4">Commit 2</a>)</p>
<p>如果一个Ajax请求的回复的媒体类型是JSON(application/json), dataType默认设为”json”(如果dataType没有被指明)。另外，如果回复的媒体类型是Javascript(application/javascript), dataType默认设为”script”(同样，如果dataType没有明确指明), 这种情况下，脚本会自动运行。</p>
<p><strong>加入了Etag的支持</strong> (<a href="http://api.jquery.com/jQuery.ajax/">jQuery.ajax() 文档</a>, <a href="http://github.com/jquery/jquery/commit/28ab4d32247943e1ae3409b23fe69303df0bc9eb">Commit</a>)</p>
<p>默认设置下, jQuery会忽略Ajax请求的”Last-Modified”页头。这样做是为了忽略浏览器的缓存。设置ifModified:true就可以使jQuery使用可用的缓存。jQuery1.4还会发出”If-None-Match”的页头如果你设置了ifModified选项。</p>
<p><strong>严格JSON模式，本地的JSON.parse方法</strong> (<a href="http://api.jquery.com/jQuery.ajax/">jQuery.ajax() 文档</a>, <a href="http://github.com/jquery/jquery/commit/90a87c03b4943d75c24bc5e6246630231d12d933">Commit 1</a>, <a href="http://github.com/jquery/jquery/commit/308d6cdad023da190ace2a698ee4815ed8dad9c5">Commit 2</a>, <a href="http://github.com/jquery/jquery/commit/44e6beb10304789044de2c5a58f5bb82e8321636">Commit 3</a>)</p>
<p>jQuery 1.3和以前的版本曾使用Javascript的<code>eval</code>对引入的JSON解析。1.4版则会使用本地的JSON解析器，前提是如果有本地的解析器可用。它也会对引入的JSON进行校验。所以在<a href="http://api.jquery.com/jQuery.getJSON">jQuery.getJSON</a>方法里，或当一个Ajax请求的dataType是”json”的时候，jQuery会拒绝不合标准的JSON(例如<code>{foo: "bar"}</code>)。</p>
<p><strong>序列化HTML5的元素</strong> (<a href="http://api.jquery.com/jQuery.param/">jQuery.param() 文档</a>, <a href="http://github.com/jquery/jquery/commit/b31b9bd756a1489c3b1b856ed8b624c55da9e02f">Commit</a>)</p>
<p>新的<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#attr-input-type-keywords">HTML5输入方法</a> (比如’datetime’和’range’)在序列化<code><a href="http://api.jquery.com/serialize">.serialize()</a></code>一个表单的时候会被包括在内。</p>
<p><strong>Ajax请求的环境</strong> (<a href="http://api.jquery.com/jQuery.ajax/">jQuery.ajax() 文档</a>, <a href="http://github.com/jquery/jquery/commit/183f37e4b4128af7ba096ac40046768b84b6d66e">Commit</a>)</p>
<p>你可以附加一个”环境”到Ajax请求上，所有的回调函数里都会拥有同样的”环境”设置(这样可以简化你的代码，尽可能避免使用闭合,或是其他对象)。</p>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="javascript">jQuery.<span style="color: rgb(102, 0, 102);">ajax</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">{</span>
    url<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">"test.html"</span><span style="color: rgb(51, 153, 51);">,</span>
    context<span style="color: rgb(51, 153, 51);">:</span> document.<span style="color: rgb(102, 0, 102);">body</span><span style="color: rgb(51, 153, 51);">,</span>
    success<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>
        jQuery<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 0, 102); font-weight: bold;">this</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">addClass</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"done"</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
    <span style="color: rgb(0, 153, 0);">}</span>
<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</div>
</div>
<p><strong>请求成功回调函数的第三个参数会被设为原始的XHR对象</strong> (<a href="http://api.jquery.com/jQuery.ajax/">jQuery.ajax() 文档</a>, <a href="http://github.com/jquery/jquery/commit/c2101245c07afdb831b0c79869c7263420407b67">Commit</a>)</p>
<p>所有的Ajax请求的成功回调函数现在都会收到原始的XMLHttpRequest对象，作为第三个参数。之前这个XHR对象只能通过<code>$.ajax</code>一类方法的返回值来获取。</p>
<p><strong>明确设置”Content-Type”</strong> (<a href="http://api.jquery.com/jQuery.ajax/">jQuery.ajax() 文档</a>, <a href="http://github.com/jquery/jquery/commit/25b0ba9f9612583033b902a0e40345463a3a71d0">Commit</a>)</p>
<p>在1.3版，如果没有实际数据发送，<a href="http://api.jquery.com/jQuery.ajax/">jQuery.ajax</a>的contentType会被忽略。1.4版里，contentType将总是和请求一同发送。这修复了某些后台凭靠”Content-Type”页头判断回复类别所造成的问题。</p>
<p><strong>明确设置JSONP回调函数的名字</strong> (<a href="http://api.jquery.com/jQuery.ajax/">jQuery.ajax 文档</a>,  <a href="http://github.com/jquery/jquery/commit/fbc73d45b487dd863886c7fd3f0af1fd4dec261b">Commit</a>)</p>
<p>你可以使用<a href="http://api.jquery.com/jQuery.ajax/">jQuery.ajax()</a>方法的jsonpCallback选项，通过名字来指定JSONP的回调函数。</p>
<p><strong>防止启动前跨域XHR</strong> (<a href="http://github.com/jquery/jquery/commit/a7678267d848fcef8775c8b9f4fa3e507b8cc5f4">Commit</a>)</p>
<p>跨域Ajax(针对提供支持的浏览器)将更易用，因为默认设置下，启动前XHR被阻止了。(TODO)</p>
<p><strong>jQuery.ajax()现在使用”onreadystatechange”事件替换了计时器</strong> (<a href="http://github.com/jquery/jquery/commit/fe6c86d53046b0f4d648f61c0b8e75387af65152">Commit</a>)</p>
<p>使用”onreadystatechange”替换了轮流探询，Ajax请求现在将使用更少的资源</p>
<h4>元素属性 (Attributes)</h4>
<p><strong><code>.css()</code>和<code>.attr()</code> 的性能被优化了。</strong></p>
<p>&lt;<a rel="lightbox[69]" href="http://www.uxd2.com/wp-content/uploads/2010/01/02-perform-cssatrr.jpg"><img width="500" height="375" alt=".css().attr()的性能提高" src="http://www.uxd2.com/wp-content/uploads/2010/01/02-perform-cssatrr.jpg" title=".css().attr()的性能提高" class="alignnone size-full wp-image-75"></a></p>
<p><strong><code>.attr()</code>方法多了一个设置函数作为参数</strong> (<a href="http://api.jquery.com/attr/">.attr() 文档</a>)</p>
<p>你不但可以将一个函数用在<code>.attr()</code>里，还可以在这个函数里使用属性的当前值。</p>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="javascript">jQuery<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'&lt;img src="enter.png" alt="enter your name" /&gt;'</span><span style="color: rgb(0, 153, 0);">)</span>
.<span style="color: rgb(102, 0, 102);">attr</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"alt"</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>index<span style="color: rgb(51, 153, 51);">,</span> value<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
    <span style="color: rgb(0, 0, 102); font-weight: bold;">return</span> <span style="color: rgb(51, 102, 204);">"Please, "</span> <span style="color: rgb(51, 153, 51);">+</span> value<span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</div>
</div>
<p><strong>.val( Function )</strong> (<a href="http://api.jquery.com/val/">.val() 文档</a>)</p>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="html4strict"><span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">input</span> <span style="color: rgb(0, 0, 102);">class</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"food"</span> <span style="color: rgb(0, 0, 102);">type</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">'text'</span> data-index<span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"0"</span> <span style="color: rgb(102, 204, 102);">/</span>&gt;</span>
<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">input</span> <span style="color: rgb(0, 0, 102);">class</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"food"</span> <span style="color: rgb(0, 0, 102);">type</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">'text'</span> data-index<span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"1"</span> <span style="color: rgb(102, 204, 102);">/</span>&gt;</span></pre>
</div>
</div>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="javascript">jQuery<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"input:text.food"</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">hide</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>

jQuery<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"&lt;ul class='sortable'&gt;&lt;li&gt;Peanut Butter&lt;/li&gt;&lt;li&gt;Jelly&lt;/li&gt;&lt;/ul&gt;"

</span><span style="color: rgb(0, 153, 0);">)</span>
  .<span style="color: rgb(102, 0, 102);">sortable</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span>
  .<span style="color: rgb(102, 0, 102);">bind</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"endsort"</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
    $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">":text.food"</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">val</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
      <span style="color: rgb(0, 0, 102); font-weight: bold;">return</span> $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"ul.sortable li:eq("</span> <span style="color: rgb(51, 153, 51);">+</span> $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 0, 102); font-weight: bold;">this</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">attr</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"data-index"</span><span style="color: rgb(0, 153, 0);">)</span>  <span style="color: rgb(51, 153, 51);">+</span> <span style="color: rgb(51, 102, 204);">")"</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">text</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
    <span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
  <span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</div>
</div>
<p><strong>text和CDATAHTML元素也支持.text()方法了</strong> (<a href="http://api.jquery.com/text/">.text() 文档</a>, <a href="http://github.com/jquery/jquery/commit/b30af34f28074b491929445f5aad3d62c63e772f">Commit</a>)</p>
<h4>核心 (Core)</h4>
<p><strong>快捷元素创建</strong> (<a href="http://api.jquery.com/jQuery/#jQuery2">jQuery() 文档</a>, <a href="http://github.com/jquery/jquery/commit/d40083c866738727aa7ffd7f13d2955bc9575d5e">Commit</a>)</p>
<p>现在当你需要使用jQuery函数创建一个元素的时候，你可以同时附递一个对象来指定属性值和事件:</p>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="javascript">jQuery<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"
<div>"<span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 153, 0);">{</span>
    id<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">"foo"</span><span style="color: rgb(51, 153, 51);">,</span>
    css<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 153, 0);">{</span>
        height<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">"50px"</span><span style="color: rgb(51, 153, 51);">,</span>
        width<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">"50px"</span><span style="color: rgb(51, 153, 51);">,</span>
        color<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">"blue"</span><span style="color: rgb(51, 153, 51);">,</span>
        backgroundColor<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">"#ccc"</span>
    <span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(51, 153, 51);">,</span>
    click<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
       $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 0, 102); font-weight: bold;">this</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">css</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"backgroundColor"</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(51, 102, 204);">"red"</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
    <span style="color: rgb(0, 153, 0);">}</span>
<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">appendTo</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"body"</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></div>

</span></pre>
</div>
</div>
<p>对象里的键值的名字与相关的jQuery的方法的名字是对应的，对象的值会被作为参数传递给jQuery的方法。</p>
<p>(译注:譬如<code>$("&lt;a&gt;link&lt;/a&gt;", {css:{background:"#ccc"}});</code>相当于<code>$("&lt;a&gt;link&lt;/a&gt;")).css("background", "#ccc");</code></p>
<p><strong>.eq(-N), .get(-N) (负指数)</strong> (<a href="http://api.jquery.com/eq/">.eq() 文档</a>, <a href="http://api.jquery.com/get/">.get() 文档</a>, <a href="http://github.com/jquery/jquery/commit/e532dfe5228217f55a33122a4438fd70522dbb4b">Commit</a>)</p>
<p>你现在可以在<code>.get()</code>和<code>.eq()</code>方法里使用负数。譬如，你要选择倒数第2个div元素，或者是倒数第2个DOM对象:</p>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="javascript">$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"div"</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">eq</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 153, 51);">-</span><span style="color: rgb(204, 0, 0);">2</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"div"</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">get</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 153, 51);">-</span><span style="color: rgb(204, 0, 0);">2</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</div>
</div>
<p><strong>新的.first()和.last()方法</strong> (<a href="http://api.jquery.com/first/">.first() 文档</a>, <a href="http://api.jquery.com/last/">.last() 文档</a>, <a href="http://github.com/jquery/jquery/commit/9de120e6d7cfffa3d990a6ccf23db3cd74e2bdc0">Commit</a>)</p>
<p>方便起见, 新增的<code>.first()</code>和<code>.last()</code>方法等同于<a href="http://api.jquery.com/eq/">.eq(0)</a>和<a href="http://api.jquery.com/eq/">.eq(-1)</a>.</p>
<p><strong>新的.toArray()方法</strong> (<a href="http://api.jquery.com/toArray/">.toArray() 文档</a>, <a href="http://github.com/jquery/jquery/commit/e124fec5e9cfee77cb23b27c0d43dc2631c83aab">Commit</a>)</p>
<p><a href="http://api.jquery.com/get">.get()</a>方法自始就是从jQuery集合里返回一个阵列。为了能够更明确, 你可以用<a href="http://api.jquery.com/toArray/">.toArray()</a>来达到一样的效果。(译注:这里应该是为了以后的版本留出空间，譬如以后可能会加入.toList()方法，到时候就会易于区分。) 不过，和<code>.get()</code>不一样的是，<code>.toArray()</code>不接受参数。</p>
<p><strong>jQuery()返回一个空集</strong> (<a href="http://api.jquery.com/jQuery/">jQuery() 文档</a>, <a href="http://github.com/jquery/jquery/commit/04524287d3e0112deae570ff9247c734833431bb">Commit</a>)</p>
<p>在jQuery 1.3中,<a href="http://api.jquery.com/jQuery/">jQuery()</a>方法返回仅包括<code>document</code>的jQuery集合。这个可以用来创建一个空集，然后动态加入一些元素。注: <code>jQuery().ready()</code>方式在1.4中依然有效，但是被指示陈旧了。请使用<code>jQuery(document).ready()</code>或者<code>jQuery(function(){})</code>。</p>
<p><strong>jQuery(“TAG”)</strong> (<a href="http://api.jquery.com/element-selector/">Element Selector 文档</a>, <a href="http://github.com/jquery/jquery/commit/4ea4fad0902839c06c281b5de7b0aca29922b63d">Commit</a>)</p>
<p>当使用单个标签名字的时候jQuery会使用更快捷的路径。</p>
<p><strong>jQuery(“&lt;div&gt;”), jQuery(“&lt;div/&gt;”) 和 jQuery(“&lt;div&gt;&lt;/div&gt;”)</strong> (<a href="http://api.jquery.com/jQuery/#jQuery2">jQuery() 文档</a>, <a href="http://github.com/jquery/jquery/commit/c4c820efff4fa7bcce0d5bf0a448625278ea6379">Commit</a>)</p>
<p>现在这三个方法都使用同一个代码路径了(document.createElement), 来优化<code>jQuery("&lt;div&gt;&lt;/div&gt;")</code>的性能。注意，如果你指定了属性，将会使用浏览器本身的语法分析(通过设置innerHTML)。</p>
<h4>样式 (CSS)</h4>
<p><strong>.css()方法在性能是以前的2倍。</strong></p>
<p><a rel="lightbox[69]" href="http://www.uxd2.com/wp-content/uploads/2010/01/03-perform-css.jpg"><img width="500" height="375" alt=".css()的性能提高 " src="http://www.uxd2.com/wp-content/uploads/2010/01/03-perform-css.jpg" title=".css()的性能提高 " class="alignnone size-full wp-image-76"></a></p>
<p><strong><code>.addClass()</code>, <code>.removeClass()</code>, 和 <code>.hasClass()</code>这几个方法在性能上是以前的3倍</strong></p>
<p><a rel="lightbox[69]" href="http://www.uxd2.com/wp-content/uploads/2010/01/04-perform-addClass.jpg"><img width="500" height="375" alt="addClass, removeClass, 和 hasClass的性能提高" src="http://www.uxd2.com/wp-content/uploads/2010/01/04-perform-addClass.jpg" title="addClass, removeClass, 和 hasClass的性能提高" class="alignnone size-full wp-image-77"></a></p>
<p><strong>.toggleClass()可以切换多个css类了</strong> (<a href="http://api.jquery.com/toggleClass/">.toggleClass() 文档</a>, <a href="http://github.com/jquery/jquery/commit/5e6e53835e552920db4f88ac0c9eca71aaacbef0">Commit</a>)</p>
<p>你可以通过<a href="http://api.jquery.com/toggleClass/">.toggleClass()</a>调用多个css类的名字来切换他们。</p>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="javascript">$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"div"</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">toggleClass</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"current active"</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</div>
</div>
<h4>数据</h4>
<p><strong>.data()返回对象, .data(Object)设置对象</strong> (<a href="http://api.jquery.com/data/">.data() 文档</a>, <a href="http://github.com/jquery/jquery/commit/d36d224cc52e70d837306d33a03f517ef72abc60">Commit 1</a>, <a href="http://github.com/jquery/jquery/commit/f6a0bf6816f4e2e67382b1b13fdd3ff2ea4b22f8">Commit 2</a>)</p>
<p>有时候你可能需要在一个元素上附加一个复杂的对象。一个常见的例子是你需要从一个元素身上复制所有的数据到令一个元素上。在jQuery 1.4里, 不使用任何参数调用<a href="http://api.jquery.com/data/">.data()</a>时，.data会返回一个复杂对象。(译注: 包含所有键-值对的对象。) 调用<a href="http://api.jquery.com/data/">.data(Object)</a> 则会设置这个对象。注意这个对象还包括了元素上绑定的事件，所以用的时候要小心。</p>
<p><strong>除非需要, 不然不会创建数据缓存。</strong> (<a href="http://github.com/jquery/jquery/commit/c4f144eeffd94c745839b0ced2de9c62cfa9f075">Commit 1</a>, <a href="http://github.com/jquery/jquery/commit/97e134fe80a734b97170bf43c9459511f4e165c7">Commit 2</a>, <a href="http://github.com/jquery/jquery/commit/67d445a703491c90a7d3c46be34bcdceb4d1c896">Commit 3</a>)</p>
<p>jQuery使用一个独特的自定义属性来获取特定元素上附加的数据。当查找数据，但是没有新加的数据的时候，jQuery会尽量避免创建这个自定义属性。这样可能会提高性能，同时还会在这种情况下避免污染DOM。</p>
<h4>效果 (Effects)</h4>
<p><strong>单个属性缓进缓出</strong> (<a href="http://api.jquery.com/animate/#per-property-easing">Per-property Easing 文档</a>, <a href="http://github.com/jquery/jquery/commit/93fdbeb963a9c350f807818c7cc99982942a92f3">Commit</a>)</p>
<p>除了能够给一个动态效果指定缓进出函数外，你现在可以指定每个属性的缓进出函数了。James Padolsey的<a href="http://james.padolsey.com/javascript/easing-in-jquery-1-4a2/">blog上</a>有更进一步的信息和演示。</p>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="javascript">$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"#clickme"</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">click</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
  $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"div"</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">animate</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">{</span>
    width<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 153, 0);">[</span><span style="color: rgb(51, 102, 204);">"+=200px"</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(51, 102, 204);">"swing"</span><span style="color: rgb(0, 153, 0);">]</span><span style="color: rgb(51, 153, 51);">,</span>
    height<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 153, 0);">[</span><span style="color: rgb(51, 102, 204);">"+=50px"</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(51, 102, 204);">"linear"</span><span style="color: rgb(0, 153, 0);">]</span><span style="color: rgb(51, 153, 51);">,</span>
  <span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(204, 0, 0);">2000</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
      $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 0, 102); font-weight: bold;">this</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">after</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"&lt;div&gt;Animation complete.&lt;/div&gt;"</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
  <span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</div>
</div>
<h4>事件 (Events)</h4>
<p><strong>新方法: jQuery.proxy()</strong> (<a href="http://api.jquery.com/jQuery.proxy/">jQuery.proxy() Documenation</a>, <a href="http://github.com/jquery/jquery/commit/66975de2d249643779e2b3daad0457f7f5f92508">Commit 1</a>, <a href="http://github.com/jquery/jquery/commit/1d2b1a57dae0b73b3d99197f73f4edb623b5574a">Commit 2</a>)</p>
<p>如果你需要保证一个函数内的”this”恒定地保持某个值, 你可以用<code>jQuery.proxy</code>获得一个相同作用域的函数。</p>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="javascript"><span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> obj <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 153, 0);">{</span>
  <span style="color: rgb(0, 0, 102);">name</span><span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(51, 102, 204);">"John"</span><span style="color: rgb(51, 153, 51);">,</span>
  test<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
    <span style="color: rgb(0, 0, 102);">alert</span><span style="color: rgb(0, 153, 0);">(</span> <span style="color: rgb(0, 0, 102); font-weight: bold;">this</span>.<span style="color: rgb(0, 0, 102);">name</span> <span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
    $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"#test"</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">unbind</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"click"</span><span style="color: rgb(51, 153, 51);">,</span> obj.<span style="color: rgb(102, 0, 102);">test</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
  <span style="color: rgb(0, 153, 0);">}</span>
<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(51, 153, 51);">;</span>

$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"#test"</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">click</span><span style="color: rgb(0, 153, 0);">(</span> jQuery.<span style="color: rgb(102, 0, 102);">proxy</span><span style="color: rgb(0, 153, 0);">(</span> obj<span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(51, 102, 204);">"test"</span> <span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</div>
</div>
<p><strong>多个事件绑定</strong> (<a href="http://api.jquery.com/bind">.bind() 文档</a>)</p>
<p>你可以通过递入一个对象来一次性绑定元素的多个事件。</p>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="javascript">$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"div.test"</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">bind</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">{</span>
  click<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>
    $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 0, 102); font-weight: bold;">this</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">addClass</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"active"</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
  <span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(51, 153, 51);">,</span>
  mouseenter<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>
    $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 0, 102); font-weight: bold;">this</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">addClass</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"inside"</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
  <span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(51, 153, 51);">,</span>
  mouseleave<span style="color: rgb(51, 153, 51);">:</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(0, 153, 0);">{</span>
    $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 0, 102); font-weight: bold;">this</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">removeClass</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"inside"</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
  <span style="color: rgb(0, 153, 0);">}</span>
<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</div>
</div>
<p><strong>‘change’和’submit’事件规范化</strong> (<a href="http://api.jquery.com/change">Change 文档</a>, <a href="http://api.jquery.com/submit">Submit 文档</a>)</p>
<p>普通的或是即时的<code>change</code>和<code>submit</code>事件可以在各种浏览器上稳定工作了。我们覆盖了IE里的<code>change</code>和<code>submit</code>, 替换为与其他浏览器相同的事件。</p>
<p><strong>新的事件: ‘focusin’ and ‘focusout’</strong> (<a href="http://api.jquery.com/focusin/">.focusin() 文档</a>, <a href="http://api.jquery.com/focusout/">.focusout() 文档</a>, <a href="http://github.com/jquery/jquery/commit/03481a52c72e417b01cfeb499f26738cf5ed5839">Commit</a>)</p>
<p><code>focusin</code>和<code>focusout</code>在一般情况下等同于<code>focus</code>和<code>blur</code>, 但是多了向父元素传递的作用。如果你自己编写你的事件代理模式(TODO), 这个功能将对你有很大帮助。请注意对<code>focus</code>和<code>blur</code>使用<code>live()</code>方法将不会起作用; 在设计的时候我们根据 <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM事件规范</a>决定不使其向父元素传递事件。</p>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="javascript">$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"form"</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">focusout</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>event<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
    <span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> tgt <span style="color: rgb(51, 153, 51);">=</span> event.<span style="color: rgb(102, 0, 102);">target</span><span style="color: rgb(51, 153, 51);">;</span>
    <span style="color: rgb(0, 0, 102); font-weight: bold;">if</span> <span style="color: rgb(0, 153, 0);">(</span>tgt.<span style="color: rgb(102, 0, 102);">nodeName</span> <span style="color: rgb(51, 153, 51);">==</span> <span style="color: rgb(51, 102, 204);">"INPUT"</span> <span style="color: rgb(51, 153, 51);">&amp;&amp;</span> <span style="color: rgb(51, 153, 51);">!</span>tgt.<span style="color: rgb(102, 0, 102);">value</span><span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
        $<span style="color: rgb(0, 153, 0);">(</span>tgt<span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">after</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"<span>nothing here</span>"</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
    <span style="color: rgb(0, 153, 0);">}</span>
<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</div>
</div>
<p><strong>所有的事件都可以成为即时事件</strong> (<a href="http://api.jquery.com/live">.live() 文档</a>)</p>
<p>除了<a href="http://api.jquery.com/ready">ready</a>, <a href="http://api.jquery.com/focus">focus</a> (用focusin), 和 <a href="http://api.jquery.com/blur">blur</a> (用focusout)以外, 所有能用<code>.bind()</code>绑定的事件都可以成为即时事件。</p>
<p>在<code>live()</code>所支持的事件里，我们对能够支持下面这几个额外的事件感到尤其骄傲。通过<code>.live()</code>里的事件代理, 1.4版实现了对<code>change</code>, <code>submit</code>, <code>focusin</code>, <code>focusout</code>, <code>mouseenter</code>, 以及<code>mouseleave</code>事件的跨浏览器支持。</p>
<p>注: 如果你需要即时的<code>focus</code>事件，你应该用<code>focusin</code>和<code>focusout</code>, 而不要用<code>focus</code>和<code>blur</code>, 因为就像前面提到的, <code>focus</code>和<code>blur</code>不向上传递。</p>
<p>还有, <code>live()</code>也接受数据对象作为参数了, 同<code>bind()</code>方法一样 (<a href="http://github.com/jquery/jquery/commit/71efbdd3b26f3a283f8d4bfdcc7b6343142027b9">Commit</a>)</p>
<p><strong>live/die也支持环境变量了</strong> (<a href="http://github.com/jquery/jquery/commit/30e760b63fd6d82f30833cd2864f245dd9594cd9">Commit</a>)</p>
<p>现在可以在绑定事件的时候给选择符指定一个环境。如果环境被指定了, 只有属于这个环境下的元素才会被绑定事件。在创建即时事件的时候, 元素本身不需要已经被定义, 但是环境必须被创建。</p>
<p><strong>确定ready事件至少含有<code>body</code>元素</strong> (<a href="http://github.com/jquery/jquery/commit/262fcf7b7b919da1564509f621cf7480a5d5572b">Commit</a>)</p>
<p>jQuery现在会检查<code>body</code>是不是存在，如果不存在，会对<code>body</code>进行轮流探询。</p>
<p><strong>在不需要手动处理内存溢出的非IE浏览器中, 卸载的速度提高了。</strong> (<a href="http://github.com/jquery/jquery/commit/f3474c00cd6d9e5fd61b6ef1562003e9986ad67d">Commit</a>)</p>
<h4>DOM操作 (Manipulation)</h4>
<p>在jQuery 1.4里一系列的DOM操作方法的性能都有巨大的提升。</p>
<p><strong><a href="http://api.jquery.com/append">.append()</a>, <a href="http://api.jquery.com/prepend">.prepend()</a>, <a href="http://api.jquery.com/before">.before()</a>, and <a href="http://api.jquery.com/after">.after()</a>的性能提高了。</strong></p>
<p><a rel="lightbox[69]" href="http://www.uxd2.com/wp-content/uploads/2010/01/05-perform-dom.jpg"><img width="500" height="375" alt="DOM嵌入的性能提高" src="http://www.uxd2.com/wp-content/uploads/2010/01/05-perform-dom.jpg" title="DOM嵌入的性能提高" class="alignnone size-full wp-image-78"></a></p>
<p><strong><a href="http://api.jquery.com/html">.html()</a>的性能提高到以前的3倍。</strong></p>
<p><a rel="lightbox[69]" href="http://www.uxd2.com/wp-content/uploads/2010/01/06-perform-html.jpg"><img width="500" height="375" alt=".html()的性能提高" src="http://www.uxd2.com/wp-content/uploads/2010/01/06-perform-html.jpg" title=".html()的性能提高" class="alignnone size-full wp-image-79"></a></p>
<p><strong>.remove()和.empty()的速度则达到以前的4倍.</strong></p>
<p><a rel="lightbox[69]" href="http://www.uxd2.com/wp-content/uploads/2010/01/07-perform-remove.jpg"><img width="500" height="375" alt=".remove() 和 .empty()的性能提高" src="http://www.uxd2.com/wp-content/uploads/2010/01/07-perform-remove.jpg" title=".remove() 和 .empty()的性能提高" class="alignnone size-full wp-image-80"></a></p>
<p><strong>新方法: .detach()</strong> (<a href="http://api.jquery.com/detach/">.detach() 文档</a>, <a href="http://github.com/jquery/jquery/commit/7a67f8897d3c2ed97254f0fdb969be14e77962d1">Commit</a>)</p>
<p><code>detach()</code>将一个元素从DOM里移除, 但是并不卸载关联的事件处理函数。这个方法可用于暂时性的将一个元素移除，执行相关操作，然后返回。</p>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="javascript"><span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> foo <span style="color: rgb(51, 153, 51);">=</span> $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"#foo"</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">click</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
    <span style="color: rgb(0, 102, 0); font-style: italic;">// 相关操作</span>
<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
foo.<span style="color: rgb(102, 0, 102);">detach</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 102, 0); font-style: italic;">// foo保留了相关处理函数</span>
foo.<span style="color: rgb(102, 0, 102);">appendTo</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"body"</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</div>
</div>
<p><strong>新的unwrap()方法</strong> (<a href="http://api.jquery.com/unwrap/">documentation</a>, <a href="http://github.com/jquery/jquery/commit/69e6e53555f21f07b534f1169298f7b33011bb4b">commit</a>)</p>
<p><code>unwrap()</code>方法拿到一个已知的父元素的子元素，然后将父元素用子元素替换。(译注: 将子元素从”包裹”里拿出来, 因名unwrap)。如此这般:</p>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="html4strict"><span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">body</span>&gt;</span>
    <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">div</span>&gt;</span>
        <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">p</span>&gt;</span>annie<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">p</span>&gt;</span> <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">p</span>&gt;</span>davey<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">p</span>&gt;</span> <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">p</span>&gt;</span>stevie<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">p</span>&gt;</span>
    <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">div</span>&gt;</span>
<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">body</span>&gt;</span></pre>
</div>
</div>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="javascript">$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">'div'</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">unwrap</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</div>
</div>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="html4strict"><span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">body</span>&gt;</span>
   <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">p</span>&gt;</span>annie<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">p</span>&gt;</span> <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">p</span>&gt;</span>davey<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">p</span>&gt;</span> <span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">p</span>&gt;</span>stevie<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">p</span>&gt;</span>
<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">body</span>&gt;</span></pre>
</div>
</div>
<p><strong>domManip方法里的缓存</strong> (<a href="http://github.com/jquery/jquery/commit/8db967e9d52407c8e76d81b9d472800667f6fa29">commit</a>)</p>
<p>jQuery会将<code>jQuery("&lt;div&gt;")</code>和<code>.after("&lt;div&gt;")</code>一类方法创建的节点记入缓存。这样, 对于利用这些方法, 使用字符串进行DOM操作的页面，性能将有极大的提高。</p>
<p><strong>无连接的节点间的before, after, replaceWith操作</strong> (<a href="http://github.com/jquery/jquery/commit/173c1477ae6efc4c2eeb7131ba0646c4e1323975">commit</a>)</p>
<p>现在你可以对还没有放置到DOM Tree上的节点进行<code>before</code>, <code>after</code>, 和<code>replaceWith</code>的操作了。意味着你可以先对节点进行复杂的操作, 待完成后再放到合适的DOM位置上。这样也能尽量避免操作过程中造成重新排版。</p>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="javascript">jQuery<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"&lt;div&gt;"<span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">before</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"&lt;p&gt;Hello&lt;/p&gt;"</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">appendTo</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"body"</span><span style="color: rgb(0, 153, 0);">)</span></span></pre>
</div>
</div>
<p><strong><code>.clone(true)</code> 也会复制关联数据</strong> (<a href="http://api.jquery.com/clone/">clone 文档</a>, <a href="http://github.com/jquery/jquery/commit/4b70f006f579fba24a882d80ca67f1971dbb4922">commit</a>)</p>
<p>1.3版中, <code>.clone(true)</code>虽然也是深度复制, 但是没有复制关联的数据。1.4版里，它则会复制数据, 同时还包括所有的事件。这点上和<code>jQuery.extend</code>在语义想同的, 所以普通对象和阵列会被复制, 但是自定义的对象则不会。</p>
<h4>位移 (Offset)</h4>
<p><strong>.offset( coords | Function )</strong> (<a href="http://api.jquery.com/offset/">.offset() 文档</a>, <a href="http://github.com/jquery/jquery/commit/daffb954e397bd5d9f8e9aaedab6c0baa9609e1e">commit</a>)</p>
<p>现在可以设置元素的位移了! 和所有的设置函数一样, <code>offset</code>也可以接受一个函数作为第二个参数。</p>
<h4>队列 (Queueing)</h4>
<p>队列经历了一次大修, 使用队列会比使用默认的<code>fx</code>更易掌握。</p>
<p><strong>新的 .delay() 方法</strong> (<a href="http://api.jquery.com/delay/">.delay() 文档</a>, <a href="http://github.com/jquery/jquery/commit/bbd933cbfe6d31a749cb336d7a84155ccfab247f">commit</a>)</p>
<p><code>.delay()</code>方法会根据参数滞后若干毫秒执行队列里剩下的对象。默认的它会使用”fx”队列。但你可以选择性的通过<code>delay</code>方法的第二个参数选择其他队列。(译注:每个队列都以一个名字识别。)</p>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="javascript">$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"div"</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">fadeIn</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">delay</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(204, 0, 0);">4000</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">fadeOut</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</div>
</div>
<p><strong>队列里的<code>next</code></strong> (<a href="http://api.jquery.com/queue/">.queue() 文档</a>, <a href="http://github.com/jquery/jquery/commit/89b4bc53ca0ca3d4e5c80b94ce92b09cc34af8ef">commit</a>)</p>
<p>jQuery 1.4版里, 当队列里的一个函数被调用的时候，第一个参数会被设为另一个函数。当后者被调用的时候, 会自动排除队列里的下一个对象, 以此来推动队列到下一步。</p>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="javascript">jQuery<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"div"</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">queue</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"ajax"</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>next<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
  <span style="color: rgb(0, 51, 102); font-weight: bold;">var</span> self <span style="color: rgb(51, 153, 51);">=</span> <span style="color: rgb(0, 0, 102); font-weight: bold;">this</span><span style="color: rgb(51, 153, 51);">;</span>
  jQuery.<span style="color: rgb(102, 0, 102);">getJSON</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"/update"</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span>json<span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
    $<span style="color: rgb(0, 153, 0);">(</span>self<span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">html</span><span style="color: rgb(0, 153, 0);">(</span>json.<span style="color: rgb(102, 0, 102);">text</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
    next<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
  <span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">queue</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"ajax"</span><span style="color: rgb(51, 153, 51);">,</span> <span style="color: rgb(0, 51, 102); font-weight: bold;">function</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span> <span style="color: rgb(0, 153, 0);">{</span>
  $<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 0, 102); font-weight: bold;">this</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">fadeIn</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span>
<span style="color: rgb(0, 153, 0);">}</span><span style="color: rgb(0, 153, 0);">)</span><span style="color: rgb(51, 153, 51);">;</span></pre>
</div>
</div>
<p><strong>.clearQueue()</strong> (<a href="http://api.jquery.com/clearQueue/">clearQueue 文档</a>, <a href="http://github.com/jquery/jquery/commit/d857315967a1cc07b73924bbdf2eb12f4f910c45">commit</a>)</p>
<p>队列可以被清空了。这个方法会移除队列里所有未执行的函数, 但不会移除正在运行的函数。无参数的情况下调用<code>.clearQueue()</code>方法将会清空默认的”fx”队列。</p>
<h4>选择符 (Selectors)</h4>
<p><strong>“#id p”效率更高</strong> (<a href="http://github.com/jeresig/sizzle/commit/c5c18ae5f17f11b39b7f261633e4bfc5ef3e99d7">commit</a>)</p>
<p>所有以ID开头的选择符都得到了优化, 能够在瞬间得到返回值。所有以ID为开头的选择符速度将一直快于其他选择符。</p>
<h4>页面遍访 (Traversing)</h4>
<p><strong>.index(), .index(String)</strong> (<a href="http://api.jquery.com/index/">index 文档</a>, <a href="http://github.com/jquery/jquery/commit/ffd457d4561eb1a6653aaef90f92a3b3010b9139">commit</a>)</p>
<p><code>.index()</code> 方法经过重写, 变得更加直观和灵活。</p>
<p>你可以获得一个元素相对于同父元素的指数:</p>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="javascript"><span style="color: rgb(0, 102, 0); font-style: italic;">// 计算第一个 &lt;li class="current"&gt; 元素在它所有的同父元素中的指数:</span>
$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"li.current"</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">index</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(0, 153, 0);">)</span></pre>
</div>
</div>
<p>你也可以获得一个元素在一个jQuery元素集合中的指数, 这个集合可以用一个选择符或者是一个DOM元素来指定:</p>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="javascript"><span style="color: rgb(0, 102, 0); font-style: italic;">// 计算这个 &lt;h3 id="more-info"&gt; 元素在页面上所有 &lt;h3&gt; 元素里的指数:
$<span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"#more-info"</span><span style="color: rgb(0, 153, 0);">)</span>.<span style="color: rgb(102, 0, 102);">index</span><span style="color: rgb(0, 153, 0);">(</span><span style="color: rgb(51, 102, 204);">"h3"</span><span style="color: rgb(0, 153, 0);">)</span>

</span></pre>
</div>
</div>
<p><strong>新的.has()方法</strong> (<a href="http://api.jquery.com/has/">has 文档</a>, <a href="http://github.com/jquery/jquery/commit/4e27f17007c2329e31b449e61bb31197b90a37f1">commit</a>)</p>
<p>这个方法相当于选择符里的<code>:has()</code>过滤法。它拿到一个jQuery集合,返回含有指定选择符的元素。</p>
<p><strong>新的 .nextUntil(), .prevUntil(), .parentsUntil() 方法</strong> (<a href="http://api.jquery.com/nextUntil/">.nextUntil() 文档</a>, <a href="http://api.jquery.com/prevUntil/">.prevUntil() 文档</a>, <a href="http://api.jquery.com/parentsUntil/">.parentsUntil() 文档</a>, <a href="http://github.com/jquery/jquery/commit/2b481b93cfca62f95aa7005e7db651456fa08e65">commit</a>)</p>
<p>新的”until”方法类似于<code>.nextAll()</code>, <code>.prevAll()</code>, 和<code>.parents()</code>。区别是可以用一个选择符来停止元素探索。</p>
<p><strong>.add(String, Element)</strong> (<a href="http://jquery14.com/day-01/%3C/p%3E%3Cp%3Ehttp://api.jquery.com/add/%3C/p%3E%3Cp%3E">.add() 文档</a>, <a href="http://jquery14.com/day-01/%3C/p%3E%3Cp%3Ehttp://github.com/jquery/jquery/commit/b0fe380cf89564305646bbd55d1fd7bd210fd591%3C/p%3E%3Cp%3E">commit</a>)</p>
<p>可以给<code>.add()</code>方法指定环境了。这个功能可以用于在一个调用链中加入和操作额外元素(比如Ajax请求里返回的新元素)。</p>
<p><strong>.closest(filter, DOMElement)</strong> (<a href="http://api.jquery.com/closest/">.closest() 文档</a>, <a href="http://github.com/jquery/jquery/commit/d6991fa273515a8503692324499edcc71b5c3f64">commit</a>)</p>
<p>可以通过<code>closest</code>方法的第2个参数设置一个<code>DOMElement</code>环境。给<code>closest</code>设置一个环境一般能够提高这个方法的运行速度。这个优化也适用<code>live()</code>, 因为这个方法内部调用了<code>closest()</code>。</p>
<h4>常用工具 (Utilities)</h4>
<p><strong>jQuery.isEmptyObject()</strong> (<a href="http://api.jquery.com/jQuery.isEmptyObject/">jQuery.isEmptyObject() 文档</a>, <a href="http://github.com/jquery/jquery/commit/a38a5cd531a328319f8b7f3f33a84044b54591ce">commit</a>)</p>
<p>如果对象,em&gt;没有任何属性, 该方法将返回<code>true</code>。<code>jQuery.isEmptyObject()</code>方法不对参数进行任何检查, 所以请保证参数是一个对象。</p>
<p><strong>jQuery.isPlainObject()</strong> (<a href="http://api.jquery.com/jQuery.isPlainObject/">jQuery.isPlainObject()</a>, <a href="http://github.com/jquery/jquery/commit/4b55e94d0849568a2fd121952f13a9d6571c731f">commit</a> )</p>
<p>如果一个对象是通过字符创建的(译注:{}),<code>jQuery.isPlainObject()</code>返回<code>true</code>; 如果对象是其他类别的对象(译注:如new Object())或者是基本类型, 则返回<code>false</code>。</p>
<p><strong>jQuery.contains()</strong> (<a href="http://api.jquery.com/jQuery.contains/">jQuery.contains() 文档</a>, <a href="http://github.com/jquery/jquery/commit/4e27f17007c2329e31b449e61bb31197b90a37f1">commit</a>)</p>
<p>如果两个参数都是DOM节点，并且第二个节点是嵌套在第一个节点内部的话, <code>jQuery.contains()</code>返回<code>true</code>。反之返回<code>false</code>。</p>
<p><strong>jQuery.noop</strong> (<a href="http://api.jquery.com/jQuery.noop/">jQuery.noop() 文档</a>, <a href="http://github.com/jquery/jquery/commit/6cb2945837ccca55204191a8e7a70b2b2486c28e">commit</a>)</p>
<p>是个空的函数, 可以用在必须要有一个函数的情况下。(译注: noop是No Operation的意思。)</p>
<p><strong>jQuery.unique()</strong> (<a href="http://api.jquery.com/jQuery.unique/">jQuery.unique() 文档</a>)</p>
<p>jQuery 1.4版中, <code>jQuery.unique()</code>方法返回结果里的元素是按照他们在页面里的顺序排序的。由于在创建jQuery集合的时候jQuery使用<code>jQuery.unique()</code>方法, 所以jQuery方法返回的集合也是按照他们在页面里的顺序排列的。</p>
<h4>其他 (Miscellaneous)</h4>
<p><strong>jQuery.browser以浏览器引擎为中心</strong> (<a href="http://api.jquery.com/jQuery.browser/">jQuery.browser 文档</a>, <a href="http://jquery14.com/day-01/%3Cbr%20/%3Ehttp://github.com/jquery/jquery/commit/ffb1867a4364ea65e60dad3469e8c8eb420ebcac">commit</a>)</p>
<p>例如, 你可以通过<code>jQuery.browser.webkit</code>探测引擎是否是Webkit。</p>
<p><strong>改进了对<code>applets</code>的处理</strong> (<a href="http://github.com/jquery/jquery/commit/59802928566b6be3a66d65e77c2418fff37e6f5f">commit 1</a>, <a href="http://github.com/jquery/jquery/commit/3ec2f1aef6b137d0f639e2fc53f95352d24b9d90">commit 2</a>)</p>
<p>jQuery不再试图在Java applets上绑定事件或是数据了(绑定事件或是数据会出现错误)。</p>
<p><strong>不再使用arguments.callee</strong> (<a href="http://github.com/jquery/jquery/commit/985856b823b1648bffc3fd63c1faf836d0ddaf7c">commit</a>)</p>
<p>为了顺应<a href="http://code.google.com/p/google-caja/">Caja</a>的要求, 同时也因为即将开始应用的ECMAScript 5规范里将其标记为陈旧, 我们将jQuery核心中所有用到<code>arguments.callee</code>的代码都移除了。</p>
<p><strong>用Closure Compiler替换了YUI Min</strong> (<a href="http://github.com/jquery/jquery/commit/3fd62eae9df3159fc238a515bb748140a942313d">commit</a>)</p>
<h4>内部重组 (Internal Reorganization)</h4>
<p>在1.4版的开发过程中的一个重点是要建立一个更易读, 更易懂的代码库。为了达到这个目标我们树立了一系列编写代码规范的向导。</p>
<p>下面是一些主要的变化:</p>
<ul>
<li>旧的’core.js’文件被分成了’attribute.js’, ‘css.js’, ‘data.js’, ‘manipulation.js’, ‘traversing.js’, and ‘queue.js’.</li>
<li>ready事件被移入了’core.js’ (因为它是jQuery的一个基本组成之一)。</li>
<li>大部分核心代码都符合新的<a href="http://docs.jquery.com/JQuery_Core_Style_Guidelines">代码规范</a>.</li>
<li>css和属性的逻辑被划分开来, 不再如以往相互缠绕。</li>
</ul>
<h4>测试 (Testing)</h4>
<p>jQuery 1.4版发布过程中我们<a href="http://dev.jquery.com/report/34">修复了207个问题</a> (比较之下1.3版里有97个修复)。</p>
<p>jQuery 1.4.此外, 测试的数量从jQuery 1.3.2中的1504例升到了1.4中的3060例。</p>
<p>所有测试都在主要浏览器里完全通过了。(Safari 3.2, Safari 4, Firefox 2, Firefox 3, Firefox 3.5, IE 6, IE 7,<br />
IE 8, Opera 10.10, and Chrome)</p>
<p><a rel="lightbox[69]" href="http://www.uxd2.com/wp-content/uploads/2010/01/08-test.jpg"><img width="500" height="277" alt="jQuery 1.4 测试结果" src="http://www.uxd2.com/wp-content/uploads/2010/01/08-test.jpg" title="jQuery 1.4 测试结果" class="alignnone size-full wp-image-81"></a></p>
<h3><a name="backwards"></a></h3>
<p>我们尽量试图减小jQuery 1.4对大规模升级可能造成的麻烦 &ndash; 保持所有公开函数的签名不变。即使如此, 请通读下面的列表以保证你对可能对你的应用造成问题的变更。</p>
<ul>
<li><a href="http://api.jquery.com/add">.add()</a>不再简单的将结果串联到一起, 结果将会被混合到一起, 然后根据他们在页面里的顺序排列。</li>
<li><a href="http://api.jquery.com/clone">.clone(true)</a>将复制事件和数据, 而不仅是事件。</li>
<li><a href="http://api.jquery.com/jQuery.data">jQuery.data(elem)</a> 不再返回<code>id</code>, 取而代之的是元素的对象缓存。</li>
<li><a href="http://api.jquery.com/jQuery">jQuery()</a> (无参数) 不再自动转换成<a href="http://api.jquery.com/jQuery">jQuery(document)</a>了。</li>
<li>通过<a href="http://api.jquery.com/val">.val(“…”)</a>获得一个<code>option</code>或一个<code>checkbox</code>的值不再有歧义(将总是根据<code>value</code>属性选择, 而不是根据<code>text</code>的值)。(<a href="http://github.com/jquery/jquery/commit/f298cce100c6fe23840ac95e66aaea9cb2bfb447">Commit</a>)</li>
<li><a href="http://api.jquery.com/jQuery.browser">jQuery.browser.version</a>现在将返回引擎的版本.</li>
<li>现在起将对引入的JSON更严格, 如果JSON的格式不符将会报错。如果你需要对不符合JSON严格格式的Javascript进行估值, 你必须设置请求的文件类型为纯文本, 然后用<code>eval()</code>来对内容估值。</li>
<li>参数序列化默认会按照PHP/Rails的风格进行。你可以通过<code>jQuery.ajaxSettings.traditional = true;</code>来切换到旧的序列化方式。你也可以针对个别请求进行切换, 在调用<a href="http://api.jquery.com/jQuery.ajax">jQuery.ajax</a>的时候递入<code>{traditional: true}</code></li>
<li>内部的jQuery.className被移除了。</li>
<li><a href="http://api.jquery.com/jQuery.extend">jQuery.extend(true, …)</a>不再扩展复杂对象或是阵列。(TODO)</li>
<li>如果一个<a href="http://api.jquery.com/jQuery.ajax">Ajax请求</a>没有指定dataType, 而返回的数据类型是”text/javascript”, 那么回复将会被执行。之前, 必须明确的指定dataType。</li>
<li>设置<a href="http://api.jquery.com/jQuery.ajax">Ajax 请求</a>的”ifModified”属性会将ETags纳入考虑。</li>
</ul>
<p>我们还针对1.4版中可能造成问题的变更编写了一个向后兼容的<a href="http://github.com/jquery/jquery-compat-1.3">插件</a>。如果你升级到1.4以后出现问题, 可以在引入1.4版的文件之后引入这个插件。</p>
<p>如何使用这个插件:</p>
<div class="wp_syntax">
<div class="code">
<pre style="font-family: monospace;" class="html4strict"><span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">script</span> <span style="color: rgb(0, 0, 102);">src</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"http://code.jquery.com/jquery.js"</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">script</span>&gt;</span>
<span style="color: rgb(0, 153, 0);">&lt;<span style="color: rgb(0, 0, 0); font-weight: bold;">script</span> <span style="color: rgb(0, 0, 102);">src</span><span style="color: rgb(102, 204, 102);">=</span><span style="color: rgb(255, 0, 0);">"http://code.jquery.com/jquery.compat-1.3.js"</span>&gt;&lt;<span style="color: rgb(102, 204, 102);">/</span><span style="color: rgb(0, 0, 0); font-weight: bold;">script</span>&gt;</span></pre>
</div>
</div>
<h3>原始数据和测试页面</h3>
<p>性能测试中我们使用了下列测试套包:</p>
<ul>
<li><a href="http://ejohn.org/files/jquery1.4/slick/?type=attr">Attributes</a></li>
<li><a href="http://ejohn.org/files/jquery1.4/slick/?type=class">Class</a></li>
<li><a href="http://ejohn.org/files/jquery1.4/slick/?type=dom">DOM Manipulation</a></li>
<li><a href="http://ejohn.org/files/jquery1.4/slick/?type=empty">Empty/Remove</a></li>
<li>Function Call Profiling: <a href="http://ejohn.org/files/jquery-profile.html">1.3.2</a> <a href="http://ejohn.org/files/jquery-profile-14.html">1.4</a>.</li>
</ul>
<p>结果的原始数据 (所有的数据都是 1.3.2 vs. 1.4):</p>
<pre>函数调用的次数
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</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.artcss.com/archives/677.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>10个Js的小型库，效果真的很棒[转]</title>
		<link>http://www.artcss.com/archives/588.html</link>
		<comments>http://www.artcss.com/archives/588.html#comments</comments>
		<pubDate>Mon, 08 Feb 2010 01:33:50 +0000</pubDate>
		<dc:creator>Artcss</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[js小型库]]></category>

		<guid isPermaLink="false">http://blog.artskin.cn/?p=588</guid>
		<description><![CDATA[这些列举的网站，站内还有大量的效果，希望大家多去找找，对于研究的朋友来说，更是很棒的源码参考。第5款的东东，很强很震撼… 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/ 脚本地址:&#160;&#160;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) [...]]]></description>
			<content:encoded><![CDATA[<p>这些列举的网站，站内还有大量的效果，希望大家多去找找，对于研究的朋友来说，更是很棒的源码参考。<span id="more-588"></span>第5款的东东，很强很震撼…</p>
<p><strong>1、$fx()</strong><br />
简介：$fx()是一个轻量级的动画库，一些复杂的动画，可以由多个简单的动画效果进行组合，但是提供的是混淆压缩过的代码，对于研究动画源码的朋友可能特别不爽<br />
API：<a target="_blank" href="http://fx.inetcat.com/manuals.php">http://fx.inetcat.com/manuals.php</a><br />
主页:<a target="_blank" href="http://fx.inetcat.com/">http://fx.inetcat.com/</a></p>
<p><strong>2、JSTweener</strong><br />
简介：原始大小14K，支持大多数的动画特效<br />
演示地址：<a target="_blank" href="http://svn.coderepos.org/share/lang/javascript/jstweener/trunk/examples/transitions.html">http://svn.coderepos.org/share/l … es/transitions.html</a><br />
主页地址：<a target="_blank" href="http://coderepos.org/share/wiki/JSTweener">http://coderepos.org/share/wiki/JSTweener</a><br />
<span id="more-1178"></span><br />
<strong>3、FX 2.0</strong><br />
简介：代码清晰，支持多种形变动画，而且2.0版本在不局限于px单位，支持了em, %,<br />
演示地址：<a target="_blank" href="http://www.ryanmorr.com/tests/fx2/">http://www.ryanmorr.com/tests/fx2/</a><br />
主页地址：<a target="_blank" href="http://ryanmorr.com/archives/fx-2-0-the-full-featured-animation-framework">http://ryanmorr.com/archives/fx- … animation-framework</a></p>
<p><strong>4、JsCharts<br />
</strong>简介：用js生成图表，包括柱状图，饼状图，流线图<br />
演示地址：<a target="_blank" href="http://www.jscharts.com/examples">http://www.jscharts.com/examples</a><br />
主页地址：<a target="_blank" href="http://www.jscharts.com/">http://www.jscharts.com/</a></p>
<p><strong>5、Raphael</strong><br />
简介：也许你看了效果后会觉得唉，这有什么特别的，但是查看它的源码的时候，你会被震到，不信就去看看呗，里边的效果实在是太神奇了，虽然目前你根本用不上….<br />
演示地址：<a target="_blank" href="http://raphaeljs.com/dragon.html">http://raphaeljs.com/dragon.html</a><br />
主页地址：<a target="_blank" href="http://raphaeljs.com/dragon.html">http://raphaeljs.com/dragon.html</a></p>
<p><strong>6、Reflection.js<br />
</strong>简介：倒影实现,如果是在个人项目中，还是可以用得上的，唉，感叹，现在是可供选择的效果太充足了，而实际真正用到项目中的确是寥寥无几，只能这么说，就目前的web项目在交互方面 只能打个不及格。现在貌似国外都是研究者，而我们只是应用者，而且应用得还不到位。<br />
主页地址：<a target="_blank" href="http://cow.neondragon.net/stuff/reflection/">http://cow.neondragon.net/stuff/reflection/</a><br />
脚本地址:&nbsp;&nbsp;<a target="_blank" href="http://cow.neondragon.net/stuff/reflection/reflection.js">http://cow.neondragon.net/stuff/reflection/reflection.js</a> (27K)</p>
<p><strong>7、leigeber</strong><br />
简介：准确的说 这不是一个库，而是一些效果集，但是这对于我们来说却是非常实用的，每个效果都在3K左右，<br />
效果列表：<a target="_blank" href="http://www.leigeber.com/category/javascript/">http://www.leigeber.com/category/javascript/</a><br />
主页地址：<a target="_blank" href="http://www.leigeber.com/">http://www.leigeber.com/</a></p>
<p><strong>8、Shortcuts.js</strong><br />
简介：在web2.0+时代，web应用中的快捷键开始大量使用,而且开始流行起来，google reader 和 Gmail等应用更是引领这一潮流，但是作为开发者，搞定键盘的绑定却不是一件轻松的事情，而shortCuts则以更优的方式解决了这一问题。<br />
演示地址：<a target="_blank" href="http://www.openjs.com/scripts/events/keyboard_shortcuts/">http://www.openjs.com/scripts/events/keyboard_shortcuts/</a><br />
主页地址：<a target="_blank" href="http://www.openjs.com/scripts/events/keyboard_shortcuts/">http://www.openjs.com/scripts/events/keyboard_shortcuts/</a></p>
<p><strong>9、Amberjack (4K)</strong><br />
简介：这个效果我觉得用在商城上 挺合适的，比如一些打折信息，热卖商品等，只是网站官方极力推销的，用这种方式到不失为一种好方法，当然反对的声音肯定挺多的…<br />
演示地址：<a target="_blank" href="http://amberjack.org/skins/customize/?travel=1&amp;tourId=AJTour&amp;skinId=black_beauty">http://amberjack.org/skins/custo … skinId=black_beauty</a><br />
主页地址：<a target="_blank" href="http://amberjack.org/">http://amberjack.org</a></p>
<p><strong>10、Blackbird (10K)<br />
</strong>简介：alert()的替代方案，现如今耳目下通常开发者都是使用自己制造的弹出层对话框，但是这款的设计思路确是仿照一些软件的控制台日志的方式，把信息都集中于一个面板上，对于用户来说，这其实是一件好事，对自己的操作所产生的结果至少一目了然，web 应用发展新时代，这个东东会成为一个趋势吧。对了，还支持快捷键.<br />
演示地址：<a target="_blank" href="http://www.gscottolson.com/blackbirdjs/">http://www.gscottolson.com/blackbirdjs/</a><br />
主页地址：<a target="_blank" href="http://www.gscottolson.com/">http://www.gscottolson.com/</a></p>
<p>原文地址：http://bbs.blueidea.com/thread-2943411-1-1.html</p>
]]></content:encoded>
			<wfw:commentRss>http://www.artcss.com/archives/588.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>MSClass通用不间断滚动JS封装类</title>
		<link>http://www.artcss.com/archives/392.html</link>
		<comments>http://www.artcss.com/archives/392.html#comments</comments>
		<pubDate>Mon, 19 Oct 2009 16:02:15 +0000</pubDate>
		<dc:creator>Artcss</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.artskin.cn/blog/?p=392</guid>
		<description><![CDATA[今天介绍一个通用的不间断滚动js封装类MSClass.js，支持各种不间断滚动，使用方便。一般在不调用框架情况下，做不间断滚动我都用它。 原文链接：http://www.popub.net/script/MSClass.html /*MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 1.65*\ 　制作时间:2006-08-29 (Ver 0.5) 　发布时间:2006-08-31 (Ver 0.8) 　更新时间:2007-12-28 (Ver 1.65) 　更新说明: + 加入功能 * 修正、完善 1.65.071228 * 横向、纵向滚动格式调整 (解决横向滚动换行的问题，无需特殊设置) * 彻底解决由于IE问题导致上下滚动页面留白的问题 (本次更新主要解决此问题,感谢天上的书生参与测试) 1.6.070131 + 禁止鼠标控制暂停或继续 (将第9个参数设置为-1或者动态赋值将ScrollSetp设置为-1) + 判断是否可以滚动 (若内容区域小于显示区域,则自动取消滚动) + 跳过初始化错误 (避免引起其它滚动的停止) + 默认值 (除容器ID必选外，其他参数均可根据情况进行选择设置) + 参数动态赋值 (方向可用英文表示top&#124;up&#124;bottom&#124;down&#124;left&#124;right,使其更直观、方便) * 文字滚动不准确 (本次更新主要目的解决此Bug,感谢周珺参与测试) 1.4.061211 + 鼠标悬停改变滚动方向 (鼠标悬停控制左右滚动) * 由于文档下载过慢而导致获取的高度/宽度不准确 [...]]]></description>
			<content:encoded><![CDATA[<p>今天介绍一个通用的不间断滚动js封装类MSClass.js，支持各种不间断滚动，使用方便。一般在不调用框架<span id="more-392"></span>情况下，做不间断滚动我都用它。</p>
<p>原文链接：<a href="http://www.popub.net/script/MSClass.html">http://www.popub.net/script/MSClass.html</a></p>
<pre>
/*MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 1.65*\

　制作时间:2006-08-29 (Ver 0.5)
　发布时间:2006-08-31 (Ver 0.8)
　更新时间:2007-12-28 (Ver 1.65)
　更新说明: + 加入功能 * 修正、完善
	1.65.071228
		* 横向、纵向滚动格式调整 (解决横向滚动换行的问题，无需特殊设置)
		* 彻底解决由于IE问题导致上下滚动页面留白的问题 (本次更新主要解决此问题,感谢天上的书生参与测试)
	1.6.070131
		+ 禁止鼠标控制暂停或继续 (将第9个参数设置为-1或者动态赋值将ScrollSetp设置为-1)
		+ 判断是否可以滚动 (若内容区域小于显示区域,则自动取消滚动)
		+ 跳过初始化错误 (避免引起其它滚动的停止)
		+ 默认值 (除容器ID必选外，其他参数均可根据情况进行选择设置)
		+ 参数动态赋值 (方向可用英文表示top|up|bottom|down|left|right,使其更直观、方便)
		* 文字滚动不准确 (本次更新主要目的解决此Bug,感谢周珺参与测试)
	1.4.061211
		+ 鼠标悬停改变滚动方向 (鼠标悬停控制左右滚动)
		* 由于文档下载过慢而导致获取的高度/宽度不准确
		* 浏览器兼容问题 (IE、FF、Opera、NS、MYIE)
	1.2.060922
		+ 指定范围间歇滚动
		* 程序调整
		* 连续间歇滚动停止的错误
	1.0.060901
		+ 向下、向右滚动
		+ 开始等待时间
		+ 连续滚动
		* 调整时间单位
		* 滚动误差
		* 随机死循环
		* 加强性能
		* 程序优化
	0.8.060829
		  翻屏不间断向上、向左滚动
</pre>
<p>　演示地址:<a href="http://www.popub.net/script/MSClass.html">http://www.popub.net/script/MSClass.html</a><br />
　下载地址:<a href="http://www.popub.net/script/MSClass.js">http://www.popub.net/script/MSClass.js</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.artcss.com/archives/392.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JQuery 简介[转]</title>
		<link>http://www.artcss.com/archives/156.html</link>
		<comments>http://www.artcss.com/archives/156.html#comments</comments>
		<pubDate>Tue, 21 Jul 2009 02:17:33 +0000</pubDate>
		<dc:creator>Artcss</dc:creator>
				<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.artskin.cn/blog/?p=156</guid>
		<description><![CDATA[Query是一个优秀的javascript类库，jQuery以其简洁、快速等优点征服了众多javascript开发者。jQuery使用户能更方便地处理DOM、events、实现动画效果，并且方便地为网站提供Ajax 交互。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆javascript来调用命令了，只需定义id即可。(跟css有点类似)jQuery如何操作DOM等等，另外还会介绍一些常用的jQuery插件分享给大家，希望通过jQuery快乐的学习javascript。 JQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Jörn Zaefferer，罗马尼亚的Stefan Petre等等。 jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。jQuery对象？ 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。 jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。 Jquery是继prototype之后又一个优秀的Javascrīpt框架。对prototype我使用不多，简单了解过。但使用上jquery之后，马上被她的优雅吸引住了。有人使用这样的一比喻来比较prototype和jquery：prototype就像Java，而jquery就像 ruby.实际上我比较喜欢java（少接触Ruby 罢了）但是jquery的简单的实用的确有相当大的吸引力啊！在项目里我把jquery作为自己唯一的框架类包。使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。 一、找到你了！ 还记得$()这个东西吧？prototype还是DWR都使用了这个函数代替document.getElementById()。没错，jquery也跟风了。为达到document.getElementById()的目的，jquery是这样写的： 代码 var someElement = $(”#myId”); 看起来比其他两个框架的要多了一个#，好，看看下面的用法： 代码 $(”div p”);(1) $(”div.container”)(2) $(”div #msg”);(3) $(”table a”,context);(4) 在prototype里看过这样的写法吗？第一行代码得到所有&#60;div&#62;标签下的&#60;p&#62;元素。第二行代码得到class 为container的&#60;div&#62;元素,第三行代码得到&#60;div&#62;标签下面id为msg的元素。第四行代码得到context为上下文的table里面所有的连接元素。 如果你熟悉CSS，你会觉得这些写法很眼熟！对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。 二、Jquery函数 jquery提供了很多便利的函数，如each(fn)，但是使用这些函数的前提是：你使用的对象是Jquer对象。使一个Dom对象成为一个Jquery对象很简单，通过下面一些方式（只是一部分）： 代码 var a = $(”#cid”);(1) var b = [...]]]></description>
			<content:encoded><![CDATA[<p>Query是一个优秀的javascript类库，jQuery以其简洁、快速等优点征服了众多javascript开发者。<span id="more-156"></span>jQuery使用户能更方便地处理DOM、events、实现动画效果，并且方便地为网站提供Ajax 交互。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆javascript来调用命令了，只需定义id即可。(跟css有点类似)jQuery如何操作DOM等等，另外还会介绍一些常用的jQuery插件分享给大家，希望通过jQuery快乐的学习javascript。</p>
<p>JQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Jörn Zaefferer，罗马尼亚的Stefan Petre等等。<br />
jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。jQuery对象？</p>
<p>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。</p>
<p>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。</p>
<p>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。<br />
jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。</p>
<p>Jquery是继prototype之后又一个优秀的Javascrīpt框架。对prototype我使用不多，简单了解过。但使用上jquery之后，马上被她的优雅吸引住了。有人使用这样的一比喻来比较prototype和jquery：prototype就像Java，而jquery就像 ruby.实际上我比较喜欢java（少接触Ruby 罢了）但是jquery的简单的实用的确有相当大的吸引力啊！在项目里我把jquery作为自己唯一的框架类包。使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。</p>
<h4>一、找到你了！</h4>
<p>还记得$()这个东西吧？prototype还是DWR都使用了这个函数代替document.getElementById()。没错，jquery也跟风了。为达到document.getElementById()的目的，jquery是这样写的：<br />
代码<br />
var someElement = $(”#myId”);<br />
看起来比其他两个框架的要多了一个#，好，看看下面的用法：<br />
代码<br />
$(”div p”);(1)<br />
$(”div.container”)(2)<br />
$(”div #msg”);(3)<br />
$(”table a”,context);(4)</p>
<p>在prototype里看过这样的写法吗？第一行代码得到所有&lt;div&gt;标签下的&lt;p&gt;元素。第二行代码得到class 为container的&lt;div&gt;元素,第三行代码得到&lt;div&gt;标签下面id为msg的元素。第四行代码得到context为上下文的table里面所有的连接元素。<br />
如果你熟悉CSS，你会觉得这些写法很眼熟！对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。 </p>
<h4>二、Jquery函数</h4>
<p>jquery提供了很多便利的函数，如each(fn)，但是使用这些函数的前提是：你使用的对象是Jquer对象。使一个Dom对象成为一个Jquery对象很简单，通过下面一些方式（只是一部分）：</p>
<p>代码</p>
<p>var a = $(”#cid”);(1)<br />
var b = $(”</p>
<p>hello</p>
<p>”);(2)<br />
var c = document.createElement(”table”); var tb = $©;</p>
<h4>三、代替body标签的onload</h4>
<p>这个惯例，也许是除了$()之外，用得最多的地方了。下面一段代码：</p>
<p>代码</p>
<p>$(document).ready(function(){<br />
alert(”hello”);<br />
});(1)</p>
<p>（2）</p>
<p>上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作，即$(document).ready (fn)可以在一个页面中重复出现，而不会冲突。基本上Jqeury的很多plugin都是利用这个特性，正因为这个特性，多个plugin共同使用起来，在初始化时不会发生冲突。<br />
不管怎么说，这个惯例可以分离javascrīpt与HTML。推荐使用。</p>
<h4>四、事件机制</h4>
<p>我大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写onclick = “fn()”,使用jquery可以使javascrīpt代码与html代码分离，保持HTML的清洁，还可以很轻松地绑定事件，甚至你可以不知道“事件”这个名词。</p>
<p>代码</p>
<p>$(document).ready(function(){<br />
$(”#clear”).click(function(){<br />
alert(”i am about to clear the table”);<br />
});<br />
$(”form[0]”).submit(validate);<br />
});<br />
function validate(){<br />
//do some form validation<br />
}</p>
<h4>五、同一函数实现set</h4>
<p>代码</p>
<p>$(”#msg”).html();<br />
$(”#msg”).html(”hello”);<br />
上面两行代码，调用了同样的函数。但结果却差别很大。<br />
第一行是返回指定元素的HTML值，第二行则是将hello这串字符设置到指定元素中。jquery的函数大部分有这样的特性。</p>
<h4>六、ajax</h4>
<p>这是一个ajax横行的时代。多少人，了不了解ajax的都跟着用上一把。呵。使用jquery实现ajax同样简单异常</p>
<p>代码</p>
<p>$.get(”search.do”,{id:1},rend);<br />
function rend(xml){<br />
alert(xml);<br />
} (1)<br />
$.post(”search.do”,{id:1},rend);<br />
function rend(xml){<br />
alert(xml);<br />
} (2)</p>
<p>$(”#msg”).ajaxStart(function(){<br />
this.html(”正在加载。。。。”);<br />
});(3)<br />
$(”#msg”).ajaxSuccess(function(){<br />
this.html(”加载完成！”);<br />
});(4)</p>
<p>这些都是较常用的方法，get和post用法一样。第一个参数是异步请求的url，第二个为参数，第三个回调方法。<br />
3，4的方法会在指定的Dom对象上绑定响应ajax执行的事件。当然，jquery的AJAX相关的函数不仅是这些，有兴趣可以去研究再多。</p>
<h4>七、渐入淡出</h4>
<p>代码<br />
$(”#msg”).fadeIn(”fast”);<br />
$(”#msg”).fadeOut(”slow”);</p>
<p>没错，上面两行代码已经分别实现了一个id为Msg的jquery对象的渐入和淡出。做一个像Gmail一样的动态加载通知条，用jquery就那么简单。两个函数接受的参数除了快慢等，还可以接收整型，作为渐入或淡出的完成时间，单位为MS。</p>
<h4>八、plugin</h4>
<p>这也是一个插件的时代。</p>
<p>jquery插件给我的感觉清一色的清洁，简单。如Jtip，要使用它的功能，只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以了。其他事情插件全包。我喜欢jquery的一个重要原因是发现她已经有了很多很好，很精彩的插件。</p>
<p>写得很烂。可能大家看不出jquery的好处。嗯，光听是没用的，试用一下吧。你会发觉很有趣。</p>
<p>暂时告一段落吧。待有新的发现再来分享。</p>
<p>加一些Jquery的资源：<br />
http://www.visualjquery.com/index.xml 很好的API查询站点<br />
http://jquery.com/demo/thickbox/ 知道lightBox吧，看看Jquery是怎样实现相同的东西<br />
http://www.codylindley.com/blogstuff/js/jtip/ Jtip，实用的提示工具<br />
http://jquery.com/plugins/ 很多牛的插件。<br />
http://15daysofjquery.com/jquery 的15天教程<br />
http://jquery.org.cn/visual/cn/index.xml //不错的JQUERY 中文学习 推荐</p>
<p>jquery来源</p>
<p>jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Jörn Zaefferer，罗马尼亚的Stefan Petre等等。</p>
<p>jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。</p>
<p>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。</p>
<p>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。</p>
<p>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。<br />
jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。</p>
<p>jQuery的官方下载地址为：http://jquery.com/</p>
]]></content:encoded>
			<wfw:commentRss>http://www.artcss.com/archives/156.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>clearbox 中文详解</title>
		<link>http://www.artcss.com/archives/121.html</link>
		<comments>http://www.artcss.com/archives/121.html#comments</comments>
		<pubDate>Sun, 19 Jul 2009 15:41:17 +0000</pubDate>
		<dc:creator>Artcss</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[clearbox]]></category>
		<category><![CDATA[中文祥解]]></category>

		<guid isPermaLink="false">http://www.artskin.cn/blog/?p=121</guid>
		<description><![CDATA[图片展示效果认识最早的是Lightbox，不过最近发现一款比Lightbox漂亮的，叫Clearbox，官方网站地址：http://www.clearbox.hu 首先在头里加入如下代码： &#60;link href=”css/clearbox.css” rel=”stylesheet” type=”text/css” /&#62; &#60;script src=”js/clearbox.js” type=”text/javascript” charset=”gb2312&#8243;&#62;&#60;/script&#62; 1.&#60;a href=”images/cb_sample_01.jpg” rel=”clearbox” title=”A kép címe”&#62; &#60;img src=”images/cb_sample_01_tn.jpg” /&#62;&#60;/a&#62; 2.&#60;a href=”images/cb_sample_04.jpg” rel=”clearbox[Virágok]“&#62;&#60;img src=”images/cb_sample_04_tn.jpg” /&#62;&#60;/a&#62; &#60;a href=”images/cb_sample_05.jpg” rel=”clearbox[Virágok]“&#62;&#60;img src=”images/cb_sample_05_tn.jpg” /&#62;&#60;/a&#62; &#60;a href=”images/cb_sample_06.jpg” rel=”clearbox[Virágok]“&#62;&#60;img src=”images/cb_sample_06_tn.jpg” /&#62;&#60;/a&#62; 3.&#60;a href=”images/cb_sample_01.jpg” rel=”clearbox[Virágok,,10,,start]“&#62; &#60;img src=”images/cb_sample_01_tn.jpg” /&#62;&#60;/a&#62; 4.&#60;a href=”images/cb_sample_01.jpg” rel=”clearbox[Virágok]“ tnhref=”pictures/cb_sample_01_tn.jpg”&#62;ez a link egy képre mutat, de nincs megadva thumbnail kép&#60;/a&#62; [...]]]></description>
			<content:encoded><![CDATA[<p>图片展示效果认识最早的是Lightbox，不过最近发现一款比Lightbox漂亮的，叫Clearbox，官方网站地<span id="more-121"></span>址：<a href="http://www.clearbox.hu/">http://www.clearbox.hu</a></p>
<div id="blog_text">
<p>首先在头里加入如下代码：</p>
<p>&lt;link href=”css/clearbox.css” rel=”stylesheet” type=”text/css” /&gt;<br />
&lt;script src=”js/clearbox.js” type=”text/javascript” charset=”gb2312&#8243;&gt;&lt;/script&gt;</p>
<p>1.&lt;a href=”images/cb_sample_01.jpg” <span>rel=”clearbox”</span> <span>title=”A kép címe”</span>&gt;<br />
&lt;img src=”images/cb_sample_01_tn.jpg” /&gt;&lt;/a&gt;</p>
<p>2.&lt;a href=”images/cb_sample_04.jpg” <span>rel=”clearbox[Virágok]“</span>&gt;&lt;img src=”images/cb_sample_04_tn.jpg” /&gt;&lt;/a&gt;<br />
&lt;a href=”images/cb_sample_05.jpg” <span>rel=”clearbox[Virágok]“</span>&gt;&lt;img src=”images/cb_sample_05_tn.jpg” /&gt;&lt;/a&gt;<br />
&lt;a href=”images/cb_sample_06.jpg” <span>rel=”clearbox[Virágok]“</span>&gt;&lt;img src=”images/cb_sample_06_tn.jpg” /&gt;&lt;/a&gt;</p>
<p>3.&lt;a href=”images/cb_sample_01.jpg” <span>rel=”clearbox[Virágok,,10,,start]“</span>&gt;<br />
&lt;img src=”images/cb_sample_01_tn.jpg” /&gt;&lt;/a&gt;</p>
<p>4.&lt;a href=”images/cb_sample_01.jpg” <span>rel=”clearbox[Virágok]“</span> <span>tnhref=”pictures/cb_sample_01_tn.jpg”</span>&gt;ez a link egy képre mutat, de nincs megadva thumbnail kép&lt;/a&gt;</p>
<p>5.&lt;a href=”http://www.google.com” <span>rel=”clearbox(800,,600,,click)”</span>&gt;google.com&lt;/a&gt;<br />
&lt;a href=”http://www.google.com” <span>rel=”clearbox(800,,600,,over)”</span>&gt;google.com&lt;/a&gt;</p>
<p>参数设置：</p>
<p>CB_AllowedToRun：</p>
<p>此值可以设置为on或off。如果&#8217;off&#8217; ，然后就到ClearBox ，所以图像不会出现在的帮助下，该脚本，但它最初是在网站上。</p>
<p>CB_AllowExtFunct：</p>
<p>此值可以设置为on或off。如果&#8217;on&#8217; ，那么ClearBox每个图像和HTML内容加载将CB_ExternalFunction （ ）函数调用。</p>
<p>CB_Animation：</p>
<p>此值可以设置为on，off，normal，double，warp。动画ClearBox窗口可以设置他。<br />
&#8216;关闭&#8217; ：在这种情况下，窗口不animálódik ，但添加到想要的大小。<br />
&#8216;正常&#8217; ：在这种情况下，窗口的横向和纵向然后大小。<br />
&#8216;双&#8217;的同样大小的窗口中X和Y方向（默认）<br />
&#8216;经&#8217; ：作为双，但之前的动画显示的图片上，提供它（高CPU的需求，因此，建议对小图片）</p>
<p>CB_AnimSpeed：</p>
<p>它的价值是一个正整数（ 1 &#8211; ） 。指定动画的速度。<br />
CB_BodyMarginLeft<br />
CB_BodyMarginRight<br />
CB_BodyMarginTop<br />
CB_BodyMarginBottom</p>
<p>如果一方打算给出具体的价值身体的利润率，因此，如果：利润率左，边顶，边底利润的权利，或任何为0 ，和一氧化氮的汽车，则有以下参数将其添加到ClearBox也。由于这HideContent层的确切尺寸需要！注：注意，如果你不给的CSS文件做身 体利润价值，但它也有一个默认值为保证金的浏览器！重要提示：请不要使用％的价值，因为层ClearBox HideContent将无法显示！</p>
<p>CB_CloseOnH：</p>
<p>此值可以设置为on或off。如果&#8217;off&#8217; ，它阻碍表面的文件，单击窗口不会关闭ClearBox 。</p>
<p>CB_FlashHide：</p>
<p>此值可以设置为on或off。如果&#8217;on&#8217; ，则flash 也会盖在弹出层的上面。</p>
<p>CB_Font<br />
CB_Font2：</p>
<p>的价值，一个（或多个）的字体。下的文本，图片第一和第二行指定的字体。的CSS可以同时使用一种以上的可利用的价值，例如： &#8216;字体，绿色， Tahoma &#8216; 。</p>
<p>CB_FontSize<br />
CB_FontSize2：</p>
<p>它的价值，这是一个积极的整数（ 6 &#8211; ） 。</p>
<p>CB_FontColor<br />
CB_FontColor2：</p>
<p>价值的十六进制颜色代码。下的文本，图片第一和第二排的颜色的。</p>
<p>CB_FontWeight<br />
CB_FontWeight2：</p>
<p>其值为”normal&#8217; ，或&#8217;bold&#8217;。</p>
<p>CB_FullSize：</p>
<p>如果&#8217;起飞&#8217; ，然后是不显示的图像上的&#8217;下载文件&#8217;或&#8217;全尺寸&#8217;图标。</p>
<p>CB_HideColor：</p>
<p>指定脚本的邀请文件&#8217;妨碍&#8217;表面颜色的。</p>
<p>CB_HideOpacity：</p>
<p>默认值： &#8216; 0.85 &#8216; ，这意味着85 ％ ，乌山黑暗背景。</p>
<p>CB_HideOpacitySpeed：</p>
<p>指定多少毫秒妨碍文件的表面下的黑暗。</p>
<p>CB_ImgBorder：</p>
<p>指定的宽度范围内的图片。</p>
<p>CB_ImgBorderColor：</p>
<p>指定边框颜色的图像。</p>
<p>CB_ImgMinWidth<br />
CB_ImgMinHeight：</p>
<p>正整数的值（ 50 &#8211; ） 。他们ClearBox窗口像素，最小宽度（较少窗口无法打开，即使是规模较小的形象） 。</p>
<p>CB_ImgNum：</p>
<p>规定，如果ClearBox galériáknál应显示的所有文件，这是一些图像显示。</p>
<p>CB_ImgNumBracket：</p>
<p>如果CB_ImgNum是打开的，它显示的图像是否有在括号中显示。</p>
<p>CB_ImgOpacitySpeed：</p>
<p>指定的毫秒数在图像的。</p>
<p>CB_ImgTextFade：</p>
<p>如果&#8217;起飞&#8217; ，那么，下面的图片或文字的形象似乎并不逐步，但立即显示出来。</p>
<p>CB_NavTextPrv<br />
CB_NavTextNxt<br />
CB_NavTextFull<br />
CB_NavTextDL：</p>
<p>可以指定的形象出现在按钮（链接）的名称。</p>
<p>CB_NavTextImgPrv<br />
CB_NavTextImgNxt<br />
CB_NavTextImgFull<br />
CB_NavTextImgDL：</p>
<p>您可以选择是否显示图像按钮下方。如果有任何&#8217;起飞&#8217; ，那么目前的形象，而不是上述参数的文字会出现下降。</p>
<p>CB_NoThumbnails：</p>
<p>其值为&#8217;对&#8217;或&#8217;关闭&#8217; 。如果&#8217;起飞&#8217; ， galériáknál它不会出现在小的图像。</p>
<p>CB_Padd：</p>
<p>价值的一个非负整数（ 0 &#8211; ） 。图片为（和lekerekítéseken ）提供额外的-几乎是无形-相框（白色帧的图片宽度以像素为单位的增加） 。</p>
<p>CB_PicDir：</p>
<p>ClearBox指定的路径图像。如果改变clearbox.css不会忘记作出必要的修改！</p>
<p>CB_PictureStart<br />
CB_PicturePause<br />
CB_PictureClose<br />
CB_PictureLoading<br />
CB_PictureNext<br />
CB_PicturePrev：</p>
<p>如果你想改变ClearBox使用的开始，暂停，关闭前和下一步按钮，以及装载的形象，它是允许这样做。重要的是，只输入文件名， /和文件夹没有任何迹象！</p>
<p>CB_Preload：</p>
<p>是否指定galériáknál前和下列预先载入图像。</p>
<p>CB_RoundPix：</p>
<p>指定四舍五入的尺寸的图像。</p>
<p>CB_SelectsHide：</p>
<p>如果&#8217;的&#8217; ，然后在SELECT ClearBox窗口被打开，箱子就会消失在背景中，并再次结束后的时代。</p>
<p>CB_ShowGalName：</p>
<p>如果&#8217;起飞&#8217;的名字然后将不会kiíratásra加莱拉。</p>
<p>CB_ShowImgURL：</p>
<p>指定的窗口形象，以ClearBox路径，如果没有地址的图片。</p>
<p>CB_SimpleDesign：</p>
<p>如果&#8217;的&#8217; ，然后就不会有文字的图片（帧的图片将是一个统一的大小） 。</p>
<p>CB_SlShowTime：</p>
<p>指定是否要等待多少幻灯片效果（以秒计）收到显示下面的图像。</p>
<p>CB_TextH：</p>
<p>下面的图片中给出了高度的文字。</p>
<p>CB_TextNav：</p>
<p>指定galériáknál下方的图片前和明年的按钮（或字幕）显示器。</p>
<p>CB_TextOpacitySpeed：</p>
<p>指定的毫秒数在图像中的文字。</p>
<p>CB_WinPadd：</p>
<p>（ 0 &#8211; ）中指定一个正常的情况下，最低数量的像素边缘的浏览器窗口，以ClearBox 。</p>
<p>注：<br />
1。这个效果有个比较难控制的地方就是弹出页面底下总有个URL，这个问题我经过反复尝试可以在链接后面加上title属性，这样就可以把URL换成你想换的任意内容。或者不想要的话直接换成空就可以了。<br />
2。如果有js乱码的情况请在引如 js文件的语句里加上charset=”gb2312&#8243; ，而不要使用默认的匈牙利编码。</p></div>
]]></content:encoded>
			<wfw:commentRss>http://www.artcss.com/archives/121.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>不可错过的Jquery UI库（一）</title>
		<link>http://www.artcss.com/archives/35.html</link>
		<comments>http://www.artcss.com/archives/35.html#comments</comments>
		<pubDate>Wed, 15 Jul 2009 07:42:50 +0000</pubDate>
		<dc:creator>Artcss</dc:creator>
				<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://artskin.jhost.cn/blog/?p=35</guid>
		<description><![CDATA[Jquery Tools是一组基于Jquery构建的用户界面常用组件的集合。通过使用Jquery Tools，网站前端开发无疑会变得更加高效。值得注意的是，Jquery Tools的gzip压缩版本仅有5.8k，如此轻量级而且功能实用的UI组件绝对值得我们关注。下面是官方主页对它的一个描述： Jquery Tools包含如今网站六个最有用的javascript工具。它的一个优点是所有这些工具可以一起使用、扩展、配置和样式化。 最终，通过它你可以制作出众多不同的网站部件，或用个人的方式创造新的应用。（This library contains six of the most useful JavaScript tools available for today’s website. The beauty of this library is that all of these tools can be used together, extended, configured and styled. In the end, you can have hundreds of different widgets and new personal ways of using [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.artskin.cn/blog/wp-content/uploads/2009/07/jquery-tools.jpg"><img class="alignnone size-full wp-image-36" title="jquery-tools" src="http://www.artskin.cn/blog/wp-content/uploads/2009/07/jquery-tools.jpg" alt="jquery-tools" width="480" height="171" /></a></p>
<p><a onclick="javascript:pageTracker._trackPageview('/outbound/article/flowplayer.org');" href="http://flowplayer.org/tools/">Jquery Tools</a>是一组基于Jquery构建的用户界面常用组件的集合。通过使用Jquery Tools<span id="more-35"></span>，网站前端开发无疑会变得更加高效。值得注意的是，Jquery Tools的gzip压缩版本仅有5.8k，如此轻量级而且功能实用的UI组件绝对值得我们关注。下面是官方主页对它的一个描述：</p>
<blockquote><p>Jquery Tools包含如今网站六个最有用的javascript工具。它的一个优点是所有这些工具可以一起使用、扩展、配置和样式化。</p>
<p>最终，通过它你可以制作出众多不同的网站部件，或用个人的方式创造新的应用。（This library contains six of the most useful JavaScript tools available for today’s website. The beauty of this library is that all of these tools can be used together, extended, configured and styled. In the end, you can have hundreds of different widgets and new personal ways of using the library. ）</p></blockquote>
<p>下面是Jquery UI包含的工具列表：</p>
<ol>
<li>选项卡功能(Tabs)</li>
<li>提示工具条功能(ToolTips)</li>
<li>信息滚动功能(Scrollable)</li>
<li>遮罩效果(overlay)</li>
<li>突出效果(expose)</li>
<li>Flash嵌入</li>
</ol>
<p>有人可能会拿jquery tools和jquery ui去做对比，因为这个，国外还有过不小的争论。感兴趣的可以看看这篇文章：<a onclick="javascript:pageTracker._trackPageview('/outbound/article/marcgrabanski.com');" href="http://marcgrabanski.com/article/jquery-tools-vs-jquery-ui">Jquery Tools VS Jquery UI</a>，国内也有人对此发表过<a onclick="javascript:pageTracker._trackPageview('/outbound/article/dalada.blogspot.com');" href="http://dalada.blogspot.com/2009/06/jquery-tools.html">言论</a>（blogspot被墙了，可能访问不了），下面是一些引用：</p>
<blockquote><p>原因就出在於TOOLS官網上寫明了它就是要補jQuery UI不足之處，例如：TOOLS有UI缺乏的tooltips、tabs、overlays等功能，且強調檔案比UI還要小。</p>
<p>marcgrabanski認為TOOLS既然對於UI不足之處有意見，最初就應該加入該UI團隊，一起協同開發改造出新版本，畢竟當初是受到UI的啟發，到後來卻因UI不足之處，甚至另起爐灶創立一個新品牌，這樣的行徑並不厚道。</p>
<p>但支持TOOLS的人卻也有不同的聲音，認為網頁開發者本來就是會殷切期望會有更小、更有效率的plugin，UI長久來效能不是最好，不過大家也都無從選擇起，如今又有新的plugin出現，大家樂見其成，應該給予鼓勵。</p></blockquote>
<p>Jquery Tools在以下浏览器中测试通过：</p>
<ul>
<li><a onclick="javascript:pageTracker._trackPageview('/outbound/article/www.microsoft.com');" href="http://www.microsoft.com/windows/products/winfamily/ie/">Internet Explorer</a> 6+</li>
<li><a onclick="javascript:pageTracker._trackPageview('/outbound/article/www.mozilla.com');" href="http://www.mozilla.com/en-US/firefox/">Firefox</a> 2.0+</li>
<li><a onclick="javascript:pageTracker._trackPageview('/outbound/article/www.google.com');" href="http://www.google.com/chrome/">Chrome</a> 1+</li>
<li><a onclick="javascript:pageTracker._trackPageview('/outbound/article/www.opera.com');" href="http://www.opera.com/browser/">Opera</a> 9+</li>
<li><a onclick="javascript:pageTracker._trackPageview('/outbound/article/www.apple.com');" href="http://www.apple.com/safari/">Safari</a> 3+</li>
</ul>
<p>由于Jquery Tools相关使用要写的东西比较多，所以本博决定分成几篇来写，本篇主要是给大家一个基本的介绍。从下一篇开始依次介绍Jquery Tools中各工具的使用及示例。心急的朋友可以去官方站点的<a onclick="javascript:pageTracker._trackPageview('/outbound/article/flowplayer.org');" href="http://flowplayer.org/tools/demos/index.html">这个页面</a>，上面给出了丰富的示例。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.artcss.com/archives/35.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>仿126经典滑动门</title>
		<link>http://www.artcss.com/archives/471.html</link>
		<comments>http://www.artcss.com/archives/471.html#comments</comments>
		<pubDate>Wed, 01 Jul 2009 05:43:42 +0000</pubDate>
		<dc:creator>Artcss</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[js tab]]></category>
		<category><![CDATA[滑动门]]></category>

		<guid isPermaLink="false">http://artskin.jhost.cn/blog/?p=3</guid>
		<description><![CDATA[javascript仿126邮箱广告Tab切换效果，是我见过写得最精炼的Tab，大家引用时保留下原创作者 鼠标点击 &#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62; &#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62; &#60;head&#62; &#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=gb2312&#34; /&#62; &#60;title&#62;仿126经典滑动门 &#60;/title&#62; &#60;style&#62; &#60;!-- body,div,ul,li{ padding:0; text-align:center; } body{ font:12px &#34;宋体&#34;; text-align:center; } a:link{ color:#00F; text-decoration:none; } a:visited { color: #00F; text-decoration:none; } a:hover { color: #c00; text-decoration:underline; } ul{ list-style:none;} /*选项卡1*/ #Tab1{ width:460px; margin:0px; padding:0px; margin:0 [...]]]></description>
			<content:encoded><![CDATA[<p>javascript仿126邮箱广告Tab切换效果，是我见过写得最精炼的Tab，大家引用时保留下原创作者  </p>
<h4>鼠标点击</h4>
<div class="runcode">
<p><textarea name="runcode" class="runcode_text" id="runcode_g5WKff">
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt;
&lt;title&gt;仿126经典滑动门 &lt;/title&gt;
&lt;style&gt;
&lt;!--
body,div,ul,li{  padding:0;  text-align:center; }
body{  font:12px &quot;宋体&quot;;  text-align:center; }
a:link{  color:#00F;  text-decoration:none; }
a:visited {  color: #00F;  text-decoration:none; }
a:hover {  color: #c00;  text-decoration:underline; }
ul{ list-style:none;}
/*选项卡1*/
#Tab1{ width:460px; margin:0px; padding:0px; margin:0 auto;}
/*选项卡2*/
#Tab2{ width:576px; margin:0px; padding:0px; margin:0 auto;}
/*菜单class*/
.Menubox { width:100%; background:url(/uploads/img/tab_bg.gif); height:28px; line-height:28px; }
.Menubox ul{ margin:0px; padding:0px; }
.Menubox li{  float:left;  display:block;  cursor:pointer;  width:114px;  text-align:center;  color:#949694;  font-weight:bold;  }
.Menubox li.hover{  padding:0px;  background:#fff;  width:116px;  border-left:1px solid #A8C29F;  border-top:1px solid #A8C29F;  border-right:1px solid #A8C29F; background:url(/uploads/img/tab_hover.gif);  color:#739242;  font-weight:bold;  height:27px; line-height:27px; }
.Contentbox{  clear:both;  margin-top:0px;  border:1px solid #A8C29F;  border-top:none;  height:181px;  text-align:center;  padding-top:8px; } --&gt;
&lt;/style&gt;
&lt;script type=&quot;text/javascript&quot;&gt;// &lt;![CDATA[
/*第一种形式 第二种形式 更换显示样式*/
function setTab(name,cursel,n){
 for(i=1;i&lt;=n;i++){
  var menu=document.getElementById(name+i);
  var con=document.getElementById(&quot;con_&quot;+name+&quot;_&quot;+i);
  menu.className=i==cursel?&quot;hover&quot;:&quot;&quot;;
  con.style.display=i==cursel?&quot;block&quot;:&quot;none&quot;;
 }
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!--
引用时保留下原创作者喽,尊重任articleimg何一位原创作者,促进中国互联网进程
Editor:weasle
http://www.hxcgw.com
Email:weasle@163.com
QQ:112011531
--&gt;
&lt;div id=&quot;Tab1&quot;&gt;
&lt;div class=&quot;Menubox&quot;&gt;
&lt;ul&gt;
	&lt;li id=&quot;one1&quot; class=&quot;hover&quot; onclick=&quot;setTab('one',1,4)&quot;&gt;新闻1&lt;/li&gt;
	&lt;li id=&quot;one2&quot; onclick=&quot;setTab('one',2,4)&quot;&gt;新闻2&lt;/li&gt;
	&lt;li id=&quot;one3&quot; onclick=&quot;setTab('one',3,4)&quot;&gt;新闻3&lt;/li&gt;
	&lt;li id=&quot;one4&quot; onclick=&quot;setTab('one',4,4)&quot;&gt;新闻4&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;Contentbox&quot;&gt;
&lt;div id=&quot;con_one_1&quot; class=&quot;hover&quot;&gt;新闻列表1&lt;/div&gt;
&lt;div id=&quot;con_one_2&quot; style=&quot;display:none&quot;&gt;新闻列表2&lt;/div&gt;
&lt;div id=&quot;con_one_3&quot; style=&quot;display:none&quot;&gt;新闻列表3&lt;/div&gt;
&lt;div id=&quot;con_one_4&quot; style=&quot;display:none&quot;&gt;新闻列表4&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;br /&gt;
&lt;div id=&quot;Tab2&quot;&gt;
&lt;div class=&quot;Menubox&quot;&gt;
&lt;ul&gt;
	&lt;li id=&quot;two1&quot; class=&quot;hover&quot; onclick=&quot;setTab('two',1,4)&quot;&gt;新闻1&lt;/li&gt;
	&lt;li id=&quot;two2&quot; onclick=&quot;setTab('two',2,4)&quot;&gt;新闻2&lt;/li&gt;
	&lt;li id=&quot;two3&quot; onclick=&quot;setTab('two',3,4)&quot;&gt;新闻3&lt;/li&gt;
	&lt;li id=&quot;two4&quot; onclick=&quot;setTab('two',4,4)&quot;&gt;新闻4&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;Contentbox&quot;&gt;
&lt;div id=&quot;con_two_1&quot;&gt;新闻列表1&lt;/div&gt;
&lt;div id=&quot;con_two_2&quot; style=&quot;display:none&quot;&gt;新闻列表2&lt;/div&gt;
&lt;div id=&quot;con_two_3&quot; style=&quot;display:none&quot;&gt;新闻列表3&lt;/div&gt;
&lt;div id=&quot;con_two_4&quot; style=&quot;display:none&quot;&gt;新闻列表4&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</textarea></p>
<p><input type="button" value="运行" class="runcode_button" onclick="runcode_open_new('runcode_g5WKff');"/> <input type="button" value="复制" class="runcode_button" onclick="runcode_copy('runcode_g5WKff');"/> 提示：你可以先修改部分代码再运行。</p>
</div>
<p><br ></p>
<h4>鼠标滑过：</h4>
<div class="runcode">
<p><textarea name="runcode" class="runcode_text" id="runcode_DZmz2e">
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt;
&lt;title&gt;仿126经典滑动门&lt;/title&gt;
&lt;style&gt;
&lt;!-- body,div,ul,li{  padding:0;  text-align:center; }
body{  font:12px &quot;宋体&quot;;  text-align:center; }
a:link{  color:#00F;  text-decoration:none; }
a:visited {  color: #00F;  text-decoration:none; }
a:hover {  color: #c00;  text-decoration:underline; }
ul{ list-style:none;}
/*选项卡1*/
#Tab1{ width:460px; margin:0px; padding:0px; margin:0 auto;}
/*选项卡2*/
#Tab2{ width:576px; margin:0px; padding:0px; margin:0 auto;}
/*菜单class*/
.Menubox { width:100%; background:url(/uploads/img/tab_bg.gif); height:28px; line-height:28px; }
.Menubox ul{ margin:0px; padding:0px; }
.Menubox li{  float:left;  display:block;  cursor:pointer;  width:114px;  text-align:center;  color:#949694;  font-weight:bold;  }
.Menubox li.hover{  padding:0px;  background:#fff;  width:116px;  border-left:1px solid #A8C29F;  border-top:1px solid #A8C29F;  border-right:1px solid #A8C29F;  background:url(/uploads/img/tab_hover.gif);  color:#739242;  font-weight:bold;  height:27px;  line-height:27px; }
.Menubox_on {  padding:0px;  background:#fff;  width:116px;  border-left:1px solid #A8C29F;  border-top:1px solid #A8C29F;  border-right:1px solid #A8C29F;  background:url(http://bbs.blueidea.com/attachment.php?aid=61412&amp;#038;noupdate=yes);  color:#739242;  font-weight:bold;  height:27px;  line-height:27px;  }
.Contentbox{  clear:both;  margin-top:0px;  border:1px solid #A8C29F;  border-top:none;  height:181px;  text-align:center;  padding-top:8px; } --&gt;
&lt;/style&gt;
&lt;script type=&quot;text/javascript&quot;&gt;// &lt;![CDATA[
/*第一种形式 第二种形式 更换显示样式*/
function setTab(name,cursel,n){
 for(i=1;i&lt;=n;i++){
  var menu=document.getElementById(name+i);
  var con=document.getElementById(&quot;con_&quot;+name+&quot;_&quot;+i);
  menu.className=i==cursel?&quot;hover&quot;:&quot;&quot;;
  con.style.display=i==cursel?&quot;block&quot;:&quot;none&quot;;
 }
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!--
引用时保留下原创作者喽,尊重任何一位原创作者,促进中国互联网进程
Editor:weasle
http://www.hxcgw.com
Email:weasle@163.com
QQ:112011531
--&gt;
&lt;div id=&quot;Tab1&quot;&gt;
&lt;div class=&quot;Menubox&quot;&gt;
&lt;ul&gt;
	&lt;li id=&quot;one1&quot; class=&quot;hover&quot; onmouseover=&quot;setTab('one',1,4)&quot;&gt;新闻1&lt;/li&gt;
	&lt;li id=&quot;one2&quot; onmouseover=&quot;setTab('one',2,4)&quot;&gt;新闻2&lt;/li&gt;
	&lt;li id=&quot;one3&quot; onmouseover=&quot;setTab('one',3,4)&quot;&gt;新闻3&lt;/li&gt;
	&lt;li id=&quot;one4&quot; onmouseover=&quot;setTab('one',4,4)&quot;&gt;新闻4&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;Contentbox&quot;&gt;
&lt;div id=&quot;con_one_1&quot;&gt;新闻列表1&lt;/div&gt;
&lt;div id=&quot;con_one_2&quot; style=&quot;display:none&quot;&gt;新闻列表2&lt;/div&gt;
&lt;div id=&quot;con_one_3&quot; style=&quot;display:none&quot;&gt;新闻列表3&lt;/div&gt;
&lt;div id=&quot;con_one_4&quot; style=&quot;display:none&quot;&gt;新闻列表4&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;br /&gt;
&lt;div id=&quot;Tab2&quot;&gt;
&lt;div class=&quot;Menubox&quot;&gt;
&lt;ul&gt;
	&lt;li id=&quot;two1&quot; onmouseover=&quot;setTab('two',1,4)&quot;&gt;新闻1&lt;/li&gt;
	&lt;li id=&quot;two2&quot; class=&quot;Menubox_on&quot; onmouseover=&quot;setTab('two',2,4)&quot;&gt;新闻2&lt;/li&gt;
	&lt;li id=&quot;two3&quot; onmouseover=&quot;setTab('two',3,4)&quot;&gt;新闻3&lt;/li&gt;
	&lt;li id=&quot;two4&quot; onmouseover=&quot;setTab('two',4,4)&quot;&gt;新闻4&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;Contentbox&quot;&gt;
&lt;div id=&quot;con_two_1&quot; style=&quot;display:none&quot;&gt;新闻列表1&lt;/div&gt;
&lt;div id=&quot;con_two_2&quot;&gt;新闻列表2&lt;/div&gt;
&lt;div id=&quot;con_two_3&quot; style=&quot;display:none&quot;&gt;新闻列表3&lt;/div&gt;
&lt;div id=&quot;con_two_4&quot; style=&quot;display:none&quot;&gt;新闻列表4&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</textarea></p>
<p><input type="button" value="运行" class="runcode_button" onclick="runcode_open_new('runcode_DZmz2e');"/> <input type="button" value="复制" class="runcode_button" onclick="runcode_copy('runcode_DZmz2e');"/> 提示：你可以先修改部分代码再运行。</p>
</div>
<h4>javascript代码如下：</h4>

<div class="wp_codebox_msgheader"><span class="right"></span><span class="left2">Download <a href="http://www.artcss.com/wp-content/plugins/wp-codebox/wp-codebox.php?p=471&amp;download=script.js">script.js</a></span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p4712"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
</pre></td><td class="code" id="p471code2"><pre class="javascript" style="font-family:Verdana;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span><span style="color: #999999;">// &lt;![CDATA[</span>
<span style="color: #009966; ">/*第一种形式 第二种形式 更换显示样式*/</span>
<span style="color: #003366; font-weight: bold;">function</span> setTab<span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span><span style="color: #339933;">,</span>cursel<span style="color: #339933;">,</span>n<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
 <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">=</span><span style="color: #ff0000;">1</span><span style="color: #339933;">;</span>i<span style="color: #339933;">&lt;=</span>n<span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
  <span style="color: #003366; font-weight: bold;">var</span> menu<span style="color: #339933;">=</span>document.<span style="color: #990000;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span><span style="color: #339933;">+</span>i<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #003366; font-weight: bold;">var</span> con<span style="color: #339933;">=</span>document.<span style="color: #990000;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;con_&quot;</span><span style="color: #339933;">+</span><span style="color: #000066;">name</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;_&quot;</span><span style="color: #339933;">+</span>i<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  menu.<span style="color: #990000;">className</span><span style="color: #339933;">=</span>i<span style="color: #339933;">==</span>cursel<span style="color: #339933;">?</span><span style="color: #3366CC;">&quot;hover&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span>
  con.<span style="color: #990000;">style</span>.<span style="color: #990000;">display</span><span style="color: #339933;">=</span>i<span style="color: #339933;">==</span>cursel<span style="color: #339933;">?</span><span style="color: #3366CC;">&quot;block&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;none&quot;</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #999999;">// ]]&gt;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.artcss.com/archives/471.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

