<?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.zhangjingwei.com/archives/category/web-developer/javascript-web-developer/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.zhangjingwei.com</link>
	<description>中隐留司官</description>
	<lastBuildDate>Wed, 08 Sep 2010 17:36:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>jQuery 源码分析（1）</title>
		<link>http://www.zhangjingwei.com/archives/jquery-analysis-code-1/</link>
		<comments>http://www.zhangjingwei.com/archives/jquery-analysis-code-1/#comments</comments>
		<pubDate>Wed, 08 Sep 2010 15:20:12 +0000</pubDate>
		<dc:creator>张经纬</dc:creator>
				<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://www.zhangjingwei.com/?p=1533</guid>
		<description><![CDATA[jQuery 是一款开源的，最流行的，面向对象的Javascript框架，因为平时经常使用，也就萌生了阅读源码的想法，尝试着去分析一下，如果有问题，还请大家指点。 阅读 jQuery 源码之前，必须要了解 jQuery 的工作机制，在我看来，实际上 jQuery 是一个标准的以面向对象的程序结构，jQuery 本身是一个类，而每一个我们构建的 jQuery 对象则是这个类实例。 因此我从如下两个方法来入手 1、如何构造 jQuery 对象 2、jQuery对象的继承 1、如何构造 jQuery 对象 jQuery 提供了四种封装jQuery对象的方法，分别是 DOMElement HTML strings TAG expr, $(&#8230;) 这四种方法的调用如下。 elem = document.getElementsByTagName&#40;&#34;div&#34;&#41;; elem = $&#40;elem&#41;; var elem = $&#40;&#34;&#60;p&#62;hello&#60;/p&#62;&#34;&#41;; var elem = $&#40;&#34;div&#34;&#41;; var elem = $&#40;&#34;body &#62; div&#34;&#41;; 通过这些方法，就生成一个jQuery对象。 那么，在jQuery内部，是如何去封装这个对象的呢？ 看代码 var jQuery = [...]]]></description>
			<content:encoded><![CDATA[<p>jQuery 是一款开源的，最流行的，面向对象的Javascript框架，因为平时经常使用，也就萌生了阅读源码的想法，尝试着去分析一下，如果有问题，还请大家指点。</p>
<p>阅读 jQuery 源码之前，必须要了解 jQuery 的工作机制，在我看来，实际上 jQuery 是一个标准的以面向对象的程序结构，jQuery 本身是一个类，而每一个我们构建的 jQuery 对象则是这个类实例。</p>
<p>因此我从如下两个方法来入手<br />
1、如何构造 jQuery 对象<br />
2、jQuery对象的继承</p>
<p><strong>1、如何构造 jQuery 对象</strong><br />
jQuery 提供了四种封装jQuery对象的方法，分别是</p>
<ul>
<li> DOMElement</li>
<li> HTML strings</li>
<li> TAG</li>
<li>expr, $(&#8230;)</li>
</ul>
<p>这四种方法的调用如下。</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">elem <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;div&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
elem <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span>elem<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> elem <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;&lt;p&gt;hello&lt;/p&gt;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> elem <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;div&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> elem <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;body &gt; div&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>通过这些方法，就生成一个jQuery对象。</p>
<p>那么，在jQuery内部，是如何去封装这个对象的呢？<br />
看代码</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> jQuery <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> selector<span style="color: #339933;">,</span> context <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #006600; font-style: italic;">// 创建一个自定义对象，并返回</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">new</span> jQuery.<span style="color: #660066;">fn</span>.<span style="color: #660066;">init</span><span style="color: #009900;">&#40;</span> selector<span style="color: #339933;">,</span> context <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span></pre></div></div>

<p>不难理解，jQuery 对象实际上通过new运算符创建的一个继承jQuery.prototype.init()返回的对象的原型的对象。</p>
<p>让我们简化jQuery.fn.init方法，并看看他是如何去运作的</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">jQuery.<span style="color: #660066;">fn</span> <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">prototype</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
	init<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> selector<span style="color: #339933;">,</span> context <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> match<span style="color: #339933;">,</span> elem<span style="color: #339933;">,</span> ret<span style="color: #339933;">,</span> doc<span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// 如果选择器为空、null、undefined的时候，返回 jQuery对象</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span>selector <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// Handle $(DOMElement)</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> selector.<span style="color: #660066;">nodeType</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #006600; font-style: italic;">// 如果选择器为DOM对象，写入jQuery属性并返回jQuery对象</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">context</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> selector<span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// The body element only exists once, optimize finding it</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> selector <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;body&quot;</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #339933;">!</span>context <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #006600; font-style: italic;">//code here...</span>
			<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// Handle HTML strings</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">typeof</span> selector <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;string&quot;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #006600; font-style: italic;">// 通过正则判断传入的选择器是HTML字符串还是ID</span>
			<span style="color: #006600; font-style: italic;">// Are we dealing with HTML string or an ID?</span>
			<span style="color: #006600; font-style: italic;">// quickExpr = /^[^&lt; ]*(&lt;[\w\W]+&gt;)[^&gt;]*$|^#([\w-]+)$/,</span>
&nbsp;
			match <span style="color: #339933;">=</span> quickExpr.<span style="color: #660066;">exec</span><span style="color: #009900;">&#40;</span> selector <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #006600; font-style: italic;">// 如果match[1]不为空或者context为空的时候</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> match <span style="color: #339933;">&amp;&amp;</span> <span style="color: #009900;">&#40;</span>match<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">||</span> <span style="color: #339933;">!</span>context<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
				<span style="color: #006600; font-style: italic;">// HANDLE: $(html) -&gt; $(array)</span>
				<span style="color: #006600; font-style: italic;">// 如果match[1] 不为空（html字符串）</span>
				<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> match<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #006600; font-style: italic;">// 返回jQuery、选择器两数组合并后的对象</span>
					<span style="color: #000066; font-weight: bold;">return</span> jQuery.<span style="color: #660066;">merge</span><span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> selector <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
				<span style="color: #006600; font-style: italic;">// HANDLE: $(&quot;#id&quot;)</span>
				<span style="color: #006600; font-style: italic;">// 如果context为空的时候 （id）</span>
				<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #006600; font-style: italic;">// 尝试按照DOM节点的方式返回jQuery对象</span>
					elem <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span> match<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
					<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> elem <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
						<span style="color: #006600; font-style: italic;">// 如果得到elem对象，但id非match[2]</span>
						<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> elem.<span style="color: #660066;">id</span> <span style="color: #339933;">!==</span> match<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
							<span style="color: #000066; font-weight: bold;">return</span> rootjQuery.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span> selector <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						<span style="color: #009900;">&#125;</span>
&nbsp;
						<span style="color: #006600; font-style: italic;">// Otherwise, we inject the element directly into the jQuery object</span>
						<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
						<span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> elem<span style="color: #339933;">;</span>
					<span style="color: #009900;">&#125;</span>
&nbsp;
					<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">context</span> <span style="color: #339933;">=</span> document<span style="color: #339933;">;</span>
					<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">selector</span> <span style="color: #339933;">=</span> selector<span style="color: #339933;">;</span>
					<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
&nbsp;
&nbsp;
			<span style="color: #006600; font-style: italic;">// HANDLE: $(&quot;TAG&quot;)</span>
			<span style="color: #006600; font-style: italic;">// 如果context为空并且是一个纯字母的字符串</span>
			<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span>context <span style="color: #339933;">&amp;&amp;</span> <span style="color: #009966; font-style: italic;">/^\w+$/</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span> selector <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #006600; font-style: italic;">// 返回jQuery、选择器两数组合并后的对象</span>
				<span style="color: #000066; font-weight: bold;">return</span> jQuery.<span style="color: #660066;">merge</span><span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> selector <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #006600; font-style: italic;">// HANDLE: $(expr, $(...))</span>
			<span style="color: #006600; font-style: italic;">// 如果context为空 或者 context是一个jQuery对象</span>
			<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span>context <span style="color: #339933;">||</span> context.<span style="color: #660066;">jquery</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #006600; font-style: italic;">// 在上下文或者document对象中找到节点并返回jQuery对象</span>
				<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#40;</span>context <span style="color: #339933;">||</span> rootjQuery<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span> selector <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #006600; font-style: italic;">// HANDLE: $(expr, context)</span>
			<span style="color: #006600; font-style: italic;">// (which is just equivalent to: $(context).find(expr)</span>
			<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">return</span> jQuery<span style="color: #009900;">&#40;</span> context <span style="color: #009900;">&#41;</span>.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span> selector <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// HANDLE: $(function)</span>
		<span style="color: #006600; font-style: italic;">// Shortcut for document ready</span>
		<span style="color: #006600; font-style: italic;">// 对$(document).ready(functon(){});的一个缩写$(function(){});</span>
		<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> jQuery.<span style="color: #660066;">isFunction</span><span style="color: #009900;">&#40;</span> selector <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">return</span> rootjQuery.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span> selector <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// 如果选择器是一个jQuery对象，引用下</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>selector.<span style="color: #660066;">selector</span> <span style="color: #339933;">!==</span> undefined<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">selector</span> <span style="color: #339933;">=</span> selector.<span style="color: #660066;">selector</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">context</span> <span style="color: #339933;">=</span> selector.<span style="color: #660066;">context</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">return</span> jQuery.<span style="color: #660066;">makeArray</span><span style="color: #009900;">&#40;</span> selector<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>至此，我们就完成了对jQuery对象的构造。</p>
<p><strong>2、jQuery对象的继承</strong><br />
当我们构造完成jQuery对象后，需要jQuery对象继承jQuery中的方法与属性。<br />
看代码</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">jQuery.<span style="color: #660066;">fn</span>.<span style="color: #660066;">init</span>.<span style="color: #660066;">prototype</span> <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">fn</span><span style="color: #339933;">;</span></pre></div></div>

<p>如此，就将jQuery的原型赋到jQuery对象的原型上去了，jQuery对象就继承了jQuery初始的方法和属性。</p>
<p>那么，当我需要向已实例化的对象原型中增加方法或者属性怎么办？</p>
<p>这就需要用到重载 &#8211;> extend</p>
<p>下次接着说~</p>



加入书签:


	<a rel="nofollow" class="thickbox" href="http://shuqian.qq.com/post?jumpback=1&title=jQuery%20%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90%EF%BC%881%EF%BC%89&uri=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-analysis-code-1%2F?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/qq.png" title="QQ书签" alt="QQ书签" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-analysis-code-1%2F&title=jQuery%20%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90%EF%BC%881%EF%BC%89?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban.png" title="豆瓣" alt="豆瓣" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-analysis-code-1%2F&title=jQuery%20%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90%EF%BC%881%EF%BC%89&n=1?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban9.png" title="豆瓣九点" alt="豆瓣九点" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-analysis-code-1%2F&amp;title=jQuery%20%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90%EF%BC%881%EF%BC%89?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.zhangjingwei.com/feed/?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/rss.png" title="RSS" alt="RSS" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="mailto:?subject=jQuery%20%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90%EF%BC%881%EF%BC%89&amp;body=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-analysis-code-1%2F" title="email"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/email_link.png" title="email" alt="email" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://www.zhangjingwei.com/archives/jquery-analysis-code-1/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery Autocomplete plugin</title>
		<link>http://www.zhangjingwei.com/archives/jquery-autocomplete/</link>
		<comments>http://www.zhangjingwei.com/archives/jquery-autocomplete/#comments</comments>
		<pubDate>Tue, 13 Jul 2010 10:44:58 +0000</pubDate>
		<dc:creator>张经纬</dc:creator>
				<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://www.zhangjingwei.com/?p=1504</guid>
		<description><![CDATA[写的比较满意，拿出来分享，欢迎大家找BUG。 相对于同类插件，他的特色有3点。 1、可缓存查询结果 （二次查询速度快） 2、非keyup监听方式 （解决某些系统/情况下无法触发keyxxx事件的问题） 3、简洁的参数 （好看？） 插件性能尚好，我的E6500、2G内存，30秒内一共发生了4469次调用，耗时94.65毫秒；百度的是2432次调用，80.24毫秒。 接近1倍的调用是jQuery中的问题，但具体原因我还没弄明白，如果那位兄弟知道的还请不吝赐教。 调用方法 jQuery&#40;&#34;#kw&#34;&#41;.suggest&#40;&#123; url:siteConfig.suggestionUrl, params:&#123; kw:function&#40;&#41;&#123;return jQuery&#40;&#34;#kw&#34;&#41;.val&#40;&#41;&#125;, n:10 &#125; &#125;&#41;; 参数url：baseUrl,例如http://www.target.com/search.php 参数params：url的后缀列表，范例中拼合的url为：http://www.target.com/search.php?kw=xxx&#38;n=10&#38;callback=?（默认加入callback） 参数delay：输入间隔时间，主要是为了降低负载，数值越大，负载越低，查询速度越慢。 参数cache：是否实用缓存，默认为true，例如当搜索“test”时，程序会将对应的查询结果缓存，当第二次搜索test时直接从缓存中读取。 参数formId：必须填写，form表单的id 参数callback：是否使用jsonp以便处理跨域问题。 点击下载源码 加入书签:]]></description>
			<content:encoded><![CDATA[<p>写的比较满意，拿出来分享，欢迎大家找BUG。</p>
<p>相对于同类插件，他的特色有3点。<br />
1、可缓存查询结果 （二次查询速度快）<br />
2、非keyup监听方式 （解决某些系统/情况下无法触发keyxxx事件的问题）<br />
3、简洁的参数 （好看？）</p>
<p>插件性能尚好，我的E6500、2G内存，30秒内一共发生了4469次调用，耗时94.65毫秒；百度的是2432次调用，80.24毫秒。</p>
<p>接近1倍的调用是jQuery中的问题，但具体原因我还没弄明白，如果那位兄弟知道的还请不吝赐教。</p>
<p>调用方法</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#kw&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">suggest</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
	url<span style="color: #339933;">:</span>siteConfig.<span style="color: #660066;">suggestionUrl</span><span style="color: #339933;">,</span>
	params<span style="color: #339933;">:</span><span style="color: #009900;">&#123;</span>
		kw<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span> jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#kw&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
		n<span style="color: #339933;">:</span><span style="color: #CC0000;">10</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>参数url：baseUrl,例如http://www.target.com/search.php<br />
参数params：url的后缀列表，范例中拼合的url为：http://www.target.com/search.php?kw=xxx&amp;n=10&amp;callback=?（默认加入callback）<br />
参数delay：输入间隔时间，主要是为了降低负载，数值越大，负载越低，查询速度越慢。<br />
参数cache：是否实用缓存，默认为true，例如当搜索“test”时，程序会将对应的查询结果缓存，当第二次搜索test时直接从缓存中读取。<br />
参数formId：必须填写，form表单的id<br />
参数callback：是否使用jsonp以便处理跨域问题。</p>
<p><a href="http://code.google.com/p/j-autocomplete/downloads/list"><br />
点击下载源码</a></p>



加入书签:


	<a rel="nofollow" class="thickbox" href="http://shuqian.qq.com/post?jumpback=1&title=jQuery%20Autocomplete%20plugin%20&uri=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-autocomplete%2F?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/qq.png" title="QQ书签" alt="QQ书签" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-autocomplete%2F&title=jQuery%20Autocomplete%20plugin%20?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban.png" title="豆瓣" alt="豆瓣" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-autocomplete%2F&title=jQuery%20Autocomplete%20plugin%20&n=1?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban9.png" title="豆瓣九点" alt="豆瓣九点" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-autocomplete%2F&amp;title=jQuery%20Autocomplete%20plugin%20?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.zhangjingwei.com/feed/?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/rss.png" title="RSS" alt="RSS" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="mailto:?subject=jQuery%20Autocomplete%20plugin%20&amp;body=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-autocomplete%2F" title="email"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/email_link.png" title="email" alt="email" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://www.zhangjingwei.com/archives/jquery-autocomplete/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>利用控制器载入对应脚本</title>
		<link>http://www.zhangjingwei.com/archives/load-mod/</link>
		<comments>http://www.zhangjingwei.com/archives/load-mod/#comments</comments>
		<pubDate>Fri, 18 Jun 2010 08:50:35 +0000</pubDate>
		<dc:creator>张经纬</dc:creator>
				<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://www.zhangjingwei.com/?p=1487</guid>
		<description><![CDATA[因项目开发需要，须将每一个方法都独立成单独的js文件以便载入、维护，所以，必须需要有一个控制器用于载入这些方法。 我的思路是，在编写独立模块的时候，注意将这些方法集成到$.tools对象中，接下来，在页面中，调用控制器载入模块，并在载入完成后判断$.tools中对象的个数与预定义载入的模块数是否相等，如不等继续等待，如相等执行回调函数。 /* * LOADScript Mod * Params url1,url2,url3,url4,fn */ jQuery.extend&#40;&#123; loadMod: function&#40;&#41;&#123; var argleng = arguments.length, arglast = arguments&#91;argleng-1&#93;, fn = false, queue = &#91;&#93;, checknum = 0, timer = null ; // init if&#40;jQuery.isFunction&#40;arglast&#41;&#41;&#123;argleng = argleng -1;fn=arglast;&#125; for &#40;var i=0;i&#60;argleng ;i++&#41;&#123; queue.push&#40;arguments&#91;i&#93;&#41;; &#125; &#160; // getscript jQuery.each&#40;queue,function&#40;i,o&#41;&#123; jQuery.getScript&#40;o&#41;; &#125;&#41;; &#160; // check load [...]]]></description>
			<content:encoded><![CDATA[<p>因项目开发需要，须将每一个方法都独立成单独的js文件以便载入、维护，所以，必须需要有一个控制器用于载入这些方法。</p>
<p>我的思路是，在编写独立模块的时候，注意将这些方法集成到$.tools对象中，接下来，在页面中，调用控制器载入模块，并在载入完成后判断$.tools中对象的个数与预定义载入的模块数是否相等，如不等继续等待，如相等执行回调函数。</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/*
* LOADScript Mod
* Params url1,url2,url3,url4,fn
*/</span>
jQuery.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
	loadMod<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> argleng <span style="color: #339933;">=</span> arguments.<span style="color: #660066;">length</span><span style="color: #339933;">,</span>
				arglast <span style="color: #339933;">=</span> arguments<span style="color: #009900;">&#91;</span>argleng<span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
				fn <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span>
				queue <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
				checknum <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>
				timer <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">null</span>
		<span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">// init</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>jQuery.<span style="color: #660066;">isFunction</span><span style="color: #009900;">&#40;</span>arglast<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>argleng <span style="color: #339933;">=</span> argleng <span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>fn<span style="color: #339933;">=</span>arglast<span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>i<span style="color: #339933;">&lt;</span>argleng <span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			queue.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span>arguments<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// getscript</span>
		jQuery.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span>queue<span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">,</span>o<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			jQuery.<span style="color: #660066;">getScript</span><span style="color: #009900;">&#40;</span>o<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// check load ready?</span>
		loadReady<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">function</span> loadReady<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>jQuery.<span style="color: #660066;">tools</span> <span style="color: #339933;">!=</span> undefined<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				checknum <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
				$.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span>jQuery.<span style="color: #660066;">tools</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>i<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;">if</span><span style="color: #009900;">&#40;</span>jQuery.<span style="color: #660066;">isPlainObject</span><span style="color: #009900;">&#40;</span>n<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>checknum<span style="color: #339933;">++;</span><span style="color: #009900;">&#125;</span>
				<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>checknum <span style="color: #339933;">!=</span> argleng<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
					clearTimeout<span style="color: #009900;">&#40;</span>timer<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					timer <span style="color: #339933;">=</span> setTimeout<span style="color: #009900;">&#40;</span>loadReady<span style="color: #339933;">,</span> <span style="color: #CC0000;">100</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span>
					<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!!</span>fn<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>fn.<span style="color: #660066;">call</span><span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">jQuery</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span>
			<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// 使用方法</span>
$.<span style="color: #660066;">loadMod</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'a.js'</span><span style="color: #339933;">,</span><span style="color: #3366CC;">'b.js'</span><span style="color: #339933;">,</span><span style="color: #3366CC;">'c.js'</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
  <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'success!'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p></argleng></pre>



加入书签:


	<a rel="nofollow" class="thickbox" href="http://shuqian.qq.com/post?jumpback=1&title=%E5%88%A9%E7%94%A8%E6%8E%A7%E5%88%B6%E5%99%A8%E8%BD%BD%E5%85%A5%E5%AF%B9%E5%BA%94%E8%84%9A%E6%9C%AC&uri=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fload-mod%2F?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/qq.png" title="QQ书签" alt="QQ书签" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fload-mod%2F&title=%E5%88%A9%E7%94%A8%E6%8E%A7%E5%88%B6%E5%99%A8%E8%BD%BD%E5%85%A5%E5%AF%B9%E5%BA%94%E8%84%9A%E6%9C%AC?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban.png" title="豆瓣" alt="豆瓣" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fload-mod%2F&title=%E5%88%A9%E7%94%A8%E6%8E%A7%E5%88%B6%E5%99%A8%E8%BD%BD%E5%85%A5%E5%AF%B9%E5%BA%94%E8%84%9A%E6%9C%AC&n=1?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban9.png" title="豆瓣九点" alt="豆瓣九点" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fload-mod%2F&amp;title=%E5%88%A9%E7%94%A8%E6%8E%A7%E5%88%B6%E5%99%A8%E8%BD%BD%E5%85%A5%E5%AF%B9%E5%BA%94%E8%84%9A%E6%9C%AC?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.zhangjingwei.com/feed/?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/rss.png" title="RSS" alt="RSS" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="mailto:?subject=%E5%88%A9%E7%94%A8%E6%8E%A7%E5%88%B6%E5%99%A8%E8%BD%BD%E5%85%A5%E5%AF%B9%E5%BA%94%E8%84%9A%E6%9C%AC&amp;body=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fload-mod%2F" title="email"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/email_link.png" title="email" alt="email" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://www.zhangjingwei.com/archives/load-mod/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery Tab plugin</title>
		<link>http://www.zhangjingwei.com/archives/jquery-tab-plugins/</link>
		<comments>http://www.zhangjingwei.com/archives/jquery-tab-plugins/#comments</comments>
		<pubDate>Sun, 13 Jun 2010 15:24:23 +0000</pubDate>
		<dc:creator>张经纬</dc:creator>
				<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://www.zhangjingwei.com/?p=1473</guid>
		<description><![CDATA[因为觉得网上的都太麻烦，于是自己写了一个简单的，只是做tab的切换。 演示地址：http://www.zhangjingwei.com/demo/tab/ 下载地址：源代码 加入书签:]]></description>
			<content:encoded><![CDATA[<p>因为觉得网上的都太麻烦，于是自己写了一个简单的，只是做tab的切换。</p>
<p>演示地址：<a href="http://www.zhangjingwei.com/demo/tab/">http://www.zhangjingwei.com/demo/tab/</a></p>
<p>下载地址：<a href="http://www.zhangjingwei.com/wp-content/uploads/2010/06/tab1.js">源代码</a></p>



加入书签:


	<a rel="nofollow" class="thickbox" href="http://shuqian.qq.com/post?jumpback=1&title=jQuery%20Tab%20plugin&uri=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-tab-plugins%2F?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/qq.png" title="QQ书签" alt="QQ书签" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-tab-plugins%2F&title=jQuery%20Tab%20plugin?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban.png" title="豆瓣" alt="豆瓣" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-tab-plugins%2F&title=jQuery%20Tab%20plugin&n=1?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban9.png" title="豆瓣九点" alt="豆瓣九点" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-tab-plugins%2F&amp;title=jQuery%20Tab%20plugin?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.zhangjingwei.com/feed/?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/rss.png" title="RSS" alt="RSS" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="mailto:?subject=jQuery%20Tab%20plugin&amp;body=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-tab-plugins%2F" title="email"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/email_link.png" title="email" alt="email" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://www.zhangjingwei.com/archives/jquery-tab-plugins/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>纯数字不重复排列的另类方法</title>
		<link>http://www.zhangjingwei.com/archives/%e7%ba%af%e6%95%b0%e5%ad%97%e4%b8%8d%e9%87%8d%e5%a4%8d%e6%8e%92%e5%88%97%e7%9a%84%e7%8c%a5%e7%90%90%e6%96%b9%e6%b3%95/</link>
		<comments>http://www.zhangjingwei.com/archives/%e7%ba%af%e6%95%b0%e5%ad%97%e4%b8%8d%e9%87%8d%e5%a4%8d%e6%8e%92%e5%88%97%e7%9a%84%e7%8c%a5%e7%90%90%e6%96%b9%e6%b3%95/#comments</comments>
		<pubDate>Sun, 29 Nov 2009 06:14:19 +0000</pubDate>
		<dc:creator>张经纬</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[不重复]]></category>
		<category><![CDATA[排序]]></category>

		<guid isPermaLink="false">http://www.zhangjingwei.com/?p=1260</guid>
		<description><![CDATA[方法不是主流的。 有一组数据，大概10万个左右，每一单位的值不会大于30000，要求按照由大到小的顺序不重复输出。 参考无忧cosin的方法后（多谢），整理的方法如下 //一段随机数，模拟用 var baseNum=&#91;&#93;; for&#40;var i= 0;i&#60; 100000 ;i++&#41;&#123; random = Math.floor&#40;Math.random&#40;&#41;*i&#41;; baseNum.push&#40;random&#41;; &#125; var baseNumLen = baseNum.length; var numSubscript = &#91;&#93;; //将数字作为下标和值放到另一数组内，实现排序和不重复 for &#40;var i =0;i&#60;basenumlen ;i++&#41;&#123; if&#40;numSubscript&#91;baseNum&#91;i&#93;&#93; == undefined&#41;numSubscript&#91;baseNum&#91;i&#93;&#93;=baseNum&#91;i&#93;; &#125; //去除空的值并颠倒一下 baseNum = numSubscript.join&#40;','&#41;.replace&#40;/([,]+)/ig, ','&#41;.split&#40;','&#41;.reverse&#40;&#41;; document.write&#40;baseNum&#41;; 题外： 假如数组是自己生成，客服果果写的这段代码就很好了。（牛逼） var baseNum=&#91;&#93;,tmp=&#123;&#125;,v; for&#40;var i= 0;i&#60; 100000 ;i++&#41;&#123; tmp&#91;Math.floor&#40;Math.random&#40;&#41;*i&#41;&#93;=true; &#125;; i=0; for &#40;var k [...]]]></description>
			<content:encoded><![CDATA[<p>方法不是主流的。</p>
<p>有一组数据，大概10万个左右，每一单位的值不会大于30000，要求按照由大到小的顺序不重复输出。</p>
<p>参考无忧cosin的方法后（多谢），整理的方法如下</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//一段随机数，模拟用</span>
<span style="color: #003366; font-weight: bold;">var</span> baseNum<span style="color: #339933;">=</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>i<span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">100000</span> <span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
 random <span style="color: #339933;">=</span> Math.<span style="color: #660066;">floor</span><span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">random</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>i<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 baseNum.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span>random<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #003366; font-weight: bold;">var</span> baseNumLen <span style="color: #339933;">=</span> baseNum.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> numSubscript <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//将数字作为下标和值放到另一数组内，实现排序和不重复</span>
<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>i<span style="color: #339933;">&lt;</span>basenumlen <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: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>numSubscript<span style="color: #009900;">&#91;</span>baseNum<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">==</span> undefined<span style="color: #009900;">&#41;</span>numSubscript<span style="color: #009900;">&#91;</span>baseNum<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">=</span>baseNum<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #006600; font-style: italic;">//去除空的值并颠倒一下</span>
baseNum <span style="color: #339933;">=</span> numSubscript.<span style="color: #660066;">join</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">','</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/([,]+)/ig</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">','</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">','</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">reverse</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span>baseNum<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

</pre>
<pre>题外：
假如数组是自己生成，客服果果写的这段代码就很好了。（牛逼）</pre>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> baseNum<span style="color: #339933;">=</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>tmp<span style="color: #339933;">=</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>v<span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>i<span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">100000</span> <span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
        tmp<span style="color: #009900;">&#91;</span>Math.<span style="color: #660066;">floor</span><span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">random</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>i<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> k <span style="color: #000066; font-weight: bold;">in</span> tmp<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
        baseNum<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">=</span>k<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
baseNum.<span style="color: #660066;">sort</span><span style="color: #009900;">&#40;</span>fn<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">function</span> fn<span style="color: #009900;">&#40;</span>x<span style="color: #339933;">,</span>y<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">return</span> x<span style="color: #339933;">-</span>y<span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">?</span><span style="color: #CC0000;">1</span><span style="color: #339933;">:-</span><span style="color: #CC0000;">1</span>
<span style="color: #009900;">&#125;</span>
document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #009900;">&#40;</span>baseNum.<span style="color: #660066;">join</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

</pre>



加入书签:


	<a rel="nofollow" class="thickbox" href="http://shuqian.qq.com/post?jumpback=1&title=%E7%BA%AF%E6%95%B0%E5%AD%97%E4%B8%8D%E9%87%8D%E5%A4%8D%E6%8E%92%E5%88%97%E7%9A%84%E5%8F%A6%E7%B1%BB%E6%96%B9%E6%B3%95&uri=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2F%25e7%25ba%25af%25e6%2595%25b0%25e5%25ad%2597%25e4%25b8%258d%25e9%2587%258d%25e5%25a4%258d%25e6%258e%2592%25e5%2588%2597%25e7%259a%2584%25e7%258c%25a5%25e7%2590%2590%25e6%2596%25b9%25e6%25b3%2595%2F?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/qq.png" title="QQ书签" alt="QQ书签" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2F%25e7%25ba%25af%25e6%2595%25b0%25e5%25ad%2597%25e4%25b8%258d%25e9%2587%258d%25e5%25a4%258d%25e6%258e%2592%25e5%2588%2597%25e7%259a%2584%25e7%258c%25a5%25e7%2590%2590%25e6%2596%25b9%25e6%25b3%2595%2F&title=%E7%BA%AF%E6%95%B0%E5%AD%97%E4%B8%8D%E9%87%8D%E5%A4%8D%E6%8E%92%E5%88%97%E7%9A%84%E5%8F%A6%E7%B1%BB%E6%96%B9%E6%B3%95?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban.png" title="豆瓣" alt="豆瓣" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2F%25e7%25ba%25af%25e6%2595%25b0%25e5%25ad%2597%25e4%25b8%258d%25e9%2587%258d%25e5%25a4%258d%25e6%258e%2592%25e5%2588%2597%25e7%259a%2584%25e7%258c%25a5%25e7%2590%2590%25e6%2596%25b9%25e6%25b3%2595%2F&title=%E7%BA%AF%E6%95%B0%E5%AD%97%E4%B8%8D%E9%87%8D%E5%A4%8D%E6%8E%92%E5%88%97%E7%9A%84%E5%8F%A6%E7%B1%BB%E6%96%B9%E6%B3%95&n=1?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban9.png" title="豆瓣九点" alt="豆瓣九点" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2F%25e7%25ba%25af%25e6%2595%25b0%25e5%25ad%2597%25e4%25b8%258d%25e9%2587%258d%25e5%25a4%258d%25e6%258e%2592%25e5%2588%2597%25e7%259a%2584%25e7%258c%25a5%25e7%2590%2590%25e6%2596%25b9%25e6%25b3%2595%2F&amp;title=%E7%BA%AF%E6%95%B0%E5%AD%97%E4%B8%8D%E9%87%8D%E5%A4%8D%E6%8E%92%E5%88%97%E7%9A%84%E5%8F%A6%E7%B1%BB%E6%96%B9%E6%B3%95?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.zhangjingwei.com/feed/?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/rss.png" title="RSS" alt="RSS" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="mailto:?subject=%E7%BA%AF%E6%95%B0%E5%AD%97%E4%B8%8D%E9%87%8D%E5%A4%8D%E6%8E%92%E5%88%97%E7%9A%84%E5%8F%A6%E7%B1%BB%E6%96%B9%E6%B3%95&amp;body=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2F%25e7%25ba%25af%25e6%2595%25b0%25e5%25ad%2597%25e4%25b8%258d%25e9%2587%258d%25e5%25a4%258d%25e6%258e%2592%25e5%2588%2597%25e7%259a%2584%25e7%258c%25a5%25e7%2590%2590%25e6%2596%25b9%25e6%25b3%2595%2F" title="email"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/email_link.png" title="email" alt="email" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://www.zhangjingwei.com/archives/%e7%ba%af%e6%95%b0%e5%ad%97%e4%b8%8d%e9%87%8d%e5%a4%8d%e6%8e%92%e5%88%97%e7%9a%84%e7%8c%a5%e7%90%90%e6%96%b9%e6%b3%95/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery Select(单选) 模拟插件 V1.3.6</title>
		<link>http://www.zhangjingwei.com/archives/jquery-select%e5%8d%95%e9%80%89-%e6%a8%a1%e6%8b%9f%e6%8f%92%e4%bb%b6-v1-3-6/</link>
		<comments>http://www.zhangjingwei.com/archives/jquery-select%e5%8d%95%e9%80%89-%e6%a8%a1%e6%8b%9f%e6%8f%92%e4%bb%b6-v1-3-6/#comments</comments>
		<pubDate>Sat, 14 Nov 2009 12:50:24 +0000</pubDate>
		<dc:creator>张经纬</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[select]]></category>

		<guid isPermaLink="false">http://www.zhangjingwei.com/?p=1255</guid>
		<description><![CDATA[a、增加了onchange事件。（谢谢fjgysai） b、可以支持方法连缀了。 c、修正opera下的笔误。 d、可支持jQuery的选择器了 下载地址：http://www.zhangjingwei.com/demo/jQuery.Select/index.html 您可以自由的使用这个插件在任何项目上。（商业、非商业） 希望您可以补充完善这个插件。 加入书签:]]></description>
			<content:encoded><![CDATA[<p>a、增加了onchange事件。（谢谢fjgysai）</p>
<p>b、可以支持方法连缀了。</p>
<p>c、修正opera下的笔误。</p>
<p>d、可支持jQuery的选择器了</p>
<p>下载地址：<a href="http://www.zhangjingwei.com/demo/jQuery.Select/index.html" target="_blank">http://www.zhangjingwei.com/demo/jQuery.Select/index.html</a></p>
<p><em>您可以自由的使用这个插件在任何项目上。（商业、非商业）<br />
希望您可以补充完善这个插件。</em></p>



加入书签:


	<a rel="nofollow" class="thickbox" href="http://shuqian.qq.com/post?jumpback=1&title=jQuery%20Select%28%E5%8D%95%E9%80%89%29%20%E6%A8%A1%E6%8B%9F%E6%8F%92%E4%BB%B6%20V1.3.6&uri=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-select%25e5%258d%2595%25e9%2580%2589-%25e6%25a8%25a1%25e6%258b%259f%25e6%258f%2592%25e4%25bb%25b6-v1-3-6%2F?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/qq.png" title="QQ书签" alt="QQ书签" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-select%25e5%258d%2595%25e9%2580%2589-%25e6%25a8%25a1%25e6%258b%259f%25e6%258f%2592%25e4%25bb%25b6-v1-3-6%2F&title=jQuery%20Select%28%E5%8D%95%E9%80%89%29%20%E6%A8%A1%E6%8B%9F%E6%8F%92%E4%BB%B6%20V1.3.6?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban.png" title="豆瓣" alt="豆瓣" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-select%25e5%258d%2595%25e9%2580%2589-%25e6%25a8%25a1%25e6%258b%259f%25e6%258f%2592%25e4%25bb%25b6-v1-3-6%2F&title=jQuery%20Select%28%E5%8D%95%E9%80%89%29%20%E6%A8%A1%E6%8B%9F%E6%8F%92%E4%BB%B6%20V1.3.6&n=1?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban9.png" title="豆瓣九点" alt="豆瓣九点" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-select%25e5%258d%2595%25e9%2580%2589-%25e6%25a8%25a1%25e6%258b%259f%25e6%258f%2592%25e4%25bb%25b6-v1-3-6%2F&amp;title=jQuery%20Select%28%E5%8D%95%E9%80%89%29%20%E6%A8%A1%E6%8B%9F%E6%8F%92%E4%BB%B6%20V1.3.6?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.zhangjingwei.com/feed/?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/rss.png" title="RSS" alt="RSS" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="mailto:?subject=jQuery%20Select%28%E5%8D%95%E9%80%89%29%20%E6%A8%A1%E6%8B%9F%E6%8F%92%E4%BB%B6%20V1.3.6&amp;body=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-select%25e5%258d%2595%25e9%2580%2589-%25e6%25a8%25a1%25e6%258b%259f%25e6%258f%2592%25e4%25bb%25b6-v1-3-6%2F" title="email"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/email_link.png" title="email" alt="email" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://www.zhangjingwei.com/archives/jquery-select%e5%8d%95%e9%80%89-%e6%a8%a1%e6%8b%9f%e6%8f%92%e4%bb%b6-v1-3-6/feed/</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
		<item>
		<title>Date对象格式化方法</title>
		<link>http://www.zhangjingwei.com/archives/date%e5%af%b9%e8%b1%a1%e6%a0%bc%e5%bc%8f%e5%8c%96%e6%96%b9%e6%b3%95/</link>
		<comments>http://www.zhangjingwei.com/archives/date%e5%af%b9%e8%b1%a1%e6%a0%bc%e5%bc%8f%e5%8c%96%e6%96%b9%e6%b3%95/#comments</comments>
		<pubDate>Tue, 03 Nov 2009 02:03:05 +0000</pubDate>
		<dc:creator>张经纬</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[data]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.zhangjingwei.com/?p=1251</guid>
		<description><![CDATA[/* * Date Format 1.2.3 * (c) 2007-2009 Steven Levithan * MIT license * * Includes enhancements by Scott Trenda * and Kris Kowal * * Accepts a date, a mask, or a date and a mask. * Returns a formatted version of the given date. * The date defaults to the current date/time. * [...]]]></description>
			<content:encoded><![CDATA[
<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/*
 * Date Format 1.2.3
 * (c) 2007-2009 Steven Levithan
 * MIT license
 *
 * Includes enhancements by Scott Trenda
 * and Kris Kowal
 *
 * Accepts a date, a mask, or a date and a mask.
 * Returns a formatted version of the given date.
 * The date defaults to the current date/time.
 * The mask defaults to dateFormat.masks.default.
 */</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> dateFormat <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span>	token <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|&quot;[^&quot;]*&quot;|'[^']*'/g</span><span style="color: #339933;">,</span>
		timezone <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g</span><span style="color: #339933;">,</span>
		timezoneClip <span style="color: #339933;">=</span> <span style="color: #009966; font-style: italic;">/[^-+\dA-Z]/g</span><span style="color: #339933;">,</span>
		pad <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>val<span style="color: #339933;">,</span> len<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			val <span style="color: #339933;">=</span> String<span style="color: #009900;">&#40;</span>val<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			len <span style="color: #339933;">=</span> len <span style="color: #339933;">||</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">while</span> <span style="color: #009900;">&#40;</span>val.<span style="color: #660066;">length</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> len<span style="color: #009900;">&#41;</span> val <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;0&quot;</span> <span style="color: #339933;">+</span> val<span style="color: #339933;">;</span> 			<span style="color: #000066; font-weight: bold;">return</span> val<span style="color: #339933;">;</span> 		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span> 	<span style="color: #006600; font-style: italic;">// Regexes and supporting functions are cached through closure 	return function (date, mask, utc) { 		var dF = dateFormat; 		// You can't provide utc if you skip other args (use the &quot;UTC:&quot; mask prefix) 		if (arguments.length == 1 &amp;amp;&amp;amp; Object.prototype.toString.call(date) == &quot;[object String]&quot; &amp;amp;&amp;amp; !/\d/.test(date)) { 			mask = date; 			date = undefined; 		} 		// Passing date through Date applies Date.parse, if necessary 		date = date ? new Date(date) : new Date; 		if (isNaN(date)) throw SyntaxError(&quot;invalid date&quot;); 		mask = String(dF.masks[mask] || mask || dF.masks[&quot;default&quot;]); 		// Allow setting the utc argument via the mask 		if (mask.slice(0, 4) == &quot;UTC:&quot;) { 			mask = mask.slice(4); 			utc = true; 		} 		var	_ = utc ? &quot;getUTC&quot; : &quot;get&quot;, 			d = date[_ + &quot;Date&quot;](), 			D = date[_ + &quot;Day&quot;](), 			m = date[_ + &quot;Month&quot;](), 			y = date[_ + &quot;FullYear&quot;](), 			H = date[_ + &quot;Hours&quot;](), 			M = date[_ + &quot;Minutes&quot;](), 			s = date[_ + &quot;Seconds&quot;](), 			L = date[_ + &quot;Milliseconds&quot;](), 			o = utc ? 0 : date.getTimezoneOffset(), 			flags = { 				d:    d, 				dd:   pad(d), 				ddd:  dF.i18n.dayNames[D], 				dddd: dF.i18n.dayNames[D + 7], 				m:    m + 1, 				mm:   pad(m + 1), 				mmm:  dF.i18n.monthNames[m], 				mmmm: dF.i18n.monthNames[m + 12], 				yy:   String(y).slice(2), 				yyyy: y, 				h:    H % 12 || 12, 				hh:   pad(H % 12 || 12), 				H:    H, 				HH:   pad(H), 				M:    M, 				MM:   pad(M), 				s:    s, 				ss:   pad(s), 				l:    pad(L, 3), 				L:    pad(L &amp;gt; 99 ? Math.round(L / 10) : L),</span>
				t<span style="color: #339933;">:</span>    H <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">12</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">&quot;a&quot;</span>  <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;p&quot;</span><span style="color: #339933;">,</span>
				tt<span style="color: #339933;">:</span>   H <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">12</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">&quot;am&quot;</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;pm&quot;</span><span style="color: #339933;">,</span>
				T<span style="color: #339933;">:</span>    H <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">12</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">&quot;A&quot;</span>  <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;P&quot;</span><span style="color: #339933;">,</span>
				TT<span style="color: #339933;">:</span>   H <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #CC0000;">12</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">&quot;AM&quot;</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;PM&quot;</span><span style="color: #339933;">,</span> 				Z<span style="color: #339933;">:</span>    utc <span style="color: #339933;">?</span> <span style="color: #3366CC;">&quot;UTC&quot;</span> <span style="color: #339933;">:</span> <span style="color: #009900;">&#40;</span>String<span style="color: #009900;">&#40;</span>date<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">match</span><span style="color: #009900;">&#40;</span>timezone<span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">pop</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span>timezoneClip<span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> 				o<span style="color: #339933;">:</span>    <span style="color: #009900;">&#40;</span>o <span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">&quot;-&quot;</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;+&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> pad<span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">floor</span><span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">abs</span><span style="color: #009900;">&#40;</span>o<span style="color: #009900;">&#41;</span> <span style="color: #339933;">/</span> <span style="color: #CC0000;">60</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">100</span> <span style="color: #339933;">+</span> Math.<span style="color: #660066;">abs</span><span style="color: #009900;">&#40;</span>o<span style="color: #009900;">&#41;</span> <span style="color: #339933;">%</span> <span style="color: #CC0000;">60</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">4</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
				S<span style="color: #339933;">:</span>    <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">&quot;th&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;st&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;nd&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;rd&quot;</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#91;</span>d <span style="color: #339933;">%</span> <span style="color: #CC0000;">10</span> <span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #CC0000;">3</span> <span style="color: #339933;">?</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">:</span> <span style="color: #009900;">&#40;</span>d <span style="color: #339933;">%</span> <span style="color: #CC0000;">100</span> <span style="color: #339933;">-</span> d <span style="color: #339933;">%</span> <span style="color: #CC0000;">10</span> <span style="color: #339933;">!=</span> <span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> d <span style="color: #339933;">%</span> <span style="color: #CC0000;">10</span><span style="color: #009900;">&#93;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">return</span> mask.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span>token<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>$<span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">return</span> $<span style="color: #CC0000;">0</span> <span style="color: #000066; font-weight: bold;">in</span> flags <span style="color: #339933;">?</span> flags<span style="color: #009900;">&#91;</span>$<span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">:</span> $0.<span style="color: #660066;">slice</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> $0.<span style="color: #660066;">length</span> <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// Some common format strings</span>
dateFormat.<span style="color: #660066;">masks</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #3366CC;">&quot;default&quot;</span><span style="color: #339933;">:</span>      <span style="color: #3366CC;">&quot;ddd mmm dd yyyy HH:MM:ss&quot;</span><span style="color: #339933;">,</span>
	shortDate<span style="color: #339933;">:</span>      <span style="color: #3366CC;">&quot;m/d/yy&quot;</span><span style="color: #339933;">,</span>
	mediumDate<span style="color: #339933;">:</span>     <span style="color: #3366CC;">&quot;mmm d, yyyy&quot;</span><span style="color: #339933;">,</span>
	longDate<span style="color: #339933;">:</span>       <span style="color: #3366CC;">&quot;mmmm d, yyyy&quot;</span><span style="color: #339933;">,</span>
	fullDate<span style="color: #339933;">:</span>       <span style="color: #3366CC;">&quot;dddd, mmmm d, yyyy&quot;</span><span style="color: #339933;">,</span>
	shortTime<span style="color: #339933;">:</span>      <span style="color: #3366CC;">&quot;h:MM TT&quot;</span><span style="color: #339933;">,</span>
	mediumTime<span style="color: #339933;">:</span>     <span style="color: #3366CC;">&quot;h:MM:ss TT&quot;</span><span style="color: #339933;">,</span>
	longTime<span style="color: #339933;">:</span>       <span style="color: #3366CC;">&quot;h:MM:ss TT Z&quot;</span><span style="color: #339933;">,</span>
	isoDate<span style="color: #339933;">:</span>        <span style="color: #3366CC;">&quot;yyyy-mm-dd&quot;</span><span style="color: #339933;">,</span>
	isoTime<span style="color: #339933;">:</span>        <span style="color: #3366CC;">&quot;HH:MM:ss&quot;</span><span style="color: #339933;">,</span>
	isoDateTime<span style="color: #339933;">:</span>    <span style="color: #3366CC;">&quot;yyyy-mm-dd'T'HH:MM:ss&quot;</span><span style="color: #339933;">,</span>
	isoUtcDateTime<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;UTC:yyyy-mm-dd'T'HH:MM:ss'Z'&quot;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// Internationalization strings</span>
dateFormat.<span style="color: #660066;">i18n</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
	dayNames<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span>
		<span style="color: #3366CC;">&quot;Sun&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Mon&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Tue&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Wed&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Thu&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Fri&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Sat&quot;</span><span style="color: #339933;">,</span>
		<span style="color: #3366CC;">&quot;Sunday&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Monday&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Tuesday&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Wednesday&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Thursday&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Friday&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Saturday&quot;</span>
	<span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
	monthNames<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span>
		<span style="color: #3366CC;">&quot;Jan&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Feb&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Mar&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Apr&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;May&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Jun&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Jul&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Aug&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Sep&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Oct&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Nov&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Dec&quot;</span><span style="color: #339933;">,</span>
		<span style="color: #3366CC;">&quot;January&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;February&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;March&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;April&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;May&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;June&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;July&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;August&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;September&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;October&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;November&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;December&quot;</span>
	<span style="color: #009900;">&#93;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// For convenience...</span>
Date.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">format</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>mask<span style="color: #339933;">,</span> utc<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">return</span> dateFormat<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> mask<span style="color: #339933;">,</span> utc<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></div></div>

<p><span id="more-1251"></span>用法：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> now <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Date<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
now.<span style="color: #660066;">format</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;m/dd/yy&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// Returns, e.g., 6/09/07</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// Can also be used as a standalone function</span>
dateFormat<span style="color: #009900;">&#40;</span>now<span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;dddd, mmmm dS, yyyy, h:MM:ss TT&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// Saturday, June 9th, 2007, 5:46:21 PM</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// You can use one of several named masks</span>
now.<span style="color: #660066;">format</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;isoDateTime&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// 2007-06-09T17:46:21</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// ...Or add your own</span>
dateFormat.<span style="color: #660066;">masks</span>.<span style="color: #660066;">hammerTime</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'HH:MM! &quot;Can<span style="color: #000099; font-weight: bold;">\'</span>t touch this!&quot;'</span><span style="color: #339933;">;</span>
now.<span style="color: #660066;">format</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;hammerTime&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// 17:46! Can't touch this!</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// When using the standalone dateFormat function,</span>
<span style="color: #006600; font-style: italic;">// you can also provide the date as a string</span>
dateFormat<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Jun 9 2007&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;fullDate&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// Saturday, June 9, 2007</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// Note that if you don't include the mask argument,</span>
<span style="color: #006600; font-style: italic;">// dateFormat.masks.default is used</span>
now.<span style="color: #660066;">format</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// Sat Jun 09 2007 17:46:21</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// And if you don't include the date argument,</span>
<span style="color: #006600; font-style: italic;">// the current date and time is used</span>
dateFormat<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// Sat Jun 09 2007 17:46:22</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// You can also skip the date argument (as long as your mask doesn't</span>
<span style="color: #006600; font-style: italic;">// contain any numbers), in which case the current date/time is used</span>
dateFormat<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;longTime&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// 5:46:22 PM EST</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// And finally, you can convert local time to UTC time. Either pass in</span>
<span style="color: #006600; font-style: italic;">// true as an additional argument (no argument skipping allowed in this case):</span>
dateFormat<span style="color: #009900;">&#40;</span>now<span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;longTime&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
now.<span style="color: #660066;">format</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;longTime&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// Both lines return, e.g., 10:46:21 PM UTC</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// ...Or add the prefix &quot;UTC:&quot; to your mask.</span>
now.<span style="color: #660066;">format</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;UTC:h:MM:ss TT Z&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// 10:46:21 PM UTC</span></pre></div></div>

<p> </p>
<table cellspacing="0" summary="Date Format mask metasequences">
<thead>
<tr>
<th>Mask</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>d</code></td>
<td>Day of the month as digits; no leading zero for single-digit days.</td>
</tr>
<tr class="altBg">
<td><code>dd</code></td>
<td>Day of the month as digits; leading zero for single-digit days.</td>
</tr>
<tr>
<td><code>ddd</code></td>
<td>Day of the week as a three-letter abbreviation.</td>
</tr>
<tr class="altBg">
<td><code>dddd</code></td>
<td>Day of the week as its full name.</td>
</tr>
<tr>
<td><code>m</code></td>
<td>Month as digits; no leading zero for single-digit months.</td>
</tr>
<tr class="altBg">
<td><code>mm</code></td>
<td>Month as digits; leading zero for single-digit months.</td>
</tr>
<tr>
<td><code>mmm</code></td>
<td>Month as a three-letter abbreviation.</td>
</tr>
<tr class="altBg">
<td><code>mmmm</code></td>
<td>Month as its full name.</td>
</tr>
<tr>
<td><code>yy</code></td>
<td>Year as last two digits; leading zero for years less than 10.</td>
</tr>
<tr class="altBg">
<td><code>yyyy</code></td>
<td>Year represented by four digits.</td>
</tr>
<tr>
<td><code>h</code></td>
<td>Hours; no leading zero for single-digit hours (12-hour clock).</td>
</tr>
<tr class="altBg">
<td><code>hh</code></td>
<td>Hours; leading zero for single-digit hours (12-hour clock).</td>
</tr>
<tr>
<td><code>H</code></td>
<td>Hours; no leading zero for single-digit hours (24-hour clock).</td>
</tr>
<tr class="altBg">
<td><code>HH</code></td>
<td>Hours; leading zero for single-digit hours (24-hour clock).</td>
</tr>
<tr>
<td><code>M</code></td>
<td>Minutes; no leading zero for single-digit minutes.<br />
				<span class="small">Uppercase M unlike CF <code>timeFormat</code>&#8216;s m to avoid conflict with months.</span></td>
</tr>
<tr class="altBg">
<td><code>MM</code></td>
<td>Minutes; leading zero for single-digit minutes.<br />
				<span class="small">Uppercase MM unlike CF <code>timeFormat</code>&#8216;s mm to avoid conflict with months.</span></td>
</tr>
<tr>
<td><code>s</code></td>
<td>Seconds; no leading zero for single-digit seconds.</td>
</tr>
<tr class="altBg">
<td><code>ss</code></td>
<td>Seconds; leading zero for single-digit seconds.</td>
</tr>
<tr>
<td><code>l</code> <em>or</em> <code>L</code></td>
<td>Milliseconds. <code>l</code> gives 3 digits. <code>L</code> gives 2 digits.</td>
</tr>
<tr class="altBg">
<td><code>t</code></td>
<td>Lowercase, single-character time marker string: <em>a</em> or <em>p</em>.<br />
				<span class="small">No equivalent in CF.</span></td>
</tr>
<tr>
<td><code>tt</code></td>
<td>Lowercase, two-character time marker string: <em>am</em> or <em>pm</em>.<br />
				<span class="small">No equivalent in CF.</span></td>
</tr>
<tr class="altBg">
<td><code>T</code></td>
<td>Uppercase, single-character time marker string: <em>A</em> or <em>P</em>.<br />
				<span class="small">Uppercase T unlike CF&#8217;s t to allow for user-specified casing.</span></td>
</tr>
<tr>
<td><code>TT</code></td>
<td>Uppercase, two-character time marker string: <em>AM</em> or <em>PM</em>.<br />
				<span class="small">Uppercase TT unlike CF&#8217;s tt to allow for user-specified casing.</span></td>
</tr>
<tr class="altBg">
<td><code>Z</code></td>
<td>US timezone abbreviation, e.g. <em>EST</em> or <em>MDT</em>. With non-US timezones or in the Opera browser, the GMT/UTC offset is returned, e.g. <em>GMT-0500</em><br />
				<span class="small">No equivalent in CF.</span></td>
</tr>
<tr>
<td><code>o</code></td>
<td>GMT/UTC timezone offset, e.g. <em>-0500</em> or <em>+0230</em>.<br />
				<span class="small">No equivalent in CF.</span></td>
</tr>
<tr class="altBg">
<td><code>S</code></td>
<td>The date&#8217;s ordinal suffix (<em>st</em>, <em>nd</em>, <em>rd</em>, or <em>th</em>). Works well with <code>d</code>.<br />
				<span class="small">No equivalent in CF.</span></td>
</tr>
<tr>
<td><code>'&hellip;'</code> <em>or</em> <code>"&hellip;"</code></td>
<td>Literal character sequence. Surrounding quotes are removed.<br />
				<span class="small">No equivalent in CF.</span></td>
</tr>
<tr class="altBg">
<td><code>UTC:</code></td>
<td>Must be the first four characters of the mask. Converts the date from local time to UTC/GMT/Zulu time before applying the mask. The &#8220;UTC:&#8221; prefix is removed.<br />
				<span class="small">No equivalent in CF.</span></td>
</tr>
</tbody>
</table>
<table cellspacing="0" summary="Date Format named masks">
<thead>
<tr>
<th>Name</th>
<th>Mask</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>default</td>
<td>ddd mmm dd yyyy HH:MM:ss</td>
<td>Sat Jun 09 2007 17:46:21</td>
</tr>
<tr class="altBg">
<td>shortDate</td>
<td>m/d/yy</td>
<td>6/9/07</td>
</tr>
<tr>
<td>mediumDate</td>
<td>mmm d, yyyy</td>
<td>Jun 9, 2007</td>
</tr>
<tr class="altBg">
<td>longDate</td>
<td>mmmm d, yyyy</td>
<td>June 9, 2007</td>
</tr>
<tr>
<td>fullDate</td>
<td>dddd, mmmm d, yyyy</td>
<td>Saturday, June 9, 2007</td>
</tr>
<tr class="altBg">
<td>shortTime</td>
<td>h:MM TT</td>
<td>5:46 PM</td>
</tr>
<tr>
<td>mediumTime</td>
<td>h:MM:ss TT</td>
<td>5:46:21 PM</td>
</tr>
<tr class="altBg">
<td>longTime</td>
<td>h:MM:ss TT Z</td>
<td>5:46:21 PM EST</td>
</tr>
<tr>
<td>isoDate</td>
<td>yyyy-mm-dd</td>
<td>2007-06-09</td>
</tr>
<tr class="altBg">
<td>isoTime</td>
<td>HH:MM:ss</td>
<td>17:46:21</td>
</tr>
<tr>
<td>isoDateTime</td>
<td>yyyy-mm-dd&#8217;T'HH:MM:ss</td>
<td>2007-06-09T17:46:21</td>
</tr>
<tr class="altBg">
<td>isoUtcDateTime</td>
<td>UTC:yyyy-mm-dd&#8217;T'HH:MM:ss&#8217;Z&#8217;</td>
<td>2007-06-09T22:46:21Z</td>
</tr>
</tbody>
</table>



加入书签:


	<a rel="nofollow" class="thickbox" href="http://shuqian.qq.com/post?jumpback=1&title=Date%E5%AF%B9%E8%B1%A1%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%96%B9%E6%B3%95&uri=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fdate%25e5%25af%25b9%25e8%25b1%25a1%25e6%25a0%25bc%25e5%25bc%258f%25e5%258c%2596%25e6%2596%25b9%25e6%25b3%2595%2F?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/qq.png" title="QQ书签" alt="QQ书签" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fdate%25e5%25af%25b9%25e8%25b1%25a1%25e6%25a0%25bc%25e5%25bc%258f%25e5%258c%2596%25e6%2596%25b9%25e6%25b3%2595%2F&title=Date%E5%AF%B9%E8%B1%A1%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%96%B9%E6%B3%95?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban.png" title="豆瓣" alt="豆瓣" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fdate%25e5%25af%25b9%25e8%25b1%25a1%25e6%25a0%25bc%25e5%25bc%258f%25e5%258c%2596%25e6%2596%25b9%25e6%25b3%2595%2F&title=Date%E5%AF%B9%E8%B1%A1%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%96%B9%E6%B3%95&n=1?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban9.png" title="豆瓣九点" alt="豆瓣九点" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fdate%25e5%25af%25b9%25e8%25b1%25a1%25e6%25a0%25bc%25e5%25bc%258f%25e5%258c%2596%25e6%2596%25b9%25e6%25b3%2595%2F&amp;title=Date%E5%AF%B9%E8%B1%A1%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%96%B9%E6%B3%95?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.zhangjingwei.com/feed/?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/rss.png" title="RSS" alt="RSS" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="mailto:?subject=Date%E5%AF%B9%E8%B1%A1%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%96%B9%E6%B3%95&amp;body=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fdate%25e5%25af%25b9%25e8%25b1%25a1%25e6%25a0%25bc%25e5%25bc%258f%25e5%258c%2596%25e6%2596%25b9%25e6%25b3%2595%2F" title="email"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/email_link.png" title="email" alt="email" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://www.zhangjingwei.com/archives/date%e5%af%b9%e8%b1%a1%e6%a0%bc%e5%bc%8f%e5%8c%96%e6%96%b9%e6%b3%95/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>禁止国外IP访问</title>
		<link>http://www.zhangjingwei.com/archives/%e7%a6%81%e6%ad%a2%e5%9b%bd%e5%a4%96ip%e8%ae%bf%e9%97%ae/</link>
		<comments>http://www.zhangjingwei.com/archives/%e7%a6%81%e6%ad%a2%e5%9b%bd%e5%a4%96ip%e8%ae%bf%e9%97%ae/#comments</comments>
		<pubDate>Sun, 18 Oct 2009 16:31:40 +0000</pubDate>
		<dc:creator>张经纬</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[禁止ip]]></category>

		<guid isPermaLink="false">http://www.zhangjingwei.com/?p=1203</guid>
		<description><![CDATA[在网上看到禁止国外IP访问代码，我晕了。难道不可以变通一下么？ var language = navigator.language&#124;&#124;navigator.browserLanguage; if &#40;language.toLowerCase&#40;&#41; === 'zh-cn'&#41;&#123; //code here &#125;else&#123; //other code &#125; 这是Js的代码，相信其他语言也是可以检测浏览器/OS使用语言的。 目的达到了，并且漏掉的虫子也不见得就比检测IP的多。 加入书签:]]></description>
			<content:encoded><![CDATA[<p>在网上看到<a href="http://bbs.blueidea.com/thread-2908939-1-1.html" target="_blank">禁止国外IP访问</a>代码，我晕了。难道不可以变通一下么？</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> language <span style="color: #339933;">=</span> navigator.<span style="color: #660066;">language</span><span style="color: #339933;">||</span>navigator.<span style="color: #660066;">browserLanguage</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>language.<span style="color: #660066;">toLowerCase</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">===</span> <span style="color: #3366CC;">'zh-cn'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">//code here</span>
<span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">//other code</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>这是Js的代码，相信其他语言也是可以检测浏览器/OS使用语言的。</p>
<p>目的达到了，并且漏掉的虫子也不见得就比检测IP的多。</p>



加入书签:


	<a rel="nofollow" class="thickbox" href="http://shuqian.qq.com/post?jumpback=1&title=%E7%A6%81%E6%AD%A2%E5%9B%BD%E5%A4%96IP%E8%AE%BF%E9%97%AE&uri=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2F%25e7%25a6%2581%25e6%25ad%25a2%25e5%259b%25bd%25e5%25a4%2596ip%25e8%25ae%25bf%25e9%2597%25ae%2F?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/qq.png" title="QQ书签" alt="QQ书签" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2F%25e7%25a6%2581%25e6%25ad%25a2%25e5%259b%25bd%25e5%25a4%2596ip%25e8%25ae%25bf%25e9%2597%25ae%2F&title=%E7%A6%81%E6%AD%A2%E5%9B%BD%E5%A4%96IP%E8%AE%BF%E9%97%AE?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban.png" title="豆瓣" alt="豆瓣" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2F%25e7%25a6%2581%25e6%25ad%25a2%25e5%259b%25bd%25e5%25a4%2596ip%25e8%25ae%25bf%25e9%2597%25ae%2F&title=%E7%A6%81%E6%AD%A2%E5%9B%BD%E5%A4%96IP%E8%AE%BF%E9%97%AE&n=1?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban9.png" title="豆瓣九点" alt="豆瓣九点" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2F%25e7%25a6%2581%25e6%25ad%25a2%25e5%259b%25bd%25e5%25a4%2596ip%25e8%25ae%25bf%25e9%2597%25ae%2F&amp;title=%E7%A6%81%E6%AD%A2%E5%9B%BD%E5%A4%96IP%E8%AE%BF%E9%97%AE?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.zhangjingwei.com/feed/?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/rss.png" title="RSS" alt="RSS" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="mailto:?subject=%E7%A6%81%E6%AD%A2%E5%9B%BD%E5%A4%96IP%E8%AE%BF%E9%97%AE&amp;body=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2F%25e7%25a6%2581%25e6%25ad%25a2%25e5%259b%25bd%25e5%25a4%2596ip%25e8%25ae%25bf%25e9%2597%25ae%2F" title="email"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/email_link.png" title="email" alt="email" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://www.zhangjingwei.com/archives/%e7%a6%81%e6%ad%a2%e5%9b%bd%e5%a4%96ip%e8%ae%bf%e9%97%ae/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>removeChild的障眼法</title>
		<link>http://www.zhangjingwei.com/archives/removechildlength/</link>
		<comments>http://www.zhangjingwei.com/archives/removechildlength/#comments</comments>
		<pubDate>Sun, 27 Sep 2009 07:44:00 +0000</pubDate>
		<dc:creator>张经纬</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[removeChild]]></category>

		<guid isPermaLink="false">http://www.zhangjingwei.com/?p=1189</guid>
		<description><![CDATA[有结构： &#60;ul id=&#34;demo&#34;&#62; &#60;li&#62;a&#60;/li&#62; &#60;li&#62;b&#60;/li&#62; &#60;li&#62;c&#60;/li&#62; &#60;/ul&#62; 如果运行代码1： var ul = document.getElementById&#40;'demo'&#41;; var liList = ul.getElementsByTagName&#40;'li'&#41;; for &#40;var i = 0; i &#60; = liList.length; i++&#41; &#123; ul.removeChild&#40;liList&#91;i&#93;&#41;; &#125; 如果和我一样被欺骗了，那么看看正确的代码就明白原因啦！ var ul = document.getElementById&#40;'demo'&#41;; var liList = ul.getElementsByTagName&#40;'li'&#41;; var lilength = liList.length; for &#40;var i = 0; i &#60; lilength; i++&#41; &#123; ul.removeChild&#40;liList&#91;0&#93;&#41;; &#125; 加入书签:]]></description>
			<content:encoded><![CDATA[<p>有结构：</p>

<div class="wp_syntax"><div class="code"><pre class="xhtml" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;demo&quot;</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>a<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>b<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>c<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span></pre></div></div>

<p>如果运行代码1：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> ul <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'demo'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> liList <span style="color: #339933;">=</span> ul.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'li'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> <span style="color: #339933;">=</span> liList.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    ul.<span style="color: #660066;">removeChild</span><span style="color: #009900;">&#40;</span>liList<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>如果和我一样被欺骗了，那么看看正确的代码就明白原因啦！</p>
</pre>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> ul <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'demo'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> liList <span style="color: #339933;">=</span> ul.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'li'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> lilength <span style="color: #339933;">=</span>  liList.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> lilength<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    ul.<span style="color: #660066;">removeChild</span><span style="color: #009900;">&#40;</span>liList<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

</pre>



加入书签:


	<a rel="nofollow" class="thickbox" href="http://shuqian.qq.com/post?jumpback=1&title=removeChild%E7%9A%84%E9%9A%9C%E7%9C%BC%E6%B3%95&uri=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fremovechildlength%2F?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/qq.png" title="QQ书签" alt="QQ书签" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fremovechildlength%2F&title=removeChild%E7%9A%84%E9%9A%9C%E7%9C%BC%E6%B3%95?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban.png" title="豆瓣" alt="豆瓣" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fremovechildlength%2F&title=removeChild%E7%9A%84%E9%9A%9C%E7%9C%BC%E6%B3%95&n=1?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban9.png" title="豆瓣九点" alt="豆瓣九点" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fremovechildlength%2F&amp;title=removeChild%E7%9A%84%E9%9A%9C%E7%9C%BC%E6%B3%95?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.zhangjingwei.com/feed/?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/rss.png" title="RSS" alt="RSS" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="mailto:?subject=removeChild%E7%9A%84%E9%9A%9C%E7%9C%BC%E6%B3%95&amp;body=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fremovechildlength%2F" title="email"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/email_link.png" title="email" alt="email" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://www.zhangjingwei.com/archives/removechildlength/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>jQuery Select(单选) 模拟插件 V1.3.5</title>
		<link>http://www.zhangjingwei.com/archives/jquery-select-v1-3-5/</link>
		<comments>http://www.zhangjingwei.com/archives/jquery-select-v1-3-5/#comments</comments>
		<pubDate>Sat, 29 Aug 2009 15:27:20 +0000</pubDate>
		<dc:creator>张经纬</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[select]]></category>

		<guid isPermaLink="false">http://www.zhangjingwei.com/?p=1139</guid>
		<description><![CDATA[08月29日更新 V1.3.5 a、修正safari下的样式问题 b、使用其他的方法生成select后面的下拉箭头 c、增加对鼠标滚轮的支持。 d、一些细节上的写法。 Demo：http://www.zhangjingwei.com/demo/jQuery.Select/index.html 您可以自由的使用这个开源项目在任何项目上。（商业、非商业） 希望您可以补充完善这个插件。   08年12月写的插件，好像有一些朋友在用，那个时候写的东西，现在看来写的很烂很烂，因为工作原因也没有时间去修改。 今天看到回复中的很多问题，兼并解决了一些，因为写的不好，所以各位使用者在遇到问题并修正后，还请直接回馈给我，我修改下。 插件勉强能用，多多包涵了，工作是在太忙了，3年了&#8230;. 加入书签:]]></description>
			<content:encoded><![CDATA[<p>08月29日更新 V1.3.5</p>
<p>a、修正safari下的样式问题<br />
b、使用其他的方法生成select后面的下拉箭头<br />
c、增加对鼠标滚轮的支持。<br />
d、一些细节上的写法。</p>
<p>Demo：<a href="http://www.zhangjingwei.com/demo/jQuery.Select/index.html" target="_blank">http://www.zhangjingwei.com/demo/jQuery.Select/index.html</a></p>
<p><em>您可以自由的使用这个开源项目在任何项目上。（商业、非商业）<br />
希望您可以补充完善这个插件。</em></p>
<p><em> </em></p>
<p>08年12月写的插件，好像有一些朋友在用，那个时候写的东西，现在看来写的很烂很烂，因为工作原因也没有时间去修改。<br />
今天看到回复中的很多问题，兼并解决了一些，因为写的不好，所以各位使用者在遇到问题并修正后，还请直接回馈给我，我修改下。</p>
<p>插件勉强能用，多多包涵了，工作是在太忙了，3年了&#8230;.</p>



加入书签:


	<a rel="nofollow" class="thickbox" href="http://shuqian.qq.com/post?jumpback=1&title=jQuery%20Select%28%E5%8D%95%E9%80%89%29%20%E6%A8%A1%E6%8B%9F%E6%8F%92%E4%BB%B6%20V1.3.5%20&uri=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-select-v1-3-5%2F?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/qq.png" title="QQ书签" alt="QQ书签" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-select-v1-3-5%2F&title=jQuery%20Select%28%E5%8D%95%E9%80%89%29%20%E6%A8%A1%E6%8B%9F%E6%8F%92%E4%BB%B6%20V1.3.5%20?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban.png" title="豆瓣" alt="豆瓣" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-select-v1-3-5%2F&title=jQuery%20Select%28%E5%8D%95%E9%80%89%29%20%E6%A8%A1%E6%8B%9F%E6%8F%92%E4%BB%B6%20V1.3.5%20&n=1?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban9.png" title="豆瓣九点" alt="豆瓣九点" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-select-v1-3-5%2F&amp;title=jQuery%20Select%28%E5%8D%95%E9%80%89%29%20%E6%A8%A1%E6%8B%9F%E6%8F%92%E4%BB%B6%20V1.3.5%20?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.zhangjingwei.com/feed/?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/rss.png" title="RSS" alt="RSS" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="mailto:?subject=jQuery%20Select%28%E5%8D%95%E9%80%89%29%20%E6%A8%A1%E6%8B%9F%E6%8F%92%E4%BB%B6%20V1.3.5%20&amp;body=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-select-v1-3-5%2F" title="email"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/email_link.png" title="email" alt="email" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://www.zhangjingwei.com/archives/jquery-select-v1-3-5/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>动态加载js</title>
		<link>http://www.zhangjingwei.com/archives/asynchronous-loading-js/</link>
		<comments>http://www.zhangjingwei.com/archives/asynchronous-loading-js/#comments</comments>
		<pubDate>Sun, 16 Aug 2009 16:20:57 +0000</pubDate>
		<dc:creator>张经纬</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[串行下载]]></category>
		<category><![CDATA[同步加载]]></category>
		<category><![CDATA[并行下载]]></category>

		<guid isPermaLink="false">http://www.zhangjingwei.com/?p=1112</guid>
		<description><![CDATA[本文让js动态加载，这样原本串行加载的js就变成并行了。 先看两个demo demo_00：http://www.zhangjingwei.com/loadscript/demo_00/ 再看demo_01：http://www.zhangjingwei.com/loadscript/demo_01/ 很明显，demo_01中，js异步加载，没有阻挡图片的下载 让我们看看他是如何实现的。 var loadscript = &#123; $$:function&#40;id&#41;&#123;return document.getElementById&#40;id&#41;&#125;, tag:function&#40;element&#41;&#123;return document.getElementsByTagName&#40;element&#41;&#125;, ce:function&#40;element&#41;&#123;return document.createElement&#40;element&#41;&#125;, js:function&#40;url&#41; &#123; s = loadscript.ce&#40;'script'&#41;; s.type = &#34;text/javascript&#34;; s.onreadystatechange = ready; s.onerror = s.onload = complete; s.src = url; loadscript.tag&#40;'head'&#41;&#91;0&#93;.appendChild&#40;s&#41;; function ready&#40;&#41;&#123;&#125; function complete&#40;&#41;&#123;&#125; &#125; &#125; 代码很简单，但我们忽略了一个很重要的问题。 虽然JS是异步加载了，但他们下载的顺序却不确定，万一B先与A加载，并且B调用了A内的函数呢？ 这种情况在IE里经常出现。 2-&#62;1-&#62;3-&#62;4-&#62;6-&#62;5 就是这些js的加载顺序，现在我们想让他们变成1-&#62;2-&#62;3-&#62;4-&#62;5-&#62;6。怎么办？ 我们增加一个回调，让他在第一个加载完成后再加载第二个。 var loadscript = &#123; $$:function&#40;id&#41;&#123;return document.getElementById&#40;id&#41;&#125;, tag:function&#40;element&#41;&#123;return [...]]]></description>
			<content:encoded><![CDATA[<p>本文让js动态加载，这样原本串行加载的js就变成并行了。</p>
<p>先看两个demo</p>
<p>demo_00：<a href="http://www.zhangjingwei.com/loadscript/demo_00/">http://www.zhangjingwei.com/loadscript/demo_00/</a></p>
<p><a href="http://www.zhangjingwei.com/wp-content/uploads/2009/08/demo_00.png"><img class="alignnone size-full wp-image-1115" title="demo_00" src="http://www.zhangjingwei.com/wp-content/uploads/2009/08/demo_00.png" alt="demo_00" width="472" height="142" /></a></p>
<p>再看demo_01：<a href="http://www.zhangjingwei.com/loadscript/demo_00/">http://www.zhangjingwei.com/loadscript/demo_01/</a></p>
<p><a href="http://www.zhangjingwei.com/wp-content/uploads/2009/08/demo_01.png"><img class="alignnone size-full wp-image-1116" title="demo_01" src="http://www.zhangjingwei.com/wp-content/uploads/2009/08/demo_01.png" alt="demo_01" width="471" height="142" /></a></p>
<p>很明显，demo_01中，js异步加载，没有阻挡图片的下载</p>
<p>让我们看看他是如何实现的。</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> loadscript <span style="color: #339933;">=</span>
<span style="color: #009900;">&#123;</span>
	$$<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
	tag<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>element<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span>element<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
	ce<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>element<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span> document.<span style="color: #660066;">createElement</span><span style="color: #009900;">&#40;</span>element<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
	js<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>url<span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		s <span style="color: #339933;">=</span> loadscript.<span style="color: #660066;">ce</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'script'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		s.<span style="color: #660066;">type</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">;</span>
		s.<span style="color: #660066;">onreadystatechange</span> <span style="color: #339933;">=</span> ready<span style="color: #339933;">;</span>
		s.<span style="color: #000066;">onerror</span> <span style="color: #339933;">=</span> s.<span style="color: #000066;">onload</span> <span style="color: #339933;">=</span> complete<span style="color: #339933;">;</span>
		s.<span style="color: #660066;">src</span> <span style="color: #339933;">=</span> url<span style="color: #339933;">;</span>
		loadscript.<span style="color: #660066;">tag</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'head'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">appendChild</span><span style="color: #009900;">&#40;</span>s<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">function</span> ready<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span>
		<span style="color: #003366; font-weight: bold;">function</span> complete<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>代码很简单，但我们忽略了一个很重要的问题。<br />
虽然JS是异步加载了，但他们下载的顺序却不确定，万一B先与A加载，并且B调用了A内的函数呢？<br />
这种情况在IE里经常出现。<br />
<a href="http://www.zhangjingwei.com/wp-content/uploads/2009/08/2009-08-17_004534.png"><img class="alignnone size-full wp-image-1119" title="2009-08-17_004534" src="http://www.zhangjingwei.com/wp-content/uploads/2009/08/2009-08-17_004534.png" alt="2009-08-17_004534" width="250" height="139" /></a></p>
<p>2-&gt;1-&gt;3-&gt;4-&gt;6-&gt;5 就是这些js的加载顺序，现在我们想让他们变成1-&gt;2-&gt;3-&gt;4-&gt;5-&gt;6。怎么办？</p>
<p>我们增加一个回调，让他在第一个加载完成后再加载第二个。</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> loadscript <span style="color: #339933;">=</span>
<span style="color: #009900;">&#123;</span>
	$$<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
	tag<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>element<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span>element<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
	ce<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>element<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span> document.<span style="color: #660066;">createElement</span><span style="color: #009900;">&#40;</span>element<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
	js<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>url<span style="color: #339933;">,</span>callback<span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		s <span style="color: #339933;">=</span> loadscript.<span style="color: #660066;">ce</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'script'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		s.<span style="color: #660066;">type</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">;</span>
		s.<span style="color: #660066;">onreadystatechange</span> <span style="color: #339933;">=</span> ready<span style="color: #339933;">;</span>
		s.<span style="color: #000066;">onerror</span> <span style="color: #339933;">=</span> s.<span style="color: #000066;">onload</span> <span style="color: #339933;">=</span> callback<span style="color: #339933;">;</span>
		s.<span style="color: #660066;">src</span> <span style="color: #339933;">=</span> url<span style="color: #339933;">;</span>
		loadscript.<span style="color: #660066;">tag</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'head'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">appendChild</span><span style="color: #009900;">&#40;</span>s<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">function</span> ready<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>s.<span style="color: #660066;">readyState</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'loaded'</span> <span style="color: #339933;">||</span> s.<span style="color: #660066;">readyState</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'complete'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				callback<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>这样写得到了我们想要的结果。<br />
demo_02：<a href="http://www.zhangjingwei.com/loadscript/demo_02/">http://www.zhangjingwei.com/loadscript/demo_02/</a></p>
<p><a href="http://www.zhangjingwei.com/wp-content/uploads/2009/08/02.png"><img class="alignnone size-full wp-image-1126" title="02" src="http://www.zhangjingwei.com/wp-content/uploads/2009/08/02.png" alt="02" width="261" height="113" /></a></p>
<p>可是加载它的方法很臃肿。</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">loadscript.<span style="color: #660066;">js</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'js1.js'</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
  loadscript.<span style="color: #660066;">js</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'js2.js'</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	loadscript.<span style="color: #660066;">js</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'js3.js'</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	  loadscript.<span style="color: #660066;">js</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'js4.js'</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		loadscript.<span style="color: #660066;">js</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'js5.js'</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		  loadscript.<span style="color: #660066;">js</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'js6.js'</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>改进一下 （同步加载）<br />
demo_03：<a href="http://www.zhangjingwei.com/loadscript/demo_03/">http://www.zhangjingwei.com/loadscript/demo_03/</a></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> loadscript <span style="color: #339933;">=</span>
<span style="color: #009900;">&#123;</span>
	$$<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
	tag<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>element<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span>element<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
	ce<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>element<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span> document.<span style="color: #660066;">createElement</span><span style="color: #009900;">&#40;</span>element<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
	ls<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>url<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> req <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">createXmlHttp</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		req.<span style="color: #000066;">open</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'GET'</span><span style="color: #339933;">,</span>url<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		req.<span style="color: #660066;">send</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//alert (req.status);</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>req.<span style="color: #000066;">status</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">200</span> <span style="color: #339933;">||</span> req.<span style="color: #000066;">status</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			window.<span style="color: #000066; font-weight: bold;">eval</span><span style="color: #009900;">&#40;</span>req.<span style="color: #660066;">responseText</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
	createXmlHttp<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> xmlHttp<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">ActiveXObject</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			xmlHttp <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> ActiveXObject<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Microsoft.XMLHTTP&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">XMLHttpRequest</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			xmlHttp <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> XMLHttpRequest<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">return</span> xmlHttp<span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>看看效果如何。<br />
<a href="http://www.zhangjingwei.com/wp-content/uploads/2009/08/03.png"><img class="alignnone size-full wp-image-1130" title="03" src="http://www.zhangjingwei.com/wp-content/uploads/2009/08/03.png" alt="03" width="482" height="177" /></a></p>
<p>js确实是串行下载了，可问题又来了，因为是同步加载又将图片的加载阻止了。</p>
<p>鱼与熊掌不可兼得么？有知道的朋友还请留言赐教。</p>
<p>干活去了！ <img src='http://www.zhangjingwei.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>



加入书签:


	<a rel="nofollow" class="thickbox" href="http://shuqian.qq.com/post?jumpback=1&title=%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BDjs&uri=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fasynchronous-loading-js%2F?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/qq.png" title="QQ书签" alt="QQ书签" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fasynchronous-loading-js%2F&title=%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BDjs?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban.png" title="豆瓣" alt="豆瓣" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fasynchronous-loading-js%2F&title=%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BDjs&n=1?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban9.png" title="豆瓣九点" alt="豆瓣九点" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fasynchronous-loading-js%2F&amp;title=%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BDjs?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.zhangjingwei.com/feed/?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/rss.png" title="RSS" alt="RSS" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="mailto:?subject=%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BDjs&amp;body=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fasynchronous-loading-js%2F" title="email"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/email_link.png" title="email" alt="email" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://www.zhangjingwei.com/archives/asynchronous-loading-js/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>jQuery 取得 background-position 的值</title>
		<link>http://www.zhangjingwei.com/archives/jquery-get-background-position-val/</link>
		<comments>http://www.zhangjingwei.com/archives/jquery-get-background-position-val/#comments</comments>
		<pubDate>Wed, 01 Apr 2009 16:40:27 +0000</pubDate>
		<dc:creator>张经纬</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[background-position]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://www.zhangjingwei.com/?p=864</guid>
		<description><![CDATA[如果想单独取background-position的X值或Y值，IE里可以通过私有属性background-positionX或者background-positionY取得，但是非IE浏览器无法通过这个属性取得。 查阅了参考资料，整理出如何获得XY的通用方法，我在IE6 IE7 IE8 FF3 Opera Chrome上测试没有问题。 函数一、先通过jQ取得XY。 (function($) { jQuery.fn.backgroundPosition = function() { var bgPosition = $(this).css('background-position'); if(typeof(bgPosition) == 'undefined') { return $(this).css('background-positionX') + ' ' + $(this).css('background-positionY'); }else{ return bgPosition; } }; })(jQuery); 函数二、单独取它们的X值或Y值 X值：$(&#8216;#Element&#8217;).backgroundPosition().split(&#8221; &#8220;)[0]; Y值：$(&#8216;#Element&#8217;).backgroundPosition().split(&#8221; &#8220;)[1]; 加入书签:]]></description>
			<content:encoded><![CDATA[<p>如果想单独取background-position的X值或Y值，IE里可以通过私有属性background-positionX或者background-positionY取得，但是非IE浏览器无法通过这个属性取得。</p>
<p>查阅了参考资料，整理出如何获得XY的通用方法，我在IE6 IE7 IE8 FF3 Opera Chrome上测试没有问题。</p>
<p>函数一、先通过jQ取得XY。</p>
<pre lang="javascript" colla="+">
(function($) {
jQuery.fn.backgroundPosition = function() {
  var bgPosition = $(this).css('background-position');
  if(typeof(bgPosition) == 'undefined') {
	  return $(this).css('background-positionX') + ' ' + $(this).css('background-positionY');
  }else{
	  return bgPosition;
  }
};
})(jQuery);
</pre>
<p>函数二、单独取它们的X值或Y值<br />
X值：$(&#8216;#Element&#8217;).backgroundPosition().split(&#8221; &#8220;)[0];<br />
Y值：$(&#8216;#Element&#8217;).backgroundPosition().split(&#8221; &#8220;)[1];</p>



加入书签:


	<a rel="nofollow" class="thickbox" href="http://shuqian.qq.com/post?jumpback=1&title=jQuery%20%E5%8F%96%E5%BE%97%20background-position%20%E7%9A%84%E5%80%BC&uri=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-get-background-position-val%2F?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/qq.png" title="QQ书签" alt="QQ书签" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-get-background-position-val%2F&title=jQuery%20%E5%8F%96%E5%BE%97%20background-position%20%E7%9A%84%E5%80%BC?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban.png" title="豆瓣" alt="豆瓣" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-get-background-position-val%2F&title=jQuery%20%E5%8F%96%E5%BE%97%20background-position%20%E7%9A%84%E5%80%BC&n=1?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban9.png" title="豆瓣九点" alt="豆瓣九点" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-get-background-position-val%2F&amp;title=jQuery%20%E5%8F%96%E5%BE%97%20background-position%20%E7%9A%84%E5%80%BC?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.zhangjingwei.com/feed/?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/rss.png" title="RSS" alt="RSS" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="mailto:?subject=jQuery%20%E5%8F%96%E5%BE%97%20background-position%20%E7%9A%84%E5%80%BC&amp;body=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-get-background-position-val%2F" title="email"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/email_link.png" title="email" alt="email" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://www.zhangjingwei.com/archives/jquery-get-background-position-val/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>jQuery 列表视图</title>
		<link>http://www.zhangjingwei.com/archives/jquery-listview/</link>
		<comments>http://www.zhangjingwei.com/archives/jquery-listview/#comments</comments>
		<pubDate>Sat, 21 Mar 2009 05:43:27 +0000</pubDate>
		<dc:creator>张经纬</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[ListView]]></category>
		<category><![CDATA[列表视图]]></category>

		<guid isPermaLink="false">http://www.zhangjingwei.com/?p=758</guid>
		<description><![CDATA[没事写个玩玩,觉得jQ的动画功能也很强大。 Demo:http://www.zhangjingwei.com/demo/listview/ $&#40;document&#41;.ready&#40;function&#40;&#41; &#123; $&#40;'#wrap ul.unviewable'&#41;.hide&#40;&#41;; $&#40;'#wrap h2'&#41;.hover&#40;function&#40;&#41; &#123; $&#40;this&#41;.css&#40;&#123; 'cursor': 'pointer', 'background': '#047' &#125;&#41;; &#125;, function&#40;&#41; &#123; $&#40;this&#41;.css&#40;&#123; 'cursor': 'default', 'background': '#046' &#125;&#41;; &#125;&#41; &#125;&#41; $&#40;'#wrap h2'&#41;.click&#40;function&#40;&#41; &#123; var id = this.id; if &#40;$&#40;this&#41;.next&#40;&#41;.attr&#40;'class'&#41; != 'viewable'&#41; &#123; $&#40;'#wrap ul.viewable'&#41;.slideUp&#40;'slow', function&#40;&#41; &#123; $&#40;this&#41;.attr&#40;&#123; 'class': 'unviewable' &#125;&#41;.hide&#40;&#41;; &#125;&#41;; $&#40;'#' + id&#41;.next&#40;&#41;.slideDown&#40;'slow', function&#40;&#41; &#123; $&#40;this&#41;.attr&#40;&#123; 'class': 'viewable' [...]]]></description>
			<content:encoded><![CDATA[<p>没事写个玩玩,觉得jQ的动画功能也很强大。</p>
<p>Demo:<a href="http://www.zhangjingwei.com/demo/listview/" target="_blank">http://www.zhangjingwei.com/demo/listview/</a></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#wrap ul.unviewable'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#wrap h2'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hover</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
            <span style="color: #3366CC;">'cursor'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'pointer'</span><span style="color: #339933;">,</span>
            <span style="color: #3366CC;">'background'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'#047'</span>
        <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
            <span style="color: #3366CC;">'cursor'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'default'</span><span style="color: #339933;">,</span>
            <span style="color: #3366CC;">'background'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'#046'</span>
        <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#wrap h2'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> id <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">id</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">next</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'class'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">!=</span> <span style="color: #3366CC;">'viewable'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#wrap ul.viewable'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">slideUp</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'slow'</span><span style="color: #339933;">,</span>
        <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
                <span style="color: #3366CC;">'class'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'unviewable'</span>
            <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span> <span style="color: #339933;">+</span> id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">next</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">slideDown</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'slow'</span><span style="color: #339933;">,</span>
        <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
                <span style="color: #3366CC;">'class'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'viewable'</span>
            <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
                height<span style="color: #339933;">:</span> <span style="color: #3366CC;">'auto'</span>
            <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span></pre></div></div>


<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">ul<span style="color: #00AA00;">,</span> li<span style="color: #00AA00;">,</span> h2 <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
li <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">list-style</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#wrap</span> <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">300px</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#000</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#wrap</span> h2 <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #933;">2px</span> <span style="color: #933;">10px</span> <span style="color: #933;">3px</span> <span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #933;">2px</span> <span style="color: #993333;">outset</span> <span style="color: #cc00cc;">#5AA0B8</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#046</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#FFF</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">19px</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">vertical-align</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">font</span><span style="color: #00AA00;">:</span><span style="color: #933;">14px</span>/<span style="color: #cc66cc;">1.6</span> Arial<span style="color: #00AA00;">,</span> Helvetica<span style="color: #00AA00;">,</span> <span style="color: #993333;">sans-serif</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#wrap</span> ul <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#wrap</span> ul li <span style="color: #00AA00;">&#123;</span><span style="color: #808080; font-style: italic;">/*display:inline;*/</span>
	<span style="color: #000000; font-weight: bold;">padding-left</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#wrap</span> ul li a <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">font</span><span style="color: #00AA00;">:</span><span style="color: #933;">12px</span>/<span style="color: #cc66cc;">1.6</span> Arial<span style="color: #00AA00;">,</span> Helvetica<span style="color: #00AA00;">,</span> <span style="color: #993333;">sans-serif</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">text-decoration</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>


<div class="wp_syntax"><div class="code"><pre class="xhtml" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;wrap&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h2</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;arms&quot;</span>&gt;</span>武器特色<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h2</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;viewable&quot;</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>3<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>大刀<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>长枪<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>弓箭<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>火枪<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>宝剑<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>大刀<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>长枪<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>弓箭<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>火枪<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h2</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;equip&quot;</span>&gt;</span>装备特色<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h2</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;unviewable&quot;</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>2<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>大刀<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>长枪<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>弓箭<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>火枪<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>宝剑<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>大刀<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>长枪<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>弓箭<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>火枪<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>宝剑<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>大刀<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>长枪<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>弓箭<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>火枪<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>宝剑<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>大刀<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>长枪<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>弓箭<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>火枪<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>宝剑<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>大刀<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>长枪<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>弓箭<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>火枪<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>宝剑<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h2</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;other&quot;</span>&gt;</span>其他特色<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h2</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;unviewable&quot;</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>1<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>大刀<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>长枪<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>弓箭<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>火枪<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>宝剑<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>大刀<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>长枪<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span></pre></div></div>




加入书签:


	<a rel="nofollow" class="thickbox" href="http://shuqian.qq.com/post?jumpback=1&title=jQuery%20%E5%88%97%E8%A1%A8%E8%A7%86%E5%9B%BE&uri=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-listview%2F?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/qq.png" title="QQ书签" alt="QQ书签" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-listview%2F&title=jQuery%20%E5%88%97%E8%A1%A8%E8%A7%86%E5%9B%BE?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban.png" title="豆瓣" alt="豆瓣" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-listview%2F&title=jQuery%20%E5%88%97%E8%A1%A8%E8%A7%86%E5%9B%BE&n=1?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban9.png" title="豆瓣九点" alt="豆瓣九点" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-listview%2F&amp;title=jQuery%20%E5%88%97%E8%A1%A8%E8%A7%86%E5%9B%BE?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.zhangjingwei.com/feed/?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/rss.png" title="RSS" alt="RSS" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="mailto:?subject=jQuery%20%E5%88%97%E8%A1%A8%E8%A7%86%E5%9B%BE&amp;body=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-listview%2F" title="email"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/email_link.png" title="email" alt="email" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://www.zhangjingwei.com/archives/jquery-listview/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Jquery Select(单选) 模拟插件 V1.3.4</title>
		<link>http://www.zhangjingwei.com/archives/jquery-select134/</link>
		<comments>http://www.zhangjingwei.com/archives/jquery-select134/#comments</comments>
		<pubDate>Wed, 18 Mar 2009 19:02:53 +0000</pubDate>
		<dc:creator>张经纬</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[select]]></category>

		<guid isPermaLink="false">http://www.zhangjingwei.com/?p=718</guid>
		<description><![CDATA[03月19日更新 V1.3.4 a、修正纵向排列时候z-index的问题。（不建议对包含select的容器设置定位【若设置一定要在IE下仔细看页面有无问题】） b、修正了对弹出选择层位置的一个Bug。 c、修正了Opera下面的一些问题。 Demo：http://www.zhangjingwei.com/demo/jQuery.Select/index.html BTW：测试的时候，发现IE对JS动态改变的z-index，有的时候不是很“敏感”，所以，在我动态改变包含select的父容器select时，强制修改了其他select父容器的z-index。在关闭的时候，我会试图恢复这些被强制修改的z-index初始值，但有时恢复错误。 所以建议您不要对带有select父容器设置z-index。 能力有限，非常抱歉，如果您有办法，请您告诉我，谢谢。 您可以自由的使用这个开源项目在任何项目上。（商业、非商业） 希望您可以补充完善这个插件。 加入书签:]]></description>
			<content:encoded><![CDATA[<p>03月19日更新 V1.3.4</p>
<p>a、修正纵向排列时候z-index的问题。（不建议对包含select的容器设置定位【若设置一定要在IE下仔细看页面有无问题】）<br />
b、修正了对弹出选择层位置的一个Bug。<br />
c、修正了Opera下面的一些问题。 </p>
<p>Demo：<a href="http://www.zhangjingwei.com/demo/jQuery.Select/index.html" target='_blank'>http://www.zhangjingwei.com/demo/jQuery.Select/index.html</a></p>
<p>BTW：测试的时候，发现IE对JS动态改变的z-index，有的时候不是很“敏感”，所以，在我动态改变包含select的父容器select时，强制修改了其他select父容器的z-index。在关闭的时候，我会试图恢复这些被强制修改的z-index初始值，但有时恢复错误。 <img src='http://www.zhangjingwei.com/wp-includes/images/smilies/icon_sad.gif' alt=':(' class='wp-smiley' />   所以建议您不要对带有select父容器设置z-index。</p>
<p>能力有限，非常抱歉，如果您有办法，请您告诉我，谢谢。</p>
<p><em>您可以自由的使用这个开源项目在任何项目上。（商业、非商业）<br />
希望您可以补充完善这个插件。</em></p>



加入书签:


	<a rel="nofollow" class="thickbox" href="http://shuqian.qq.com/post?jumpback=1&title=Jquery%20Select%28%E5%8D%95%E9%80%89%29%20%E6%A8%A1%E6%8B%9F%E6%8F%92%E4%BB%B6%20V1.3.4&uri=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-select134%2F?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/qq.png" title="QQ书签" alt="QQ书签" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-select134%2F&title=Jquery%20Select%28%E5%8D%95%E9%80%89%29%20%E6%A8%A1%E6%8B%9F%E6%8F%92%E4%BB%B6%20V1.3.4?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban.png" title="豆瓣" alt="豆瓣" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-select134%2F&title=Jquery%20Select%28%E5%8D%95%E9%80%89%29%20%E6%A8%A1%E6%8B%9F%E6%8F%92%E4%BB%B6%20V1.3.4&n=1?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban9.png" title="豆瓣九点" alt="豆瓣九点" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-select134%2F&amp;title=Jquery%20Select%28%E5%8D%95%E9%80%89%29%20%E6%A8%A1%E6%8B%9F%E6%8F%92%E4%BB%B6%20V1.3.4?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.zhangjingwei.com/feed/?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/rss.png" title="RSS" alt="RSS" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="mailto:?subject=Jquery%20Select%28%E5%8D%95%E9%80%89%29%20%E6%A8%A1%E6%8B%9F%E6%8F%92%E4%BB%B6%20V1.3.4&amp;body=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-select134%2F" title="email"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/email_link.png" title="email" alt="email" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://www.zhangjingwei.com/archives/jquery-select134/feed/</wfw:commentRss>
		<slash:comments>17</slash:comments>
		</item>
		<item>
		<title>jQuery 操作Cookie 的函数</title>
		<link>http://www.zhangjingwei.com/archives/jquery-cookie/</link>
		<comments>http://www.zhangjingwei.com/archives/jquery-cookie/#comments</comments>
		<pubDate>Fri, 13 Mar 2009 07:18:52 +0000</pubDate>
		<dc:creator>张经纬</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[cookie]]></category>

		<guid isPermaLink="false">http://www.zhangjingwei.com/?p=706</guid>
		<description><![CDATA[老外写的，拿过来用，这里记录下。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 &#62; jQuery.cookie = function&#40;name, value, options&#41; &#123; if &#40;typeof value != 'undefined'&#41; &#123; options = [...]]]></description>
			<content:encoded><![CDATA[<p>老外写的，拿过来用，这里记录下。</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&gt;</span>
jQuery.<span style="color: #660066;">cookie</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span><span style="color: #339933;">,</span> value<span style="color: #339933;">,</span> options<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> value <span style="color: #339933;">!=</span> <span style="color: #3366CC;">'undefined'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        options <span style="color: #339933;">=</span> options <span style="color: #339933;">||</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>value <span style="color: #339933;">===</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            value <span style="color: #339933;">=</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">;</span>
            options <span style="color: #339933;">=</span> $.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> options<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            options.<span style="color: #660066;">expires</span> <span style="color: #339933;">=</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
        <span style="color: #003366; font-weight: bold;">var</span> expires <span style="color: #339933;">=</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>options.<span style="color: #660066;">expires</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> options.<span style="color: #660066;">expires</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'number'</span> <span style="color: #339933;">||</span> options.<span style="color: #660066;">expires</span>.<span style="color: #660066;">toUTCString</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #003366; font-weight: bold;">var</span> date<span style="color: #339933;">;</span>
            <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> options.<span style="color: #660066;">expires</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'number'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                date <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Date<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                date.<span style="color: #660066;">setTime</span><span style="color: #009900;">&#40;</span>date.<span style="color: #660066;">getTime</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>options.<span style="color: #660066;">expires</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">24</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">60</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">60</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">1000</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
                date <span style="color: #339933;">=</span> options.<span style="color: #660066;">expires</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
            expires <span style="color: #339933;">=</span> <span style="color: #3366CC;">'; expires='</span> <span style="color: #339933;">+</span> date.<span style="color: #660066;">toUTCString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
        <span style="color: #003366; font-weight: bold;">var</span> path <span style="color: #339933;">=</span> options.<span style="color: #660066;">path</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">'; path='</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>options.<span style="color: #660066;">path</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">;</span>
        <span style="color: #003366; font-weight: bold;">var</span> domain <span style="color: #339933;">=</span> options.<span style="color: #660066;">domain</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">'; domain='</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>options.<span style="color: #660066;">domain</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">;</span>
        <span style="color: #003366; font-weight: bold;">var</span> secure <span style="color: #339933;">=</span> options.<span style="color: #660066;">secure</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">'; secure'</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">;</span>
        document.<span style="color: #660066;">cookie</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #000066;">name</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'='</span><span style="color: #339933;">,</span> encodeURIComponent<span style="color: #009900;">&#40;</span>value<span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> expires<span style="color: #339933;">,</span> path<span style="color: #339933;">,</span> domain<span style="color: #339933;">,</span> secure<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">join</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">var</span> cookieValue <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">cookie</span> <span style="color: #339933;">&amp;&amp;</span> document.<span style="color: #660066;">cookie</span> <span style="color: #339933;">!=</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #003366; font-weight: bold;">var</span> cookies <span style="color: #339933;">=</span> document.<span style="color: #660066;">cookie</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">';'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> cookies.<span style="color: #660066;">length</span><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> cookie <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">trim</span><span style="color: #009900;">&#40;</span>cookies<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>cookie.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> <span style="color: #000066;">name</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'='</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    cookieValue <span style="color: #339933;">=</span> decodeURIComponent<span style="color: #009900;">&#40;</span>cookie.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                    <span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
        <span style="color: #000066; font-weight: bold;">return</span> cookieValue<span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>调用：
</pre>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#wCookies'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
  $.<span style="color: #660066;">cookie</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'name'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'test'</span><span style="color: #339933;">,</span><span style="color: #009900;">&#123;</span>expires<span style="color: #339933;">:</span> <span style="color: #CC0000;">7</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>				  
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#rCookies'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
  <span style="color: #003366; font-weight: bold;">var</span> test <span style="color: #339933;">=</span> $.<span style="color: #660066;">cookie</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'name'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #000066;">alert</span> <span style="color: #009900;">&#40;</span>test<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#dCookies'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	$.<span style="color: #660066;">cookie</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'name'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>							  
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>




加入书签:


	<a rel="nofollow" class="thickbox" href="http://shuqian.qq.com/post?jumpback=1&title=jQuery%20%E6%93%8D%E4%BD%9CCookie%20%E7%9A%84%E5%87%BD%E6%95%B0&uri=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-cookie%2F?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/qq.png" title="QQ书签" alt="QQ书签" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-cookie%2F&title=jQuery%20%E6%93%8D%E4%BD%9CCookie%20%E7%9A%84%E5%87%BD%E6%95%B0?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban.png" title="豆瓣" alt="豆瓣" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.douban.com/recommend/?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-cookie%2F&title=jQuery%20%E6%93%8D%E4%BD%9CCookie%20%E7%9A%84%E5%87%BD%E6%95%B0&n=1?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/douban9.png" title="豆瓣九点" alt="豆瓣九点" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-cookie%2F&amp;title=jQuery%20%E6%93%8D%E4%BD%9CCookie%20%E7%9A%84%E5%87%BD%E6%95%B0?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" class="thickbox" href="http://www.zhangjingwei.com/feed/?TB_iframe=true&amp;height=500&amp;width=900"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/rss.png" title="RSS" alt="RSS" class="sociable-hovers" /></a>
	<a rel="nofollow"  target="_blank" href="mailto:?subject=jQuery%20%E6%93%8D%E4%BD%9CCookie%20%E7%9A%84%E5%87%BD%E6%95%B0&amp;body=http%3A%2F%2Fwww.zhangjingwei.com%2Farchives%2Fjquery-cookie%2F" title="email"><img src="http://www.zhangjingwei.com/wp-content/plugins/sociable/images/email_link.png" title="email" alt="email" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://www.zhangjingwei.com/archives/jquery-cookie/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
