jQueryAPI.zh_CN.xml

<?xml version="1.0" encoding="UTF-8"?>
<api>
   <categories>
      <category name="Ajax" zh="Ajax">
         <category name="Global Ajax Event Handlers" zh="全局Ajax事件"/>
         <category name="Helper Functions" zh="辅助函数"/>
         <category name="Low-Level Interface" zh="底层接口"/>
         <category name="Shorthand Methods" zh="快捷方法"/>
      </category>
      <category name="Attributes" zh="属性"/>
      <category name="Core" zh="核心"/>
      <category name="CSS" zh="CSS"/>
      <category name="Data" zh="数据"/>
      <category name="Dimensions" zh="尺寸"/>
      <category name="Effects" zh="动画">
         <category name="Basics" zh="基本"/>
         <category name="Custom" zh="自定义"/>
         <category name="Fading" zh="渐变"/>
         <category name="Sliding" zh="滑动"/>
      </category>
      <category name="Events" zh="事件">
         <category name="Browser Events" zh="浏览器事件"/>
         <category name="Document Loading" zh="文档加载"/>
         <category name="Event Handler Attachment" zh="事件处理"/>
         <category name="Event Object" zh="事件对象"/>
         <category name="Form Events" zh="表单事件"/>
         <category name="Keyboard Events" zh="键盘事件"/>
         <category name="Mouse Events" zh="鼠标事件"/>
      </category>
      <category name="Forms" zh="表单"/>
      <category name="Manipulation" zh="操作">
         <category name="Class Attribute" zh="Class属性"/>
         <category name="Copying" zh="复制"/>
         <category name="DOM Insertion" zh="DOM插入"/>
         <category name="DOM Insertion, Around" zh="包裹"/>
         <category name="DOM Insertion, Inside" zh="内部插入"/>
         <category name="DOM Insertion, Outside" zh="外部插入"/>
         <category name="DOM Removal" zh="DOM删除"/>
         <category name="DOM Replacement" zh="DOM替换"/>
         <category name="General Attributes" zh="通用属性"/>
         <category name="Style Properties" zh="样式属性"/>
      </category>
      <category name="Miscellaneous" zh="杂项">
         <category name="Collection Manipulation" zh="集合操作"/>
         <category name="Data Storage" zh="数据存储"/>
         <category name="DOM Element Methods" zh="DOM元素方法"/>
         <category name="Setup Methods" zh="设置方法"/>
      </category>
      <category name="Offset" zh="偏移"/>
      <category name="Internals" zh="内部使用"/>
      <category name="Properties" zh="属性">
         <category name="Properties of jQuery Object Instances" zh="jQuery对象实例属性"/>
         <category name="Properties of the Global jQuery Object" zh="全局jQuery对象属性"/>
      </category>
      <category name="Selectors" zh="选择器">
         <category name="Attribute" zh="属性"/>
         <category name="Basic" zh="基础"/>
         <category name="Basic Filter" zh="简单"/>
         <category name="Child Filter" zh="子元素"/>
         <category name="Content Filter" zh="内容"/>
         <category name="Form" zh="表单"/>
         <category name="Hierarchy" zh="层级"/>
         <category name="Visibility Filter" zh="可见性"/>
      </category>
      <category name="Traversing" zh="遍历">
         <category name="Filtering" zh="筛选"/>
         <category name="Miscellaneous Traversing" zh="其他遍历"/>
         <category name="Tree Traversal" zh="树遍历"/>
      </category>
      <category name="Utilities" zh="工具"/>
      <category name="Version" zh="版本">
         <category name="Version 1.0" zh="1.0 版"/>
         <category name="Version 1.0.4" zh="1.0.4 版"/>
         <category name="Version 1.1" zh="1.1 版"/>
         <category name="Version 1.1.2" zh="1.1.2 版"/>
         <category name="Version 1.1.3" zh="1.1.3 版"/>
         <category name="Version 1.1.4" zh="1.1.4 版"/>
         <category name="Version 1.2" zh="1.2 版"/>
         <category name="Version 1.2.3" zh="1.2.3 版"/>
         <category name="Version 1.2.6" zh="1.2.6 版"/>
         <category name="Version 1.3" zh="1.3 版"/>
         <category name="Version 1.4" zh="1.4 版"/>
         <category name="Version 1.4.1" zh="1.4.1 版"/>
         <category name="Version 1.4.2" zh="1.4.2 版"/>
         <category name="Version 1.4.3" zh="1.4.3 版"/>
         <category name="Version 1.4.4" zh="1.4.4 版"/>
      </category>
  </categories>
   <entries>
      <entry type="method" name="fadeToggle">
         <desc>通过透明度动画来显示或隐藏匹配的元素。</desc>
         <signature>
            <argument name="duration">
               <desc>字符串("slow"或 "fast")或表示动画时长的毫秒数值</desc>
            </argument>
            <argument name="easing">
               <desc>要使用的缓冲效果的名称，默认值是 "swing"。jQuery 内置提供 "linear" 和 "swing" 两种效果，如果要使用更多缓冲效果，需要插件支持。</desc>
            </argument>
            <argument name="callback">
               <desc>在动画完成时执行的函数。</desc>
            </argument>
         </signature>
         <longdesc>
            <p><code>.fadeOut()</code> 方法对匹配元素的透明度生成动画效果。当透明度变成 0 之后，再把 <code>display</code> 样式属性设置成 <code>none</code> 以确保这个元素不再对页面布局产生影响。</p>
            <p>duration 参数可以提供一个毫秒数，代表动画运行的时间，时间越长动画越慢。还可以提供字符串 <code>'fast'</code> 和 <code>'slow'</code> ，分别对应了 <code>200</code> 和 <code>600</code> 毫秒。如果没有设置 <code>duration</code> 参数，或者设置成其他无法识别的字符串，就会使用默认值 400 毫秒。</p>
            <p>缓冲函数确定了动画在不同的位置的速度。jQuery默认只提供两个缓冲效果：<code>swing</code> 和 <code>linear</code>。更多特效需要使用插件。可以访问 <a href="http://jqueryui.com">jQuery UI 网站</a> 来获得更多信息。</p>
            <p>如果提供了回调函数，那么当动画结束时，会调用这个函数。通常用来几个不同的动画依次完成。这个函数不接受任何参数，但是 <code>this</code> 会设成将要执行动画的那个元素。如果对多个元素设置动画，那么要非常注意，回调函数会在每一个动画完成的元素上都执行一次，而不是对这组动画整体才执行一次。</p>
         </longdesc>
         <example>
            <desc>第一段落渐隐或渐显，用时 600 毫秒，并且是线性缓冲效果。而第二个段落渐隐渐显用时 200 毫秒, 并且在每次动画完成后插入一个 "finished"。</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.type">
         <desc>Determine the internal JavaScript [[Class]] of an object.</desc>
         <signature>
            <argument name="obj">
               <desc>Object to get the internal JavaScript [[Class]] of.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>A number of different aspects are utilized to determine the exact return value for an object. The logic can be determined as follows:</p>
            <ul>
               <li>If the object is undefined or null then "undefined" or "null" is returned accordingly.</li>
               <li>If the object has an internal [[Class]] equivalent to one of the browser's built-in objects we return the associated name. (<a href="http://perfectionkills.com/instanceof-considered-harmful-or-how-to-write-a-robust-isarray/">More details about this technique.</a>)<ul>
                     <li>jQuery.type(true) === "boolean"</li>
                     <li>jQuery.type(3) === "number"</li>
                     <li>jQuery.type("test") === "string"</li>
                     <li>jQuery.type(function(){}) === "function"</li>
                     <li>jQuery.type([]) === "array"</li>
                     <li>jQuery.type(new Date()) === "date"</li>
                     <li>jQuery.type(/test/) === "regexp"</li>
                  </ul>
               </li>
               <li>Everything else will return "object" as its type.</li>
            </ul>
         </longdesc>
         <example>
            <desc>Finds out if the parameter is a RegExp.</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.isWindow">
         <desc>Determine whether the argument is a window.</desc>
         <signature>
            <argument name="obj">
               <desc>Object to test whether or not it is a window.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>This is used in a number of places in jQuery to determine if we're operating against a browser window (such as the current window or an iframe).</p>
         </longdesc>
         <example>
            <desc>Finds out if the parameter is a window.</desc>
         </example>
      </entry>
      <entry type="method" name="toggle">
         <desc>Bind two or more handlers to the matched elements, to be executed on alternate clicks.</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>A function to execute every even time the element is clicked.</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>A function to execute every odd time the element is clicked.</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>Additional handlers to cycle through after clicks.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>.toggle()</code> method binds a handler for the <code>click</code> event, so the rules outlined for the triggering of <code>click</code> apply here as well.</p>
            <pre>For example, consider the HTML:
&lt;div id="target"&gt;
  Click here
&lt;/div&gt;</pre>
 
            <p class="image">
               <img src="images/0042_05_05.png" alt=""/>
            </p>
            <p>Event handlers can then be bound to the <code>&lt;div&gt;</code>:</p>
            <pre>$('#target').toggle(function() {
  alert('First handler for .toggle() called.');
}, function() {
  alert('Second handler for .toggle() called.');
});</pre>
            <p>As the element is clicked repeatedly, the messages alternate:</p>
            <p>
               <span class="output">First handler for .toggle() called.</span>
               <br/>
               <span class="output">Second handler for .toggle() called.</span>
               <br/>
               <span class="output">First handler for .toggle() called.</span>
               <br/>
               <span class="output">Second handler for .toggle() called.</span>
               <br/>
               <span class="output">First handler for .toggle() called.</span>
            </p>
            <p>If more than two handlers are provided, <code>.toggle()</code> will cycle among all of them. For example, if there are three handlers, then the first handler will be called on the first click, the fourth click, the seventh click, and so on.</p>
            <blockquote><p>Note: jQuery also provides an animation method named <a href="http://api.jquery.com/toggle/">.toggle()</a> that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.</p></blockquote>
            <p>The <code>.toggle()</code> method is provided for convenience. It is relatively straightforward to implement the same behavior by hand, and this can be necessary if the assumptions built into <code>.toggle()</code> prove limiting. For example, <code>.toggle()</code> is not guaranteed to work correctly if applied twice to the same element. Since <code>.toggle()</code> internally uses a <code>click</code> handler to do its work, we must unbind <code>click</code> to remove a behavior attached with <code>.toggle()</code>, so other <code>click</code> handlers can be caught in the crossfire. The implementation also calls <code>.preventDefault()</code> on the event, so links will not be followed and buttons will not be clicked if <code>.toggle()</code> has been called on the element.</p>
         </longdesc>
         <example>
            <desc>Click to toggle highlight on the list item.</desc>
         </example>
         <example>
            <desc>To toggle a style on table cells:</desc>
         </example>
      </entry>
      <entry type="property" name="jQuery.fx.interval">
         <desc>The rate (in milliseconds) at which animations fire.</desc>
         <signature/>
         <longdesc>
            <p>This property can be manipulated to adjust the number of frames per second at which animations will run. The default is 13 milliseconds. Making this a lower number could make the animations run smoother in faster browsers (such as Chrome) but there may be performance and CPU implications of doing so.</p>
            <p>Since jQuery uses one global interval, no animation should be running or all animations should stop for the change of this property to take effect.</p>
         </longdesc>
         <example>
            <desc>Cause all animations to run with less frames.</desc>
         </example>
      </entry>
      <entry type="property" name="event.namespace">
         <desc>当事件出发时指定命名空间。</desc>
         <signature/>
         <longdesc><p>这个属性对插件作者比较有用。可以根据不同的事件命名空间，来完成不同的任务。</p></longdesc>
         <example>
            <desc>检测使用的事件命名空间。</desc>
         </example>
      </entry>
      <entry type="method" name="undelegate">
         <desc>Remove a handler from the event for all elements which match the current selector, now or in the future, based upon a specific set of root elements.</desc>
         <signature/>
         <signature>
            <argument name="selector">
               <desc>A selector which will be used to filter the event results.</desc>
            </argument>
            <argument name="eventType">
               <desc>A string containing a JavaScript event type, such as "click" or "keydown"</desc>
            </argument>
         </signature>
         <signature>
            <argument name="selector">
               <desc>A selector which will be used to filter the event results.</desc>
            </argument>
            <argument name="eventType">
               <desc>A string containing a JavaScript event type, such as "click" or "keydown"</desc>
            </argument>
            <argument name="handler">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Undelegate is a way of removing event handlers that have been bound using <a href="delegate.htm">.delegate()</a>. It works virtually identically to <a href="die.htm">.die()</a> with the addition of a selector filter argument (which is required for delegation to work).</p>
         </longdesc>
         <example>
            <desc>Can bind and unbind events to the colored button.</desc>
         </example>
         <example>
            <desc>To unbind all delegated events from all paragraphs, write:</desc>
         </example>
         <example>
            <desc>To unbind all delegated click events from all paragraphs, write:</desc>
         </example>
         <example>
            <desc>To undelegate just one previously bound handler, pass the function in as the third argument:</desc>
         </example>
      </entry>
      <entry type="method" name="delegate">
         <desc>Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.</desc>
         <signature>
            <argument name="selector">
               <desc>A selector to filter the elements that trigger the event.</desc>
            </argument>
            <argument name="eventType">
               <desc>A string containing one or more space-separated JavaScript event types, such as "click" or "keydown," or custom event names.</desc>
            </argument>
            <argument name="handler">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="selector">
               <desc>A selector to filter the elements that trigger the event.</desc>
            </argument>
            <argument name="eventType">
               <desc>A string containing one or more space-separated JavaScript event types, such as "click" or "keydown," or custom event names.</desc>
            </argument>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Delegate is an alternative to using the <a href="live.htm">.live()</a> method, allowing for each binding of event delegation to specific DOM elements. For example the following delegate code:</p>

            <pre>$("table").delegate("td", "hover", function(){
	$(this).toggleClass("hover");
});</pre>

            <p>Is equivalent to the following code written using <code>.live()</code>:</p>

            <pre>$("table").each(function(){
	$("td", this).live("hover", function(){
		$(this).toggleClass("hover");
	});
});</pre>

            <p>See also the <a href="undelegate.htm">.undelegate()</a> method for a way of removing event handlers added in <a href="delegate.htm">.delegate()</a>.</p>
            <p>Passing and handling event data works <a href="http://api.jquery.com/bind/#passing-event-data">the same way as it does for .bind()</a>.</p>
         </longdesc>
         <example>
            <desc>Click a paragraph to add another. Note that .delegate() binds the click event to all paragraphs - even new ones.</desc>
         </example>
         <example>
            <desc>To display each paragraph's text in an alert box whenever it is clicked:</desc>
         </example>
         <example>
            <desc>To cancel a default action and prevent it from bubbling up, return false:</desc>
         </example>
         <example>
            <desc>To cancel only the default action by using the preventDefault method.</desc>
         </example>
         <example>
            <desc>Can bind custom events too.</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.error">
         <desc>接受一个字符串，并抛出包含这个字符串的异常。</desc>
         <signature>
            <argument name="message">
               <desc>将要发出的消息.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>这个方法主要是为了让插件开发人员可以重载此方法，并以更好的方式显示错误消息，或者提供更多相关信息。</p>
         </longdesc>
         <example>
            <desc>重载 jQuery.error 以便可以在 Firebug 中显示。</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.parseJSON">
         <desc>接受一个标准格式的 JSON 字符串，并返回解析后的 JavaScript 对象。</desc>
         <signature>
            <argument name="json">
               <desc>将要解析的 JSON 字符串。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>传入格式有误的 JSON 字符串可能导致抛出异常。例如，下面这些 JSON 字符串格式都不对：</p>
            <ul>
               <li>
                  <code>{test: 1}</code> (test 没有使用双引号包裹).</li>
               <li>
                  <code>{'test': 1}</code> ('test' 用了单引号而不是双引号包裹).</li>
            </ul>
            <p>另外，如果你什么都不传入，或者传入空字符串、null、undefined 等，parseJSON 都会返回 null 。如果浏览器原生实现了 <code>JSON.parse</code>， jQuery 则会使用它来解析字符串。更多关于JSON格式的细节请参考 <a href="http://json.org/">http://json.org/</a> 
</p>
         </longdesc>
         <example>
            <desc>解析一个 JSON 字符串。</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.proxy">
         <desc>接受一个函数，然后返回一个新函数，并且这个新函数始终保持了特定的上下文语境。</desc>
         <signature>
            <argument name="function">
               <desc>将要改变上下文语境的函数。</desc>
            </argument>
            <argument name="context">
               <desc>函数的上下文语境(`this`)会被设置成这个 object 对象。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="context">
               <desc>函数的上下文语境会被设置成这个 object 对象。</desc>
            </argument>
            <argument name="name">
               <desc>将要改变上下文语境的函数名(这个函数必须是前一个参数 'context' 对象的属性)</desc>
            </argument>
         </signature>
         <longdesc>
            <p>这个方法通常在向一个元素上附加事件处理函数时，上下文语境实际是指向另一个对象的情况下使用。另外，jQuery 能够确保即使你绑定的函数是经过 jQuery.proxy() 处理过的函数，你依然可以用原先的函数来正确地取消绑定。</p>
         </longdesc>
         <example>
            <desc>强制修改函数的上下文语境</desc>
         </example>
      </entry>
      <entry type="method" name="focusout">
         <desc>为 "focusout" 事件绑定一个处理函数。</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>这个方法是 <code>.bind('focusout', handler)</code> 的快捷方式。</p>
            <p><code>focusout</code> 事件会在元素（或者其内部的任何元素）失去焦点焦点时触发。这跟 <a href="blur.htm">blur</a> 事件的显著区别在于，它可以在父元素上检测子元素失去焦点的情况(换而言之，它支持事件冒泡)。</p>
            <p>这个事件通常会跟 <a href="focusin.htm">focusin</a> 事件一起使用。</p>
         </longdesc>
         <example>
            <desc>监视段落内部失去焦点的情况。请注意 <code>focusout</code> 计数和 <code>blur</code> 计数的差异。</desc>
         </example>
      </entry>
      <entry type="method" name="focusin">
         <desc>为 "focusin" 事件绑定一个处理函数。</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>这个方法是 <code>.bind('focusin', handler)</code>的快捷方式。</p>
            <p><code>focusin</code> 事件会在元素（或者其内部的任何元素）获得焦点焦点时触发。这跟 <a href="focus.htm">focus</a> 事件的显著区别在于，它可以在父元素上检测子元素获得焦点的情况(换而言之，它支持事件冒泡)。</p>
            <p>这个事件通常会跟 <a href="focusout.htm">focusout</a> 事件一起使用。</p>
         </longdesc>
         <example>
            <desc>监控页面上段落内获得焦点的情况。</desc>
         </example>
      </entry>
      <entry type="method" name="has">
         <desc>保留包含特定后代的元素，去掉那些不含有指定后代的元素。</desc>
         <signature>
            <argument name="selector">
               <desc>一个用于匹配元素的选择器字符串。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="contained">
               <desc>用于匹配元素的DOM元素。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>如果提供一个jQuery对象代表DOM元素集合， <code>.has()</code> 方法会用其子集创建一个新的jQuery对象。提供的选择器会一一测试原先那些元素的后代，含有匹配后代的元素会保留在结果中。</p>
            <p>下面是一个嵌套列表的页面：</p>
            <pre>
 &lt;ul&gt;
  &lt;li&gt;list item 1&lt;/li&gt;
  &lt;li&gt;list item 2
    &lt;ul&gt;
      &lt;li&gt;list item 2-a&lt;/li&gt;
      &lt;li&gt;list item 2-b&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;list item 3&lt;/li&gt;
  &lt;li&gt;list item 4&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>我们可以用如下方式对列表项集合应用这个方法：</p>
            <pre>$('li').has('ul').css('background-color', 'red');</pre>
            <p>结果是 item 2 背景变成了红色，因为只有这个 <code>&lt;li&gt;</code> 含有 <code>&lt;ul&gt;</code> 后代。</p>

         </longdesc>
         <example>
            <desc>检测是否一个元素在另一个之内。</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.contains">
         <desc>检测一个DOM节点是否包含另一个DOM节点。</desc>
         <signature>
            <argument name="container">
               <desc>可能包含其它元素的DOM元素。</desc>
            </argument>
            <argument name="contained">
               <desc>可能被其它元素包含的DOM节点。</desc>
            </argument>
         </signature>
         <longdesc/>
         <example>
            <desc>检测是否一个元素在另一个之内。</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.noop">
         <desc>一个空函数。</desc>
         <signature/>
         <longdesc>
            <p>你可以在希望仅仅传递一个函数而不做任何事情时，传递这个空函数。</p>
            <p>这对插件作者很有用。如果你设置了一个可选的回调函数，那么如果用户调用时没提供这个函数，那么就可以用 <code>jQuery.noop</code> 替代。</p>
         </longdesc>
      </entry>
      <entry type="method" name="delay">
         <desc>设置一个延时来推迟执行队列中之后的项目。</desc>
         <signature>
            <argument name="duration">
               <desc>以毫秒为单位的整数，用于设定队列推迟执行的时间。</desc>
            </argument>
            <argument name="queueName">
               <desc>队列名的字符串。默认是动画队列 <code>fx</code> 。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>jQuery 1.4新增, <code>.delay()</code> 用于将队列中的函数延时执行。它既可以推迟动画队列中函数的执行，也可以用于自定义队列。只有在队列中的连续事件可以被延时，因此不带参数的 <code>.show()</code> 和 <code>.hide()</code> 就不会有延时，因为他们没有使用动画队列。</p>
            <p>毫秒为单位的延时，数字越大，动画越慢。字符串 <code>'fast'</code> 和 <code>'slow'</code> 分别代表200和600毫秒的延时。</p>
            <p>例如，我们可以在 <code>&lt;div id="foo"&gt;</code> 的 <code>.slideUp()</code> 和 <code>.fadeIn()</code> 动画之间添加800毫秒的延时 :</p>
            <pre>$('#foo').slideUp(300).delay(800).fadeIn(400);</pre>
            <p>当这句语句执行后，元素会有300毫秒的卷起动画，接着暂停800毫秒，再出现400毫秒淡入动画。</p>
            <blockquote><p><strong><code>.delay()</code> 用在jQuery动画或者类似队列中是再好不过的了。但是，由于其本身的限制，比如无法取消延时，所以不应完全用来替代 JavaScript 原生的 <a href="https://developer.mozilla.org/en/DOM/window.setTimeout">setTimeout</a> 函数，后者更适用于通常情况。</strong></p></blockquote>
         </longdesc>
         <example>
            <desc>隐藏再显示两个div。其中绿色的div再次出现得更慢。</desc>
         </example>
      </entry>
      <entry type="method" name="parentsUntil">
         <desc>查找当前元素的所有的前辈元素，直到遇到选择器匹配的元素为止，不包括那个匹配到的元素。</desc>
         <signature>
            <argument name="selector">
               <desc>选择器字符串，用于确定到哪个前辈元素时停止匹配。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>如果提供一个jQuery对象代表DOM元素集合， <code>.parentsUntil()</code> 方法会找遍所有这些元素的前辈元素，直到遇到了跟参数匹配的元素才会停止。返回的jQuery对象中包含了所有找到的前辈元素，除了与 <code>.parentsUntil()</code> 选择器匹配的那个元素。考虑如下的嵌套列表：</p>
            <pre>&lt;ul class="level-1"&gt;
  &lt;li class="item-i"&gt;I&lt;/li&gt;
  &lt;li class="item-ii"&gt;II
    &lt;ul class="level-2"&gt;
      &lt;li class="item-a"&gt;A&lt;/li&gt;
      &lt;li class="item-b"&gt;B
        &lt;ul class="level-3"&gt;
          &lt;li class="item-1"&gt;1&lt;/li&gt;
          &lt;li class="item-2"&gt;2&lt;/li&gt;
          &lt;li class="item-3"&gt;3&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="item-c"&gt;C&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="item-iii"&gt;III&lt;/li&gt;
&lt;/ul&gt;
</pre>  
            <p>如果我们从项目 A 开始找它的前辈，但不包括 <code>&lt;ul class="level-1"&gt;</code> ，就可以用下面代码：</p>
            <pre>$('li.item-a').parentsUntil('.level-1')
    .css('background-color', 'red');</pre>
            <p>结果就是 level-2 列表和项目 II 的背景变红。 </p>
            <p>如果提供给 .parentsUntil() 的选择器没有匹配到任何东西，或者干脆没有提供选择器，那么返回的对象会是这个对象所有的前辈元素。例如再次从项目 A 开始找，但这次使用一个匹配不到任何东西的选择器：</p>
            <pre>$('li.item-a').parentsUntil('.not-here')
    .css('background-color', 'red');</pre>
            <p>其结果是给 level-2 列表, 项目 II,  level-1 列表, <code>&lt;body&gt;</code> 元素和 <code>&lt;html&gt;</code> 元素都设置了红色背景。</p>
         </longdesc>
         <example>
            <desc>查找 &lt;li class="item-a"&gt; 的前辈，直到 &lt;ul class="level-1"&gt; 为止，并给它们设置红色背景。</desc>
         </example>
      </entry>
      <entry type="method" name="prevUntil">
         <desc>查找当前元素之前所有的同辈元素，直到遇到选择器匹配的元素为止，不包括那个匹配到的元素。</desc>
         <signature>
            <argument name="selector">
               <desc>选择器字符串，用于确定到哪个排在前面的同辈元素时停止匹配。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>如果提供的jQuery代表了一组DOM元素， <code>.prevUntil()</code> 方法会找遍所有元素所在的DOM树中排在它们前面的元素，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了前面所有找到的同辈元素，但不包括提供给 <code>.prevUntil()</code> 的选择器匹配到的元素。</p>
            <p>如果提供的选择器没有匹配到任何东西，或者干脆没有提供选择器，那么排在前面的所有同辈元素都会被选中。这就跟用没有提供参数的 <code>.prevAll()</code> 效果一样。</p>
  
            <p>考虑如下的定义列表：</p>
            <pre>
&lt;dl&gt;
  &lt;dt&gt;term 1&lt;/dt&gt;
  &lt;dd&gt;definition 1-a&lt;/dd&gt;
  &lt;dd&gt;definition 1-b&lt;/dd&gt;
  &lt;dd&gt;definition 1-c&lt;/dd&gt;
  &lt;dd&gt;definition 1-d&lt;/dd&gt;

  &lt;dt id="term-2"&gt;term 2&lt;/dt&gt;
  &lt;dd&gt;definition 2-a&lt;/dd&gt;
  &lt;dd&gt;definition 2-b&lt;/dd&gt;
  &lt;dd&gt;definition 2-c&lt;/dd&gt;

  &lt;dt&gt;term 3&lt;/dt&gt;
  &lt;dd&gt;definition 3-a&lt;/dd&gt;
  &lt;dd&gt;definition 3-b&lt;/dd&gt;
&lt;/dl&gt;
</pre>
              <p>如果我们从 term 2 开始，查找在它之前的所有元素，直到 <code>&lt;dt&gt;</code>为止。</p>
            <pre>$('#term-2').prevUntil('dt').css('background-color', 'red');</pre>
              <p>其结果是使 definitions <code>1-a</code>, <code>1-b</code>, <code>1-c</code>, 和 <code>1-d</code> 的背景变为红色。</p>
         </longdesc>
         <example>
            <desc>查找排在 &lt;dt id="term-2"&gt; 之前的同辈元素，直到 &lt;dt&gt; 为止，并把它们的背景都设成红色。</desc>
         </example>
      </entry>
      <entry type="method" name="nextUntil">
         <desc>查找当前元素之前所有的同辈元素，直到遇到选择器匹配的元素为止，不包括那个匹配到的元素。</desc>
         <signature>
            <argument name="selector">
               <desc>选择器字符串，用于确定到哪个跟在后面的同辈元素时停止匹配。</desc>
            </argument>
         </signature>
         <longdesc><p>如果提供的jQuery代表了一组DOM元素， <code>.nextUntil()</code> 方法会找遍所有元素所在的DOM树中跟在它们后面的元素，直到遇到了一个跟提供的参数匹配的元素时才会停下来。这个新jQuery对象里包含了后面所有找到的同辈元素，但不包括提供给 <code>.nextUntil()</code> 的选择器匹配到的元素。</p>
            <p>如果提供的选择器没有匹配到任何东西，或者干脆没有提供选择器，那么排在后面的所有同辈元素都会被选中。这就跟用没有提供参数的 <code>.nextAll()</code> 效果一样。</p>
  
            <p>考虑如下的定义列表：</p>
            <pre>
&lt;dl&gt;
  &lt;dt&gt;term 1&lt;/dt&gt;
  &lt;dd&gt;definition 1-a&lt;/dd&gt;
  &lt;dd&gt;definition 1-b&lt;/dd&gt;
  &lt;dd&gt;definition 1-c&lt;/dd&gt;
  &lt;dd&gt;definition 1-d&lt;/dd&gt;

  &lt;dt id="term-2"&gt;term 2&lt;/dt&gt;
  &lt;dd&gt;definition 2-a&lt;/dd&gt;
  &lt;dd&gt;definition 2-b&lt;/dd&gt;
  &lt;dd&gt;definition 2-c&lt;/dd&gt;

  &lt;dt&gt;term 3&lt;/dt&gt;
  &lt;dd&gt;definition 3-a&lt;/dd&gt;
  &lt;dd&gt;definition 3-b&lt;/dd&gt;
&lt;/dl&gt;
</pre>
              <p>如果我们从 term 2 开始，查找在它之后的所有元素，直到 <code>&lt;dt&gt;</code>为止</p>
            <pre>$('#term-2').nextUntil('dt').css('background-color', 'red');</pre>
              <p>其结果是使 definition <code>2-a</code>, <code>2-b</code>, and <code>2-c</code> 的背景变为红色。</p>
         </longdesc>
         <example>
            <desc>查找跟在 &lt;dt id="term-2"&gt; 之后的同辈元素，直到 &lt;dt&gt; 为止，并把它们的背景都设成红色。</desc>
         </example>
      </entry>
      <entry type="method" name="event.isImmediatePropagationStopped">
         <desc>根据事件对象中是否调用过 <a href="event.stopImmediatePropagation.htm">event.stopImmediatePropagation()</a> 方法来返回一个布尔值。</desc>
         <signature/>
         <longdesc> 
            <p>这个事件方法在 <a href="http://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-Event-isImmediatePropagationStopped">DOM level 3</a> 有介绍。</p>  
         </longdesc>
         <example>
            <desc>检测 event.stopImmediatePropagation() 是否被调用过。</desc>
         </example>
      </entry>
      <entry type="method" name="event.stopImmediatePropagation">
         <desc>阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上。</desc>
         <signature/>
         <longdesc>
            <p>除了阻止元素上其它的事件处理函数的执行，这个方法还会通过在内部调用 <code>event.stopPropagation()</code> 来停止事件冒泡。如果仅仅想要停止事件冒泡到前辈元素上，而让这个元素上的其它事件处理函数继续执行，我们可以使用 <code><a href="event.stopPropagation.htm">event.stopPropagation()</a></code> 来代替。</p>
            <p>使用 <code><a href="event.isImmediatePropagationStopped.htm">event.isImmediatePropagationStopped()</a></code> 来确定这个方法是否(在那个事件对象上)调用过了。</p> 
         </longdesc>
         <example>
            <desc>阻止调用其它事件处理函数。</desc>
         </example>
      </entry>
      <entry type="method" name="event.isPropagationStopped">
         <desc>根据事件对象中是否调用过 <a href="event.stopPropagation.htm">event.stopPropagation()</a> 方法来返回一个布尔值。</desc>
         <signature/>
         <longdesc>
            <p>这个事件方法在 <a href="http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/events.html#Events-Event-isPropagationStopped">W3C DOM Level 3 specification</a> 有介绍。</p>
         </longdesc>
         <example>
            <desc>检测 event.stopPropagation() 是否被调用过。</desc>
         </example>
      </entry>
      <entry type="method" name="event.stopPropagation">
         <desc>防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。</desc>
         <signature/>
         <longdesc>  
            <p>我们可以用 <code><a href="event.isPropagationStopped.htm">event.isPropagationStopped()</a></code> 来确定这个方法是否(在那个事件对象上)调用过了。</p>
            <p>这个方法对 <a href="trigger.htm">trigger()</a> 来自定义的事件同样有效。</p>
            <p>注意，这不会阻止<em>同一个元素上</em>的其它事件处理函数的运行。</p> 
         </longdesc>
         <example>
            <desc>灭掉click事件的冒泡。</desc>
         </example>
      </entry>
      <entry type="method" name="event.isDefaultPrevented">
         <desc>根据事件对象中是否调用过 <a href="event.preventDefault.htm">event.preventDefault()</a> 方法来返回一个布尔值。</desc>
         <signature/>
         <longdesc>   </longdesc>
         <example>
            <desc>检测 event.preventDefault() 是否被调用过。</desc>
         </example>
      </entry>
      <entry type="method" name="event.preventDefault">
         <desc>阻止默认事件行为的触发。</desc>
         <signature/>
         <longdesc> 
            <p>举例来说，在执行这个方法后，如果点击一个锚点<code>&lt;a /&gt;</code>，就不会让浏览器跳转到新的 URL 去了。我们可以用 <code>event.isDefaultPrevented()</code> 来确定这个方法是否(在那个事件对象上)调用过了。</p>
         </longdesc>
         <example>
            <desc>取消点击的默认行为(导航)。</desc>
         </example>
      </entry>
      <entry type="property" name="event.timeStamp">
         <desc>事件触发时距离1970年1月1日的毫秒数。</desc>
         <signature/>
         <longdesc><p>通过在代码中两处获得 <code>event.timeStamp</code> 的值并记录他们的差值，可以很方便的检测某个jQuery函数的性能。</p> </longdesc>
         <example>
            <desc>显示两次点击之间的时间。</desc>
         </example>
      </entry>
      <entry type="property" name="event.result">
         <desc>当前事件最后触发的那个处理函数的返回值，除非值是 <code>undefined</code> 。</desc>
         <signature/>
         <longdesc><p>这个属性经常用于获取自定义事件的前一个返回值。</p></longdesc>
         <example>
            <desc>显示前一个事件处理函数的返回值。</desc>
         </example>
      </entry>
      <entry type="property" name="event.which">
         <desc>针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键。</desc>
         <signature/>
         <longdesc> 
            <p>
               <code>event.which</code> 将 <code>event.keyCode</code> 和 <code>event.charCode</code> 标准化了。推荐用 <code>event.which</code> 来监视键盘输入。更多细节请参阅： <a href="https://developer.mozilla.org/en/DOM/event.charCode#Notes">event.charCode on the MDC</a>. </p> 
         </longdesc>
         <example>
            <desc>记录按键</desc>
         </example>
      </entry>
      <entry type="property" name="event.pageY">
         <desc>鼠标相对于文档顶部的坐标。</desc>
         <signature/>
         <longdesc>   </longdesc>
         <example>
            <desc>显示鼠标相对于文档（框架中）顶部和左边的坐标。</desc>
         </example>
      </entry>
      <entry type="property" name="event.pageX">
         <desc>鼠标相对于文档左部的坐标。</desc>
         <signature/>
         <longdesc>   </longdesc>
         <example>
            <desc>显示鼠标相对于文档（框架中）顶部和左边的坐标。</desc>
         </example>
      </entry>
      <entry type="property" name="event.currentTarget">
         <desc>事件冒泡阶段当前所在DOM元素。</desc>
         <signature/>
         <longdesc>
            <p>这个属性通常与函数的 <code>this</code> 相同。</p>
            <p><em>如果你使用了 <a href="jQuery.proxy.htm">jQuery.proxy</a> 或其他方式操作了作用域， <code>this</code> 会等于你所指定的内容，而不再是 <code>event.currentTarget</code></em>。</p>
         </longdesc>
         <example>
            <desc>如果 currentTarget 完全等同于 `this` 则弹出警告框。</desc>
         </example>
      </entry>
      <entry type="property" name="event.relatedTarget">
         <desc>在事件中涉及的其它任何DOM元素。</desc>
         <signature/>
         <longdesc>
            <p>对于 <code>mouseout</code> 事件，它指向被进入的元素；对于 <code>mousein</code> 事件，它指向被离开的元素。</p> 
         </longdesc>
         <example>
            <desc>对于锚点的 mouseout 事件，显示被进入的元素类型。</desc>
         </example>
      </entry>
      <entry type="property" name="event.data">
         <desc>在绑定事件时传给 bind 函数的可选数据。</desc>
         <signature/>
         <longdesc>   </longdesc>
         <example>
            <desc>显示传入的数据</desc>
         </example>
      </entry>
      <entry type="property" name="event.target">
         <desc>最初触发事件的DOM元素。</desc>
         <signature/>
         <longdesc> 
            <p><code>event.target</code> 属性指向的对象可能是事件绑定时的那个对象，也可能是它的子孙元素。通常通过比较 <code>event.target</code> 和 <code>this</code> 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托。</p>
         </longdesc>
         <example>
            <desc>显示点击元素的标签名。</desc>
         </example>
         <example>
            <desc>实现一个简单的事件委托：给无序列表增加一个点击事件处理函数，然后它的子元素li的子元素都隐藏起来。当点击这个ul其中一个子元素li的时候，来回切换显示（参见 <a href="toggle.htm">toggle()</a>）li的子元素。</desc>
         </example>
      </entry>
      <entry type="property" name="event.type">
         <desc>描述事件类型。</desc>
         <signature/>
         <longdesc>   </longdesc>
         <example>
            <desc>点击所有锚点后弹出事件类型。</desc>
         </example>
      </entry>
      <entry type="property" name="jQuery.fx.off">
         <desc>禁用页面上所有的动画。</desc>
         <signature/>
         <longdesc>
            <p>把这个属性设置为 <code>true</code> 后，所有动画方法会立即停止特效，并把元素设置成动画的最终状态。有时候确实有必要这样做，比如：</p>
            <ul>
               <li>jQuery 用在资源较少的设备。</li>
               <li>一些用户由于动画效果而遇到了可访问性问题。（参考文章 <a href="http://www.jdeegan.phlegethon.org/turn_off_animation.htm">Turn Off Animation</a> 以获取更多信息。）</li>
            </ul>
            <p>当把这个属性设成 <code>false</code> 之后，可以重新开启所有动画。</p>

         </longdesc>
         <example>
            <desc>切换开启或关闭动画。</desc>
         </example>
      </entry>
      <entry type="method" name="each">
         <desc>迭代jQuery对象，为每个匹配的元素执行函数。</desc>
         <signature>
            <argument name="function(index, Element)">
               <desc>为每个匹配元素执行的函数</desc>
            </argument>
         </signature>
         <longdesc>
            <p><code>.each()</code> 方法用来让DOM循环结构更简单更不易出错。它会迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。更重要的是，回调函数是在当前DOM元素为上下文的语境中触发的。因此关键字 <code>this</code> 总是指向这个元素。</p>
            <p>假设页面上有这样一个简单的无序列表。</p>
            <pre>&lt;ul&gt;
    &lt;li&gt;foo&lt;/li&gt;
    &lt;li&gt;bar&lt;/li&gt;
  &lt;/ul&gt;
  </pre>
            <p>我们可以选中并迭代这些列表：</p>
            <pre>$('li').each(function(index) {
    alert(index + ': ' + $(this).text());
  });
  </pre>
            <p>列表中每一项会显示在下面的消息中：</p>
            <p>
               <span class="output">0: foo</span>
               <br/>
               <span class="output">1: bar</span>
            </p>
            <p>我们可以通过返回 <code>false</code>以便在回调函数内中止循环。</p>
         </longdesc>
         <example>
            <desc>遍历三个div并设置它们的color属性。</desc>
         </example>
         <example>
            <desc>如果你不想要普通的DOM元素，而想获得的是jQuery对象的话，使用$(this) 函数。例如：</desc>
         </example>
         <example>
            <desc>你可以使用 'return' 来提前结束 each() 循环。</desc>
         </example>
      </entry>
      <entry type="method" name="pushStack">
         <desc>将一个DOM元素集合加入到jQuery栈。</desc>
         <signature>
            <argument name="elements">
               <desc>将要压入jQuery栈的元素，用于生成一个新的jQuery对象。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="elements">
               <desc>将要压入jQuery栈的元素，用于生成一个新的jQuery对象。</desc>
            </argument>
            <argument name="name">
               <desc>用于生成元素数组的jQuery方法名。</desc>
            </argument>
            <argument name="arguments">
               <desc>传递给jQuery方法的参数(用于序列化)。</desc>
            </argument>
         </signature>
         <longdesc/>
         <example>
            <desc>Add some elements onto the jQuery stack, then pop back off again.</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.globalEval">
         <desc>全局执行一些JavaScript代码。</desc>
         <signature>
            <argument name="code">
               <desc>将要执行的 JavaScript 代码。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>这个方法与普通 JavaScript 中 <code>eval()</code> 的不同之处在于，它是在全局的上下文语境中执行的代码，这对于动态载入外部脚本非常重要。</p>
         </longdesc>
         <example>
            <desc>全局地执行脚本。</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.isXMLDoc">
         <desc>检测一个DOM节点是否在一个XML文档中（或者本身就是一个XML文档）。</desc>
         <signature>
            <argument name="node">
               <desc>用于检测是否在XML文档中的DOM节点。</desc>
            </argument>
         </signature>
         <longdesc/>
         <example>
            <desc>检测一个对象是否在一个XML文档之中。</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.removeData">
         <desc>移除先前存储的数据片段。</desc>
         <signature>
            <argument name="element">
               <desc>将要移除数据的DOM元素。</desc>
            </argument>
            <argument name="name">
               <desc>将要移除的数据片段名。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>
               <strong>注意：</strong> 这是一个底层方法，使用 <code><a href="removeData.htm">.removeData()</a></code> 更方便。</p>
	           <p><code>jQuery.removeData()</code> 允许我们移除先前用 <code><a href="jQuery.data.htm">jQuery.data()</a></code> 设置的数据。如果提供了name参数，则 <code>jQuery.removeData()</code> 删除那个指定的值，如果不带参数，则删除所有数据。</p>
         </longdesc>
         <example>
            <desc>设置两个数据，然后再删除其中一个。</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.data">
         <desc>在指定的元素上随心所欲的存放数据。</desc>
         <signature>
            <argument name="element">
               <desc>用于存放数据的DOM元素。</desc>
            </argument>
            <argument name="key">
               <desc>将要设置的数据片段名。</desc>
            </argument>
            <argument name="value">
               <desc>新的数据值。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>
               <strong>注意：</strong> 这是一个底层方法，使用 <code><a href="data.htm">.data()</a></code> 更方便。</p>
	           <p><code>jQuery.data()</code> 方法允许我们安全地将任何类型的数据附加到DOM元素上而不用担心循环引用和内存泄露之类的问题。我们在单个元素上设置几个独立的数据，并且以后还可以分别检索到：</p>
	           <pre>jQuery.data(document.body, 'foo', 52);
jQuery.data(document.body, 'bar', 'test');</pre>
         </longdesc>
         <example>
            <desc>在一个DIV元素上存放数据，然后检索这个数据。</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.data">
         <desc>返回用 <code>jQuery.data(element, name, value)</code> 存放在元素上的指定数据，或者元素上的所有数据。</desc>
         <signature>
            <argument name="element">
               <desc>将要查询数据的DOM元素。</desc>
            </argument>
            <argument name="key">
               <desc>存放的数据名。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="element">
               <desc>将要查询数据的DOM元素。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>
               <strong>注意：</strong> 这是一个底层方法，使用 <code><a href="data.htm">.data()</a></code> 更方便。</p>
            <p><code>jQuery.data()</code> 方法允许我们安全地将任何类型的数据附加到DOM元素上而不用担心循环引用和内存泄露之类的问题。 我们可以分别在DOM元素上获取几个独立的数据，或者一次获取一组：</p>
            <pre>alert(jQuery.data( document.body, 'foo' ));
alert(jQuery.data( document.body ));</pre>
            <p>上面两行中alert的数据都是先前给 <code>body</code> 设置的。如果先前没有设置过，则返回一个空字符串。</p>
            <p>调用 <code>jQuery.data(element)</code> 可以返回一个JavaScript对象，包含元素上所有存放的数据。注意jQuery本身也在内部使用这个方法存放数据，比如事件处理函数，所以返回的对象中会包含不是你自己代码存放的数据。</p>
            <p>
               <strong>HTML 5 data- 属性</strong>
            </p>
            <p>从 jQuery 1.4.3 起，<a href="http://ejohn.org/blog/html-5-data-attributes/">HTML 5 data- 属性</a> 中的数据会自动添加进 jQuery 的 data 对象</p>
            <p>例如下面的 HTML:</p>

            <pre>&lt;div data-role="page" data-hidden="true" data-options='{"name":"John"}'&gt;&lt;/div&gt;</pre>

            <p>如下所有的 jQuery 代码都可以正常使用。</p>

            <pre>$("div").data("role") === "page";
$("div").data("hidden") === true;
$("div").data("options").name === "John";</pre>

            <p>Note that strings are left intact while JavaScript values are converted to their associated value (this includes booleans, numbers, objects, arrays, and null). When the data attribute is an object (starts with '{') or array (starts with '[') then <code>jQuery.parseJSON</code> is used to parse the string; it must follow valid JSON syntax <em>including quoted property names</em>. The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).</p>

         </longdesc>
         <example>
            <desc>获取存放在元素上名叫 "blah" 的数据。</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.dequeue">
         <desc>为匹配的元素执行队列中下一个函数。</desc>
         <signature>
            <argument name="element">
               <desc>一个DOM元素，会从它附带的函数队列中弹出并执行一个函数。</desc>
            </argument>
            <argument name="queueName">
               <desc>包含队列名的字符串。默认值是 <code>fx</code> ，即动画效果队列。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>
               <strong>注意：</strong> 这是一个底层方法，应当使用更合适的 <code><a href="dequeue.htm">.dequeue()</a></code> 来代替。</p>
            <p>当调用 <code>jQuery.dequeue()</code> 时，队列中的下一个函数会从队列中移出并执行。这个函数应当在内部直接或间接调用 <code>jQuery.dequeue()</code> 以便队列得以继续执行下去。</p>
         </longdesc>
         <example>
            <desc>使用 dequeue 来结束一个自定义的队列函数，以便能够让队列继续运行下去。</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.queue">
         <desc>显示匹配元素上将要执行的函数队列。</desc>
         <signature>
            <argument name="element">
               <desc>将要检测附加队列的DOM元素。</desc>
            </argument>
            <argument name="queueName">
               <desc>包含队列名的字符串。默认值是 <code>fx</code> ，即动画效果队列。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>
               <strong>注意：</strong> 这是一个底层方法，应当使用更合适的 <code><a href="queue.htm">.queue()</a></code> 来代替。</p>
         </longdesc>
         <example>
            <desc>显示队列长度。</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.queue">
         <desc>操作匹配元素上将要执行的函数队列。</desc>
         <signature>
            <argument name="element">
               <desc>带有函数队列数组的DOM元素。</desc>
            </argument>
            <argument name="queueName">
               <desc>包含队列名的字符串。默认值是 <code>fx</code> ，即动画效果队列。</desc>
            </argument>
            <argument name="newQueue">
               <desc>一个用于替换现有队列内容的函数数组。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="element">
               <desc>将要往队列中增加一个函数的DOM元素。</desc>
            </argument>
            <argument name="queueName">
               <desc>包含队列名的字符串。默认值是 <code>fx</code> ，即动画效果队列。</desc>
            </argument>
            <argument name="callback()">
               <desc>将要添加进队列的新函数。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>
               <strong>注意：</strong> 这是一个底层方法，应当使用更合适的 <code><a href="queue.htm">.queue()</a></code> 来代替。</p>
	           <p>每个元素都可以通过jQuery附加一个或多个函数队列。在大多数程序中，只会使用一个队列（名为 <code>fx</code>）。队列允许异步地对某个元素进行一系列操作，而不是把整个程序挂起。</p>
	           <p><code>jQuery.queue()</code> 允许我们直接操作这个函数队列。最常用的用法是调用 <code>jQuery.queue()</code> 时带一个回调函数，这样就能让我们在队列最后放置一个新的函数。</p>
	           <p>注意，当通过 <code>jQuery.queue()</code> 增加一个函数时，务必确保函数的最后调用了 <code>jQuery.dequeue()</code> ，以便能够执行队列中的下一个函数。</p>
         </longdesc>
         <example>
            <desc>将一个自定义函数加入队列。</desc>
         </example>
         <example>
            <desc>通过设置一个队列数组，来删除已有的队列。</desc>
         </example>
      </entry>
      <entry type="method" name="clearQueue">
         <desc>清空对象上尚未执行的所有队列。</desc>
         <signature>
            <argument name="queueName">
               <desc>包含队列名的字符串。默认值是 <code>fx</code> ，即动画效果队列。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>当调用 <code>.clearQueue()</code> 方法时，队列中所有尚未执行的函数都将被移除。如果不带参数，则 <code>.clearQueue()</code> 默认清空标准动画队列 <code>fx</code> 中剩余的函数。这个方法跟 <code>.stop(true)</code>. 很类似。但 <code>.stop()</code> 方法只适用于动画，而 <code>.clearQueue()</code> 则可以用于移除任何由 <code>.queue()</code> 方法添加的jQuery通用队列中的函数。 </p>
         </longdesc>
         <example>
            <desc>清空队列。</desc>
         </example>
      </entry>
      <entry type="method" name="toArray">
         <desc>返回一个数组，包含jQuery对象集合中的所有DOM元素。</desc>
         <signature/>
         <longdesc>
            <p>
               用 <code>.toArray()</code> 返回jQuery集合中所有元素：</p>
            <pre>alert($('li').toArray());</pre>
            <p>所有匹配的DOM节点都会包含在一个标准的数组中：</p>
            <p>
               <span class="result">[&lt;li id="foo"&gt;, &lt;li id="bar"&gt;]</span>
            </p>
         </longdesc>
         <example>
            <desc>选择文档中所有的div，并且返回一个DOM元素数组，然后利用浏览器内置的reverse方法反转整个数组。</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.isEmptyObject">3120660532
         <desc>测试对象是否是空对象（不包含任何属性）。.</desc>
         <signature>
            <argument name="object">
               <desc>用于检测是否为空的对象。</desc>
            </argument>
         </signature>
         <longdesc><p>jQuery 1.4 中，这个方法既检测对象本身的属性，也检测从原型继承的属性( 因为没有使用hasOwnProperty )。</p>
         </longdesc>
         <example>
            <desc>检测一个对象是否是一个空对象。</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.isPlainObject">
         <desc>测试对象是否是纯粹的对象（通过 "{}" 或者 "new Object" 创建的）。</desc>
         <signature>
            <argument name="object">
               <desc>用于检测是否是一个纯粹的对象。</desc>
            </argument>
         </signature>
         <longdesc/>
         <example>
            <desc>测试对象是否是纯粹的对象。</desc>
         </example>
      </entry>
      <entry type="method" name="keydown">
         <desc>为 "keydown" 事件绑定一个处理函数，或者触发元素上的 "keydown" 事件。 </desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>每次事件触发时会执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature/>
         <longdesc>
            <p>这个函数的第一种用法是 <code>.bind('keydown', handler)</code> 的快捷方式，第二种用法是 <code>.trigger('keydown')</code> 的快捷方式。</p>
            <p>当用户第一次按下一个按键时，会在这个元素上触发 <code>keydown</code> 。这个事件可以附加给任何元素，但是只有可以获得焦点的元素才能触发这个事件。不同的浏览器中，可聚焦的元素略有不同，但表单元素总是可以获得焦点，所以这个事件可以放心的用在这些元素上。</p>
            <p>举例来说，请看下面的HTML：</p>
            <pre>&lt;form&gt;
  &lt;input id="target" type="text" value="Hello there" /&gt;
&lt;/form&gt;
&lt;div id="other"&gt;
  Trigger the handler
&lt;/div&gt;</pre>
            <p>事件处理函数可以绑定在输入框上：</p>
            <pre>$('#target').keydown(function() {
  alert('Handler for .keydown() called.');
});</pre>
            <p>现在，当插入点在这个输入框内部时，按下一个按键，那么弹出对话框中就会显示下面的文字：</p>
            <p>
               <span class="output">Handler for .keydown() called.</span>
            </p>
            <p>我们也可以在点击另一个元素时手动触发这个事件：</p>
            <pre>$('#other').click(function() {
  $('#target').keydown();
});</pre>
            <p>在代码执行后，如果你点击 <span class="output">Trigger the handler</span> 将同样会弹出上面的消息。</p>
            <p>如果需要捕获在任意位置的按键事件（例如要在页面上实现全局的快捷键），那么可以把这个行为附加到 <code>document</code> 对象上去。由于事件冒泡，所有的按键事件都会沿着各自的DOM树冒泡到 <code>document</code> 对象，除非被明确的制止。</p>
            <p>要确定哪个按键被按下了，我们可以检测传递给事件处理函数的 <a href="http://api.jquery.com/category/events/event-object/">event object</a> 。由于不同的浏览器使用不同的属性来存储这个信息，所以jQuery将它们标准化成 <code>.which</code> 属性，以便我们能可靠地使用它来获取按键代码。这个代码与键盘上的按键一一对应，包括方向键等特殊键。如果要捕获实际输入的文本， <code>.keypress()</code> 可能是个更好的选择。</p>
         </longdesc>
         <example>
            <desc>当按键按下时，显示传递给 keydown 事件处理函数的事件对象。</desc>
         </example>
      </entry>
      <entry type="method" name="index">
         <desc>从匹配的元素中搜索给定元素的索引值，从0开始计数。</desc>
         <signature/>
         <signature>
            <argument name="selector">
               <desc>一个选择器，代表一个jQuery对象，将会从这个对象中查找元素。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="element">
               <desc>将要用于查找的DOM元素，或者jQuery对象中的第一个元素。</desc>
            </argument>
         </signature>
         <longdesc>
            <h4>返回值</h4>
            <p>如果不传递任何参数给 <code>.index()</code> 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置。</p>
            <p>如果在一组元素上调用 <code>.index()</code> ，并且参数是一个DOM元素或jQuery对象， <code>.index()</code> 返回值就是传入的元素相对于原先集合的位置。</p>
            <p>如果参数是一个选择器， <code>.index()</code> 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 <code>.index()</code> 返回 -1.</p>
            <h4>细节</h4>
            <p><code>.get()</code> 接受一个索引值参数并返回对应的DOM节点， <code>.index()</code> 与其正好相反，接受一个DOM节点然后返回其索引值。假设页面上有个简单的无序列表：</p>
            <pre>
&lt;ul&gt;
  &lt;li id="foo"&gt;foo&lt;/li&gt;
  &lt;li id="bar"&gt;bar&lt;/li&gt;
  &lt;li id="baz"&gt;baz&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>如果我们获取了三个li中的一个元素（例如通过DOM函数，或者事件处理函数中的上下文this）， <code>.index()</code> 能够在匹配的元素中找到这个列表项：</p>
            <pre>
var listItem = document.getElementById('bar');
alert('Index: ' + $('li').index(listItem));
</pre>
            <p>我们就能得到这个li所在的位置，从0开始计数的：</p>
            <p>
               <span class="output">Index: 1</span>
            </p>
            <p>类似的，如果我们获得了含有这三个之中一个元素的jQuery对象， <code>.index()</code> 也能用于搜索那个列表项：</p>
            <pre>
var listItem = $('#bar');
alert('Index: ' + $('li').index(listItem));
</pre>
            <p>我们就能得到这个li所在的位置，从0开始计数的：</p>
            <p>
               <span class="output">Index: 1</span>
            </p>
            <p>注意，如果作为 <code>.index()</code> 参数使用的jQuery集合含有多个元素，则只会使用第一个：</p>
            <pre>
var listItems = $('li:gt(0)');
alert('Index: ' + $('li').index(listItems));
</pre>
            <p>我们得到了匹配的li集合中，第一个元素的位置，从0开始计数。</p>
            <p>
               <span class="output">Index: 1</span>
            </p>
            <p>如果我们将一个字符串传递给 <code>.index()</code> 方法，这个字符串会被解析成jQuery选择器，将会定位到调用 <code>.index()</code> 的jQuery对象中第一个元素，相对于由这个选择器匹配到的元素集合中的位置：</p>
            <pre>
var listItem = $('#bar');
alert('Index: ' + listItem.index('li'));
</pre>
            <p>我们就能得到这个列表项li#bar所在的位置，从0开始计数的：</p>
            <p>
               <span class="output">Index: 1</span>
            </p>
            <p>如果我们忽略参数， <code>.index()</code> 将返回集合中第一个元素相对于其同辈元素的位置：</p>
            <pre>alert('Index: ' + $('#bar').index();</pre>
            <p>又一次，我们得到了这个li从0开始数的位置。</p>
            <p>
               <span class="output">Index: 1</span>
            </p>

         </longdesc>
         <example>
            <desc>点击后，返回那个div在页面上的索引值(从0开始计数)。</desc>
         </example>
         <example>
            <desc>返回ID为bar的元素的索引值。</desc>
         </example>
         <example>
            <desc>返回jQuery集合中第一项的索引值。</desc>
         </example>
         <example>
            <desc>返回ID为bar的元素相对于所有 &lt;li&gt; 元素的索引值。</desc>
         </example>
         <example>
            <desc>返回ID为bar的元素相对于同辈的索引值。</desc>
         </example>
         <example>
            <desc>由于没有元素的ID为foobar，所以返回 -1。</desc>
         </example>
      </entry>
      <entry type="method" name="removeData">
         <desc>移除先前存储的数据片段。</desc>
         <signature>
            <argument name="name">
               <desc>将要移除的数据片段名。</desc>
            </argument>
         </signature>
         <longdesc>
            <p><code>.removeData()</code> 方法允许我们移除先前用 <code>.data()</code>. 设置的数据。如果提供了name参数，则 <code>.removeData()</code> 删除那个指定的值，如果不带参数，则删除所有数据。</p>
            <p>注意，从 jQuery 1.4.3 起，调用 <code>.removeData()</code> 会让这个要移除的属性值恢复成 DOM 中同名的 data- 属性值，而不是把它设置成 <code>undefined</code>。</p>
         </longdesc>
         <example>
            <desc>设置两个数据，然后再删除其中一个。</desc>
         </example>
      </entry>
      <entry type="method" name="data">
         <desc>在匹配的元素上随心所欲的存放数据。</desc>
         <signature>
            <argument name="key">
               <desc>将要设置的数据片段名。</desc>
            </argument>
            <argument name="value">
               <desc>新的数据值；可以是任何 Javascript 数据类型，包括数组和对象。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="obj">
               <desc>用于设置的键值对。</desc>
            </argument>
         </signature>
         <longdesc>
            <p><code>.data()</code> 方法允许我们安全地将任何类型的数据附加到DOM元素上而不用担心循环引用和内存泄露之类的问题。</p>
            <p>在单个元素上设置几个独立的数据，并且以后还可以分别检索到：</p>
            <pre>
$('body').data('foo', 52);
$('body').data('bar', { myType: 'test', count: 40 });

$('body').data('foo'); // 52
$('body').data(); // {foo: 52, bar: { myType: 'test', count: 40 }}
</pre>
            <p>从 jQuery 1.4.3 起，通过 <code>.data(obj)</code> 给元素设置数据时，会在元素原先存放的数据上扩展。jQuery 本身也通过 <code>.data()</code> 方法存放信息，名为 'events' 和 'handle' ，并且保留的任何以下划线开头的数据名称，以供内部使用。</p>
			<p><strong>特别注意</strong>：从 jQuery 1.4 起到 jQuery 1.4.2 的几个版本中， .data(obj) 方法会<strong>完全替换</strong>掉元素上的所有数据，而不是扩展数据对象。如果你使用了第三方插件，那就不建议完全替换掉元素上的数据对象，因为插件也有可能在上面存放数据。</p>
            <p>由于浏览器与插件和内部代码的交互方式，导致 <code>.data()</code> 方法无法在 <code>&lt;object&gt;</code> (除非他是一个Flash插件)， <code>&lt;applet&gt;</code> 或者 <code>&lt;embed&gt;</code> 元素上存放数据。</p>
            <p>
               <strong>HTML 5 data- 属性</strong>
            </p>
            <p>从 jQuery 1.4.3 起，<a href="http://ejohn.org/blog/html-5-data-attributes/">HTML 5 data- 属性</a> 中的数据会自动放入 jQuery 的数据对象中。</p>

            <p>举例来说，如果提供如下的 HTML:</p>

            <pre>&lt;div data-role="page" data-hidden="true" data-options='{"name":"John"}'&gt;&lt;/div&gt;</pre>

            <p>那么就可以通过下面的 jQuery 代码获得数据。下面的每个语句都是 true。</p>

            <pre>$("div").data("role") === "page";
$("div").data("hidden") === true;
$("div").data("options").name === "John";</pre>

            <p>注意，这些字符串在用 .data() 获取时会自动转换成他们对应数据类型(包括布尔值、数字、对象、数组和 null )，而 HTML 代码中的字符串不会有任何的改变。另外，data- 属性只会在第一次用 .data() 方法获取数据的时候，从 HTML 代码中获取，并保存到 jQuery 内部对象中。在此之后，.data() 再也不会访问或修改 data- 属性里的东西了。</p>
         </longdesc>
         <example>
            <desc>往div元素上存放再获取数据</desc>
         </example>
      </entry>
      <entry type="method" name="data">
         <desc>返回jQuery对象集合中第一个元素上储存的数据，这个数据是先前用data(name, value)设定的。</desc>
         <signature>
            <argument name="key">
               <desc>先前存放的数据名</desc>
            </argument>
         </signature>
         <signature/>
         <longdesc>
            <p><code>.data()</code> 方法允许我们安全地将任何类型的数据附加到DOM元素上而不用担心循环引用和内存泄露之类的问题。我们可以同时获取单一元素上几个独立的数据，或者整个一组：</p>
            <pre>
alert($('body').data('foo'));
alert($('body').data());
</pre>
            <p>上面两行会显示先前设置在 <code>body</code> 元素上的数据。如果元素上没有设置过任何东西，则会返回 null 。</p>
            <p>调用 <code>.data()</code> 时如果不带参数，将会以 JavaScript 对象的形式获取所有数据。这个对象可以安全的存放在变量中，因为一旦这个新对象被提取出来，之后对元素进行的 <code>.data(obj)</code> 操作，将无法再影响到这个对象了。另外，直接操作对象会比通过调用 <code>.data()</code>来设置或获取值要快一些：</p>
<pre>
var mydata = $("#mydiv").data();
if ( mydata.count &lt; 9 ) {
    mydata.count = 43;
    mydata.status = "embiggened";
}
</pre>
         </longdesc>
         <example>
            <desc>获取存放在元素上，名为 "blah" 的数据。</desc>
         </example>
      </entry>
      <entry type="method" name="get">
         <desc>获取jQuery对象对应的DOM元素。</desc>
         <signature>
            <argument name="index">
               <desc>从0开始计数，确定获取哪个元素。</desc>
            </argument>
         </signature>
         <longdesc>
            <p><code>.get()</code> 方法允许我们直接访问jQuery对象隐含的DOM节点。假设我们页面上有一个简单的无序列表：</p>
            <pre>
&lt;ul&gt;
  &lt;li id="foo"&gt;foo&lt;/li&gt;
  &lt;li id="bar"&gt;bar&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>不带参数的 <code>.get()</code> 会返回所有的元素：</p>
            <pre>alert($('li').get());</pre>
            <p>调用这个方法会返回所有匹配的DOM节点，这些节点包含在一个标准的数组中：</p>
            <p>
               <span class="result">[&lt;li id="foo"&gt;, &lt;li id="bar"&gt;]</span>
            </p>
            <p>如果指定了 index 参数， .get() 则会获取单个元素：</p>
            <pre>alert($('li').get(0));</pre>
            <p>由于索引 index 是以 0 开始计数的，所以上面代码返回了第一个列表项：</p>
            <p>
               <span class="output">&lt;li id="foo"&gt;</span>
            </p>
            <p>由于每个 jQuery 对象也会冒充为一个数组，所以我们也可以用直接用数组的取值运算符来获得列表项：</p>
            <pre>alert($('li')[0]);</pre>
            <p>然而，这种语法缺少某些 .get() 所具有的附加功能，比如可以指定索引值为负值：</p>
            <pre>alert($('li').get(-1));</pre>
            <p>负的索引值表示从匹配的集合中从末尾开始倒数，所以上面这个例子将会返回列表中最后一项：</p>
            <p>
               <span class="output">&lt;li id="bar"&gt;</span>
            </p>
         </longdesc>
         <example>
            <desc>选择文档中的所有div，并且作为一个数组返回。然后使用浏览器原生的 reverse 方法将数组翻转。</desc>
         </example>
         <example>
            <desc>给出点中元素的标签名。</desc>
         </example>
      </entry>
      <entry type="method" name="size">
         <desc>返回 jQuery 对象中对应 DOM 元素的个数。</desc>
         <signature/>
		 <longdesc>
            <p>假设页面上有下面一个简单的无序列表：</p>
<pre>
&lt;ul&gt;
  &lt;li&gt;foo&lt;/li&gt;
  &lt;li&gt;bar&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>我们通过调用 <code>.size()</code> 来获取列表项的数目：</p>
            <pre>alert('Size: ' + $('li').size());</pre>
            <p>于是就显示了列表项的个数：</p>
            <p>
               <span class="output">Size: 2</span>
            </p>
            <p>
               <strong>你也可以使用 <a href="length.htm">.length</a> 属性来代替，他会略微快那么一点点。</strong>
            </p>
         </longdesc>
         <example>
            <desc>Count the divs. Click to add more.</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.noConflict">
         <desc>放弃jQuery对 <code>$</code> 变量的控制权。</desc>
         <signature>
            <argument name="removeAll">
               <desc>一个布朗值，用于确定是否在全局作用域中移除所有 jQuery 变量，包括 jQuery 本身。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>许多 JavaScript 库会跟 jQuery 一样使用 <code> $</code> 作为一个函数或者变量名。在 jQuery 中 <code>$</code> 仅仅是 <code>jQuery</code> 对象的别名，所以就算不用 <code>$</code> 也可以通过 <code>jQuery</code> 完整地使用所有功能。例如，用到 $("div p") 的地方，换成 jQuery("div p") 也是可以的。下面的例子就展示了如果你需要跟 jQuery 同时使用其他 JavaScript 库，我们可以通过调用 <code>$.noConflict()</code> 来把 <code>$</code> 的控制权交还给其他库：</p>
            <pre>
&lt;script type="text/javascript" src="other_lib.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
  $.noConflict();
  // 这里的代码使用其他库中的 $ 。
&lt;/script&gt;
</pre>
            <p>这里有个技巧对于解决冲突特别有效。.ready() 方法可以给 jQuery 对象取个别名，这样就能够在传给 .ready() 的回调函数的内部继续使用 $ 而不用担心冲突：</p>
            <pre>
&lt;script type="text/javascript" src="other_lib.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
  $.noConflict();
  jQuery(document).ready(function($) {
    // 这里的代码使用 jQuery 中的 $
  });
  // 这里的代码使用其他库的 $
&lt;/script&gt;
</pre>
            <p>如果有必要，我们只要把参数 <code>true</code> 传给这个方法，就可以把 <code>jQuery</code> 这个变量完全释放。这种情况非常罕见，但有时候我们必须这么做（比如我们需要在一个页面中引入多个版本的 <code>jQuery</code> 库）。注意，这样做很有可能导致插件失效，因为插件通常依赖于 jQuery 变量。</p>
         </longdesc>
         <example>
            <desc>把原先映射在 $ 上的对象重新映射到 $ 上。</desc>
         </example>
         <example>
            <desc>恢复 $ 别名，然后创建并执行一个函数，其内部作用域提供了 $ 作为 jQuery 的别名。这样，就不会访问到全局的 $ 对象了。大多数不依赖其他库的插件在这个函数中都可以正常使用。</desc>
         </example>
         <example>
            <desc>你可以对 jQuery.noConflict() 进行链式操作来调用 ready 的快捷方式，这样可以压缩代码。</desc>
         </example>
         <example>
            <desc>创建一个不同的别名，之后的脚本中就可以使用这个别名来替代 jQuery 。</desc>
         </example>
         <example>
            <desc>完全把 jQuery 移到另一个对象上新的命名空间中。</desc>
         </example>
      </entry>
      <entry type="selector" name="selected">
         <desc>选择所有选中的元素。</desc>
         <signature/>
         <longdesc>
            <p><code>:selected</code> 选择器仅适用于 <code>&lt;option&gt;</code> 元素。复选框和单选框元素请使用 <code>:checked</code></p>
         </longdesc>
         <example>
            <desc>附加 change 事件到一个 select 元素上，获取选中的 option 元素并把文本写入一个 div 之中。</desc>
         </example>
      </entry>
      <entry type="selector" name="checked">
         <desc>匹配所有勾选的元素。</desc>
         <signature/>
         <longdesc>
            <p><code>:checked</code> 选择器仅适用于复选框和单选框按钮。如果要选择 select 中选中的 option 元素，请使用 <code>:selected</code> 选择器。</p>
         </longdesc>
         <example>
            <desc>查找选中的 input 元素。</desc>
         </example>
      </entry>
      <entry type="selector" name="disabled">
         <desc>选择所有禁用的元素。</desc>
         <signature/>
         <longdesc>
            <p>如其他伪类选择器(以 ":" 开头的选择器)一样，建议使用此类选择器时，跟在一个标签名或者其他选择器后面；否则，默认使用了全局通配符选择器 "*" 。换句话说，<code>$(':disabled')</code> 等价于 <code>$('*:disabled')</code>，所以应该使用 <code>$('input:disabled')</code> 来提升匹配效率。</p>
         </longdesc>
         <example>
            <desc>查找所有禁用的 input 元素。</desc>
         </example>
      </entry>
      <entry type="selector" name="enabled">
         <desc>选择所有可用的元素。</desc>
         <signature/>
         <longdesc>
            <p>如其他伪类选择器(以 ":" 开头的选择器)一样，建议使用此类选择器时，跟在一个标签名或者其他选择器后面；否则，默认使用了全局通配符选择器 "*" 。换句话说，<code>$(':enabled')</code> 等价于 <code>$('*:enabled')</code>，所以应该使用 <code>$('input:enabled')</code> 来提升匹配效率。</p>
         </longdesc>
         <example>
            <desc>查找所有可用的 input 元素。</desc>
         </example>
      </entry>
      <entry type="selector" name="file">
         <desc>选择所有文件域，即 type 为 file 的元素。</desc>
         <signature/>
         <longdesc>
            <p>如其他伪类选择器(以 ":" 开头的选择器)一样，建议使用此类选择器时，跟在一个标签名或者其他选择器后面；否则，默认使用了全局通配符选择器 "*" 。换句话说，<code>$(':file')</code> 等价于 <code>$('*:file')</code>，所以应该使用 <code>$('input:file')</code> 来提升匹配效率。</p>
         </longdesc>
         <example>
            <desc>查找所有的文件域。</desc>
         </example>
      </entry>
      <entry type="selector" name="button">
         <desc>选择所有按钮，包括 button 元素和 type 为 button 的元素。</desc>
         <signature/>
         <longdesc/>
         <example>
            <desc>查找所有按钮。</desc>
         </example>
      </entry>
      <entry type="selector" name="reset">
         <desc>选择所有重置按钮，即 type 为 reset 的元素。</desc>
         <signature/>
         <longdesc/>
         <example>
            <desc>查找所有的重置按钮。</desc>
         </example>
      </entry>
      <entry type="selector" name="image">
         <desc>选择所有图像提交按钮，即 type 为 image 的元素。</desc>
         <signature/>
         <longdesc/>
         <example>
            <desc>查找所有图像提交按钮。</desc>
         </example>
      </entry>
      <entry type="selector" name="submit">
         <desc>选择所有提交按钮，即 type 为 submit 的元素。</desc>
         <signature/>
         <longdesc>
            <p><code>:submit</code> 选择器主要用于 button 或者 input 元素。注意，某些浏览器默认把没有设置 type 的 <code>&lt;button&gt;</code> 元素看做 <code>type="default"</code> ，而其他浏览器(比如IE)则并非如此。</p>
         </longdesc>
         <example>
            <desc>查找所有作为 td 元素后代的提交按钮。</desc>
         </example>
      </entry>
      <entry type="selector" name="checkbox">
         <desc>选择所有复选框，即 type 为 checkbox 的元素。</desc>
         <signature/>
         <longdesc>
            <p><code>$(':checkbox')</code> 等价于 <code>$('[type=checkbox]')</code>。如其他伪类选择器(以 ":" 开头的选择器)一样，建议使用此类选择器时，跟在一个标签名或者其他选择器后面；否则，默认使用了全局通配符选择器 "*" 。换句话说，<code>$(':checkbox')</code> 等价于 <code>$('*:checkbox')</code>，所以应该使用 <code>$('input:checkbox')</code> 来提升匹配效率。</p>
         </longdesc>
         <example>
            <desc>查找所有复选框。</desc>
         </example>
      </entry>
      <entry type="selector" name="radio">
         <desc>选择所有单选框元素，即 type 为 radio 的元素。</desc>
         <signature/>
         <longdesc>
            <p><code>$(':radio')</code> 等价于 <code>$('[type=radio]')</code>。如其他伪类选择器(以 ":" 开头的选择器)一样，建议使用此类选择器时，跟在一个标签名或者其他选择器后面；否则，默认使用了全局通配符选择器 "*" 。换句话说，<code>$(':radio')</code> 等价于 <code>$('*:radio')</code>，所以应该使用 <code>$('input:radio')</code> 来提升匹配效率。</p>
            <p>如果要选择一组关联的单选按钮 button ，你可以使用： <code>$('input[name=gender]:radio')</code>
            </p>
         </longdesc>
         <example>
            <desc>查找所有单选框。</desc>
         </example>
      </entry>
      <entry type="selector" name="password">
         <desc>选择所有密码框，即 type 为 password 的元素。</desc>
         <signature/>
         <longdesc>
            <p><code>$(':password')</code> 等价于 <code>$('[type=password]')</code>。如其他伪类选择器(以 ":" 开头的选择器)一样，建议使用此类选择器时，跟在一个标签名或者其他选择器后面；否则，默认使用了全局通配符选择器 "*" 。换句话说，<code>$(':password')</code> 等价于 <code>$('*:password')</code>，所以应该使用 <code>$('input:password')</code> 来提升匹配效率。</p>
         </longdesc>
         <example>
            <desc>查找所有密码框。</desc>
         </example>
      </entry>
      <entry type="selector" name="text">
         <desc>选择所有文本输入框，即 type 为 text 的元素。不包括 textarea 元素。</desc>
         <signature/>
         <longdesc>
            <p><code>$(':text')</code> 等价于 <code>$('[type=text]')</code>。如其他伪类选择器(以 ":" 开头的选择器)一样，建议使用此类选择器时，跟在一个标签名或者其他选择器后面；否则，默认使用了全局通配符选择器 "*" 。换句话说，<code>$(':text')</code> 等价于 <code>$('*:text')</code>，所以应该使用 <code>$('input:text')</code> 来提升匹配效率。</p>
         </longdesc>
         <example>
            <desc>查找所有文本框。</desc>
         </example>
      </entry>
      <entry type="selector" name="input">
         <desc>选择所有的 input, textarea, select 和 button 元素。</desc>
         <signature/>
         <longdesc>
            <p><code>:input</code> 选择器会选中所有的表单控件。</p>
         </longdesc>
         <example>
            <desc>查找所有的输入元素。</desc>
         </example>
      </entry>
      <entry type="selector" name="only-child">
         <desc>选择所有的独生子元素。</desc>
         <signature/>
         <longdesc>
            <p>如果某个元素是他父元素下唯一的子元素，那他就会被匹配到。换句话说，如果某个元素有同辈元素，则不会被匹配到。</p>
         </longdesc>
         <example>
            <desc>在每个 div 中查找没有同辈的 button 按钮，并且改变这些按钮的外观。</desc>
         </example>
      </entry>
      <entry type="selector" name="last-child">
         <desc>如果某个元素是父元素中的最后一个元素，那么他就会被选中。</desc>
         <signature/>
         <longdesc>
            <p>注意，<a href="last-selector.htm">:last</a> 只匹配一个元素，就是最后一个元素，而 <code>:last-child</code> 则能匹配多个元素：即每个父元素中的最后一个。</p>
         </longdesc>
         <example>
            <desc>在每个匹配的 div 中查找最后一个 span ，并加上 CSS 以及增加鼠标悬停效果。</desc>
         </example>
      </entry>
      <entry type="selector" name="first-child">
         <desc>如果某个元素是父元素中的第一个元素，那么他就会被选中。</desc>
         <signature/>
         <longdesc>
            <p>注意，<a href="first-selector.htm">:first</a> 只匹配一个元素，就是第一个元素，而 <code>:first-child</code> 则能匹配多个元素：即每个父元素中的第一个。这等价于 <code>:nth-child(1)</code>。</p>
         </longdesc>
         <example>
            <desc>给每个 div 中第一个 span 增加下划线，并增加一个鼠标悬停效果。</desc>
         </example>
      </entry>
      <entry type="selector" name="nth-child">
         <desc>如果某个元素是父元素中的第 n 个子元素，那么他就会被选中。</desc>
         <signature>
            <argument name="index">
               <desc>用于匹配子元素的索引值，可以是从 <code>1</code> 开始计数的数字、 字符串 <code>even</code> 和 <code>odd</code>, 或者一个表达式。(比如 <code>:nth-child(even)</code>, <code>:nth-child(4n)</code> )</desc>
            </argument>
         </signature>
         <longdesc>
            <p>由于 jQuery 中的 <code>:nth-child(n)</code> 是严格按照 CSS 规范设计的，所以这里 <code>n</code> 的数值是从 1 开始计数的。然而，所有其他的选择器表达式中，jQuery 遵从的是 JavaScript 以 0 开始计数的规范。因此，如果一个 <code>&lt;ul&gt;</code> 含有两个 <code>&lt;li&gt;</code> ，那么 <code>$('li:nth-child(1)')</code> 选中的会是第一个 <code>&lt;li&gt;</code> 而 <code>$('li:eq(1)')</code> 选中的则是第二个。</p>
                
            <p><code>:nth-child(n)</code> 伪类很容易跟 <code>:eq(n)</code> 混淆起来，然而两者匹配元素有着很大的差异。 用 <code>:nth-child(n)</code> 时，不论子元素是何种元素，他们都会被计数，而最终被选中的，只有与这个伪类前面的选择器相匹配的元素。如果用 <code>:eq(n)</code> 时，只有与这个伪类前面的选择相匹配的元素才会被计数，而不管他们是否是哪个元素的子元素，并且最终选中的是第 n+1 个元素(因为是从 0 开始计数的)。</p>

            <p>关于这个不寻常的用法的深入探讨，可以在 <a href="http://www.w3.org/TR/css3-selectors/#nth-child-pseudo">W3C CSS 规范</a> 中找到。</p>
                    </longdesc>
         <example>
            <desc>查找每个匹配的 ul 中第二个 li，并标记出来。</desc>
         </example>
         <example>
            <desc>这是例子展示了两个容易混淆的选择器是如何工作的。注意这里的 :even 和 :odd 会无视他们的父元素，而仅仅把元素列表中的元素一个隔一个的过滤出来。而 :nth-child 则会计算子元素在各自父元素中的索引值。很多时候，直接看例子会比空讲容易理解的多...</desc>
         </example>
      </entry>
      <entry type="selector" name="attributeContainsPrefix">
         <desc>选择那些属性值前缀与给定的字符串相同的元素。</desc>
         <signature>
            <argument name="attribute">
               <desc>属性名。</desc>
            </argument>
            <argument name="value">
               <desc>属性值，引号是强制性的。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>所谓的前缀，就是指一个短横 (-) 前面的部分。另外，如果一个属性值没有前缀，但与给定的字符串相同的话，也会被匹配到。这个选择器主要用于处理语言属性，因而加入到 CSS 规范中的。</p>
         </longdesc>
         <example>
            <desc>查找所有 hreflang 属性是英语的链接。</desc>
         </example>
      </entry>
      <entry type="selector" name="attributeContainsWord">
         <desc>选择那些属性值中，含有给定单词的元素。单词以空格分隔。</desc>
         <signature>
            <argument name="attribute">
               <desc>属性名。</desc>
            </argument>
            <argument name="value">
               <desc>属性值，引号是强制性的。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>这个选择器会用测试字符串去匹配属性值中的每一个单词。这里“单词”的定义是以空格为界的字符串。只要测试字符串等于属性中任何一个单词，这个元素就会被选中。</p> 
         </longdesc>
         <example>
            <desc>查找所有属性中含有 'man' 这个单词的文本框，并且修改其文本值。</desc>
         </example>
      </entry>
      <entry type="selector" name="attributeMultiple">
         <desc>匹配满足所有这些属性选择器的元素。</desc>
         <signature>
            <argument name="attributeFilter1">
               <desc>属性过滤器。</desc>
            </argument>
            <argument name="attributeFilter2">
               <desc>另一个属性过滤器，用于进一步减少选择的元素。</desc>
            </argument>
            <argument name="attributeFilterN">
               <desc>如果需要，可以跟更多的属性选择器。</desc>
            </argument>
         </signature>
         <longdesc/>
         <example>
            <desc>查找那些有 id 属性，并且 name 属性以 man 结尾的输入框，并设置文本值。</desc>
         </example>
      </entry>
      <entry type="selector" name="attributeContains">
         <desc>选择那些属性值含有给定子字符串的元素。</desc>
         <signature>
            <argument name="attribute">
               <desc>属性名。</desc>
            </argument>
            <argument name="value">
               <desc>属性值，引号是强制性的。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>这是 jQuery 属性值选择器中，能匹配到最多元素的一个选择器。只要元素属性值字符串中任何一部分能匹配到给定的值，这个元素就能被匹配到。很多情况下，相较于单词选择器 (比如 [attr~=word])，他更合适。</p>
         </longdesc>
         <example>
            <desc>查找所有 input 的 name 属性中带有 'man' 的元素并设置一些文本。</desc>
         </example>
      </entry>
      <entry type="selector" name="attributeEndsWith">
         <desc>选择那些属性值是以给定字符串结尾的元素。这里对大小写敏感。</desc>
         <signature>
            <argument name="attribute">
               <desc>属性名。</desc>
            </argument>
            <argument name="value">
               <desc>属性值，引号是强制性的。</desc>
            </argument>
         </signature>
         <longdesc/>
         <example>
            <desc>查找所有 name 属性是以 'letter' 开头的 input 元素，并放置一些文本。</desc>
         </example>
      </entry>
      <entry type="selector" name="attributeStartsWith">
         <desc>选择那些属性值是以给定字符串开头的元素。这里对大小写敏感。</desc>
         <signature>
            <argument name="attribute">
               <desc>属性名。</desc>
            </argument>
            <argument name="value">
               <desc>属性值，引号是强制性的。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>这个选择器能很方便的定位一些由服务器端框架生成的语义化的 ID ，他们可能带有相同的前缀。然而这个选择器的速度要比用 class 选择器慢得多，所以如果你能做到的话，最好在这些元素上生成相同的 class ，之后使用 class 选择器来选中他们。</p>
         </longdesc>
         <example>
            <desc>查找所有 name 属性是以 'news' 开头的 input 元素，并放置一些文本。</desc>
         </example>
      </entry>
      <entry type="selector" name="attributeNotEqual">
         <desc>选择那些不含有特定的属性，或者其属性值不等于给定值的元素。</desc>
         <signature>
            <argument name="attribute">
               <desc>属性名。</desc>
            </argument>
            <argument name="value">
               <desc>属性值，引号是强制性的。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>这个选择器等价于 <code>:not([attr=value])</code>.</p> 
         </longdesc>
         <example>
            <desc>查找所有 name 属性不是 'newsletter' 的元素，并在其后的 span 中放置一点文本。</desc>
         </example>
      </entry>
      <entry type="selector" name="attributeEquals">
         <desc>选择含有特定属性，并且其属性值精确等于给定值的元素。</desc>
         <signature>
            <argument name="attribute">
               <desc>属性名。</desc>
            </argument>
            <argument name="value">
               <desc>属性值，引号是强制性的。</desc>
            </argument>
         </signature>
         <longdesc/>
         <example>
            <desc>查找所有 name 属性值为 'newsletter' 的元素，并且修改跟在他后面的 span 元素中的文本。</desc>
         </example>
      </entry>
      <entry type="selector" name="attributeHas">
         <desc>选择含有特定属性的元素，不管属性值是什么都可以。</desc>
         <signature>
            <argument name="attribute">
               <desc>属性名。</desc>
            </argument>
         </signature>
         <longdesc/>
         <example>
            <desc>绑定一个事件，让含有 id 属性的 div 元素，在点击后把自己的 id 添加进自己的文本中。</desc>
         </example>
      </entry>
      <entry type="selector" name="visible">
         <desc>选择所有可见的元素。</desc>
         <signature/>
         <longdesc> 
            <p>元素可能出于以下几个理由而被隐藏：</p>
            <ul>
               <li>他们的 CSS 中 <code>display</code> 值为 <code>none</code>。</li>
               <li>他们是表单元素，带有 <code>type="hidden"</code> 属性。</li>
               <li>他们的高和宽被设置成 0。</li>
               <li>他们的祖辈元素被隐藏了，所以他们也没有在页面中显示。</li>
            </ul>
            <p><code>visibility: hidden</code> 或者 <code>opacity: 0</code> 的元素被认为是可见的，因为实际上，他们在页面布局中占据了一定的空间。在执行隐藏效果动画的元素也认为是可见的，直到动画结束为止。在执行显示效果动画的元素，从动画的一开始就被认为是可见的了。</p>
            <p>从 jQuery 1.3.2 起，<code>:visible</code> 的计算方式发生了变动。可以访问 <a href="http://docs.jquery.com/Release:jQuery_1.3.2#:visible.2F:hidden_Overhauled">jQuery 1.3.2 更新信息</a> 来获取更多内容。</p>
         </longdesc>
         <example>
            <desc>在所有可见的 div 上添加事件，当点击后变成黄色。</desc>
         </example>
      </entry>
      <entry type="selector" name="hidden">
         <desc>选择所有隐藏的元素。</desc>
         <signature/>
         <longdesc>
            <p>元素可能出于以下几个理由而被隐藏：</p>
            <ul>
               <li>他们的 CSS 中 <code>display</code> 值为 <code>none</code>。</li>
               <li>他们是表单元素，带有 <code>type="hidden"</code> 属性。</li>
               <li>他们的高和宽被设置成 0。</li>
               <li>他们的祖辈元素被隐藏了，所以他们也没有在页面中显示。</li>
            </ul>
            <p><code>visibility: hidden</code> 或者 <code>opacity: 0</code> 的元素被认为是可见的，因为实际上，他们在页面布局中占据了一定的空间。在执行隐藏效果动画的元素也认为是可见的，直到动画结束为止。在执行显示效果动画的元素，从动画的一开始就被认为是可见的了。</p>
            <p>从 jQuery 1.3.2 起，<code>:hidden</code> 的检测方式发生了变动。一个元素，只要他或者他的父元素在页面布局中不占据空间，则被认为是隐藏了。CSS 中的 visibility 属性并不影响这个选择器的判断。（所以 <code>$(elem).css('visibility','hidden').is(':hidden') == false</code>). 访问 <a href="http://docs.jquery.com/Release:jQuery_1.3.2#:visible.2F:hidden_Overhauled">jQuery 1.3.2 更新信息</a> 来获得更多内容。</p>
            <p><strong>注意</strong>，有些浏览器中，包括 head, title, script, style 在内的一些元素也会被认为是隐藏的元素而被选中！</p>
         </longdesc>
         <example>
            <desc>显示所有隐藏的 div 并计算 type='hidden' 的 input 元素数目。</desc>
         </example>
      </entry>
      <entry type="selector" name="parent">
         <desc>选择所有父元素，即含有子元素的元素，文本节点也算是子元素。</desc>
         <signature/>
         <longdesc>
            <p>这个选择器与 <code>:empty</code> 正好相反。</p>
            <p><strong>注意</strong>， <code>:parent</code> (和 <code>:empty</code>) 所涉及的子元素，包括文本节点！</p>
            <p>W3C 推荐  <code>&lt;p&gt;</code> 元素应当至少包含一个子元素，即使那个子元素仅仅是一个文本节点也好。(参考 <a href="http://www.w3.org/TR/html401/struct/text.html#edef-P">http://www.w3.org/TR/html401/struct/text.html#edef-P</a>)。另一方面，某些元素始终被定义成空元素，比如： <code> &lt;input&gt;</code>, <code>&lt;img&gt;</code>, <code>&lt;br&gt;</code>, and <code>&lt;hr&gt;</code>。</p>
    
         </longdesc>
         <example>
            <desc>查找含有子元素的 td 元素，包括含有文本的 td 。</desc>
         </example>
      </entry>
      <entry type="selector" name="has">
         <desc>如果某个元素含有至少一个与选择器相匹配的子孙元素，则或这个元素就会被选中。</desc>
         <signature>
            <argument name="selector">
               <desc>任何选择器。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>表达式 <code>$('div:has(p)')</code> 会匹配一个 <code>&lt;div&gt;</code> ，并且他的子孙元素中含有 <code>&lt;p&gt;</code> ，就算不是直接的子元素也没关系。</p>
         </longdesc>
         <example>
            <desc>给所有含有一个 p 段落的 div 加上一个 "test" 的 class。</desc>
         </example>
      </entry>
      <entry type="selector" name="empty">
         <desc>选择所有不含任何子元素以及文本节点的元素。</desc>
         <signature/>
         <longdesc>
            <p>这个选择器与 <code>:parent</code> 正好相反。</p>
            <p><strong>注意</strong>， <code>:empty</code> (和 <code>:parent</code>) 所涉及的子元素，包括文本节点！</p>
            <p>W3C 推荐  <code>&lt;p&gt;</code> 元素应当至少包含一个子元素，即使那个子元素仅仅是一个文本节点也好。(参考 <a href="http://www.w3.org/TR/html401/struct/text.html#edef-P">http://www.w3.org/TR/html401/struct/text.html#edef-P</a>)。另一方面，某些元素始终被定义成空元素，比如： <code> &lt;input&gt;</code>, <code>&lt;img&gt;</code>, <code>&lt;br&gt;</code>, and <code>&lt;hr&gt;</code>。</p>
         </longdesc>
         <example>
            <desc>查找所有空元素——即不含有子元素和文本的元素。</desc>
         </example>
      </entry>
      <entry type="selector" name="contains">
         <desc>选择含有特定文本的元素。</desc>
         <signature>
            <argument name="text">
               <desc>用于查找的文本，大小写敏感。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>匹配的文本可以直接出现在选中的元素之中，或者出现在这个元素的子孙元素之中。作为一个属性选择器，<code>:contains()</code> 的括号中的文本可以直接书写字符串，也可以用引号包裹一下。</p>
         </longdesc>
         <example>
            <desc>查找所有含有 "John" 的 div 并且添加下划线。</desc>
         </example>
      </entry>
      <entry type="selector" name="animated">
         <desc>选择所有正在执行动画的元素。</desc>
         <signature/>
         <longdesc/>
         <example>
            <desc>改变正在执行动画的 div 的颜色。</desc>
         </example>
      </entry>
      <entry type="selector" name="header">
         <desc>选择所有的标题元素，比如 h1, h2, h3 等。</desc>
         <signature/>
         <longdesc/>
         <example>
            <desc>给页面上所有的标题元素加上背景和文本颜色。</desc>
         </example>
      </entry>
      <entry type="selector" name="lt">
         <desc>选择在匹配的集合中，索引值小于 <code>index</code> 参数的元素。</desc>
         <signature>
            <argument name="index">
               <desc>从 0 开始计数匹配元素用的索引值。</desc>
            </argument>
         </signature>
         <longdesc>
            <p><strong>索引值相关的选择器</strong></p>
            <p>索引值相关的选择器 (<code>:eq()</code>, <code>:lt()</code>, <code>:gt()</code>, <code>:even</code>, <code>:odd</code>)，会在先前提供的选择器筛选出的元素基础上再进行筛选。进一步筛选的依据就是这个元素在原先匹配集合中的顺序。举例来说，如果一开始通过 class 选择器 (<code>.myclass</code>) 选中了 4 个元素，然后这四个元素的索引值会被分配为 0 到 3 ，之后就可以用这种索引值选择器来进一步筛选了。</p>
            <p>注意，由于 JavaScript 数组的索引值是从 0 开始计数的，所以这些选择器也是以 0 开始计数的。例如，<code>$('.myclass:lt(1)')</code> 就能选中文档中 class 是 <code>myclass</code> 的第一个元素，而不是什么都选不到。作为对比， <code>:nth-child(n)</code> 中的 n 是以 1 开始计数的，因为 CSS 规范里是这么设定的。</p>
         </longdesc>
         <example>
            <desc>查找索引值小于 4 的 td。</desc>
         </example>
      </entry>
      <entry type="selector" name="gt">
         <desc>选择在匹配的集合中，索引值大于 <code>index</code> 参数的元素。</desc>
         <signature>
            <argument name="index">
               <desc>从 0 开始计数匹配元素用的索引值。</desc>
            </argument>
         </signature>
         <longdesc>
            <p><strong>索引值相关的选择器</strong></p>
            <p>索引值相关的选择器 (<code>:eq()</code>, <code>:lt()</code>, <code>:gt()</code>, <code>:even</code>, <code>:odd</code>)，会在先前提供的选择器筛选出的元素基础上再进行筛选。进一步筛选的依据就是这个元素在原先匹配集合中的顺序。举例来说，如果一开始通过 class 选择器 (<code>.myclass</code>) 选中了 4 个元素，然后这四个元素的索引值会被分配为 0 到 3 ，之后就可以用这种索引值选择器来进一步筛选了。</p>
            <p>注意，由于 JavaScript 数组的索引值是从 0 开始计数的，所以这些选择器也是以 0 开始计数的。例如，<code>$('.myclass:lt(1)')</code> 就能选中文档中 class 是 <code>myclass</code> 的第一个元素，而不是什么都选不到。作为对比， <code>:nth-child(n)</code> 中的 n 是以 1 开始计数的，因为 CSS 规范里是这么设定的。</p>
         </longdesc>
         <example>
            <desc>查找索引值大于等于 5 的 td 。注意，索引值是从 0 开始计数的。</desc>
         </example>
      </entry>
      <entry type="selector" name="eq">
         <desc>选择在匹配的集合中，索引值等于 <code>index</code> 参数的元素。</desc>
         <signature>
            <argument name="index">
               <desc>从 0 开始计数匹配元素用的索引值。</desc>
            </argument>
         </signature>
         <longdesc>
            <p><strong>索引值相关的选择器</strong></p>
            <p>索引值相关的选择器 (<code>:eq()</code>, <code>:lt()</code>, <code>:gt()</code>, <code>:even</code>, <code>:odd</code>)，会在先前提供的选择器筛选出的元素基础上再进行筛选。进一步筛选的依据就是这个元素在原先匹配集合中的顺序。举例来说，如果一开始通过 class 选择器 (<code>.myclass</code>) 选中了 4 个元素，然后这四个元素的索引值会被分配为 0 到 3 ，之后就可以用这种索引值选择器来进一步筛选了。</p>
            <p>注意，由于 JavaScript 数组的索引值是从 0 开始计数的，所以这些选择器也是以 0 开始计数的。例如，<code>$('.myclass:lt(1)')</code> 就能选中文档中 class 是 <code>myclass</code> 的第一个元素，而不是什么都选不到。作为对比， <code>:nth-child(n)</code> 中的 n 是以 1 开始计数的，因为 CSS 规范里是这么设定的。</p>
         </longdesc>
         <example>
            <desc>查找第三个 td 。</desc>
         </example>
      </entry>
      <entry type="selector" name="odd">
         <desc>选择索引值是奇数的元素。索引值从 0 开始计数。同时可以参考 <a href="Selectors/even.htm">even</a>。</desc>
         <signature/>
         <longdesc>
            <p>特别注意，跟通常的直觉相反，索引值从 0 开始计数实际上意味着，如果使用了这个奇数索引选择器 <code>:odd</code> ，实际选中的是匹配集合中第二个、第四个、第六个这类元素。</p>
         </longdesc>
         <example>
            <desc>查找表格中的偶数行，即匹配第二行、第四行等 (索引值是 1, 3 ,5 )。</desc>
         </example>
      </entry>
      <entry type="selector" name="even">
         <desc>选择索引值是奇数的元素。索引值从 0 开始计数。同时可以参考 <a href="Selectors/odd.htm">odd</a>。</desc>
         <signature/>
         <longdesc>
            <p>特别注意，跟通常的直觉相反，索引值从 0 开始计数实际上意味着，如果使用了这个偶数索引选择器 <code>:even</code> ，实际选中的是匹配集合中第一个、第三个、第五个这类元素。</p>
         </longdesc>
         <example>
            <desc>查找表格中的奇数行，即匹配第一行、第三行等 (索引值是 0, 2 ,4 )。</desc>
         </example>
      </entry>
      <entry type="selector" name="not">
         <desc>选择所有不匹配给定选择器的元素。</desc>
         <signature>
            <argument name="selector">
               <desc>用于过滤的选择器。</desc>
            </argument>
         </signature>
         <longdesc>
            <p><code>:not()</code> 可以接受所有选择器。比如 <code>:not(div a)</code> 和 <code>:not(div,a)</code>。</p>
            <h3>附加信息</h3>
            <p>使用 <code><a href="not.htm">.not()</a></code> 方法可以让代码更易读。使用 <code>:not()</code> 通常会构建出一个非常复杂的选择器。所以大多数情况下，推荐使用使用 <code><a href="not.htm">.not()</a></code> 方法。</p>
         </longdesc>
         <example>
            <desc>查找所有没有被选中的复选框，然后高亮后面的 span 。注意，当你点击复选框的时候不会有反应，因为这里没有绑定任何点击事件。</desc>
         </example>
      </entry>
      <entry type="selector" name="last">
         <desc>选择最后一个匹配到的元素。</desc>
         <signature/>
         <longdesc>
            <p>注意，<code>:last</code> 只会选择单个元素，这个元素是这个选择器之前的选择器匹配到的元素集合中的最后一个元素。</p>
         </longdesc>
         <example>
            <desc>查找表格中最后一行。</desc>
         </example>
      </entry>
      <entry type="selector" name="first">
         <desc>选择第一个匹配到的元素。</desc>
         <signature/>
         <longdesc>
            <p><code>:first</code> 伪类选择器等价于 <code>:eq(0)</code>。也等价于 <code>:lt(1)</code>，因为这也只能匹配到第一个元素。 <a href="first-child-selector">:first-child</a> 则可以匹配到多个元素：即每个父元素中的第一个元素。</p>
         </longdesc>
         <example>
            <desc>查找表格中的第一行。</desc>
         </example>
      </entry>
      <entry type="selector" name="next siblings">
         <desc>选择跟在 "prev" 元素后面，有共同的父元素，且与 "siblings" 中的选择器相匹配的元素。</desc>
         <signature>
            <argument name="prev">
               <desc>任何有效的选择器。</desc>
            </argument>
            <argument name="siblings">
               <desc>用于筛选跟在后面的同辈元素的选择器。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>注意 (<code>prev + next</code>) 和 (<code>prev ~ siblings</code>) 他们的区别。前者仅仅选择紧跟在 "prev" 后面的元素，而后者则扩展到 "prev" 后面的所有同辈元素。</p>
         </longdesc>
         <example>
            <desc>查找所有跟在 id 为 #prev 的元素后面的所有 div 。注意，跟在后面的 span 不会被选中，因为他不是 div 。同时 "niece" 也不会被选中，因为他是某个同辈的子元素，而不是直接的同辈元素。</desc>
         </example>
      </entry>
      <entry type="selector" name="next adjacent">
         <desc>选择所有紧跟在 "prev" 后面的，匹配 "next" 选择器的元素。</desc>
         <signature>
            <argument name="prev">
               <desc>任何有效的选择器。</desc>
            </argument>
            <argument name="next">
               <desc>用于筛选紧跟在后面的元素的选择器。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>非常重要的一点是，(<code>prev + next</code>) 和 (<code>prev ~ siblings</code>) 所选择到的元素，必须是在同一个父元素下的。</p>
         </longdesc>
         <example>
            <desc>查找所有跟在 label 后面的 input 元素。</desc>
         </example>
      </entry>
      <entry type="selector" name="child">
         <desc>选择所有在 父元素 "parent" 下面直接的子元素，并且要匹配 "child" 里的选择器。</desc>
         <signature>
            <argument name="parent">
               <desc>任何有效的选择器。</desc>
            </argument>
            <argument name="child">
               <desc>用于筛选子元素的选择器。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>As a CSS selector, the child combinator is supported by all modern web browsers including Safari, Firefox, Opera, Chrome, and Internet Explorer 7 and above, but notably not by Internet Explorer versions 6 and below. However, in jQuery, this selector (along with all others) works across all supported browsers, including IE6.</p>
            <p>The child combinator (E <strong>&gt;</strong> F) can be thought of as a more specific form of the descendant combinator (E F) in that it selects only first-level descendants.</p>
         </longdesc>
         <example>
            <desc>Places a border around all list items that are children of &lt;ul class="topnav"&gt; .</desc>
         </example>
      </entry>
      <entry type="selector" name="descendant">
         <desc>Selects all elements that are descendants of a given ancestor.</desc>
         <signature>
            <argument name="ancestor">
               <desc>任何有效的选择器。</desc>
            </argument>
            <argument name="descendant">
               <desc>用于筛选子孙元素的选择器。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>A descendant of an element could be a child, grandchild, great-grandchild, and so on, of that element.</p>
         </longdesc>
         <example>
            <desc>Finds all input descendants of forms.</desc>
         </example>
      </entry>
      <entry type="selector" name="multiple">
         <desc>Selects the combined results of all the specified selectors.</desc>
         <signature>
            <argument name="selector1">
               <desc>任何有效的选择器。</desc>
            </argument>
            <argument name="selector2">
               <desc>另一个有效的选择器。</desc>
            </argument>
            <argument name="selectorN">
               <desc>只要你愿意，可以提供更多有效的选择器。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>You can specify any number of selectors to combine into a single result.  This multiple expression combinator is an efficient way to select disparate elements. The order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order. An alternative to this combinator is the .<a href="add.htm">add()</a> method.</p>
         </longdesc>
         <example>
            <desc>Finds the elements that match any of these three selectors.</desc>
         </example>
         <example>
            <desc>Show the order in the jQuery object.</desc>
         </example>
      </entry>
      <entry type="selector" name="all">
         <desc>Selects all elements.</desc>
         <signature/>
         <longdesc>
            <p>Caution: The all, or universal, selector is extremely slow, except when used by itself.</p> 
         </longdesc>
         <example>
            <desc>Finds every element (including head, body, etc) in the document.</desc>
         </example>
         <example>
            <desc>A common way to select all elements is to find within document.body so elements like head, script, etc are left out.</desc>
         </example>
      </entry>
      <entry type="selector" name="class">
         <desc>Selects all elements with the given class. </desc>
         <signature>
            <argument name="class">
               <desc>A class to search for. An element can have multiple classes; only one of them must match.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>For class selectors, jQuery uses JavaScript's native <code>getElementsByClassName()</code> function if the browser supports it.</p>
                
         </longdesc>
         <example>
            <desc>Finds the element with the class "myClass".</desc>
         </example>
         <example>
            <desc>Finds the element with both "myclass" and "otherclass" classes.</desc>
         </example>
      </entry>
      <entry type="selector" name="element">
         <desc>Selects all elements with the given tag name.</desc>
         <signature>
            <argument name="element">
               <desc>An element to search for. Refers to the tagName of DOM nodes.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>JavaScript's <code>getElementsByTagName()</code> function is called to return the appropriate elements when this expression is used.</p> 
         </longdesc>
         <example>
            <desc>Finds every DIV element.</desc>
         </example>
      </entry>
      <entry type="selector" name="id">
         <desc>Selects a single element with the given id attribute. </desc>
         <signature>
            <argument name="id">
               <desc>An ID to search for, specified via the id attribute of an element.</desc>
            </argument>
         </signature>
         <longdesc>
                   <p>For id selectors, jQuery uses the JavaScript function <code>document.getElementById()</code>, which is extremely efficient. When another selector is attached to the id selector, such as <code>h2#pageTitle</code>, jQuery performs an additional check before identifying the element as a match.</p>
                   <blockquote>
               <p>As always, remember that as a developer, your time is typically the most valuable resource. Do not focus on optimization of selector speed unless it is clear that performance needs to be improved.</p>
            </blockquote>
                   <p>Each <code>id</code> value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.</p>
                <p>If the id contains characters like periods or colons you have to <a href="http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_select_an_element_by_an_ID_that_has_characters_used_in_CSS_notation.3F">escape those characters with backslashes</a>.</p>
                </longdesc>
         <example>
            <desc>Finds the element with the id "myDiv".</desc>
         </example>
         <example>
            <desc>Finds the element with the id "myID.entry[1]".  See how certain characters must be escaped with backslashes.</desc>
         </example>
      </entry>
      <entry type="method" name="scroll">
         <desc>Bind an event handler to the "scroll" JavaScript event, or trigger that event on an element.</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature/>
         <longdesc>
            <p>This method is a shortcut for <code>.bind('scroll', handler)</code> in the first variation, and <code>.trigger('scroll')</code> in the second.</p>
            <p>The <code>scroll</code> event is sent to an element when the user scrolls to a different place in the element. It applies to <code>window</code> objects, but also to scrollable frames and elements with the <code>overflow </code>CSS property set to <code>scroll</code> (or <code>auto</code> when the element's explicit height is less than the height of its contents).</p>
            <p>For example, consider the HTML:</p>
            <pre>&lt;div id="target" style="overflow: scroll; width: 200px; height: 100px;"&gt;
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur. Excepteur
  sint occaecat cupidatat non proident, sunt in culpa qui
  officia deserunt mollit anim id est laborum.
&lt;/div&gt;
&lt;div id="other"&gt;
  Trigger the handler
&lt;/div&gt;
&lt;div id="log"&gt;&lt;/div&gt;</pre>
            <p>The style definition is present to make the target element small enough to be scrollable:</p>
 
            <p class="image">
               <img src="images/0042_05_11.png" alt=""/>
            </p>
            <p>The <code>scroll</code> event handler can be bound to this element:</p>
            <pre>$('#target').scroll(function() {
  $('#log').append('&lt;div&gt;Handler for .scroll() called.&lt;/div&gt;');
});</pre>
            <p>Now when the user scrolls the text up or down, one or more messages are appended to <code>&lt;div id="log"&gt;&lt;/div&gt;</code>:</p>
            <p>
               <span class="output">Handler for .scroll() called.</span>
            </p>
            <p>We can trigger the event manually when another element is clicked:</p>
            <pre>$('#other').click(function() {
  $('#target').scroll();
});</pre>
            <p>After this code executes, clicks on <span class="output">Trigger the handler</span> will also append the message.</p>
            <p>A <code>scroll</code> event is sent whenever the element's scroll position changes, regardless of the cause. A mouse click or drag on the scroll bar, dragging inside the element, pressing the arrow keys, or using the mouse's scroll wheel could cause this event.</p>
         </longdesc>
         <example>
            <desc>To do something when your page is scrolled:</desc>
         </example>
      </entry>
      <entry type="method" name="resize">
         <desc>Bind an event handler to the "resize" JavaScript event, or trigger that event on an element.</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature/>
         <longdesc>
            <p>This method is a shortcut for <code>.bind('resize', handler)</code> in the first variation, and <code>.trigger('resize')</code> in the second.</p>
            <p>The <code>resize</code> event is sent to the <code>window</code> element when the size of the browser window changes:</p>
            <pre>$(window).resize(function() {
  $('#log').append('&lt;div&gt;Handler for .resize() called.&lt;/div&gt;');
});
</pre>
            <p>Now whenever the browser window's size is changed, the message is appended to &lt;div id="log"&gt; one or more times, depending on the browser.</p>
            <p>Code in a <code>resize</code> handler should never rely on the number of times the handler is called. Depending on implementation, <code>resize</code> events can be sent continuously as the resizing is in progress (the typical behavior in Internet Explorer and WebKit-based browsers such as Safari and Chrome), or only once at the end of the resize operation (the typical behavior in Firefox).</p>
         </longdesc>
         <example>
            <desc>To see the window width while (or after) it is resized, try:</desc>
         </example>
      </entry>
      <entry type="method" name="dequeue">
         <desc>执行匹配元素上函数队列中的下一个函数。</desc>
         <signature>
            <argument name="queueName">
               <desc>包含队列名称的字符串，默认值是动画效果队列 <code>fx</code>。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>当调用 <code>.dequeue()</code> 时，队列中的下一个函数会移除并执行。这个执行的函数中也应当直接或间接的包含 <code>.dequeue()</code> 语句，这样才能继续执行队列中的再下一个函数，让队列可以继续下去。</p>
         </longdesc>
         <example>
            <desc>在自定义队列函数中，使用 dequeue 来做结尾，以便队列可以继续运行下去。</desc>
         </example>
      </entry>
      <entry type="method" name="queue">
         <desc>显示匹配元素上将要执行的函数队列。</desc>
         <signature>
            <argument name="queueName">
               <desc>包含队列名称的字符串，默认值是动画效果队列 <code>fx</code>。</desc>
            </argument>
         </signature>
         <longdesc/>
         <example>
            <desc>显示队列长度。</desc>
         </example>
      </entry>
      <entry type="method" name="queue">
         <desc>Manipulate the queue of functions to be executed on the matched elements.</desc>
         <signature>
            <argument name="queueName">
               <desc>包含队列名称的字符串，默认值是动画效果队列 <code>fx</code>。</desc>
            </argument>
            <argument name="newQueue">
               <desc>An array of functions to replace the current queue contents.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="queueName">
               <desc>包含队列名称的字符串，默认值是动画效果队列 <code>fx</code>。</desc>
            </argument>
            <argument name="callback( next )">
               <desc>The new function to add to the queue, with a function to call that will dequeue the next item.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Every element can have one to many queues of functions attached to it by jQuery. In most applications, only one queue (called <code>fx</code>) is used. Queues allow a sequence of actions to be called on an element asynchronously, without halting program execution. The typical example of this is calling multiple animation methods on an element. For example:</p>
            <pre>$('#foo').slideUp().fadeIn();</pre>
            <p>When this statement is executed, the element begins its sliding animation immediately, but the fading transition is placed on the <code>fx</code> queue to be called only once the sliding transition is complete.</p>
            <p>The <code>.queue()</code> method allows us to directly manipulate this queue of functions. Calling <code>.queue()</code> with a callback is particularly useful; it allows us to place a new function at the end of the queue.</p>
            <p>This feature is similar to providing a callback function with an animation method, but does not require the callback to be given at the time the animation is performed.</p>
            <pre>$('#foo').slideUp();
$('#foo').queue(function() {
  alert('Animation complete.');
  $(this).dequeue();
});</pre>
            <p>This is equivalent to:</p>
            <pre>$('#foo').slideUp(function() {
  alert('Animation complete.');
});</pre>
            <p>Note that when adding a function with <code>.queue()</code>, we should ensure that <code>.dequeue()</code> is eventually called so that the next function in line executes.</p>
            <p>In jQuery 1.4 the function that's called is passed in another function, as the first argument, that when called automatically dequeues the next item and keeps the queue moving. You would use it like so:</p>
            <pre>$("#test").queue(function(next) {
    // Do some stuff...
    next();
});</pre>
         </longdesc>
         <example>
            <desc>Queue a custom function.</desc>
         </example>
         <example>
            <desc>Set a queue array to delete the queue.</desc>
         </example>
      </entry>
      <entry type="method" name="keyup">
         <desc>Bind an event handler to the "keyup" JavaScript event, or trigger that event on an element.</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature/>
         <longdesc>
            <p>This method is a shortcut for <code>.bind('keyup', handler)</code> in the first variation, and <code>.trigger('keyup')</code> in the second.</p>
            <p>The <code>keyup</code> event is sent to an element when the user releases a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.</p>
            <p>For example, consider the HTML:</p>
            <pre>&lt;form&gt;
  &lt;input id="target" type="text" value="Hello there" /&gt;
&lt;/form&gt;
&lt;div id="other"&gt;
  Trigger the handler
&lt;/div&gt;</pre>
            <p>The event handler can be bound to the input field:</p>
            <pre>$('#target').keyup(function() {
  alert('Handler for .keyup() called.');
});
</pre>
            <p>Now when the insertion point is inside the field and a key is pressed and released, the alert is displayed:</p>
            <p>
               <span class="output">Handler for .keyup() called.</span>
            </p>
            <p>We can trigger the event manually when another element is clicked:</p>
            <pre>$('#other').click(function() {
  $('#target').keyup();
});</pre>
            <p>After this code executes, clicks on <span class="output">Trigger the handler</span> will also alert the message.</p>
            <p>If key presses anywhere need to be caught (for example, to implement global shortcut keys on a page), it is useful to attach this behavior to the <code>document</code> object. Because of event bubbling, all key presses will make their way up the DOM to the <code>document</code> object unless explicitly stopped.</p>
            <p>To determine which key was pressed, we can examine the event object that is passed to the handler function. While browsers use differing attributes to store this information, jQuery normalizes the <code>.which</code> attribute so we can reliably use it to retrieve the key code. This code corresponds to a key on the keyboard, including codes for special keys such as arrows. For catching actual text entry, <code>.keypress()</code> may be a better choice.</p>
         </longdesc>
         <example>
            <desc>Show the event object for the keyup handler when a key is released in the input.</desc>
         </example>
      </entry>
      <entry type="method" name="keypress">
         <desc>Bind an event handler to the "keypress" JavaScript event, or trigger that event on an element.</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature/>
         <longdesc>
            <p>This method is a shortcut for <code>.bind('keypress', handler)</code> in the first variation, and <code>.trigger('keypress')</code> in the second.</p>
            <p>The <code>keypress</code> event is sent to an element when the browser registers keyboard input. This is similar to the <code>keydown</code> event, except in the case of key repeats. If the user presses and holds a key, a <code>keydown </code>event is triggered once, but separate <code>keypress</code> events are triggered for each inserted character. In addition, modifier keys (such as Shift) cause <code>keydown</code> events but not <code>keypress</code> events.</p>
            <p>A <code>keypress</code> event handler can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.</p>
            <p>For example, consider the HTML:</p>
            <pre>&lt;form&gt;
	&lt;fieldset&gt;
  	&lt;input id="target" type="text" value="Hello there" /&gt;
	&lt;/fieldset&gt;
&lt;/form&gt;
&lt;div id="other"&gt;
  Trigger the handler
&lt;/div&gt;</pre>
            <p>The event handler can be bound to the input field:</p>
            <pre>$('#target').keypress(function() {
  alert('Handler for .keypress() called.');
});</pre>
            <p>Now when the insertion point is inside the field and a key is pressed, the alert is displayed:</p>
            <p>
               <span class="output">Handler for .keypress() called.</span>
            </p>
            <p>The message repeats if the key is held down. We can trigger the event manually when another element is clicked:</p>
            <pre>$('#other').click(function() {
  $('#target').keypress();
});</pre>
            <p>After this code executes, clicks on <span class="output">Trigger the handler</span> will also alert the message.</p>
            <p>If key presses anywhere need to be caught (for example, to implement global shortcut keys on a page), it is useful to attach this behavior to the <code>document</code> object. Because of event bubbling, all key presses will make their way up the DOM to the <code>document</code> object unless explicitly stopped.</p>
            <p>To determine which character was entered, we can examine the event object that is passed to the handler function. While browsers use differing attributes to store this information, jQuery normalizes the <code>.which</code> attribute so we can reliably use it to retrieve the character code.</p>
            <p>Note that <code>keydown</code> and <code>keyup</code> provide a code indicating which key is pressed, while <code>keypress</code> indicates which character was entered. For example, a lowercase "a" will be reported as 65 by <code>keydown</code> and <code>keyup</code>, but as 97 by <code>keypress</code>. An uppercase "A" is reported as 65 by all events. Because of this distinction, when catching special keystrokes such as arrow keys, <code>.keydown()</code> or <code>.keyup()</code> is a better choice.</p>
         </longdesc>
         <example>
            <desc>Show the event object for the keypress handler when a key is pressed in the input.</desc>
         </example>
      </entry>
      <entry type="method" name="submit">
         <desc>Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature/>
         <longdesc>
            <p>This method is a shortcut for <code>.bind('submit', handler)</code> in the first variation, and <code>.trigger('submit')</code> in the second.</p>
            <p>The <code>submit</code> event is sent to an element when the user is attempting to submit a form. It can only be attached to <code>&lt;form&gt;</code> elements. Forms can be submitted either by clicking an explicit <code>&lt;input type="submit"&gt;</code>, <code>&lt;input type="image"&gt;</code>, or <code>&lt;button type="submit"&gt;</code>, or by pressing <kbd>Enter</kbd> when certain form element has focus.</p>
            <blockquote>
               <p>Depending on the browser, the Enter key may only cause a form submission if the form has exactly one text field, or only when there is a submit button present. The interface should not rely on a particular behavior for this key unless the issue is forced by observing the keypress event for presses of the Enter key.</p>
            </blockquote>
            <p>For example, consider the HTML:</p>
            <pre>&lt;form id="target" action="destination.html"&gt;
  &lt;input type="text" value="Hello there" /&gt;
  &lt;input type="submit" value="Go" /&gt;
&lt;/form&gt;
&lt;div id="other"&gt;
  Trigger the handler
&lt;/div&gt;</pre>
            <p>The event handler can be bound to the form:</p>
            <pre>$('#target').submit(function() {
  alert('Handler for .submit() called.');
  return false;
});</pre>
            <p>Now when the form is submitted, the message is alerted. This happens prior to the actual submission, so we can cancel the submit action by calling <code>.preventDefault()</code> on the event object or by returning <code>false</code> from our handler. We can trigger the event manually when another element is clicked:</p>
            <pre>$('#other').click(function() {
  $('#target').submit();
});</pre>
            <p>After this code executes, clicks on <span class="output">Trigger the handler</span> will also display the message. In addition, the default <code>submit</code> action on the form will be fired, so the form will be submitted.</p>
            <p>The JavaScript <code>submit</code> event does not bubble in Internet Explorer. However, scripts that rely on event delegation with the <code>submit</code> event will work consistently across browsers as of jQuery 1.4, which has normalized the event's behavior. </p>

         </longdesc>
         <example>
            <desc>If you'd like to prevent forms from being submitted unless a flag variable is set, try:</desc>
         </example>
         <example>
            <desc>If you'd like to prevent forms from being submitted unless a flag variable is set, try:</desc>
         </example>
         <example>
            <desc>To trigger the submit event on the first form on the page, try:</desc>
         </example>
      </entry>
      <entry type="method" name="select">
         <desc>Bind an event handler to the "select" JavaScript event, or trigger that event on an element.</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature/>
         <longdesc>
            <p>This method is a shortcut for <code>.bind('select', handler)</code> in the first variation, and <code>.trigger('select')</code> in the second.</p>
            <p>The <code>select</code> event is sent to an element when the user makes a text selection inside it. This event is limited to <code>&lt;input type="text"&gt;</code> fields and <code>&lt;textarea&gt;</code> boxes.</p>
            <p>For example, consider the HTML:</p>
            <pre>&lt;form&gt;
  &lt;input id="target" type="text" value="Hello there" /&gt;
&lt;/form&gt;
&lt;div id="other"&gt;
  Trigger the handler
&lt;/div&gt;</pre>
            <p>The event handler can be bound to the text input:</p>
            <pre>$('#target').select(function() {
  alert('Handler for .select() called.');
});</pre>
            <p>Now when any portion of the text is selected, the alert is displayed. Merely setting the location of the insertion point will not trigger the event. We can trigger the event manually when another element is clicked:</p>
            <pre>$('#other').click(function() {
  $('#target').select();
});</pre>
            <p>After this code executes, clicks on the Trigger button will also alert the message:</p>
            <p>
               <span class="output">Handler for .select() called.</span>
            </p>
            <p>In addition, the default <code>select</code> action on the field will be fired, so the entire text field will be selected.</p>
            <blockquote>
               <p>The method for retrieving the current selected text differs from one browser to another. A number of jQuery plug-ins offer cross-platform solutions.</p>
            </blockquote>
         </longdesc>
         <example>
            <desc>To do something when text in input boxes is selected:</desc>
         </example>
         <example>
            <desc>To trigger the select event on all input elements, try:</desc>
         </example>
      </entry>
      <entry type="method" name="change">
         <desc>Bind an event handler to the "change" JavaScript event, or trigger that event on an element.</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature/>
         <longdesc>
            <p>This method is a shortcut for <code>.bind('change', handler)</code> in the first variation, and <code>.trigger('change')</code> in the second.</p>
            <p>The <code>change</code> event is sent to an element when its value changes. This event is limited to <code>&lt;input&gt;</code> elements, <code>&lt;textarea&gt;</code> boxes and <code>&lt;select&gt;</code> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.</p>
            <p>For example, consider the HTML:</p>
            <pre>&lt;form&gt;
  &lt;input class="target" type="text" value="Field 1" /&gt;
  &lt;select class="target"&gt;
    &lt;option value="option1" selected="selected"&gt;Option 1&lt;/option&gt;
    &lt;option value="option2"&gt;Option 2&lt;/option&gt;
  &lt;/select&gt;
&lt;/form&gt;
&lt;div id="other"&gt;
  Trigger the handler
&lt;/div&gt;</pre>
            <p>The event handler can be bound to the text input and the select box:</p>
            <pre>$('.target').change(function() {
  alert('Handler for .change() called.');
});</pre>
            <p>Now when the second option is selected from the dropdown, the alert is displayed. It is also displayed if we change the text in the field and then click away. If the field loses focus without the contents having changed, though, the event is not triggered. We can trigger the event manually when another element is clicked:</p>
            <pre>$('#other').click(function() {
  $('.target').change();
});</pre>
            <p>After this code executes, clicks on <span class="output">Trigger the handler</span> will also alert the message. The message will be displayed twice, because the handler has been bound to the <code>change</code> event on both of the form elements.</p>
            <p>As of jQuery 1.4 the <code>change</code> event now bubbles, and works identically to all other browsers, in Internet Explorer.</p>
         </longdesc>
         <example>
            <desc>Attaches a change event to the select that gets the text for each selected option and writes them in the div.  It then triggers the event for the initial text draw.</desc>
         </example>
         <example>
            <desc>To add a validity test to all text input elements:</desc>
         </example>
      </entry>
      <entry type="method" name="blur">
         <desc>Bind an event handler to the "blur" JavaScript event, or trigger that event on an element.</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature/>
         <longdesc>
            <p>This method is a shortcut for <code>.bind('blur', handler)</code> in the first variation, and <code>.trigger('blur')</code> in the second.</p>
            <p>The <code>blur</code> event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as <code>&lt;input&gt;</code>. In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.</p>
            <p>For example, consider the HTML:</p>
            <pre>&lt;form&gt;
  &lt;input id="target" type="text" value="Field 1" /&gt;
  &lt;input type="text" value="Field 2" /&gt;
&lt;/form&gt;
&lt;div id="other"&gt;
  Trigger the handler
&lt;/div&gt;
The event handler can be bound to the first input field:
$('#target').blur(function() {
  alert('Handler for .blur() called.');
});</pre>
            <p>Now if the first field has the focus and we click elsewhere, or tab away from it, the alert is displayed:</p>
            <p>
               <span class="output">Handler for .blur() called.</span>
            </p>
            <p>We can trigger the event when another element is clicked:</p>
            <pre>$('#other').click(function() {
  $('#target').blur();
});</pre>
            <p>After this code executes, clicks on <span class="output">Trigger the handler</span> will also alert the message.</p>
            <p>The <code>blur</code> event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the <code>blur</code> event will not work consistently across browsers.</p>
         </longdesc>
         <example>
            <desc>To trigger the blur event on all paragraphs:</desc>
         </example>
      </entry>
      <entry type="method" name="focus">
         <desc>Bind an event handler to the "focus" JavaScript event, or trigger that event on an element.</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature/>
         <longdesc>
            <ul>
               <li>This method is a shortcut for <code>.bind('focus', handler)</code> in the first variation, and <code>.trigger('focus')</code> in the second.</li>
               <li>The <code>focus</code> event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as  form elements (<code>&lt;input&gt;</code>, <code>&lt;select&gt;</code>, etc.) and links (<code>&lt;a href&gt;</code>). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's <code>tabindex</code> property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.</li>
               <li>Elements with focus are usually highlighted in some way by the browser, for example with a dotted line surrounding the element. The focus is used to determine which element is the first to receive keyboard-related events.</li>
            </ul>
            <p>For example, consider the HTML:</p>
            <pre>&lt;form&gt;
  &lt;input id="target" type="text" value="Field 1" /&gt;
  &lt;input type="text" value="Field 2" /&gt;
&lt;/form&gt;
&lt;div id="other"&gt;
  Trigger the handler
&lt;/div&gt;
</pre>
            <p>The event handler can be bound to the first input field:</p>
            <pre>$('#target').focus(function() {
  alert('Handler for .focus() called.');
});</pre>
            <p>Now if we click on the first field, or tab to it from another field, the alert is displayed:</p>
            <p>
               <span class="output">Handler for .focus() called.</span>
            </p>
            <p>We can trigger the event when another element is clicked:</p>
            <pre>$('#other').click(function() {
  $('#target').focus();
});</pre>
            <p>After this code executes, clicks on <span class="output">Trigger the handler</span> will also alert the message.</p>
            <p>The <code>focus</code> event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the <code>focus</code> event will not work consistently across browsers.</p>
            <blockquote>
               <p>Triggering the focus on hidden elements causes an error in Internet Explorer. Take care to only call <code>.focus()</code> without parameters on elements that are visible.</p>
            </blockquote>
         </longdesc>
         <example>
            <desc>Fire focus.</desc>
         </example>
         <example>
            <desc>To stop people from writing in text input boxes, try:</desc>
         </example>
         <example>
            <desc>To focus on a login input box with id 'login' on page startup, try:</desc>
         </example>
      </entry>
      <entry type="method" name="mousemove">
         <desc>Bind an event handler to the "mousemove" JavaScript event, or trigger that event on an element.</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature/>
         <longdesc>
            <p>This method is a shortcut for <code>.bind('mousemove', handler)</code> in the first variation, and <code>.trigger('mousemove')</code> in the second.</p>
            <p>The <code>mousemove</code> event is sent to an element when the mouse pointer moves inside the element. Any HTML element can receive this event.</p>
            <p>For example, consider the HTML:</p>
            <pre>&lt;div id="target"&gt;
  Move here
&lt;/div&gt;
&lt;div id="other"&gt;
  Trigger the handler
&lt;/div&gt;
&lt;div id="log"&gt;&lt;/div&gt;</pre>
 
            <p class="image">
               <img src="images/0042_05_10.png" alt=""/>
            </p>
            <p>The event handler can be bound to the target:</p>
            <pre>$('#target').mousemove(function(event) {
  var msg = 'Handler for .mousemove() called at ' + event.pageX + ', ' + event.pageY;
  $('#log').append('&lt;div&gt; + msg + '&lt;/div&gt;');
});</pre>
            <p>Now when the mouse pointer moves within the target button, the messages are appended to &lt;div id="log"&gt;:</p>
            <p>
               <span class="output">Handler for .mousemove() called at (399, 48)</span>
               <br/>
               <span class="output">Handler for .mousemove() called at (398, 46)</span>
               <br/>
               <span class="output">Handler for .mousemove() called at (397, 44)</span>
               <br/>
               <span class="output">Handler for .mousemove() called at (396, 42)</span>
               <br/>
            </p>
            <p>We can also trigger the event when the second button is clicked:</p>
            <pre>$('#other').click(function() {
  $('#target').mousemove();
});</pre>
            <p>After this code executes, clicks on the Trigger button will also append the message:</p>
            <p>
               <span class="output">Handler for .mousemove() called at (undefined, undefined)</span>
            </p>
            <p>When tracking mouse movement, we usually need to know the actual position of the mouse pointer. The event object that is passed to the handler contains some information about the mouse coordinates. Properties such as <code>.clientX</code>, <code>.offsetX</code>, and <code>.pageX</code> are available, but support for them differs between browsers. Fortunately, jQuery normalizes the <code>.pageX</code> and <code>.pageY</code> attributes so that they can be used in all browsers. These attributes provide the X and Y coordinates of the mouse pointer relative to the top-left corner of the page, as illustrated in the example output above.</p>
            <p>We need to remember that the <code>mousemove</code> event is triggered whenever the mouse pointer moves, even for a pixel. This means that hundreds of events can be generated over a very small amount of time. If the handler has to do any significant processing, or if multiple handlers for the event exist, this can be a serious performance drain on the browser. It is important, therefore, to optimize <code>mousemove </code>handlers as much as possible, and to unbind them as soon as they are no longer needed.</p>
            <p>A common pattern is to bind the <code>mousemove</code> handler from within a <code>mousedown</code> hander, and to unbind it from a corresponding <code>mouseup</code> handler. If implementing this sequence of events, remember that the <code>mouseup</code> event might be sent to a different HTML element than the <code>mousemove</code> event was. To account for this, the <code>mouseup</code> handler should typically be bound to an element high up in the DOM tree, such as <code>&lt;body&gt;</code>.</p>
         </longdesc>
         <example>
            <desc>Show the mouse coordinates when the mouse is moved over the yellow div.  Coordinates are relative to the window, which in this case is the iframe.</desc>
         </example>
      </entry>
      <entry type="method" name="hover">
         <desc>Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.</desc>
         <signature>
            <argument name="handlerIn(eventObject)">
               <desc>A function to execute when the mouse pointer enters the element.</desc>
            </argument>
            <argument name="handlerOut(eventObject)">
               <desc>A function to execute when the mouse pointer leaves the element.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>.hover()</code> method binds handlers for both <code>mouseenter</code> and <code>mouseleave</code> events. We can use it to simply apply behavior to an element during the time the mouse is within the element.</p>
            <p>Calling <code>$(selector).hover(handlerIn, handlerOut)</code> is shorthand for:</p>
            <pre>$(selector).mouseenter(handlerIn).mouseleave(handlerOut);</pre>
            <p>See the discussions for <code><a href="mouseenter.htm">.mouseenter()</a></code> and <code><a href="mouseleave.htm">.mouseleave()</a></code> for more details.</p>
         </longdesc>
         <example>
            <desc>To add a special style to list items that are being hovered over, try:</desc>
         </example>
         <example>
            <desc>To add a special style to table cells that are being hovered over, try:</desc>
         </example>
         <example>
            <desc>To unbind the above example use:</desc>
         </example>
      </entry>
      <entry type="method" name="hover">
         <desc>Bind a single handler to the matched elements, to be executed when the mouse pointer enters or leaves the elements.</desc>
         <signature>
            <argument name="handlerInOut(eventObject)">
               <desc>A function to execute when the mouse pointer enters or leaves the element.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>.hover()</code> method, when passed a single function, will execute that handler for both <code>mouseenter</code> and <code>mouseleave</code> events.   This allows the user to use jQuery's various toggle methods within the handler.</p>
            <p>Calling <code>$(selector).hover(handlerInOut)</code> is shorthand for:</p>
            <pre>$(selector).bind("mouseenter mouseleave",handlerInOut);</pre>
            <p>See the discussions for <code><a href="mouseenter.htm">.mouseenter()</a></code> and <code><a href="mouseleave.htm">.mouseleave()</a></code> for more details.</p>
         </longdesc>
         <example>
            <desc>Slide the next sibling LI up or down on hover, and toggle a class.</desc>
         </example>
      </entry>
      <entry type="method" name="mouseleave">
         <desc>Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature/>
         <longdesc>
            <p>This method is a shortcut for <code>.bind('mouseleave', handler)</code> in the first variation, and <code>.trigger('mouseleave')</code> in the second.</p>
            <p>The <code>mouseleave</code> JavaScript event is proprietary to Internet Explorer. Because of the event's general utility, jQuery simulates this event so that it can be used regardless of browser. This event is sent to an element when the mouse pointer leaves the element. Any HTML element can receive this event.</p>
            <p>For example, consider the HTML:</p>
            <pre>&lt;div id="outer"&gt;
  Outer
  &lt;div id="inner"&gt;
    Inner
  &lt;/div&gt;
&lt;/div&gt;
&lt;div id="other"&gt;
  Trigger the handler
&lt;/div&gt;
&lt;div id="log"&gt;&lt;/div&gt;</pre> 
            <p class="image">
               <img src="images/0042_05_09.png" alt=""/>
            </p>
            <p>The event handler can be bound to any element:</p>
            <pre>$('#outer').mouseleave(function() {
  $('#log').append('&lt;div&gt;Handler for .mouseleave() called.&lt;/div&gt;');
});</pre>
            <p>Now when the mouse pointer moves out of the <span class="output">Outer</span> 
               <code>&lt;div&gt;</code>, the message is appended to <code>&lt;div id="log"&gt;</code>. We can also trigger the event when another element is clicked:</p>
            <pre>$('#other').click(function() {
  $('#outer').mouseleave();
});</pre>
            <p>After this code executes, clicks on <span class="output">Trigger the handler</span> will also append the message.</p>
            <p>The <code>mouseleave</code> event differs from <code>mouseout</code> in the way it handles event bubbling. If <code>mouseout</code> were used in this example, then when the mouse pointer moved out of the <span class="output">Inner</span> element, the handler would be triggered. This is usually undesirable behavior. The <code>mouseleave</code> event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the <span class="output">Outer</span> element, but not the <span class="output">Inner</span> element.</p>
         </longdesc>
         <example>
            <desc>Show number of times mouseout and mouseleave events are triggered.
<code>mouseout</code> fires when the pointer moves out of child element as well, while <code>mouseleave</code> fires only when the pointer moves out of the bound element.</desc>
         </example>
      </entry>
      <entry type="method" name="mouseenter">
         <desc>Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature/>
         <longdesc>
            <p>This method is a shortcut for <code>.bind('mouseenter', handler)</code> in the first variation, and <code>.trigger('mouseenter')</code> in the second.</p>
            <p>The <code>mouseenter</code> JavaScript event is proprietary to Internet Explorer. Because of the event's general utility, jQuery simulates this event so that it can be used regardless of browser. This event sent to an element when the mouse pointer enters the element. Any HTML element can receive this event.</p>
            <p>For example, consider the HTML:</p>
            <pre>&lt;div id="outer"&gt;
  Outer
  &lt;div id="inner"&gt;
    Inner
  &lt;/div&gt;
&lt;/div&gt;
&lt;div id="other"&gt;
  Trigger the handler
&lt;/div&gt;
&lt;div id="log"&gt;&lt;/div&gt;</pre>
 
            <p class="image">
               <img src="images/0042_05_08.png" alt=""/>
            </p>
            <p>The event handler can be bound to any element:</p>
            <pre>$('#outer').mouseenter(function() {
  $('#log').append('&lt;div&gt;Handler for .mouseenter() called.&lt;/div&gt;');
});</pre>
            <p>Now when the mouse pointer moves over the <span class="output">Outer</span> 
               <code>&lt;div&gt;</code>, the message is appended to <code>&lt;div id="log"&gt;</code>. We can also trigger the event when another element is clicked:</p>
            <pre>$('#other').click(function() {
  $('#outer').mouseenter();
});</pre>
            <p>After this code executes, clicks on <span class="output">Trigger the handler</span> will also append the message.</p>
            <p>The <code>mouseenter</code> event differs from <code>mouseover</code> in the way it handles event bubbling. If <code>mouseover</code> were used in this example, then when the mouse pointer moved over the <span class="output">Inner</span> element, the handler would be triggered. This is usually undesirable behavior. The <code>mouseenter</code> event, on the other hand, only triggers its handler when the mouse enters the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse enters the <span class="output">Outer</span> element, but not the <span class="output">Inner</span> element.</p>
         </longdesc>
         <example>
            <desc>Show texts when mouseenter and mouseout event triggering.
<code>mouseover</code> fires when the pointer moves into the child element as well, while <code>mouseenter</code> fires only when the pointer moves into the bound element.</desc>
         </example>
      </entry>
      <entry type="method" name="mouseout">
         <desc>Bind an event handler to the "mouseout" JavaScript event, or trigger that event on an element.</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature/>
         <longdesc>
            <p>This method is a shortcut for <code>.bind('mouseout', handler)</code> in the first variation, and <code>.trigger('mouseout')</code> in the second.</p>
            <p>The <code>mouseout</code> event is sent to an element when the mouse pointer leaves the element. Any HTML element can receive this event.</p>
            <p>For example, consider the HTML:</p>
            <pre>&lt;div id="outer"&gt;
  Outer
  &lt;div id="inner"&gt;
    Inner
  &lt;/div&gt;
&lt;/div&gt;
&lt;div id="other"&gt;
  Trigger the handler
&lt;/div&gt;
&lt;div id="log"&gt;&lt;/div&gt;</pre> 
            <p class="image">
               <img src="images/0042_05_07.png" alt=""/>
            </p>
            <p>The event handler can be bound to any element:</p>
            <pre>$('#outer').mouseout(function() {
  $('#log').append('Handler for .mouseout() called.');
});</pre>
            <p>Now when the mouse pointer moves out of the <span class="output">Outer</span> 
               <code>&lt;div&gt;</code>, the message is appended to <code>&lt;div id="log"&gt;</code>. We can also trigger the event when another element is clicked:</p>
            <pre>$('#other').click(function() {
  $('#outer').mouseout();
});</pre>
            <p>After this code executes, clicks on <span class="output">Trigger the handler</span> will also append the message.</p>
            <p>This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves out of the <span class="output">Inner</span> element in this example, a <code>mouseout</code> event will be sent to that, then trickle up to <span class="output">Outer</span>. This can trigger the bound <code>mouseout</code> handler at inopportune times. See the discussion for <code>.<a href="mouseleave.htm">mouseleave</a>()</code> for a useful alternative.</p>
         </longdesc>
         <example>
            <desc>Show the number of times mouseout and mouseleave events are triggered.
<code>mouseout</code> fires when the pointer moves out of the child element as well, while <code>mouseleave</code> fires only when the pointer moves out of the bound element.</desc>
         </example>
      </entry>
      <entry type="method" name="mouseover">
         <desc>Bind an event handler to the "mouseover" JavaScript event, or trigger that event on an element.</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature/>
         <longdesc>
            <p>This method is a shortcut for <code>.bind('mouseover', handler)</code> in the first variation, and <code>.trigger('mouseover')</code> in the second.</p>
            <p>The <code>mouseover</code> event is sent to an element when the mouse pointer enters the element. Any HTML element can receive this event.</p>
            <p>For example, consider the HTML:</p>
            <pre>&lt;div id="outer"&gt;
  Outer
  &lt;div id="inner"&gt;
    Inner
  &lt;/div&gt;
&lt;/div&gt;
&lt;div id="other"&gt;
  Trigger the handler
&lt;/div&gt;
&lt;div id="log"&gt;&lt;/div&gt;</pre>
 
            <p class="image">
               <img src="images/0042_05_06.png" alt=""/>
            </p>
            <p>The event handler can be bound to any element:</p>
            <pre>$('#outer').mouseover(function() {
  $('#log').append('&lt;div&gt;Handler for .mouseover() called.&lt;/div&gt;');
});</pre>
            <p>Now when the mouse pointer moves over the <span class="output">Outer</span> 
               <code>&lt;div&gt;</code>, the message is appended to <code>&lt;div id="log"&gt;</code>. We can also trigger the event when another element is clicked:</p>
            <pre>$('#other').click(function() {
  $('#outer').mouseover();
});</pre>
            <p>After this code executes, clicks on <span class="output">Trigger the handler</span> will also append the message.</p>
            <p>This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the <span class="output">Inner</span> element in this example, a <code>mouseover</code> event will be sent to that, then trickle up to <span class="output">Outer</span>. This can trigger our bound <code>mouseover</code> handler at inopportune times. See the discussion for <code>.mouseenter()</code> for a useful alternative.</p>
         </longdesc>
         <example>
            <desc>Show the number of times mouseover and mouseenter events are triggered.
<code>mouseover</code> fires when the pointer moves into the child element as well, while <code>mouseenter</code> fires only when the pointer moves into the bound element.</desc>
         </example>
      </entry>
      <entry type="method" name="dblclick">
         <desc>Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element.</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature/>
         <longdesc>
            <p>This method is a shortcut for <code>.bind('dblclick', handler)</code> in the first variation, and <code>.trigger('dblclick')</code> in the second.
The <code>dblclick</code> event is sent to an element when the element is double-clicked. Any HTML element can receive this event.
For example, consider the HTML:</p>
            <pre>&lt;div id="target"&gt;
  Double-click here
&lt;/div&gt;
&lt;div id="other"&gt;
  Trigger the handler
&lt;/div&gt;</pre>
 
            <p class="image">
               <img src="images/0042_05_04.png" alt=""/>
            </p>
            <p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p>
            <pre>$('#target').dblclick(function() {
  alert('Handler for .dblclick() called.');
});</pre>
            <p>Now if we double-click on this element, the alert is displayed:</p>
            <p>
               <span class="output">Handler for .dblclick() called.</span>
            </p>
            <p>We can also trigger the event when a different element is clicked:</p>
            <pre>$('#other').click(function() {
  $('#target').dblclick();
});</pre>
            <p>After this code executes, (single) clicks on <span class="output">Trigger the handler</span> will also alert the message.</p>
            <p>The <code>dblclick</code> event is only triggered after this exact series of events:</p>
            <ul>
               <li>The mouse button is depressed while the pointer is inside the element.</li>
               <li>The mouse button is released while the pointer is inside the element.</li>
               <li>The mouse button is depressed again while the pointer is inside the element, within a time window that is system-dependent.</li>
               <li>The mouse button is released while the pointer is inside the element.</li>
            </ul>
            <p>It is inadvisable to bind handlers to both the <code>click</code> and <code>dblclick</code> events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two <code>click</code> events and others only one. If an interface that reacts differently to single- and double-clicks cannot be avoided, then the <code>dblclick</code> event should be simulated within the <code>click</code> handler. We can achieve this by saving a timestamp in the handler, and then comparing the current time to the saved timestamp on subsequent clicks. If the difference is small enough, we can treat the click as a double-click.
</p>
         </longdesc>
         <example>
            <desc>To bind a "Hello World!" alert box the dblclick event on every paragraph on the page:</desc>
         </example>
         <example>
            <desc>Double click to toggle background color.</desc>
         </example>
      </entry>
      <entry type="method" name="click">
         <desc>Bind an event handler to the "click" JavaScript event, or trigger that event on an element.</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature/>
         <longdesc>
            <p>This method is a shortcut for <code>.bind('click', handler)</code> in the first variation, and <code>.trigger('click')</code> in the second.</p>
            <p>The <code>click</code> event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event.</p>
            <pre>For example, consider the HTML:
&lt;div id="target"&gt;
  Click here
&lt;/div&gt;
&lt;div id="other"&gt;
  Trigger the handler
&lt;/div&gt;</pre>
 
            <p class="image">
               <img src="images/0042_05_03.png" alt=""/>
            </p>
            <p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p>
            <pre>$('#target').click(function() {
  alert('Handler for .click() called.');
});</pre>
            <p>Now if we click on this element, the alert is displayed:</p>
            <p>
               <span class="output">Handler for .click() called.</span>
            </p>
            <p>We can also trigger the event when a different element is clicked:</p>
            <pre>$('#other').click(function() {
  $('#target').click();
});</pre>
            <p>After this code executes, clicks on <span class="output">Trigger the handler</span> will also alert the message.</p>
            <p>The <code>click</code> event is only triggered after this exact series of events:</p>
            <ul>
               <li>The mouse button is depressed while the pointer is inside the element.</li>
               <li>The mouse button is released while the pointer is inside the element.</li>
            </ul>
            <p>This is usually the desired sequence before taking an action. If this is not required, the <code>mousedown</code> or <code>mouseup</code> event may be more suitable.</p>
         </longdesc>
         <example>
            <desc>To hide paragraphs on a page when they are clicked:</desc>
         </example>
         <example>
            <desc>To trigger the click event on all of the paragraphs on the page:</desc>
         </example>
      </entry>
      <entry type="method" name="mouseup">
         <desc>Bind an event handler to the "mouseup" JavaScript event, or trigger that event on an element.</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature/>
         <longdesc>
            <p>This method is a shortcut for <code>.bind('mouseup', handler)</code> in the first variation, and <code>.trigger('mouseup')</code> in the second.</p>
            <p>The <code>mouseup</code> event is sent to an element when the mouse pointer is over the element, and the mouse button is released. Any HTML element can receive this event.</p>
            <p>For example, consider the HTML:</p>
            <pre>&lt;div id="target"&gt;
  Click here
&lt;/div&gt;
&lt;div id="other"&gt;
  Trigger the handler
&lt;/div&gt;
</pre> 
            <p class="image">
               <img src="images/0042_05_02.png" alt=""/>
            </p>
            <p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p>
            <pre>$('#target').mouseup(function() {
  alert('Handler for .mouseup() called.');
});
</pre>
            <p>Now if we click on this element, the alert is displayed:</p>
            <p>
               <span class="output">Handler for .mouseup() called.</span>
            </p>
            <p>We can also trigger the event when a different element is clicked:</p>
            <pre>$('#other').click(function() {
  $('#target').mouseup();
});</pre>
            <p>After this code executes, clicks on <span class="output">Trigger the handler</span> will also alert the message.</p>
            <p>If the user clicks outside an element, drags onto it, and releases the button, this is still counted as a <code>mouseup</code> event. This sequence of actions is not treated as a button press in most user interfaces, so it is usually better to use the <code>click</code> event unless we know that the <code>mouseup</code> event is preferable for a particular situation.</p>
         </longdesc>
         <example>
            <desc>Show texts when mouseup and mousedown event triggering.</desc>
         </example>
      </entry>
      <entry type="method" name="mousedown">
         <desc>Bind an event handler to the "mousedown" JavaScript event, or trigger that event on an element.</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature/>
         <longdesc>
            <p>This method is a shortcut for <code>.bind('mousedown', handler)</code> in the first variation, and <code>.trigger('mousedown')</code> in the second.</p>
            <p>The <code>mousedown</code> event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed. Any HTML element can receive this event.</p>
            <p>For example, consider the HTML:</p>
            <pre>&lt;div id="target"&gt;
  Click here
&lt;/div&gt;
&lt;div id="other"&gt;
  Trigger the handler
&lt;/div&gt;</pre>
 
            <p class="image">
               <img src="images/0042_05_01.png" alt=""/>
            </p>
            <p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p>
            <pre>$('#target').mousedown(function() {
  alert('Handler for .mousedown() called.');
});</pre>
            <p>Now if we click on this element, the alert is displayed:</p>
            <p>
               <span class="output">Handler for .mousedown() called.</span>
            </p>
            <p>We can also trigger the event when a different element is clicked:</p>
            <pre>$('#other').click(function() {
  $('#target').mousedown();
});</pre>
            <p>After this code executes, clicks on <span class="output">Trigger the handler</span> will also alert the message.</p>
            <p>The <code>mousedown</code> event is sent when any mouse button is clicked. To act only on specific buttons, we can use the event object's <code>which </code>property. Not all browsers support this property (Internet Explorer uses button instead), but jQuery normalizes the property so that it is safe to use in any browser. The value of <code>which</code> will be 1 for the left button, 2 for the middle button, or 3 for the right button.</p>
            <p>This event is primarily useful for ensuring that the primary button was used to begin a drag operation; if ignored, strange results can occur when the user attempts to use a context menu. While the middle and right buttons can be detected with these properties, this is not reliable. In Opera and Safari, for example, right mouse button clicks are not detectable by default.</p>
            <p>If the user clicks on an element, drags away from it, and releases the button, this is still counted as a <code>mousedown</code> event. This sequence of actions is treated as a "canceling" of the button press in most user interfaces, so it is usually better to use the <code>click</code> event unless we know that the <code>mousedown</code> event is preferable for a particular situation.</p>

         </longdesc>
         <example>
            <desc>Show texts when mouseup and mousedown event triggering.</desc>
         </example>
      </entry>
      <entry type="method" name="error">
         <desc>Bind an event handler to the "error" JavaScript event.</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>A function to execute when the event is triggered.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>This method is a shortcut for <code>.bind('error', handler)</code>.</p>
            <p>The <code>error</code> event is sent to elements, such as images, that are referenced by a document and loaded by the browser. It is called if the element was not loaded correctly.</p>
            <p>For example, consider a page with a simple image:</p>
            <pre>&lt;img src="missing.png" alt="Book" id="book" /&gt;</pre>
            <p>The event handler can be bound to the image:</p>
            <pre>$('#book').error(function() {
  alert('Handler for .error() called.')
});
</pre>
            <p>If the image cannot be loaded (for example, because it is not present at the supplied URL), the alert  is displayed:</p>
            <p>
               <span class="output">Handler for .error() called.</span>
            </p>
            <blockquote>
               <p>This event may not be correctly fired when the page is served locally. Since <code>error</code> relies on normal HTTP status codes, it will generally not be triggered if the URL uses the <code>file:</code> protocol.</p>
            </blockquote>
            <p>Note: A jQuery error event handler should not be attached to the window object. The browser fires the window's error event when a script error occurs. However, the window error event receives different arguments and has different return value requirements than conventional event handlers.
</p>
         </longdesc>
         <example>
            <desc>To hide JavaScript errors from the user, you can try:</desc>
         </example>
         <example>
            <desc>To hide the "broken image" icons for your IE users, you can try:</desc>
         </example>
      </entry>
      <entry type="method" name="unload">
         <desc>Bind an event handler to the "unload" JavaScript event.</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>A function to execute when the event is triggered.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>This method is a shortcut for <code>.bind('unload', handler)</code>.</p>
            <p>The <code>unload</code> event is sent to the <code>window</code> element when the user navigates away from the page. This could mean one of many things. The user could have clicked on a link to leave the page, or typed in a new URL in the address bar. The forward and back buttons will trigger the event. Closing the browser window will cause the event to be triggered. Even a page reload will first create an <code>unload</code> event.</p>
            <blockquote>
               <p>The exact handling of the <code>unload</code> event has varied from version to version of browsers. For example, some versions of Firefox trigger the event when a link is followed, but not when the window is closed. In practical usage, behavior should be tested on all supported browsers, and contrasted with the proprietary <code>beforeunload</code> event.</p>
            </blockquote>
            <p>Any <code>unload</code> event handler should be bound to the <code>window</code> object:</p>
            <pre>$(window).unload(function() {
  alert('Handler for .unload() called.');
});
</pre>
            <p>After this code executes, the alert will be displayed whenever the browser leaves the current page.
It is not possible to cancel the <code>unload</code> event with <code>.preventDefault()</code>. This event is available so that scripts can perform cleanup when the user leaves the page.
</p>
         </longdesc>
         <example>
            <desc>To display an alert when a page is unloaded:</desc>
         </example>
      </entry>
      <entry type="method" name="load">
         <desc>Bind an event handler to the "load" JavaScript event.</desc>
         <signature>
            <argument name="handler(eventObject)">
               <desc>A function to execute when the event is triggered.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>This method is a shortcut for <code>.bind('load', handler)</code>.</p>
            <p>The <code>load</code> event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the <code>window</code> object.</p>
            <blockquote>
               <p>It is possible that the load event will not be triggered if the image is loaded from the browser cache. To account for this possibility, we can use a special load event that fires immediately if the image is ready. <code>event.special.load</code> is currently <a href="http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js">available as a plugin</a>. </p>
            </blockquote>
            <p>For example, consider a page with a simple image:</p>
            <pre>&lt;img src="book.png" alt="Book" id="book" /&gt;</pre>
            <p>The event handler can be bound to the image:</p>
            <pre>$('#book').load(function() {
  // Handler for .load() called.
});</pre>
            <p>As soon as the image has been loaded, the handler is called.</p>
            <p>In general, it is not necessary to wait for all images to be fully loaded. If code can be executed earlier, it is usually best to place it in a handler sent to the <code>.ready()</code> method.
</p>
            <blockquote>
               <p>The Ajax module also has a method named <code><a href="load.htm">.load()</a></code>. Which one is fired depends on the set of arguments passed.</p>
            </blockquote>
         </longdesc>
         <example>
            <desc>Run a function when the page is fully loaded including graphics.</desc>
         </example>
         <example>
            <desc>Add the class bigImg to all images with height greater then 100 upon each image load.</desc>
         </example>
      </entry>
      <entry type="method" name="ready">
         <desc>Specify a function to execute when the DOM is fully loaded.</desc>
         <signature>
            <argument name="handler">
               <desc>A function to execute after the DOM is ready.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>While JavaScript provides the <code>load</code> event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to <code>.ready()</code> is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.  When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.</p>
            <p>In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the <code>load</code> event instead.</p>

            <blockquote>
               <p>The <code>.ready()</code> method is generally incompatible with the <code>&lt;body onload=""&gt;</code> attribute. If <code>load</code> must be used, either do not use <code>.ready()</code> or use jQuery's <code>.load()</code> method to attach <code>load</code> event handlers to the window or to more specific items, like images.
</p>
            </blockquote>
            <p>All three of the following syntaxes are equivalent:</p>
            <ul>
               <li>
                  <code>$(document).ready(handler)</code>
               </li>
               <li>
                  <code>$().ready(handler)</code> (this is not recommended)</li>
               <li>
                  <code>$(handler)</code>
               </li>
            </ul>
            <p>There is also <code>$(document).bind("ready", handler)</code>. This behaves similarly to the ready method but with one exception: If the ready event has already fired and you try to <code>.bind("ready")</code> the bound handler will not be executed.</p>
            <p>The <code>.ready()</code> method can only be called on a jQuery object matching the current document, so the selector can be omitted.</p>
            <p>The <code>.ready()</code> method is typically used with an anonymous function:</p>
            <pre>$(document).ready(function() {
  // Handler for .ready() called.
});</pre>
            <p>If <code>.ready()</code> is called after the DOM has been initialized, the new handler passed in will be executed immediately.</p>
            <h4>Aliasing the jQuery Namespace</h4>
            <p>When using another JavaScript library, we may wish to call <code><a href="jQuery.noConflict.htm">$.noConflict()</a></code> to avoid namespace difficulties. When this function is called, the <code>$</code> shortcut is no longer available, forcing us to write <code>jQuery</code> each time we would normally write <code>$</code>. However, the handler passed to the <code>.ready()</code> method can take an argument, which is passed the global <code>jQuery</code> object. This means we can rename the object within the context of our <code>.ready()</code> handler without affecting other code:</p>
            <pre>jQuery(document).ready(function($) {
  // Code using $ as usual goes here.
});</pre>
         </longdesc>
         <example>
            <desc>Display a message when the DOM is loaded.</desc>
         </example>
      </entry>
      <entry type="method" name="die">
         <desc>Remove all event handlers previously attached using <code>.live()</code> from the elements.</desc>
         <signature/>
         <longdesc>
            <p>Any handler that has been attached with <code>.live()</code> can be removed with <code>.die()</code>. This method is analogous to calling <code>.unbind()</code> with no arguments, which is used to remove all handlers attached with <code>.bind()</code>.
See the discussions of <code>.live()</code> and <code>.unbind()</code> for further details.</p>
         </longdesc>
      </entry>
      <entry type="method" name="die">
         <desc>Remove an event handler previously attached using <code>.live()</code> from the elements.</desc>
         <signature>
            <argument name="eventType">
               <desc>A string containing a JavaScript event type, such as <code>click</code> or <code>keydown</code>.</desc>
            </argument>
            <argument name="handler">
               <desc>The function that is to be no longer executed.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Any handler that has been attached with <code>.live()</code> can be removed with <code>.die()</code>. This method is analogous to <code>.unbind()</code>, which is used to remove handlers attached with <code>.bind()</code>.
See the discussions of <code>.live()</code> and <code>.unbind()</code> for further details.</p>
         </longdesc>
         <example>
            <desc>Can bind and unbind events to the colored button.</desc>
         </example>
         <example>
            <desc>To unbind all live events from all paragraphs, write:</desc>
         </example>
         <example>
            <desc>To unbind all live click events from all paragraphs, write:</desc>
         </example>
         <example>
            <desc>To unbind just one previously bound handler, pass the function in as the second argument:</desc>
         </example>
      </entry>
      <entry type="property" name="jQuery.browser">
         <desc>
            <strong>We recommend against using this property, please try to use feature detection instead (see jQuery.support).</strong> Contains flags for the useragent, read from navigator.userAgent. While jQuery.browser will not be removed from future versions of jQuery, every effort to use jQuery.support and proper feature detection should be made.</desc>
         <signature/>
         <longdesc>
                   <p>The <code>$.browser</code> property allows us to detect which web browser is accessing the page, as reported by the browser itself. It contains flags for each of the four most prevalent browser classes (Internet Explorer, Mozilla, Webkit, and Opera) as well as version information.</p>
                   
            <p>Available flags are:</p>
            <ul>
               <li>webkit (as of jQuery 1.4)</li>
               <li>safari (deprecated)</li>
               <li>opera</li>
               <li>msie</li>
               <li>mozilla</li>
            </ul>

            <p>This property is available immediately. It is therefore safe to use it to determine whether or not to call <code>$(document).ready()</code>.
The <code>$.browser</code> property is deprecated in jQuery 1.3, but there are no immediate plans to remove it.</p>

            <p>Because <code>$.browser</code> uses <code>navigator.userAgent</code> to determine the platform, it is vulnerable to spoofing by the user or misrepresentation by the browser itself. It is always best to avoid browser-specific code entirely where possible. The <code>$.support</code> property is available for detection of support for particular features rather than relying on <code>$.browser</code>.</p>
         </longdesc>
         <example>
            <desc>Show the browser info.</desc>
         </example>
         <example>
            <desc>Returns true if the current useragent is some version of Microsoft's Internet Explorer.</desc>
         </example>
         <example>
            <desc>Alerts "this is webkit!" only for webkit browsers</desc>
         </example>
         <example>
            <desc>Alerts "Do stuff for firefox 3" only for firefox 3 browsers.</desc>
         </example>
         <example>
            <desc>Set a CSS property to specific browser.</desc>
         </example>
      </entry>
      <entry type="property" name="jQuery.browser.version">
         <desc>The version number of the rendering engine for the user's browser.</desc>
         <signature/>
         <longdesc>
            <p>Here are some typical results:</p>
            <ul>
               <li>Internet Explorer: 6.0, 7.0</li>
               <li>Mozilla/Firefox/Flock/Camino: 1.7.12, 1.8.1.3, 1.9</li>
               <li>Opera: 9.20</li>
               <li>Safari/Webkit: 312.8, 418.9</li>
            </ul>
            <p>Note that IE8 claims to be 7 in Compatibility View.</p>
         </longdesc>
         <example>
            <desc>Returns the browser version.</desc>
         </example>
         <example>
            <desc>Alerts the version of IE that is being used</desc>
         </example>
         <example>
            <desc>Often you only care about the "major number," the whole number. This can be accomplished with JavaScript's built-in parseInt() function:</desc>
         </example>
      </entry>
      <entry type="method" name="live">
         <desc>Attach a handler to the event for all elements which match the current selector, now and in the future.</desc>
         <signature>
            <argument name="eventType">
               <desc>A string containing a JavaScript event type, such as "click" or "keydown." As of jQuery 1.4 the string can contain multiple, space-separated event types or custom event names, as well.</desc>
            </argument>
            <argument name="handler">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventType">
               <desc>A string containing a JavaScript event type, such as "click" or "keydown." As of jQuery 1.4 the string can contain multiple, space-separated event types or custom event names, as well.</desc>
            </argument>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>This method is a variation on the basic <code>.bind()</code> method for attaching event handlers to elements. When <code>.bind()</code> is called, the elements that the jQuery object refers to get the handler attached; elements that get introduced later do not, so they would require another <code>.bind()</code> call. For instance, consider the HTML:</p>
            <pre>&lt;body&gt;
  &lt;div class="clickme"&gt;
    Click here
  &lt;/div&gt;
&lt;/body&gt;
</pre>
            <p>We can bind a simple click handler to this element:</p>
            <pre>$('.clickme').bind('click', function() {
  // Bound handler called.
});
</pre>
            <p>When the element is clicked, the handler is called. However, suppose that after this, another element is added:
  </p>
            <pre>$('body').append('&lt;div class="clickme"&gt;Another target&lt;/div&gt;');</pre>
            <p>This new element also matches the selector <code>.clickme</code>, but since it was added after the call to <code>.bind()</code>, clicks on it will do nothing.</p>
            <p>The <code>.live()</code> method provides an alternative to this behavior. If we bind a click handler to the target element using this method:</p>
            <pre>$('.clickme').live('click', function() {
  // Live handler called.
});</pre>
            <p>And then later add a new element:</p>
            <pre>$('body').append('&lt;div class="clickme"&gt;Another target&lt;/div&gt;');</pre>
            <p>Then clicks on the new element will also trigger the handler.</p>
            <p>If we later wish to <em>unbind</em> the click handlers from all <code>&lt;div class="clickme"&gt;</code> that were bound using <code>.live()</code>, we can use the <code><a href="http://api.jquery.com/die/">.die()</a></code> method:</p>
            <pre>$('.clickme').die('click');</pre>
            <h4 id="event-delegation">Event Delegation</h4>
            <p>The <code>.live()</code> method is able to affect elements that have not yet been added to the DOM through the use of event delegation: a handler bound to an ancestor element is responsible for events that are triggered on its descendants. The handler passed to <code>.live()</code> is never bound to an element; instead, <code>.live()</code> binds a special handler to the root of the DOM tree. In our example, when the new element is clicked, the following steps occur:</p>
            <ol>
               <li>A click event is generated and passed to the <code>&lt;div&gt;</code> for handling.</li>
               <li>No handler is directly bound to the <code>&lt;div&gt;</code>, so the event bubbles up the DOM tree.</li>
               <li>The event bubbles up until it reaches the root of the tree, which is where <code>.live()</code> binds its special handlers by default. <br/>
                  <em>* As of jQuery 1.4, event bubbling can optionally stop at a DOM element "context".</em>
               </li>
               <li>The special <code>click</code> handler bound by <code>.live()</code> executes.</li>
               <li>This handler tests the <code>target</code> of the event object to see whether it should continue. This test is performed by checking if <code>$(event.target).closest('.clickme')</code> is able to locate a matching element.</li>
               <li>If a matching element is found, the original handler is called on it.</li>
            </ol>
            <p>Because the test in step 5 is not performed until the event occurs, elements can be added at any time and still respond to events.</p>
            <p>See the discussion for <code><a href="bind.htm">.bind()</a></code> for more information on event binding.</p>
            <h4 id="multiple-events">Multiple Events</h4>
            <p>As of jQuery 1.4.1 <code>.live()</code> can accept multiple, space-separated events, similar to the functionality provided in <a href="bind.htm">.bind()</a>. For example, we can "live bind" the <code>mouseover</code> and <code>mouseout</code> events at the same time like so: </p>
            <pre>$('.hoverme').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});</pre>
            <h4 id="event-data">Event Data</h4>
            <p>As of jQuery 1.4, the optional <code>eventData</code> parameter allows us to pass additional information to the handler. One handy use of this parameter is to work around issues caused by closures. See the <code>.bind()</code> method's "<a href="bind/#passing-event-data.htm">Passing Event Data</a>" discussion for more information.</p>
            <h4 id="event-context">Event Context</h4>
            <p>As of jQuery 1.4, live events can be bound to a DOM element "context" rather than to the default document root. To set this context, we use the <a href="http://api.jquery.com/jquery/#selector-context">
                  <code>jQuery()</code> function's second argument</a>, passing in a single DOM element (as opposed to a jQuery collection or a selector).</p>
            <pre>$('div.clickme', $('#container')[0]).live('click', function() {
  // Live handler called.
});</pre>
            <p>The live handler in this example is called only when <code>&lt;div class="clickme"&gt;</code> is a descendant of an element with an ID of "container."</p>
            <h4 id="caveats">Caveats</h4>
            <p>The <code>.live()</code> technique is useful, but due to its special approach cannot be simply substituted for <code>.bind()</code> in all cases. Specific differences include:</p>
            <ul>
               <li>DOM traversal methods, or a context argument to the <code>jQuery()</code> method, are not supported for finding elements to send to <code>.live()</code>. Rather, the <code>.live()</code> method should always be called directly after a selector, as in the example above.</li>
               <li>To stop further handlers from executing after one bound using <code>.live()</code>, the handler must return <code>false</code>. Calling <code>.stopPropagation()</code> will not accomplish this.</li>
               <li>In <b>jQuery 1.3.x</b> only the following JavaScript events (in addition to custom events) could be bound with <code>.live()</code>: <code>click</code>, <code>dblclick</code>, <code>keydown</code>, <code>keypress</code>, <code>keyup</code>, <code>mousedown</code>, <code>mousemove</code>, <code>mouseout</code>, <code>mouseover</code>, and <code>mouseup</code>.</li>
            </ul>
            <blockquote>
               <ul>
                  <li>As of <b>jQuery 1.4</b> the <code>.live()</code> method supports custom events as well as all JavaScript events. As of <b>jQuery 1.4.1</b> even <code>focus</code> and <code>blur</code> work with live (mapping to the more appropriate, bubbling, events <code>focusin</code> and <code>focusout</code>).</li>
                  <li>As of <b>jQuery 1.4.1</b> the <code>hover</code> event can be specified (mapping to <code>mouseenter</code> and  <code>mouseleave</code>, which, in turn, are mapped to <code>mouseover</code> and <code>mouseout</code>).</li>
               </ul>
            </blockquote>
         </longdesc>
         <example>
            <desc>Click a paragraph to add another. Note that .live() binds the click event to all paragraphs - even new ones.</desc>
         </example>
         <example>
            <desc>To display each paragraph's text in an alert box whenever it is clicked:</desc>
         </example>
         <example>
            <desc>To cancel a default action and prevent it from bubbling up, return false:</desc>
         </example>
         <example>
            <desc>To cancel only the default action by using the preventDefault method.</desc>
         </example>
         <example>
            <desc>Can bind custom events too.</desc>
         </example>
      </entry>
      <entry type="method" name="triggerHandler">
         <desc>Execute all handlers attached to an element for an event.</desc>
         <signature>
            <argument name="eventType">
               <desc>A string containing a JavaScript event type, such as <code>click</code> or <code>submit</code>.</desc>
            </argument>
            <argument name="extraParameters">
               <desc>An array of additional parameters to pass along to the event handler.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>.triggerHandler()</code> method behaves similarly to <code>.trigger()</code>, with the following exceptions:</p>
            <ul>
               <li>The <code>.triggerHandler()</code> method does not cause the default behavior of an event to occur (such as a form submission).</li>
               <li>While <code>.trigger()</code> will operate on all elements matched by the jQuery object, <code>.triggerHandler()</code> only affects the first matched element.</li>
               <li>Events created with <code>.triggerHandler()</code> do not bubble up the DOM hierarchy; if they are not handled by the target element directly, they do nothing.</li>
               <li>Instead of returning the jQuery object (to allow chaining), <code>.triggerHandler()</code> returns whatever value was returned by the last handler it caused to be executed. If no handlers are triggered, it returns <code>undefined</code>
               </li>
            </ul>
            <p>For more information on this method, see the discussion for <code><a href="trigger.htm">.trigger()</a></code>.</p>
         </longdesc>
         <example>
            <desc>If you called .triggerHandler() on a focus event - the browser's default focus action would not be triggered, only the event handlers bound to the focus event.</desc>
         </example>
      </entry>
      <entry type="method" name="trigger">
         <desc>Execute all handlers and behaviors attached to the matched elements for the given event type.</desc>
         <signature>
            <argument name="eventType">
               <desc>A string containing a JavaScript event type, such as <code>click</code> or <code>submit</code>.</desc>
            </argument>
            <argument name="extraParameters">
               <desc>An array of additional parameters to pass along to the event handler.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="event">
               <desc>A <a href="http://api.jquery.com/category/events/event-object/">
                     <code>jQuery.Event</code>
                  </a> object.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Any event handlers attached with <code>.bind()</code> or one of its shortcut methods are triggered when the corresponding event occurs. They can be fired manually, however, with the <code>.trigger()</code> method. A call to <code>.trigger()</code> executes the handlers in the same order they would be if the event were triggered naturally by the user:</p>
            <pre>$('#foo').bind('click', function() {
      alert($(this).text());
    });
    $('#foo').trigger('click');</pre>
            <p>As of jQuery 1.3, <code>.trigger()</code>ed events bubble up the DOM tree; an event handler can stop the bubbling by returning <code>false</code> from the handler or calling the <a href="http://api.jquery.com/event.stopPropagation/">
                  <code>.stopPropagation()</code>
               </a> method on the event object passed into the event. Although <code>.trigger()</code> simulates an event activation, complete with a synthesized event object, it does not perfectly replicate a naturally-occurring event.</p>
            <p>To trigger handlers bound via jQuery without also triggering the native event, use <a href="http://api.jquery.com/triggerHandler/">
                  <code>.triggerHandler()</code>
               </a> instead. </p>
            <p>When we define a custom event type using the <code>.bind()</code> method, the second argument to <code>.trigger()</code> can become useful. For example, suppose we have bound a handler for the <code>custom</code> event to our element instead of the built-in <code>click</code> event as we did above:</p>
            <pre>$('#foo').bind('custom', function(event, param1, param2) {
  alert(param1 + "\n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);
</pre>
            <p>The event object is always passed as the first parameter to an event handler, but if additional parameters are specified during a <code>.trigger()</code> call as they are here, these parameters will be passed along to the handler as well.</p>
            <p>Note the difference between the extra parameters we're passing here and the <code>eventData</code> parameter to the <a href="bind.htm">.bind()</a> method. Both are mechanisms for passing information to an event handler, but the <code>extraParameters</code> argument to <code>.trigger()</code> allows information to be determined at the time the event is triggered, while the <code>eventData</code> argument to <code>.bind()</code> requires the information to be already computed at the time the handler is bound.</p>    
         </longdesc>
         <example>
            <desc>Clicks to button #2 also trigger a click for button #1.</desc>
         </example>
         <example>
            <desc>To submit the first form without using the submit() function, try:</desc>
         </example>
         <example>
            <desc>To submit the first form without using the submit() function, try:</desc>
         </example>
         <example>
            <desc>To pass arbitrary data to an event:</desc>
         </example>
         <example>
            <desc>To pass arbitrary data through an event object:</desc>
         </example>
         <example>
            <desc>Alternative way to pass data through an event object:</desc>
         </example>
      </entry>
      <entry type="method" name="ajaxComplete">
         <desc>注册一个事件处理函数，这个函数会在 Ajax 请求完成时调用。这是一个 <a href="http://docs.jquery.com/Ajax_Events">Ajax 事件</a>。</desc>
         <signature>
            <argument name="handler(event, XMLHttpRequest, ajaxOptions)">
               <desc>将要调用的函数</desc>
            </argument>
         </signature>
         <longdesc>
            <p>当 Ajax 请求完成时，jQuery 会触发 <code>ajaxComplete</code> 事件。任何先前通过 <code>.ajaxComplete()</code> 方法注册的事件处理函数都会在此刻执行。</p>
            <p>为了实际研究这个方法，我们构建一个简单的 Ajax load 请求：</p>
            <pre>&lt;div class="trigger"&gt;Trigger&lt;/div&gt;
&lt;div class="result"&gt;&lt;/div&gt;
&lt;div class="log"&gt;&lt;/div&gt;
</pre>
            <p>我们可以把我们的事件处理函数附加到任何元素上：</p>
            <pre>$('.log').ajaxComplete(function() {
  $(this).text('Triggered ajaxComplete handler.');
});
</pre>
            <p>现在，我们可以用任意 jQuery 方法来发送一个 Ajax 请求，比如在 click 中发送一个请求：</p>
            <pre>$('.trigger').click(function() {
  $('.result').load('ajax/test.html');
});</pre>
            <p>当用户点击按钮，接着等 Ajax 请求结束后，就会显示日志信息。</p>
            <p><strong>注意：</strong> 由于 <code>.ajaxComplete()</code> 是作为一个 jQuery 对象实例的方法来实现的，所以我们在回调函数中可以通过 <code>this</code> 关键字来指向原先所选中的元素。</p>
            <p>无论是哪一个 Ajax 请求完成了， <code>ajaxComplete</code> 处理函数都会被执行。如果有时必须区分出不同的请求，我们可以使用传递给事件处理函数的参数来识别不同的请求。每次 <code>ajaxComplete</code> 的事件处理函数执行时，都会传递一个事件对象，一个 <code>XMLHttpRequest</code> 对象，以及一个 settings 参数对象。其中 settings 参数对象就是调用 Ajax 请求时，传递给 $.ajax 方法的 settings 对象(有时候是在 jQuery 内部传递的，比如用 load 方法时，jQuery 内部也会调用 $.ajax 方法，并且构造并传递一个 settings 参数)。通过 settings 对象，我们就可以用来确定这是哪一个请求。比如说，我们可以限定某个回调函数，仅仅处理某个特定的 URL：</p>
            <pre>$('.log').ajaxComplete(function(e, xhr, settings) {
  if (settings.url == 'ajax/test.html') {
    $(this).text('Triggered ajaxComplete handler.');
  }
});</pre>
         </longdesc>
         <example>
            <desc>在 Ajax 请求完毕后显示一条信息。</desc>
         </example>
      </entry>
      <entry type="method" name="one">
         <desc>Attach a handler to an event for the elements. The handler is executed at most once per element.</desc>
         <signature>
            <argument name="eventType">
               <desc>A string containing one or more JavaScript event types, such as "click" or "submit," or custom event names.</desc>
            </argument>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>This method is identical to <code>.bind()</code>, except that the handler is unbound after its first invocation. For example:</p>
            <pre>$('#foo').one('click', function() {
  alert('This will be displayed only once.');
});
</pre>
            <p>After the code is executed, a click on the element with ID <code>foo</code> will display the alert. Subsequent clicks will do nothing. This code is equivalent to:</p>
            <pre>$('#foo').bind('click', function(event) {
  alert('This will be displayed only once.');
  $(this).unbind(event);
});
</pre>
            <p>In other words, explicitly calling <code>.unbind()</code> from within a regularly-bound handler has exactly the same effect.</p>
         </longdesc>
         <example>
            <desc>Tie a one-time click to each div.</desc>
         </example>
         <example>
            <desc>To display the text of all paragraphs in an alert box the first time each of them is clicked:</desc>
         </example>
      </entry>
      <entry type="method" name="serializeArray">
         <desc>把表单元素编码成一个名/值对的数组。</desc>
         <signature/>
         <longdesc>
            <p><code>.serializeArray()</code> 方法会创建一个 JavaScript 对象数组，可以用于编码成 JSON 字符串。他可以对一个代表一组表单元素的 jQuery 对象进行操作。表单元素可以有以下几种类型：</p>
            <pre>&lt;form&gt;
  &lt;div&gt;&lt;input type="text" name="a" value="1" id="a" /&gt;&lt;/div&gt;
  &lt;div&gt;&lt;input type="text" name="b" value="2" id="b" /&gt;&lt;/div&gt;
  &lt;div&gt;&lt;input type="hidden" name="c" value="3" id="c" /&gt;&lt;/div&gt;
  &lt;div&gt;
    &lt;textarea name="d" rows="8" cols="40"&gt;4&lt;/textarea&gt;
  &lt;/div&gt;
  &lt;div&gt;&lt;select name="e"&gt;
    &lt;option value="5" selected="selected"&gt;5&lt;/option&gt;
    &lt;option value="6"&gt;6&lt;/option&gt;
    &lt;option value="7"&gt;7&lt;/option&gt;
  &lt;/select&gt;&lt;/div&gt;
  &lt;div&gt;
    &lt;input type="checkbox" name="f" value="8" id="f" /&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;input type="submit" name="g" value="Submit" id="g" /&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>
            <p><code>.serializeArray()</code> 方法使用了 W3C 关于 <a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2">successful controls</a>(有效控件) 的标准来检测哪些元素应当包括在内。禁用的元素不会被包括在内。并且元素应当有含有 <code>name</code> 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。</p>
            <p><code>.serializeArray()</code> 方法可以对单独选择的表单元素对象进行操作，比如 <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, 和 <code>&lt;select&gt;</code>。然而，还有个更方便的方法是，直接选择 <code>&lt;form&gt;</code> 标签来进行序列化操作。</p>
            <pre>$('form').submit(function() {
  alert($(this).serializeArray());
  return false;
});</pre>
            <p>于是生成了如下的数据结构：</p>
            <pre>[
  {
    name: a
    value: 1
  },
  {
    name: b
    value: 2
  },
  {
    name: c
    value: 3
  },
  {
    name: d
    value: 4
  },
  {
    name: e
    value: 5
  }
]</pre>
         </longdesc>
         <example>
            <desc>从一个表单获取数据，迭代并把他们在结果中显示。</desc>
         </example>
      </entry>
      <entry type="method" name="serialize">
         <desc>把表单元素编码成用于提交的字符串。</desc>
         <signature/>
         <longdesc>
            <p><code>.serialize()</code> 方法能够以标准的 URL 编码表示法来创建一个文本字符串。他可以对一个代表一组表单元素的 jQuery 对象进行操作。表单元素可以有以下几种类型：</p>
            <pre>&lt;form&gt;
  &lt;div&gt;&lt;input type="text" name="a" value="1" id="a" /&gt;&lt;/div&gt;
  &lt;div&gt;&lt;input type="text" name="b" value="2" id="b" /&gt;&lt;/div&gt;
  &lt;div&gt;&lt;input type="hidden" name="c" value="3" id="c" /&gt;&lt;/div&gt;
  &lt;div&gt;
    &lt;textarea name="d" rows="8" cols="40"&gt;4&lt;/textarea&gt;
  &lt;/div&gt;
  &lt;div&gt;&lt;select name="e"&gt;
    &lt;option value="5" selected="selected"&gt;5&lt;/option&gt;
    &lt;option value="6"&gt;6&lt;/option&gt;
    &lt;option value="7"&gt;7&lt;/option&gt;
  &lt;/select&gt;&lt;/div&gt;
  &lt;div&gt;
    &lt;input type="checkbox" name="f" value="8" id="f" /&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;input type="submit" name="g" value="Submit" id="g" /&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>
            <p><code>.serialize()</code> 方法可以对单独选择的表单元素对象进行操作，比如 <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, 和 <code>&lt;select&gt;</code>。然而，还有个更方便的方法是，直接选择 <code>&lt;form&gt;</code> 标签来进行序列化操作。</p>
            <pre>$('form').submit(function() {
  alert($(this).serialize());
  return false;
});</pre>
            <p>于是就生成了一个很标准的查询字符串：</p>
            <pre>a=1&amp;b=2&amp;c=3&amp;d=4&amp;e=5</pre>
            <p>注意，只有 <a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2">"successful controls"</a>(有效控件) 可以被序列化成字符串，其中，提交按钮的值不会被序列化。另外，如果想要一个表单元素的值被序列化成字符串，这个元素必须含有 <code>name</code> 属性。此外，文件选择元素的数据也不会被序列化。</p>
         </longdesc>
         <example>
            <desc>把一个表单序列化成一个查询字符串，用于通过 Ajax 请求发送给服务器。</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.ajaxSetup">
         <desc>给未来的 Ajax 请求设置默认值。</desc>
         <signature>
            <argument name="options">
               <desc>一组用于配置 Ajax 请求的键值对。所有的选项都是可选的。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>关于 <code>$.ajaxSetup()</code> 可用的设置选项，请参考 <code><a href="jQuery.ajax.htm">$.ajax()</a></code> 来获取更多信息。</p>
            <p>之后所有的 Ajax 请求都会使用这个新的设置，除非他们调用时设置了各自的参数重载了这个默认值。这种状态一直持续到下一次调用 <code>$.ajaxSetup()</code> 为止。</p>
            <p>举例来说，我们可以在重复几次的连接服务器之前，设置默认的 URL 参数：</p>
            <pre>$.ajaxSetup({
  url: 'ping.php',
});</pre>
            <p>现在每次 Ajax 请求，都会自动使用这个 URL 了：</p>
            <pre>
$.ajax({
  data: {'name': 'Tim'},
});</pre>

            <blockquote>
               <p>注意，全局的回调函数应当通过他们各自代表的全局 Ajax 事件绑定方法来设置——<code><a href="ajaxStart.htm">.ajaxStart()</a></code>, <code><a href="ajaxStop.htm">.ajaxStop()</a></code>, <code><a href="ajaxComplete.htm">.ajaxComplete()</a></code>, <code><a href="ajaxError.htm">.ajaxError()</a></code>, <code><a href="ajaxSuccess.htm">.ajaxSuccess()</a></code>, <code><a href="ajaxSend.htm">.ajaxSend()</a></code>——而不是用 <code>$.ajaxSetup()</code> 来设置 <code>settings</code> 对象。</p>
            </blockquote>
         </longdesc>
         <example>
            <desc>设置 Ajax 请求的默认 url 为 "/xmlhttp/"，并且默认禁止触发全局事件，以及用 POST 代替默认的 GET。之后发送的 Ajax 请求，只需要带上数据即可，显得非常清爽。</desc>
         </example>
      </entry>
      <entry type="method" name="ajaxSuccess">
         <desc>注册一个事件处理函数，这个函数会在某个 Ajax 请求成功完成时调用。这是一个 <a href="http://docs.jquery.com/Ajax_Events">Ajax 事件</a>。</desc>

         <signature>
            <argument name="handler(event, XMLHttpRequest, ajaxOptions)">
               <desc>将要调用的函数</desc>
            </argument>
         </signature>
         <longdesc>
            <p>当 Ajax 请求成功后，jQuery 会触发 <code>ajaxSuccess</code> 事件。任何先前通过 <code>.ajaxSuccess()</code> 方法注册的事件处理函数都会在此刻执行。</p>
            <p>为了实际研究这个方法，我们构建一个简单的 Ajax load 请求：</p>
            <pre>&lt;div class="trigger"&gt;Trigger&lt;/div&gt;
&lt;div class="result"&gt;&lt;/div&gt;
&lt;div class="log"&gt;&lt;/div&gt;</pre>
            <p>我们可以把我们的事件处理函数附加到任何元素上：</p>
            <pre>$('.log').ajaxSuccess(function() {
  $(this).text('Triggered ajaxSuccess handler.');
});</pre>
            <p>现在，我们可以用任意 jQuery 方法来发送一个 Ajax 请求，比如在 click 中发送一个请求：</p>
            <pre>$('.trigger').click(function() {
  $('.result').load('ajax/test.html');
});</pre>
            <p>当用户点击按钮，接着等 Ajax 请求成功后，就会显示日志信息。</p>
            <p><strong>注意：</strong> 由于 <code>.ajaxSuccess()</code> 是作为一个 jQuery 对象实例的方法来实现的，所以我们在回调函数中可以通过 <code>this</code> 关键字来指向原先所选中的元素。</p>
            <p>无论是哪一个 Ajax 请求完成了， <code>ajaxSuccess</code> 处理函数都会被执行。如果有时必须区分出不同的请求，我们可以使用传递给事件处理函数的参数来识别不同的请求。每次 <code>ajaxSuccess</code> 的事件处理函数执行时，都会传递一个事件对象，一个 <code>XMLHttpRequest</code> 对象，以及一个 settings 参数对象。其中 settings 参数对象就是调用 Ajax 请求时，传递给 $.ajax 方法的 settings 对象(有时候是在 jQuery 内部传递的，比如用 load 方法时，jQuery 内部也会调用 $.ajax 方法，并且构造并传递一个 settings 参数)。通过 settings 对象，我们就可以用来确定这是哪一个请求。比如说，我们可以限定某个回调函数，仅仅处理某个特定的 URL：</p>
            <pre>$('.log').ajaxSuccess(function(e, xhr, settings) {
  if (settings.url == 'ajax/test.html') {
    $(this).text('Triggered ajaxSuccess handler.');
  }
});</pre>
         </longdesc>
         <example>
            <desc>在 Ajax 请求成功后显示一条信息。</desc>
         </example>
      </entry>
      <entry type="method" name="ajaxStop">
         <desc>注册一个事件处理函数，这个函数会在所有的 Ajax 请求都完成时调用。这是一个 <a href="http://docs.jquery.com/Ajax_Events">Ajax 事件</a>。</desc>
         <signature>
            <argument name="handler()">
               <desc>将要调用的函数</desc>
            </argument>
         </signature>
         <longdesc>
            <p>当一个 Ajax 请求完成后， jQuery 会检测时候还有其他未完成的 Ajax 请求。如果没有还未完成的请求了， jQuery 就触发一个 <code>ajaxStop</code> 事件。任何先前通过 <code>.ajaxStop()</code> 方法注册的事件处理函数都会在此刻执行。</p>
            <p>为了实际研究这个方法，我们构建一个简单的 Ajax load 请求：</p>
            <pre>&lt;div class="trigger"&gt;Trigger&lt;/div&gt;
&lt;div class="result"&gt;&lt;/div&gt;
&lt;div class="log"&gt;&lt;/div&gt;</pre>
            <p>我们可以把我们的事件处理函数附加到任何元素上：</p>
            <pre>$('.log').ajaxStop(function() {
  $(this).text('Triggered ajaxStop handler.');
});</pre>
            <p>现在，我们可以用任意 jQuery 方法来发送一个 Ajax 请求，比如在 click 中发送一个请求：</p>
            <pre>$('.trigger').click(function() {
  $('.result').load('ajax/test.html');
});</pre>
            <p>当用户点击按钮，接着等 Ajax 请求完成后，就会显示日志信息。</p>
            <p><strong>注意：</strong> 由于 <code>.ajaxStop()</code> 是作为一个 jQuery 对象实例的方法来实现的，所以我们在回调函数中可以通过 <code>this</code> 关键字来指向原先所选中的元素。</p>
         </longdesc>
         <example>
            <desc>当所有的 Ajax 请求结束后，隐藏加载提示信息。</desc>
         </example>
      </entry>
      <entry type="method" name="ajaxStart">
         <desc>注册一个事件处理函数，这个函数会在第一个 Ajax 请求都开始时调用。这是一个 <a href="http://docs.jquery.com/Ajax_Events">Ajax 事件</a>。</desc>
         <signature>
            <argument name="handler()">
               <desc>将要调用的函数</desc>
            </argument>
         </signature>
         <longdesc>
            <p>当一个 Ajax 请求将要开始时， jQuery 会检测时候还有其他未完成的 Ajax 请求。如果没有正在进行中的请求， jQuery 就触发一个 <code>ajaxStart</code> 事件。任何先前通过 <code>.ajaxStart()</code> 方法注册的事件处理函数都会在此刻执行。</p>
            <p>为了实际研究这个方法，我们构建一个简单的 Ajax load 请求：</p>
            <pre>&lt;div class="trigger"&gt;Trigger&lt;/div&gt;
&lt;div class="result"&gt;&lt;/div&gt;
&lt;div class="log"&gt;&lt;/div&gt;</pre>
            <p>我们可以把我们的事件处理函数附加到任何元素上：</p>
            <pre>$('.log').ajaxStart(function() {
  $(this).text('Triggered ajaxStart handler.');
});</pre>
            <p>现在，我们可以用任意 jQuery 方法来发送一个 Ajax 请求，比如在 click 中发送一个请求：</p>
            <pre>$('.trigger').click(function() {
  $('.result').load('ajax/test.html');
});</pre>
            <p>当用户点击按钮，接着 Ajax 请求将要发送前，会显示日志信息。</p>
            <p><strong>注意：</strong> 由于 <code>.ajaxStart()</code> 是作为一个 jQuery 对象实例的方法来实现的，所以我们在回调函数中可以通过 <code>this</code> 关键字来指向原先所选中的元素。</p>
         </longdesc>
         <example>
            <desc>当 Ajax 请求开始，且没有其他正在进行中的 Ajax 请求时，显示加载提示信息。</desc>
         </example>
      </entry>
      <entry type="method" name="ajaxSend">
         <desc>注册一个事件处理函数，这个函数会在 Ajax 请求之前调用。这是一个 <a href="http://docs.jquery.com/Ajax_Events">Ajax 事件</a>。</desc>
         <signature>
            <argument name="handler(event, XMLHttpRequest, ajaxOptions)">
               <desc>将要调用的函数</desc>
            </argument>
         </signature>
         <longdesc>
            <p>当 Ajax 请求将要发送前，jQuery 会触发 <code>ajaxSend</code> 事件。任何先前通过 <code>.ajaxSend()</code> 方法注册的事件处理函数都会在此刻执行。</p>
            <p>为了实际研究这个方法，我们构建一个简单的 Ajax load 请求：</p>
            <pre>&lt;div class="trigger"&gt;Trigger&lt;/div&gt;
&lt;div class="result"&gt;&lt;/div&gt;
&lt;div class="log"&gt;&lt;/div&gt;</pre>
            <p>我们可以把我们的事件处理函数附加到任何元素上：</p>
            <pre>$('.log').ajaxSend(function() {
  $(this).text('Triggered ajaxSend handler.');
});</pre>
            <p>现在，我们可以用任意 jQuery 方法来发送一个 Ajax 请求，比如在 click 中发送一个请求：</p>
            <pre>$('.trigger').click(function() {
  $('.result').load('ajax/test.html');
});</pre>
            <p>当用户点击按钮，接着 Ajax 请求将要开始前，会显示日志信息。</p>
            <p><strong>注意：</strong> 由于 <code>.ajaxSend()</code> 是作为一个 jQuery 对象实例的方法来实现的，所以我们在回调函数中可以通过 <code>this</code> 关键字来指向原先所选中的元素。</p>
            <p>无论是哪一个 Ajax 请求将要发送前， <code>ajaxSend</code> 处理函数都会被执行。如果有时必须区分出不同的请求，我们可以使用传递给事件处理函数的参数来识别不同的请求。每次 <code>ajaxSend</code> 的事件处理函数执行时，都会传递一个事件对象，一个 <code>XMLHttpRequest</code> 对象，以及一个 settings 参数对象。其中 settings 参数对象就是调用 Ajax 请求时，传递给 $.ajax 方法的 settings 对象(有时候是在 jQuery 内部传递的，比如用 load 方法时，jQuery 内部也会调用 $.ajax 方法，并且构造并传递一个 settings 参数)。通过 settings 对象，我们就可以用来确定这是哪一个请求。比如说，我们可以限定某个回调函数，仅仅处理某个特定的 URL：</p>
            <pre>$('.log').ajaxSend(function(e, xhr, settings) {
  if (settings.url == 'ajax/test.html') {
    $(this).text('Triggered ajaxSend handler.');
  }
});</pre>
         </longdesc>
         <example>
            <desc>在 Ajax 请求将要发送前显示一条信息。</desc>
         </example>
      </entry>
      <entry type="method" name="ajaxError">
         <desc>注册一个事件处理函数，这个函数会在 Ajax 请求出错时调用。这是一个 <a href="http://docs.jquery.com/Ajax_Events">Ajax 事件</a>。</desc>
         <signature>
            <argument name="handler(event, XMLHttpRequest, ajaxOptions, thrownError)">
               <desc>将要调用的函数</desc>
            </argument>
         </signature>
         <longdesc>
            <p>当 Ajax 请求出错时，jQuery 会触发 <code>ajaxError</code> 事件。任何先前通过 <code>.ajaxError()</code> 方法注册的事件处理函数都会在此刻执行。</p>
            <p>为了实际研究这个方法，我们构建一个简单的 Ajax load 请求：</p>
            <pre>&lt;div class="trigger"&gt;Trigger&lt;/div&gt;
&lt;div class="result"&gt;&lt;/div&gt;
&lt;div class="log"&gt;&lt;/div&gt;</pre>
            <p>我们可以把我们的事件处理函数附加到任何元素上：</p>
            <pre>$('.log').ajaxError(function() {
  $(this).text('Triggered ajaxError handler.');
});</pre>
            <p>现在，我们可以用任意 jQuery 方法来发送一个 Ajax 请求，比如在 click 中发送一个请求：</p>
            <pre>$('.trigger').click(function() {
  $('.result').load('ajax/missing.html');
});</pre>
            <p>当用户点击按钮，接着等 Ajax 请求失败时，由于请求的文件不存在，就会显示日志信息。</p>
            <p><strong>注意：</strong> 由于 <code>.ajaxError()</code> 是作为一个 jQuery 对象实例的方法来实现的，所以我们在回调函数中可以通过 <code>this</code> 关键字来指向原先所选中的元素。</p>
            <p>无论是哪一个 Ajax 请求出错了， <code>ajaxError</code> 处理函数都会被执行。如果有时必须区分出不同的请求，我们可以使用传递给事件处理函数的参数来识别不同的请求。每次 <code>ajaxError</code> 的事件处理函数执行时，都会传递一个事件对象，一个 <code>XMLHttpRequest</code> 对象，以及一个 settings 参数对象。其中 settings 参数对象就是调用 Ajax 请求时，传递给 $.ajax 方法的 settings 对象(有时候是在 jQuery 内部传递的，比如用 load 方法时，jQuery 内部也会调用 $.ajax 方法，并且构造并传递一个 settings 参数)。通过 settings 对象，我们就可以用来确定这是哪一个请求。比如说，我们可以限定某个回调函数，仅仅处理某个特定的 URL：</p>
            <pre>$('.log').ajaxError(function(e, xhr, settings, exception) {
  if (settings.url == 'ajax/missing.html') {
    $(this).text('Triggered ajaxError handler.');
  }
});</pre>
         </longdesc>
         <example>
            <desc>在 Ajax 请求失败时显示一条信息。</desc>
         </example>
      </entry>
      <entry type="method" name="unbind">
         <desc>Remove a previously-attached event handler from the elements.</desc>
         <signature>
            <argument name="eventType">
               <desc>A string containing a JavaScript event type, such as <code>click</code> or <code>submit</code>.</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>The function that is to be no longer executed.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventType">
               <desc>A string containing a JavaScript event type, such as <code>click</code> or <code>submit</code>.</desc>
            </argument>
            <argument name="false">
               <desc>Unbinds the corresponding 'return false' function that was bound using <code>.bind( eventType, false )</code>.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="event">
               <desc>A JavaScript event object as passed to an event handler.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Any handler that has been attached with <code>.bind()</code> can be removed with <code>.unbind()</code>. In the simplest case, with no arguments, <code>.unbind()</code> removes all handlers attached to the elements:</p>
            <pre>$('#foo').unbind();</pre>
            <p>This version removes the handlers regardless of type. To be more precise, we can pass an event type:</p>
            <pre>$('#foo').unbind('click');</pre>
            <p>By specifying the <code>click</code> event type, only handlers for that event type will be unbound. This approach can still have negative ramifications if other scripts might be attaching behaviors to the same element, however. Robust and extensible applications typically demand the two-argument version for this reason:</p>
            <pre>var handler = function() {
  alert('The quick brown fox jumps over the lazy dog.');
};
$('#foo').bind('click', handler);
$('#foo').unbind('click', handler);
</pre>
            <p>By naming the handler, we can be assured that no other functions are caught in the crossfire. Note that the following will <em>not</em> work:</p>
            <pre>$('#foo').bind('click', function() {
  alert('The quick brown fox jumps over the lazy dog.');
});
// will NOT work
$('#foo').unbind('click', function() {
  alert('The quick brown fox jumps over the lazy dog.');
});</pre>
            <p>Even though the two functions are identical in content, they are created separately and so JavaScript is free to keep them as distinct function objects. To unbind a particular handler, we need a reference to that function and not a different one that happens to do the same thing.</p>
            <h4>Using Namespaces</h4>
            <p>Instead of maintaining references to handlers in order to unbind them, we can namespace the events and use this capability to narrow the scope of our unbinding actions. As shown in the discussion for the <code>.bind()</code> method, namespaces are defined by using a period (<code>.</code>) character when binding a handler:</p>
            <pre>$('#foo').bind('click.myEvents', handler);</pre>
            <p>When a handler is bound in this fashion, we can still unbind it the normal way:</p>
            <pre>$('#foo').unbind('click');</pre>
            <p>However, if we want to avoid affecting other handlers, we can be more specific:</p>
            <pre>$('#foo').unbind('click.myEvents');</pre>
            <p>If multiple namespaced handlers are bound, we can unbind them at once:</p>
            <pre>$('#foo').unbind('click.myEvents.yourEvents');</pre>
            <p>This syntax is similar to that used for CSS class selectors; they are not hierarchical. This method call is thus the same as:</p>
            <pre>$('#foo').unbind('click.yourEvents.myEvents');</pre>
            <p>We can also unbind all of the handlers in a namespace, regardless of event type:</p>
            <pre>$('#foo').unbind('.myEvents');</pre>
            <p>It is particularly useful to attach namespaces to event bindings when we are developing plug-ins or otherwise writing code that may interact with other event-handling code in the future.</p>
            <h4>Using the Event Object</h4>
            <p>The third form of the <code>.unbind()</code> method is used when we wish to unbind a handler from within itself. For example, suppose we wish to trigger an event handler only three times:</p>
            <pre>var timesClicked = 0;
$('#foo').bind('click', function(event) {
  alert('The quick brown fox jumps over the lazy dog.');
  timesClicked++;
  if (timesClicked &gt;= 3) {
    $(this).unbind(event);
  }
});
</pre>
            <p>The handler in this case must take a parameter, so that we can capture the event object and use it to unbind the handler after the third click. The event object contains the context necessary for <code>.unbind()</code> to know which handler to remove.
This example is also an illustration of a closure. Since the handler refers to the <code>timesClicked</code> variable, which is defined outside the function, incrementing the variable has an effect even between invocations of the handler.</p>
         </longdesc>
         <example>
            <desc>Can bind and unbind events to the colored button.</desc>
         </example>
         <example>
            <desc>To unbind all events from all paragraphs, write:</desc>
         </example>
         <example>
            <desc>To unbind all click events from all paragraphs, write:</desc>
         </example>
         <example>
            <desc>To unbind just one previously bound handler, pass the function in as the second argument:</desc>
         </example>
      </entry>
      <entry type="method" name="bind">
         <desc>Attach a handler to an event for the elements.</desc>
         <signature>
            <argument name="eventType">
               <desc>A string containing one or more JavaScript event types, such as "click" or "submit," or custom event names.</desc>
            </argument>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="handler(eventObject)">
               <desc>每当事件触发时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="eventType">
               <desc>A string containing one or more JavaScript event types, such as "click" or "submit," or custom event names.</desc>
            </argument>
            <argument name="eventData">
               <desc>将要传递给事件处理函数的数据映射。</desc>
            </argument>
            <argument name="false">
               <desc>Setting the third argument to false will attach a function that prevents the default action from occurring and stops the event from bubbling.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="events">
               <desc>A map of one or more JavaScript event types and functions to execute for them.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>.bind()</code> method is the primary means of attaching behavior to a document. All JavaScript event types, such as <code>focus</code>, <code>mouseover</code>, and <code>resize</code>, are allowed for <code>eventType.</code> (The <code>beforeunload</code> and <code>error</code> events on the <code>window</code> object use nonstandard conventions and are not supported by jQuery; attach a handler directly to the <code>window</code> object instead.) </p>
            <p>The jQuery library provides shortcut methods for binding the standard event types, such as <code>.click()</code> for <code>.bind('click')</code>. A description of each can be found in the discussion of its shortcut method: <a href="blur.htm">blur</a>, <a href="focus.htm">focus</a>, <a href="focusin.htm">focusin</a>, <a href="focusout.htm">focusout</a>, <a href="load-event.htm">load</a>, <a href="resize.htm">resize</a>, <a href="scroll.htm">scroll</a>, <a href="unload.htm">unload</a>, <a href="click.htm">click</a>, <a href="dblclick.htm">dblclick</a>, <a href="mousedown.htm">mousedown</a>, <a href="mouseup.htm">mouseup</a>, <a href="mousemove.htm">mousemove</a>, <a href="mouseover.htm">mouseover</a>, <a href="mouseout.htm">mouseout</a>, <a href="mouseenter.htm">mouseenter</a>, <a href="mouseleave.htm">mouseleave</a>, <a href="change.htm">change</a>, <a href="select.htm">select</a>, <a href="submit.htm">submit</a>, <a href="keydown.htm">keydown</a>, <a href="keypress.htm">keypress</a>, <a href="keyup.htm">keyup</a>,  <a href="error.htm">error</a>
            </p>

            <p>Any string is legal for <code>eventType</code>; if the string is not the name of a native JavaScript event, then the handler is bound to a custom event. These events are never called by the browser, but may be triggered manually from other JavaScript code using <code>.trigger()</code> or <code>.triggerHandler()</code>.</p>
            <p>If the <code>eventType</code> string contains a period (<code>.</code>) character, then the event is namespaced. The period character separates the event from its namespace. For example, in the call <code>.bind('click.name', handler)</code>, the string <code>click</code> is the event type, and the string <code>name</code> is the namespace. Namespacing allows us to unbind or trigger some events of a type without affecting others. See the discussion of <code>.unbind()</code> for more information.</p>
            <p>When an event reaches an element, all handlers bound to that event type for the element are fired. If there are multiple handlers registered, they will always execute in the order in which they were bound. After all handlers have executed, the event continues along the normal event propagation path.</p>
            <p>A basic usage of <code>.bind()</code> is:</p>
            <pre>
$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});
</pre>
            <p>This code will cause the element with an ID of <code>foo</code> to respond to the <code>click</code> event. When a user clicks inside this element thereafter, the alert will be shown.</p>
            <h4 id="multiple-events">Multiple Events</h4>
            <p>Multiple event types can be bound at once by including each one separated by a space:</p>
            <pre>
$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});
</pre>
            <p>The effect of this on <code>&lt;div id="foo"&gt;</code> (when it does not initially have the "entered" class) is to add the "entered" class when the mouse enters the <code>&lt;div&gt;</code> and remove the class when the mouse leaves. </p>
            <p>As of jQuery 1.4 we can bind multiple event handlers simultaneously by passing a map of event type/handler pairs:</p>
            <pre>
$('#foo').bind({
  click: function() {
    // do something on click
  },
  mouseenter: function() {
    // do something on mouseenter
  }
});
</pre>
            <h4 id="event-handlers">Event Handlers</h4>
            <p>The <code>handler</code> parameter takes a callback function, as shown above. Within the handler, the keyword <code>this</code> refers to the DOM element to which the handler is bound. To make use of the element in jQuery, it can be passed to the normal <code>$()</code> function. For example:</p>
            <pre>$('#foo').bind('click', function() {
  alert($(this).text());
});
</pre>
            <p>After this code is executed, when the user clicks inside the element with an ID of <code>foo</code>, its text contents will be shown as an alert.
</p>
            <p>As of jQuery 1.4.2 duplicate event handlers can be bound to an element instead of being discarded. For example:</p>
            <pre>function test(){ alert("Hello"); }
$("button").click( test );
$("button").click( test );</pre>
            <p>The above will generate two alerts when the button is clicked.</p>

            <p>In jQuery 1.4.3 you can now pass in 'false' in place of an event handler. This will bind an event handler that's equivalent to: <code>function(){ return false; }</code>. This function can be removed at a later time by calling: <code>.unbind( eventName, false )</code>.</p>

            <h4 id="event-object">
               <a href="/category/events/event-object/">The Event object</a>
            </h4>
            <p>The <code>handler</code> callback function can also take parameters. When the function is called, the JavaScript event object will be passed to the first parameter.</p>
            <p>The event object is often unnecessary and the parameter omitted, as sufficient context is usually available when the handler is bound to know exactly what needs to be done when the handler is triggered. However, at times it becomes necessary to gather more information about the user's environment at the time the event was initiated. <a href="/category/events/event-object/">View the full Event Object</a>.</p>

            <p>Returning <code>false</code> from a handler is equivalent to calling both <code>.preventDefault()</code> and <code>.stopPropagation()</code> on the event object.</p>
            <p>Using the event object in a handler looks like this:</p>
            <pre>$(document).ready(function() {
  $('#foo').bind('click', function(event) {
    alert('The mouse cursor is at ('
      + event.pageX + ', ' + event.pageY + ')');
  });
});
</pre>
            <p>Note the parameter added to the anonymous function. This code will cause a click on the element with ID <code>foo</code> to report the page coordinates of the mouse cursor at the time of the click.</p>

            <h4 id="passing-event-data">Passing Event Data</h4>
            <p>The optional <code>eventData</code> parameter is not commonly used. When provided, this argument allows us to pass additional information to the handler. One handy use of this parameter is to work around issues caused by closures. For example, suppose we have two event handlers that both refer to the same external variable:</p>
            <pre>var message = 'Spoon!';
$('#foo').bind('click', function() {
  alert(message);
});
message = 'Not in the face!';
$('#bar').bind('click', function() {
  alert(message);
});
</pre>
            <p>Because the handlers are closures that both have <code>message</code> in their environment, both will display the message <span class="output">Not in the face!</span> when triggered. The variable's value has changed. To sidestep this, we can pass the message in using <code>eventData</code>:
</p>
            <pre>var message = 'Spoon!';
$('#foo').bind('click', {msg: message}, function(event) {
  alert(event.data.msg);
});
message = 'Not in the face!';
$('#bar').bind('click', {msg: message}, function(event) {
  alert(event.data.msg);
});
</pre>
            <p>This time the variable is not referred to directly within the handlers; instead, the variable is passed in <em>by value</em> through <code>eventData</code>, which fixes the value at the time the event is bound. The first handler will now display <span class="output">Spoon!</span> while the second will alert <span class="output">Not in the face!</span>
            </p>
            <blockquote>
               <p>Note that objects are passed to functions <em>by reference</em>, which further complicates this scenario.</p>
            </blockquote>
            <p>If <code>eventData</code> is present, it is the second argument to the <code>.bind()</code> method; if no additional data needs to be sent to the handler, then the callback is passed as the second and final argument.</p>
            <blockquote>
               <p>See the <code>.trigger()</code> method reference for a way to pass data to a handler at the time the event happens rather than when the handler is bound.</p>
            </blockquote>

            <p>As of jQuery 1.4 we can no longer attach data (and thus, events) to object, embed, or applet elements because critical errors occur when attaching data to Java applets.</p>
         </longdesc>
         <example>
            <desc>Handle click and double-click for the paragraph.  Note: the coordinates are window relative, so in this case relative to the demo iframe.</desc>
         </example>
         <example>
            <desc>To display each paragraph's text in an alert box whenever it is clicked:</desc>
         </example>
         <example>
            <desc>You can pass some extra data before the event handler:</desc>
         </example>
         <example>
            <desc>Cancel a default action and prevent it from bubbling up by returning <code>false</code>:</desc>
         </example>
         <example>
            <desc>Cancel only the default action by using the .preventDefault() method.</desc>
         </example>
         <example>
            <desc>Stop an event from bubbling without preventing the default action by using the .stopPropagation() method.</desc>
         </example>
         <example>
            <desc>Bind custom events.</desc>
         </example>
         <example>
            <desc>Bind multiple events simultaneously.</desc>
         </example>
      </entry>
      <entry type="method" name="first">
         <desc>Reduce the set of matched elements to the first in the set.</desc>
         <signature/>
         <longdesc>[<p>Given a jQuery object that represents a set of DOM elements, the <code>.first()</code> method constructs a new jQuery object from the first matching element.</p>
            <p>Consider a page with a simple list on it:</p>
            <pre>
&lt;ul&gt;
  &lt;li&gt;list item 1&lt;/li&gt;
  &lt;li&gt;list item 2&lt;/li&gt;
  &lt;li&gt;list item 3&lt;/li&gt;
  &lt;li&gt;list item 4&lt;/li&gt;
  &lt;li&gt;list item 5&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>We can apply this method to the set of list items:</p>
            <pre>$('li').first().css('background-color', 'red');</pre>
            <p>The result of this call is a red background for the first item.</p>
         </longdesc>
         <example>
            <desc>Highlight the first span in a paragraph.</desc>
         </example>
      </entry>
      <entry type="method" name="last">
         <desc>Reduce the set of matched elements to the final one in the set.</desc>
         <signature/>
         <longdesc>[<p>Given a jQuery object that represents a set of DOM elements, the <code>.last()</code> method constructs a new jQuery object from the last matching element.</p>
            <p>Consider a page with a simple list on it:</p>
            <pre>
&lt;ul&gt;
  &lt;li&gt;list item 1&lt;/li&gt;
  &lt;li&gt;list item 2&lt;/li&gt;
  &lt;li&gt;list item 3&lt;/li&gt;
  &lt;li&gt;list item 4&lt;/li&gt;
  &lt;li&gt;list item 5&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>We can apply this method to the set of list items:</p>
            <pre>$('li').last().css('background-color', 'red');</pre>
            <p>The result of this call is a red background for the final item.</p>
         </longdesc>
         <example>
            <desc>Highlight the last span in a paragraph.</desc>
         </example>
      </entry>
      <entry type="method" name="slice">
         <desc>Reduce the set of matched elements to a subset specified by a range of indices.</desc>
         <signature>
            <argument name="start">
               <desc>An integer indicating the 0-based position at which the elements begin to be selected. If negative, it indicates an offset from the end of the set.</desc>
            </argument>
            <argument name="end">
               <desc>An integer indicating the 0-based position at which the elements stop being selected. If negative, it indicates an offset from the end of the set. If omitted, the range continues until the end of the set.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Given a jQuery object that represents a set of DOM elements, the <code>.slice()</code> method constructs a new jQuery object from a subset of the matching elements. The supplied <code>start</code> index identifies the position of one of the elements in the set; if <code>end</code> is omitted, all elements after this one will be included in the result.</p>
            <p>Consider a page with a simple list on it:</p>
            <pre>
&lt;ul&gt;
  &lt;li&gt;list item 1&lt;/li&gt;
  &lt;li&gt;list item 2&lt;/li&gt;
  &lt;li&gt;list item 3&lt;/li&gt;
  &lt;li&gt;list item 4&lt;/li&gt;
  &lt;li&gt;list item 5&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>We can apply this method to the set of list items:</p>
            <pre>$('li').slice(2).css('background-color', 'red');</pre>
            <p>The result of this call is a red background for items 3, 4, and 5. Note that the supplied index is zero-based, and refers to the position of elements within the jQuery object, not within the DOM tree.</p>
            <p>The end parameter allows us to limit the selected range even further. For example:</p>
            <pre>$('li').slice(2, 4).css('background-color', 'red');</pre>
            <p>Now only items 3 and 4 are selected. The index is once again zero-based; the range extends up to but not including the specified index.</p>
            <h4>Negative Indices</h4>
            <p>The jQuery <code>.slice()</code> method is patterned after the JavaScript .slice() method for arrays. One of the features that it mimics is the ability for negative numbers to be passed as either the <code>start</code> or <code>end</code> parameter. If a negative number is provided, this indicates a position starting from the end of the set, rather than the beginning. For example:</p>
            <pre>$('li').slice(-2, -1).css('background-color', 'red');</pre>
            <p>This time only list item 4 is turned red, since it is the only item in the range between two from the end (<code>-2</code>) and one from the end (<code>-1</code>).</p>
         </longdesc>
         <example>
            <desc>Turns divs yellow based on a random slice.</desc>
         </example>
         <example>
            <desc>Selects all paragraphs, then slices the selection to include only the first element.</desc>
         </example>
         <example>
            <desc>Selects all paragraphs, then slices the selection to include only the first and second element.</desc>
         </example>
         <example>
            <desc>Selects all paragraphs, then slices the selection to include only the second element.</desc>
         </example>
         <example>
            <desc>Selects all paragraphs, then slices the selection to include only the second and third element.</desc>
         </example>
         <example>
            <desc>Selects all paragraphs, then slices the selection to include only the third element.</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery">
         <desc>Accepts a string containing a CSS selector which is then used to match a set of elements.</desc>
         <signature>
            <argument name="selector">
               <desc>A string containing a selector expression</desc>
            </argument>
            <argument name="context">
               <desc>A DOM Element, Document, or jQuery to use as context</desc>
            </argument>
         </signature>
         <signature>
            <argument name="element">
               <desc>A DOM element to wrap in a jQuery object.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="elementArray">
               <desc>An array containing a set of DOM elements to wrap in a jQuery object.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="jQuery object">
               <desc>An existing jQuery object to clone.</desc>
            </argument>
         </signature>
         <signature/>
         <longdesc>
            <p>In the first formulation listed above,  <code>jQuery()</code> — which can also be written as <code>$()</code> — searches through the DOM for any elements that match the provided selector and creates a new jQuery object that references these elements:</p>
            <pre>$('div.foo');</pre>
            <h4 id="selector-context">Selector Context</h4>
            <p>By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the  <code>$()</code> function. For example, if within a callback function we wish to do a search for an element, we can restrict that search:</p>
            <pre>
$('div.foo').click(function() {
  $('span', this).addClass('bar');
});
</pre>
            <p>Since we've restricted the span selector to the context of <code>this</code>, only spans within the clicked element will get the additional class.</p>
            <p>Internally, selector context is implemented with the <code>.find()</code> method, so  <code>$('span', this)</code> is equivalent to  <code>$(this).find('span')</code>.</p>
            <h4 id="using-dom-elements">Using DOM elements</h4>
            <p>The second and third formulations of this function allow us to create a jQuery object using a DOM element or elements that we have already found in some other way. A common use of this facility is to call jQuery methods on an element that has been passed to a callback function through the keyword <code>this</code>:</p>
            <pre>
$('div.foo').click(function() {
  $(this).slideUp();
});
</pre>
            <p>This example causes elements to be hidden with a sliding animation when clicked. Because the handler receives the clicked item in the <code>this</code> keyword as a bare DOM element, the element must be wrapped in a jQuery object before we can call jQuery methods on it.</p>
            <p>When XML data is returned from an Ajax call, we can use the  <code>$()</code> function to wrap it in a jQuery object that we can easily work with. Once this is done, we can retrieve individual elements of the XML structure using <code>.find()</code> and other DOM traversal methods.</p>
            <h4 id="cloning-jquery-objects">Cloning jQuery Objects</h4>
            <p>When a jQuery object is passed as a parameter to the  <code>$()</code> function, a clone of the object is created. This new jQuery object references the same DOM elements as the initial one.</p>
            <h4 id="returning-empty-set">Returning an Empty Set</h4>
            <p>As of jQuery 1.4,  calling the <code>jQuery()</code> method with <em>no arguments</em> returns an empty jQuery set. In previous versions of jQuery, this would return a set containing the document node.</p>
         </longdesc>
         <example>
            <desc>Finds all p elements that are children of a div element.</desc>
         </example>
         <example>
            <desc>Finds all inputs of type radio within the first form in the document.</desc>
         </example>
         <example>
            <desc>Finds all div elements within an XML document from an Ajax response.</desc>
         </example>
         <example>
            <desc>Sets the background color of the page to black.</desc>
         </example>
         <example>
            <desc>Hides all the input elements within a form.</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery">
         <desc>Creates DOM elements on the fly from the provided string of raw HTML.</desc>
         <signature>
            <argument name="html">
               <desc>A string of HTML to create on the fly. Note that this parses HTML, <strong>not</strong> XML.</desc>
            </argument>
            <argument name="ownerDocument">
               <desc>A document in which the new elements will be created</desc>
            </argument>
         </signature>
         <signature>
            <argument name="html">
               <desc>A string defining a single, standalone, HTML element (e.g. &lt;div/&gt; or &lt;div&gt;&lt;/div&gt;).</desc>
            </argument>
            <argument name="props">
               <desc>An map of attributes, events, and methods to call on the newly-created element.</desc>
            </argument>
         </signature>
         <longdesc>
            <h4 id="creating-new-elements">Creating New Elements</h4>
            <p>If a string is passed as the parameter to  <code>$()</code>, jQuery examines the string to see if it looks like HTML (i.e., it has <code>&lt;tag ... &gt;</code> somewhere within the string). If not, the string is interpreted as a selector expression, as explained above. But if the string appears to be an HTML snippet, jQuery attempts to create new DOM elements as described by the HTML. Then a jQuery object is created and returned that refers to these elements. We can perform any of the usual jQuery methods on this object:</p>
            <pre>$('&lt;p id="test"&gt;My &lt;em&gt;new&lt;/em&gt; text&lt;/p&gt;').appendTo('body');</pre>
            <p>When the HTML is more complex than a single tag without attributes, as it is in the above example, the actual creation of the elements is handled by the browser's <code>innerHTML</code> mechanism. Specifically, jQuery creates a new &lt;div&gt; element and sets the innerHTML property of the element to the HTML snippet that was passed in. When the parameter has a single tag, such as  <code>$('&lt;img /&gt;')</code> or  <code>$('&lt;a&gt;&lt;/a&gt;')</code>, jQuery creates the element using the native JavaScript <code>createElement()</code> function.</p>

            <p>When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided. For example, Internet Explorer prior to version 8 will convert all <code>href</code> properties on links to absolute URLs, and Internet Explorer prior to version 9 will not correctly handle HTML5 elements without the addition of a separate <a href="http://code.google.com/p/html5shiv/">compatibility layer</a>.</p>

            <p>To ensure cross-platform compatibility, the snippet must be well-formed. Tags that can contain other elements should be paired with a closing tag:</p>
            <pre>$('&lt;a href="http://jquery.com"&gt;&lt;/a&gt;');</pre>
            <p>Alternatively, jQuery allows XML-like tag syntax (with or without a space before the slash):</p>
            <pre>$('&lt;a/&gt;');</pre>
            <p>Tags that cannot contain elements may be quick-closed or not:</p>
            <pre>$('&lt;img /&gt;');
$('&lt;input&gt;');
</pre>

            <p>As of jQuery 1.4, we can pass a map of properties to the second argument. This argument accepts a superset of properties that can be passed to the <a href="attr.htm">.attr()</a> method. Furthermore, any <a href="/category/events/">event type</a> can be passed in, and the following jQuery methods can be called: <a href="val.htm">val</a>, <a href="css.htm">css</a>, <a href="html.htm">html</a>, <a href="text.htm">text</a>, <a href="data.htm">data</a>, <a href="width.htm">width</a>, <a href="height.htm">height</a>, or <a href="offset.htm">offset</a>. Note that Internet Explorer will not allow you to create an <code>input</code> element and change its type; you must specify the type using <code>'&lt;input type="checkbox" /&gt;'</code> for example.</p>
         </longdesc>
         <example>
            <desc>Creates a div element (and all of its contents) dynamically, and appends it to the body element. Internally, an element is created and its innerHTML property set to the given markup. It is therefore both quite flexible and limited.</desc>
         </example>
         <example>
            <desc>Create some DOM elements.</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery">
         <desc>Binds a function to be executed when the DOM has finished loading.</desc>
         <signature>
            <argument name="callback">
               <desc>The function to execute when the DOM is ready.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>This function behaves just like <code>$(document).ready()</code>, in that it should be used to wrap other <code>$()</code> operations on your page that depend on the DOM being ready. While this function is, technically, chainable, there really isn't much use for chaining against it.</p> 
         </longdesc>
         <example>
            <desc>Executes the function when the DOM is ready to be used.</desc>
         </example>
         <example>
            <desc>Uses both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias.</desc>
         </example>
      </entry>
      <entry type="method" name="stop">
         <desc>Stop the currently-running animation on the matched elements.</desc>
         <signature>
            <argument name="clearQueue">
               <desc>A Boolean indicating whether to remove queued animation as well. Defaults to <code>false</code>.</desc>
            </argument>
            <argument name="jumpToEnd">
               <desc>A Boolean indicating whether to complete the current animation immediately. Defaults to <code>false</code>.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>When <code>.stop()</code> is called on an element, the currently-running animation (if any) is immediately stopped. If, for instance, an element is being hidden with <code>.slideUp()</code> when <code>.stop()</code> is called, the element will now still be displayed, but will be a fraction of its previous height. Callback functions are not called.</p>
            <p>If more than one animation method is called on the same element, the later animations are placed in the effects queue for the element. These animations will not begin until the first one completes. When <code>.stop()</code> is called, the next animation in the queue begins immediately. If the <code>clearQueue</code> parameter is provided with a value of <code>true</code>, then the rest of the animations in the queue are removed and never run.</p>
            <p>If the <code>jumpToEnd</code> property is provided with a value of <code>true</code>, the current animation stops, but the element is immediately given its target values for each CSS property. In our above <code>.slideUp()</code> example, the element would be immediately hidden. The callback function is then immediately called, if provided.</p>
            <p>The usefulness of the <code>.stop()</code> method is evident when we need to animate an element on <code>mouseenter</code> and <code>mouseleave</code>:</p>
            <pre>&lt;div id="hoverme"&gt;
  Hover me
  &lt;img id="hoverme" src="book.png" alt="" width="100" height="123" /&gt;
&lt;/div&gt;</pre>
            <p>We can create a nice fade effect without the common problem of multiple queued animations by adding <code>.stop(true, true)</code> to the chain:</p>
            <pre>$('#hoverme-stop-2').hover(function() {
  $(this).find('img').stop(true, true).fadeOut();
}, function() {
  $(this).find('img').stop(true, true).fadeIn();
});</pre>
            <blockquote>
               <p>Animations may be stopped globally by setting the property <code>$.fx.off</code> to <code>true</code>. When this is done, all animation methods will immediately set elements to their final state when called, rather than displaying an effect.</p>
            </blockquote>
         </longdesc>
         <example>
            <desc>Click the Go button once to start the animation, then click the STOP button to stop it where it's currently positioned.  Another option is to click several buttons to queue them up and see that stop just kills the currently playing one.</desc>
         </example>
      </entry>
      <entry type="method" name="end">
         <desc>End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.</desc>
         <signature/>
         <longdesc>
            <p>Most of jQuery's <a href="http://api.jquery.com/category/traversing">DOM traversal</a> methods operate on a jQuery object instance and produce a new one, matching a different set of DOM elements. When this happens, it is as if the new set of elements is pushed onto a stack that is maintained inside the object. Each successive filtering method pushes a new element set onto the stack. If we need an older element set, we can use <code>end()</code> to pop the sets back off of the stack.</p>
            <p>Suppose we have a couple short lists on a page:</p>
            <pre>
&lt;ul class="first"&gt;
   &lt;li class="foo"&gt;list item 1&lt;/li&gt;
   &lt;li&gt;list item 2&lt;/li&gt;
   &lt;li class="bar"&gt;list item 3&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="second"&gt;
   &lt;li class="foo"&gt;list item 1&lt;/li&gt;
   &lt;li&gt;list item 2&lt;/li&gt;
   &lt;li class="bar"&gt;list item 3&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>The <code>end()</code> method is useful primarily when exploiting jQuery's chaining properties. When not using chaining, we can usually just call up a previous object by variable name, so we don't need to manipulate the stack. With <code>end()</code>, though, we can string all the method calls together:</p>
            <pre>
$('ul.first').find('.foo').css('background-color', 'red')
  <code>.end()</code>.find('.bar').css('background-color', 'green');
</pre>
            <p>This chain searches for items with the class <code>foo</code> within the first list only and turns their backgrounds red. Then <code>end()</code> returns the object to its state before the call to <code>find()</code>, so the second <code>find()</code> looks for '.bar' inside <code>&lt;ul class="first"&gt;</code>, not just inside that list's <code>&lt;li class="foo"&gt;</code>, and turns the matching elements' backgrounds green. The net result is that items 1 and 3 of the first list have a colored background, and none of the items from the second list do.</p>
            <p>A long jQuery chain can be visualized as a structured code block, with filtering methods providing the openings of nested blocks and <code>end()</code> methods closing them:</p>
            <pre>
$('ul.first').find('.foo')
  .css('background-color', 'red')
.end().find('.bar')
  .css('background-color', 'green')
.end();
</pre>
            <p>The last <code>end()</code> is unnecessary, as we are discarding the jQuery object immediately thereafter. However, when the code is written in this form, the <code>end()</code> provides visual symmetry and closure—making the program, at least to the eyes of some developers, more readable.</p>
         </longdesc>
         <example>
            <desc>Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.</desc>
         </example>
         <example>
            <desc>Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.</desc>
         </example>
      </entry>
      <entry type="method" name="andSelf">
         <desc>Add the previous set of elements on the stack to the current set.</desc>
         <signature/>
         <longdesc>
            <p>As described in the discussion for <code>.end()</code> above, jQuery objects maintain an internal stack that keeps track of changes to the matched set of elements. When one of the DOM traversal methods is called, the new set of elements is pushed onto the stack. If the previous set of elements is desired as well, <code>.andSelf()</code> can help.</p>
            <p>Consider a page with a simple list on it:</p>
            <pre>
&lt;ul&gt;
   &lt;li&gt;list item 1&lt;/li&gt;
   &lt;li&gt;list item 2&lt;/li&gt;
   &lt;li class="third-item"&gt;list item 3&lt;/li&gt;
   &lt;li&gt;list item 4&lt;/li&gt;
   &lt;li&gt;list item 5&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>If we begin at the third item, we can find the elements which come after it:</p>
            <pre>$('li.third-item').nextAll().andSelf()
  .css('background-color', 'red');
</pre>
            <p>The result of this call is a red background behind items 3, 4 and 5. First, the initial selector locates item 3, initializing the stack with the set containing just this item. The call to <code>.nextAll()</code> then pushes the set of items 4 and 5 onto the stack. Finally, the <code>.andSelf()</code> invocation merges these two sets together, creating a jQuery object that points to all three items in document order: <code>{[&lt;li.third-item&gt;,&lt;li&gt;,&lt;li&gt; ]}</code>.</p>
         </longdesc>
         <example>
            <desc>Find all divs, and all the paragraphs inside of them, and give them both classnames.  Notice the div doesn't have the yellow background color since it didn't use andSelf.</desc>
         </example>
      </entry>
      <entry type="method" name="siblings">
         <desc>Get the siblings of each element in the set of matched elements, optionally filtered by a selector.</desc>
         <signature>
            <argument name="selector">
               <desc>用于匹配元素的选择器字符串</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Given a jQuery object that represents a set of DOM elements, the <code>.siblings()</code> method allows us to search through the siblings of these elements in the DOM tree and construct a new jQuery object from the matching elements.</p>
            <p>The method optionally accepts a selector expression of the same type that we can pass to the <code>$()</code> function. If the selector is supplied, the elements will be filtered by testing whether they match it.</p>
            <p>Consider a page with a simple list on it:</p>
            <pre>
&lt;ul&gt;
   &lt;li&gt;list item 1&lt;/li&gt;
   &lt;li&gt;list item 2&lt;/li&gt;
   &lt;li class="third-item"&gt;list item 3&lt;/li&gt;
   &lt;li&gt;list item 4&lt;/li&gt;
   &lt;li&gt;list item 5&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>If we begin at the third item, we can find its siblings:</p>
            <pre>$('li.third-item').siblings().css('background-color', 'red');</pre>
            <p>The result of this call is a red background behind items 1, 2, 4, and 5. Since we do not supply a selector expression, all of the siblings are part of the object. If we had supplied one, only the matching items among these four would be included.</p>
            <p>The original element is not included among the siblings, which is important to remember when we wish to find all elements at a particular level of the DOM tree.</p>
         </longdesc>
         <example>
            <desc>Find the unique siblings of all yellow li elements in the 3 lists (including other yellow li elements if appropriate).</desc>
         </example>
         <example>
            <desc>Find all siblings with a class "selected" of each div.</desc>
         </example>
      </entry>
      <entry type="method" name="animate">
         <desc>Perform a custom animation of a set of CSS properties.</desc>
         <signature>
            <argument name="properties">
               <desc>A map of CSS properties that the animation will move toward.</desc>
            </argument>
            <argument name="duration">
               <desc>字符串("slow"或 "fast")或表示动画时长的毫秒数值</desc>
            </argument>
            <argument name="easing">
               <desc>要使用的缓冲效果的名称，默认值是 "swing"。jQuery 内置提供 "linear" 和 "swing" 两种效果，如果要使用更多缓冲效果，需要插件支持。</desc>
            </argument>
            <argument name="callback">
               <desc>在动画完成时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="properties">
               <desc>A map of CSS properties that the animation will move toward.</desc>
            </argument>
            <argument name="options">
               <desc>A map of additional options to pass to the method. Supported keys:
        <ul>
                     <li>
                        <code>duration</code>: 字符串("slow"或 "fast")或表示动画时长的毫秒数值</li>
                     <li>
                        <code>easing</code>: 要使用的缓冲效果的名称，默认值是 "swing"。jQuery 内置提供 "linear" 和 "swing" 两种效果，如果要使用更多缓冲效果，需要插件支持。</li>
                     <li>
                        <code>complete</code>: 在动画完成时执行的函数。</li>
                     <li>
                        <code>step</code>: A function to be called after each step of the animation.</li>
                     <li>
                        <code>queue</code>: A Boolean indicating whether to place the animation in the effects queue. If <code>false</code>, the animation will begin immediately.</li>
                     <li>
                        <code>specialEasing</code>: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).</li>
                  </ul>
               </desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>.animate()</code> method allows us to create animation effects on any numeric CSS property. The only required parameter is a map of CSS properties. This map is similar to the one that can be sent to the <code>.css()</code> method, except that the range of properties is more restrictive.</p>
            <p>All animated properties should be a <em>single numeric value</em> (except as noted below); properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, <code>width</code>, <code>height</code>, or <code>left</code> can be animated but <code>background-color</code> cannot be.) Property values are treated as a number of pixels unless otherwise specified. The units <code>em</code> and <code>%</code> can be specified where applicable.</p>
            <p>Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: <code>$(elem).css('marginTop')</code> and <code>$(elem).css('marginRight')</code>, and so on.</p>
            <p>In addition to numeric values, each property can take the strings <code>'show'</code>, <code>'hide'</code>, and <code>'toggle'</code>. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element.</p>
            <p>Animated properties can also be relative. If a value is supplied with a leading <code>+=</code> or <code>-=</code> sequence of characters, then the target value is computed by adding or subtracting the given number from the current value of the property.</p>
            <h4 id="duration">Duration</h4>
            <p>duration 参数可以提供一个毫秒数，代表动画运行的时间，时间越长动画越慢。还可以提供字符串 <code>'fast'</code> 和 <code>'slow'</code> ，分别对应了 <code>200</code> 和 <code>600</code> 毫秒。如果没有设置 <code>duration</code> 参数，或者设置成其他无法识别的字符串，就会使用默认值 400 毫秒。</p>
            <h4 id="callback">Callback Function</h4>
            <p>如果提供了回调函数，那么当动画结束时，会调用这个函数。通常用来几个不同的动画依次完成。这个函数不接受任何参数，但是 <code>this</code> 会设成将要执行动画的那个元素。如果对多个元素设置动画，那么要非常注意，回调函数会在每一个动画完成的元素上都执行一次，而不是对这组动画整体才执行一次。</p>
            <p>比如下面这个页面：</p>
            <pre>&lt;div id="clickme"&gt;
  Click here
&lt;/div&gt;
&lt;img id="book" src="book.png" alt="" width="100" height="123" 
  style="position: relative; left: 10px;" /&gt;</pre>
            <p>We can animate the opacity, left offset, and height of the image simultaneously:</p>
            <pre>$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // 动画完成
  });
});
</pre>
            <p class="image">
               <img src="images/animate-1.jpg" alt=""/>
            </p>
            <p>Note that we have specified <code>toggle</code> as the target value of the <code>height</code> property. Since the image was visible before, the animation shrinks the height to 0 to hide it. A second click then reverses this transition:
</p>
            <p class="image"> 
               <img src="images/animate-2.jpg" alt=""/> 
            </p>

            <p>The <code>opacity</code> of the image is already at its target value, so this property is not animated by the second click. Since we specified the target value for <code>left</code> as a relative value, the image moves even farther to the right during this second animation.</p>
            <p>The <code>position</code> attribute of the element must not be <code>static</code> if we wish to animate the <code>left</code> property as we do in the example.</p>
            <blockquote>
               <p>The <a href="http://jqueryui.com">jQuery UI</a> project extends the <code>.animate()</code> method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.</p>
            </blockquote>
            <h4 id="easing">Easing</h4>
            <p>The remaining parameter of <code>.animate()</code> is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="http://jqueryui.com/">jQuery UI suite</a>.</p>
            <h4 id="per-property-easing">Per-property Easing</h4>
            <p>As of jQuery version 1.4, we can set per-property easing functions within a single <code>.animate()</code> call. In the first version of <code>.animate()</code>, each property can take an array as its value: The first member of the array is the CSS property and the second member is an easing function.  If a per-property easing function is not defined for a particular property, it uses the value of the <code>.animate()</code> method's optional easing argument. If the easing argument is not defined, the default <code>swing</code> function is used.</p>
            <p>We can, for example, simultaneously animate the width and height with the <code>swing</code> easing function and the opacity with the <code>linear</code> easing function:</p>
            <pre>$('#clickme').click(function() {
  $('#book').animate({
    width: ['toggle', 'swing'],
    height: ['toggle', 'swing'],
    opacity: 'toggle'
  }, 5000, 'linear', function() {
      $(this).after('&lt;div&gt;Animation complete.&lt;/div&gt;');
  });
});</pre>
            <p>In the second version of <code>.animate()</code>, the options map can include the <code>specialEasing</code> property, which is itself a map of CSS properties and their corresponding easing functions.  We can simultaneously animate the width using the <code>linear</code> easing function and the height using the <code>easeOutBounce</code> easing function.</p>
            <pre>$('#clickme').click(function() {
  $('#book').animate({
    width: 'toggle',
    height: 'toggle'
  }, {
    duration: 5000, 
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    }, 
    complete: function() {
      $(this).after('&lt;div&gt;Animation complete.&lt;/div&gt;');
    }
  });
});</pre>
            <p>As previously noted, a plug-in is required for the <code>easeOutBounce</code> function.</p>

         </longdesc>
         <example>
            <desc>Click the button to animate the div with a number of different properties.</desc>
         </example>
         <example>
            <desc>Shows a div animate with a relative move.  Click several times on the buttons to see the relative animations queued up.</desc>
         </example>
         <example>
            <desc>Animates all paragraphs to toggle both height and opacity, 用时 600 毫秒。</desc>
         </example>
         <example>
            <desc>Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds.</desc>
         </example>
         <example>
            <desc>An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function.  Note, this code will do nothing unless the paragraph element is hidden.</desc>
         </example>
         <example>
            <desc>The first button shows how an unqueued animation works.  It expands the div out to 90% width <strong>while</strong> the font-size is increasing. Once the font-size change is complete, the border animation will begin.

The second button starts a traditional chained animation, where each animation will start once the previous animation on the element has completed.</desc>
         </example>
         <example>
            <desc>Animates all paragraphs to toggle both height and opacity, 用时 600 毫秒。</desc>
         </example>
         <example>
            <desc>Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds.  It also will do it <em>outside</em> the queue, meaning it will automatically start without waiting for its turn.</desc>
         </example>
         <example>
            <desc>An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function.</desc>
         </example>
         <example>
            <desc>An example of using a callback function.  The first argument is an array of CSS properties, the second specifies that the animation should take 1000 milliseconds to complete, the third states the easing type, and the fourth argument is an anonymous callback function. </desc>
         </example>
      </entry>
      <entry type="method" name="prevAll">
         <desc>Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.</desc>
         <signature>
            <argument name="selector">
               <desc>用于匹配元素的选择器字符串</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Given a jQuery object that represents a set of DOM elements, the <code>.prevAll()</code> method allows us to search through the predecessors of these elements in the DOM tree and construct a new jQuery object from the matching elements.</p>
            <p>The method optionally accepts a selector expression of the same type that we can pass to the <code>$()</code> function. If the selector is supplied, the elements will be filtered by testing whether they match it.</p>
            <p>Consider a page with a simple list on it:</p>
            <pre>
&lt;ul&gt;
   &lt;li&gt;list item 1&lt;/li&gt;
   &lt;li&gt;list item 2&lt;/li&gt;
   &lt;li class="third-item"&gt;list item 3&lt;/li&gt;
   &lt;li&gt;list item 4&lt;/li&gt;
   &lt;li&gt;list item 5&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>If we begin at the third item, we can find the elements which come before it:</p>
            <pre>$('li.third-item').prevAll().css('background-color', 'red');</pre>
            <p>The result of this call is a red background behind items 1 and 2. Since we do not supply a selector expression, these preceding elements are unequivocally included as part of the object. If we had supplied one, the elements would be tested for a match before they were included.</p>
         </longdesc>
         <example>
            <desc>Locate all the divs preceding the last div and give them a class.</desc>
         </example>
      </entry>
      <entry type="method" name="prev">
         <desc>Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.</desc>
         <signature>
            <argument name="selector">
               <desc>用于匹配元素的选择器字符串</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Given a jQuery object that represents a set of DOM elements, the <code>.prev()</code> method allows us to search through the predecessors of these elements in the DOM tree and construct a new jQuery object from the matching elements.</p>
            <p>The method optionally accepts a selector expression of the same type that we can pass to the <code>$()</code> function. If the selector is supplied, the elements will be filtered by testing whether they match it.</p>
            <p>Consider a page with a simple list on it:</p>
            <pre>
&lt;ul&gt;
   &lt;li&gt;list item 1&lt;/li&gt;
   &lt;li&gt;list item 2&lt;/li&gt;
   &lt;li class="third-item"&gt;list item 3&lt;/li&gt;
   &lt;li&gt;list item 4&lt;/li&gt;
   &lt;li&gt;list item 5&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>If we begin at the third item, we can find the element which comes just before it:</p>
            <pre>$('li.third-item').prev().css('background-color', 'red');</pre>
            <p>The result of this call is a red background behind item 2. Since we do not supply a selector expression, this preceding element is unequivocally included as part of the object. If we had supplied one, the element would be tested for a match before it was included.</p>
         </longdesc>
         <example>
            <desc>Find the very previous sibling of each div.</desc>
         </example>
         <example>
            <desc>For each paragraph, find the very previous sibling that has a class "selected".</desc>
         </example>
      </entry>
      <entry type="method" name="fadeTo">
         <desc>调整匹配元素的透明度。</desc>
         <signature>
            <argument name="duration">
               <desc>字符串("slow"或 "fast")或表示动画时长的毫秒数值</desc>
            </argument>
            <argument name="opacity">
               <desc>0 到 1 之间的数字，表示将要达到的透明度。0 是最透明。</desc>
            </argument>
            <argument name="callback">
               <desc>在动画完成时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="duration">
               <desc>字符串("slow"或 "fast")或表示动画时长的毫秒数值</desc>
            </argument>
            <argument name="opacity">
               <desc>0 到 1 之间的数字，表示将要达到的透明度。0 是最透明。</desc>
            </argument>
            <argument name="easing">
               <desc>要使用的缓冲效果的名称，默认值是 "swing"。jQuery 内置提供 "linear" 和 "swing" 两种效果，如果要使用更多缓冲效果，需要插件支持。</desc>
            </argument>
            <argument name="callback">
               <desc>在动画完成时执行的函数。</desc>
            </argument>
         </signature>
         <longdesc>
            <p><code>.fadeTo()</code> 方法对匹配元素的透明度生成动画效果。</p>
            <p>duration 参数可以提供一个毫秒数，代表动画运行的时间，时间越长动画越慢。还可以提供字符串 <code>'fast'</code> 和 <code>'slow'</code> ，分别对应了 <code>200</code> 和 <code>600</code> 毫秒。如果没有设置 <code>duration</code> 参数，或者设置成其他无法识别的字符串，就会使用默认值 400 毫秒。与其他的动画效果不同， <code>.fadeTo()</code> 要求比如设定 <code>duration</code> 参数。</p>
            <p>如果提供了回调函数，那么当动画结束时，会调用这个函数。通常用来几个不同的动画依次完成。这个函数不接受任何参数，但是 <code>this</code> 会设成将要执行动画的那个元素。如果对多个元素设置动画，那么要非常注意，回调函数会在每一个动画完成的元素上都执行一次，而不是对这组动画整体才执行一次。</p>
            <p>比如下面这个页面：</p>
            <pre>&lt;div id="clickme"&gt;
    Click here
  &lt;/div&gt;
  &lt;img id="book" src="book.png" alt="" width="100" height="123" /&gt;</pre>
  <p>如果元素一开始是显现的，我们可以缓慢调整它的透明度：</p>
  <pre>$('#clickme').click(function() {
    $('#book').fadeTo('slow', 0.5, function() {
      // 动画完成
    });
  });
  </pre>
            <p class="image four-across"> 
               <img src="images/0042_06_41.png" alt=""/>
               <img src="images/0042_06_42.png" alt=""/>
               <img src="images/0042_06_43.png" alt=""/>
               <img src="images/0042_06_44.png" alt=""/>
            </p>
            <p>如果 <code>duration</code> 参数设置成 <code>0</code>，那么这个方法就仅仅修改 <code>opacity</code> CSS属性。所以 <code>.fadeTo(0, opacity)</code> 等价于 <code>.css('opacity', opacity)</code>。</p>
         </longdesc>
         <example>
            <desc>把第一个段落的透明度渐变成 0.33 (33%，大约三分之一透明度), 用时 600 毫秒。</desc>
         </example>
         <example>
            <desc>每次点击后把 div 渐变成随机透明度，用时 200 毫秒。</desc>
         </example>
         <example>
            <desc>找到正确答案！渐变耗时 250 毫秒，并且在完成后会改变字体样式。</desc>
         </example>
      </entry>
      <entry type="method" name="fadeOut">
         <desc>通过渐变形式让匹配的元素变成透明。</desc>
         <signature>
            <argument name="duration">
               <desc>字符串("slow"或 "fast")或表示动画时长的毫秒数值</desc>
            </argument>
            <argument name="callback">
               <desc>在动画完成时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="duration">
               <desc>字符串("slow"或 "fast")或表示动画时长的毫秒数值。</desc>
            </argument>
            <argument name="easing">
               <desc>要使用的缓冲效果的名称，默认值是 "swing"。jQuery 内置提供 "linear" 和 "swing" 两种效果，如果要使用更多缓冲效果，需要插件支持。</desc>
            </argument>
            <argument name="callback">
               <desc>在动画完成时执行的函数。</desc>
            </argument>
         </signature>
         <longdesc>
            <p><code>.fadeOut()</code> 方法对匹配元素的透明度生成动画效果。当透明度变成 0 之后，再把 <code>display</code> 样式属性设置成 <code>none</code> 以确保这个元素不再对页面布局产生影响。</p>
            <p>duration 参数可以提供一个毫秒数，代表动画运行的时间，时间越长动画越慢。还可以提供字符串 <code>'fast'</code> 和 <code>'slow'</code> ，分别对应了 <code>200</code> 和 <code>600</code> 毫秒。如果没有设置 <code>duration</code> 参数，或者设置成其他无法识别的字符串，就会使用默认值 400 毫秒。</p>
            <p>从 jQuery 1.4.3 起，增加了一个可选的参数，用于确定使用的缓冲函数。缓冲函数确定了动画在不同的位置的速度。jQuery默认只提供两个缓冲效果：<code>swing</code> 和 <code>linear</code>。更多特效需要使用插件。可以访问 <a href="http://jqueryui.com">jQuery UI 网站</a> 来获得更多信息。</p>
            <p>如果提供了回调函数，那么当动画结束时，会调用这个函数。通常用来几个不同的动画依次完成。这个函数不接受任何参数，但是 <code>this</code> 会设成将要执行动画的那个元素。如果对多个元素设置动画，那么要非常注意，回调函数会在每一个动画完成的元素上都执行一次，而不是对这组动画整体才执行一次。</p>
            <p>比如下面这个页面：</p>
            <pre>&lt;div id="clickme"&gt;
  Click here
&lt;/div&gt;
&lt;img id="book" src="book.png" alt="" width="100" height="123" /&gt;</pre>
            <p>如果元素一开始是显现的，我们可以这样将其缓慢的隐藏：</p>
            <pre>$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // 动画完成
  });
});</pre>
            <p class="image four-across">
               <img src="images/0042_06_37.png" alt=""/>
               <img src="images/0042_06_38.png" alt=""/>
               <img src="images/0042_06_39.png" alt=""/>
               <img src="images/0042_06_40.png" alt=""/>
            </p>
         </longdesc>
         <example>
            <desc>让所有段落渐渐消失，用时 600 毫秒。</desc>
         </example>
         <example>
            <desc>渐隐你点击的 span 。</desc>
         </example>
         <example>
            <desc>渐隐两个 div ，一个使用 "linear" 缓冲效果，另一个使用默认的 "swing," 缓冲效果。</desc>
         </example>
      </entry>
      <entry type="method" name="parents">
         <desc>Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.</desc>
         <signature>
            <argument name="selector">
               <desc>用于匹配元素的选择器字符串</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Given a jQuery object that represents a set of DOM elements, the <code>.parents()</code> method allows us to search through the ancestors of these elements in the DOM tree and construct a new jQuery object from the matching elements ordered from immediate parent on up; the elements are returned in order from the closest parent to the outer ones. The <code>.parents()</code> and <code><a href="http://api.jquery.com/parent/">.parent()</a></code> methods are similar, except that the latter only travels a single level up the DOM tree.</p>
            <p>The method optionally accepts a selector expression of the same type that we can pass to the <code>$()</code> function. If the selector is supplied, the elements will be filtered by testing whether they match it.</p>
            <p>Consider a page with a basic nested list on it:</p>
            <pre>
&lt;ul class="level-1"&gt;
  &lt;li class="item-i"&gt;I&lt;/li&gt;
  &lt;li class="item-ii"&gt;II
    &lt;ul class="level-2"&gt;
      &lt;li class="item-a"&gt;A&lt;/li&gt;
      &lt;li class="item-b"&gt;B
        &lt;ul class="level-3"&gt;
          &lt;li class="item-1"&gt;1&lt;/li&gt;
          &lt;li class="item-2"&gt;2&lt;/li&gt;
          &lt;li class="item-3"&gt;3&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="item-c"&gt;C&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="item-iii"&gt;III&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>If we begin at item A, we can find its ancestors:</p>
            <pre>$('li.item-a').parents().css('background-color', 'red');</pre>
            <p>The result of this call is a red background for the level-2 list, item II, and the level-1 list (and on up the DOM tree all the way to the <code>&lt;html&gt;</code> element). Since we do not supply a selector expression, all of the ancestors are part of the returned jQuery object. If we had supplied one, only the matching items among these would be included.</p>
         </longdesc>
         <example>
            <desc>Find all parent elements of each b.</desc>
         </example>
         <example>
            <desc>Click to find all unique div parent elements of each span.</desc>
         </example>
      </entry>
      <entry type="method" name="fadeIn">
         <desc>通过透明度渐显匹配的元素。</desc>
         <signature>
            <argument name="duration">
               <desc>字符串("slow"或 "fast")或表示动画时长的毫秒数值</desc>
            </argument>
            <argument name="callback">
               <desc>在动画完成时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="duration">
               <desc>字符串("slow"或 "fast")或表示动画时长的毫秒数值</desc>
            </argument>
            <argument name="easing">
               <desc>要使用的缓冲效果的名称，默认值是 "swing"。jQuery 内置提供 "linear" 和 "swing" 两种效果，如果要使用更多缓冲效果，需要插件支持。</desc>
            </argument>
            <argument name="callback">
               <desc>在动画完成时执行的函数。</desc>
            </argument>
         </signature>
         <longdesc>
            <p><code>.fadeIn()</code> 方法对匹配元素的透明度生成动画效果。</p>
            <p>duration 参数可以提供一个毫秒数，代表动画运行的时间，时间越长动画越慢。还可以提供字符串 <code>'fast'</code> 和 <code>'slow'</code> ，分别对应了 <code>200</code> 和 <code>600</code> 毫秒。如果没有设置 <code>duration</code> 参数，或者设置成其他无法识别的字符串，就会使用默认值 400 毫秒。</p>
            <p>从 jQuery 1.4.3 起，增加了一个可选的参数，用于确定使用的缓冲函数。缓冲函数确定了动画在不同的位置的速度。jQuery默认只提供两个缓冲效果：<code>swing</code> 和 <code>linear</code>。更多特效需要使用插件。可以访问 <a href="http://jqueryui.com">jQuery UI 网站</a> 来获得更多信息。</p>
            <p>如果提供了回调函数，那么当动画结束时，会调用这个函数。通常用来几个不同的动画依次完成。这个函数不接受任何参数，但是 <code>this</code> 会设成将要执行动画的那个元素。如果对多个元素设置动画，那么要非常注意，回调函数会在每一个动画完成的元素上都执行一次，而不是对这组动画整体才执行一次。</p>
            <p>比如下面这个页面：</p>
            <pre>&lt;div id="clickme"&gt;
      Click here
    &lt;/div&gt;
    &lt;img id="book" src="book.png" alt="" width="100" height="123" /&gt;</pre>
            <p>如果元素一开始是隐藏的，我们可以这样将其缓慢地显现：</p>
            <pre>$('#clickme').click(function() {
      $('#book').fadeIn('slow', function() {
        // 动画完成
      });
    });</pre>
            <p class="image four-across">
               <img src="images/0042_06_33.png" alt=""/>
               <img src="images/0042_06_34.png" alt=""/>
               <img src="images/0042_06_35.png" alt=""/>
               <img src="images/0042_06_36.png" alt=""/>
            </p>
         </longdesc>
         <example>
            <desc>依次把影藏的 div 显现出来，用时 600 毫秒。</desc>
         </example>
         <example>
            <desc>在文本上方渐渐显示一个红色方块，一旦动画完成后，马上在上面再显示一行文本。</desc>
         </example>
      </entry>
      <entry type="method" name="parent">
         <desc>Get the parent of each element in the current set of matched elements, optionally filtered by a selector.</desc>
         <signature>
            <argument name="selector">
               <desc>用于匹配元素的选择器字符串</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Given a jQuery object that represents a set of DOM elements, the <code>.parent()</code> method allows us to search through the parents of these elements in the DOM tree and construct a new jQuery object from the matching elements. The <code>.parents()</code> and <code>.parent()</code> methods are similar, except that the latter only travels a single level up the DOM tree.</p>
            <p>The method optionally accepts a selector expression of the same type that we can pass to the <code>$()</code> function. If the selector is supplied, the elements will be filtered by testing whether they match it.</p>
            <p>Consider a page with a basic nested list on it:</p>
            <pre>
&lt;ul class="level-1"&gt;
  &lt;li class="item-i"&gt;I&lt;/li&gt;
  &lt;li class="item-ii"&gt;II
    &lt;ul class="level-2"&gt;
      &lt;li class="item-a"&gt;A&lt;/li&gt;
      &lt;li class="item-b"&gt;B
        &lt;ul class="level-3"&gt;
          &lt;li class="item-1"&gt;1&lt;/li&gt;
          &lt;li class="item-2"&gt;2&lt;/li&gt;
          &lt;li class="item-3"&gt;3&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="item-c"&gt;C&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="item-iii"&gt;III&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>If we begin at item A, we can find its parents:</p>
            <pre>$('li.item-a').parent().css('background-color', 'red');</pre>
            <p>The result of this call is a red background for the level-2 list. Since we do not supply a selector expression, the parent element is unequivocally included as part of the object. If we had supplied one, the element would be tested for a match before it was included.</p>
         </longdesc>
         <example>
            <desc>Shows the parent of each element as (parent &gt; child).  Check the View Source to see the raw html.</desc>
         </example>
         <example>
            <desc>Find the parent element of each paragraph with a class "selected".</desc>
         </example>
      </entry>
      <entry type="method" name="offsetParent">
         <desc>Get the closest ancestor element that is positioned.</desc>
         <signature/>
         <longdesc>
            <p>Given a jQuery object that represents a set of DOM elements, the <code>.offsetParent()</code> method allows us to search through the ancestors of these elements in the DOM tree and construct a new jQuery object wrapped around the closest positioned ancestor. An element is said to be positioned if it has a CSS position attribute of <code>relative</code>, <code>absolute</code>, or <code>fixed</code>. This information is useful for calculating offsets for performing animations and placing objects on the page.</p>
            <p>Consider a page with a basic nested list on it, with a positioned element:</p>
            <pre>
&lt;ul class="level-1"&gt;
  &lt;li class="item-i"&gt;I&lt;/li&gt;
  &lt;li class="item-ii" style="position: relative;"&gt;II
    &lt;ul class="level-2"&gt;
      &lt;li class="item-a"&gt;A&lt;/li&gt;
      &lt;li class="item-b"&gt;B
        &lt;ul class="level-3"&gt;
          &lt;li class="item-1"&gt;1&lt;/li&gt;
          &lt;li class="item-2"&gt;2&lt;/li&gt;
          &lt;li class="item-3"&gt;3&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="item-c"&gt;C&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="item-iii"&gt;III&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>If we begin at item A, we can find its positioned ancestor:</p>
            <pre>$('li.item-a').offsetParent().css('background-color', 'red');</pre>
            <p>This will change the color of list item II, which is positioned.</p>
         </longdesc>
         <example>
            <desc>Find the offsetParent of item "A."</desc>
         </example>
      </entry>
      <entry type="method" name="slideToggle">
         <desc>通过滑动的形式显示或隐藏匹配的元素。</desc>
         <signature>
            <argument name="duration">
               <desc>字符串("slow"或 "fast")或表示动画时长的毫秒数值</desc>
            </argument>
            <argument name="callback">
               <desc>在动画完成时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="duration">
               <desc>字符串("slow"或 "fast")或表示动画时长的毫秒数值</desc>
            </argument>
            <argument name="easing">
               <desc>要使用的缓冲效果的名称，默认值是 "swing"。jQuery 内置提供 "linear" 和 "swing" 两种效果，如果要使用更多缓冲效果，需要插件支持。</desc>
            </argument>
            <argument name="callback">
               <desc>在动画完成时执行的函数。</desc>
            </argument>
         </signature>
         <longdesc>
            <p><code>.slideToggle()</code> 方法对匹配元素的高度进行动画操作。这会导致页面中，在这个元素下面的内容往下滑。如果元素一开始是显示的，他最终会被隐藏；如果一开始是隐藏的，他会显示出来。 <code>display</code> 属性值会保存到 jQuery 的数据缓存中，之后还能恢复 <code>display</code> 的初始值。比如，如果一个元素的 <code>display</code> 值为 <code>inline</code>，那么当隐藏再显示时，他仍然是 <code>inline</code>。当高度变成 0 之后，会把 <code>display</code> 样式属性设置成 <code>none</code> 以确保这个元素不再对页面布局产生影响。</p>
            <p>从 jQuery 1.4.3 起，增加了一个可选的参数，用于确定使用的缓冲函数。缓冲函数确定了动画在不同的位置的速度。jQuery默认只提供两个缓冲效果：<code>swing</code> 和 <code>linear</code>。更多特效需要使用插件。可以访问 <a href="http://jqueryui.com">jQuery UI 网站</a> 来获得更多信息。</p>
            <p>duration 参数可以提供一个毫秒数，代表动画运行的时间，时间越长动画越慢。还可以提供字符串 <code>'fast'</code> 和 <code>'slow'</code> ，分别对应了 <code>200</code> 和 <code>600</code> 毫秒。如果没有设置 <code>duration</code> 参数，或者设置成其他无法识别的字符串，就会使用默认值 400 毫秒。</p>
            <p>如果提供了回调函数，那么当动画结束时，会调用这个函数。通常用来几个不同的动画依次完成。这个函数不接受任何参数，但是 <code>this</code> 会设成将要执行动画的那个元素。如果对多个元素设置动画，那么要非常注意，回调函数会在每一个动画完成的元素上都执行一次，而不是对这组动画整体才执行一次。</p>
            <p>比如下面这个页面：</p>
            <pre>&lt;div id="clickme"&gt;
  Click here
&lt;/div&gt;
&lt;img id="book" src="book.png" alt="" width="100" height="123" /&gt;</pre>
            <p>点击之后调用 <code>.slideToggle()</code> 方法：</p>
            <pre>$('#clickme').click(function() {
  $('#book').slideToggle('slow', function() {
    // 动画完成
  });
});
</pre>
            <p>如果元素一开始是显现的，那么第一次点击之后，他就会慢慢隐藏起来：</p>
            <p class="image four-across"> 
               <img src="images/0042_06_25.png" alt=""/>
               <img src="images/0042_06_26.png" alt=""/>
               <img src="images/0042_06_27.png" alt=""/>
               <img src="images/0042_06_28.png" alt=""/>
            </p>
            <p>第二次点击后元素又出现了：</p>
            <p class="image four-across"> 
               <img src="images/0042_06_29.png" alt=""/>
               <img src="images/0042_06_30.png" alt=""/>
               <img src="images/0042_06_31.png" alt=""/>
               <img src="images/0042_06_32.png" alt=""/>
            </p>
         </longdesc>
         <example>
            <desc>让所有的段落滑上或滑下，用时 600 毫秒。</desc>
         </example>
         <example>
            <desc>让隔开的 div 交替出现或消失。</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.post">
         <desc>通过 HTTP POST 方式从服务器载入数据。</desc>
         <signature>
            <argument name="url">
               <desc>将要请求的 URL 字符串。</desc>
            </argument>
            <argument name="data">
               <desc>发送给服务器的字符串或者映射。</desc>
            </argument>
            <argument name="callback(data, textStatus, XMLHttpRequest)">
               <desc>当请求成功后会执行的回调函数。</desc>
            </argument>
            <argument name="dataType">
               <desc>预计从服务器返回的数据类型。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>这是一个 Ajax 函数的简写形式。他等价于：</p>
            <pre>$.ajax({
  type: 'POST',
  url: <em>url</em>,
  data: <em>data</em>,
  success: <em>success</em>
  dataType: <em>dataType</em>
});
</pre>
            <p><code>success</code> 回调函数会传入返回的数据，根据响应的 MIME 类型的不同，他可能是一个 XML 根元素、文本字符串、JavaScript 文件或者 JSON 对象。同时还会传入描述响应状态的字符串。</p>
            <p>从 jQuery 1.4 起，<code>success</code> 回调函数还会传入一个 XMLHttpRequest 对象。</p>
            <p>大多数情况下都会指定一个请求成功后的回调函数：</p>
            <pre>$.post('ajax/test.html', function(data) {
  $('.result').html(data);
});
</pre>
            <p>这个例子会把请求到的 HTML 代码片段插入到页面中。</p>
            <p>用 <code>POST</code> 方式获取的页面永远不会被缓存，所以通过 <code><a href="jQuery.ajaxSetup.htm">jQuery.ajaxSetup()</a></code> 设置的 <code>cache</code> 和 <code>ifModified</code> 选项在这些请求中无效。</p>
         </longdesc>
         <example>
            <desc>请求 test.php 页面，但忽略返回的结果。</desc>
         </example>
         <example>
            <desc>请求 test.php 页面，并传递一些附加的数据，但依然忽略返回的结果。</desc>
         </example>
         <example>
            <desc>传递一个数据数组到服务器，继续忽略返回的结果。</desc>
         </example>
         <example>
            <desc>通过 Ajax 请求发送表单数据。</desc>
         </example>
         <example>
            <desc>弹出从 test.php 请求到的结果(HTML 或者 XML，根据返回的结果而不同)。</desc>
         </example>
         <example>
            <desc>弹出从 test.cgi 请求到的数据，同时传递一些数据。</desc>
         </example>
         <example>
            <desc>获取 test.php 页面的内容，并交给 process() 函数做进一步处理。</desc>
         </example>
         <example>
            <desc>获取 test.php 页面的内容，其内容是 JSON 格式 (&lt;?php echo json_encode(array("name"=>"John","time"=>"2pm")); ?&gt;)

</desc>
         </example>
      </entry>
      <entry type="method" name="slideUp">
         <desc>用滑动的形式隐藏匹配的元素。</desc>
         <signature>
            <argument name="duration">
               <desc>字符串("slow"或 "fast")或表示动画时长的毫秒数值</desc>
            </argument>
            <argument name="callback">
               <desc>在动画完成时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="duration">
               <desc>字符串("slow"或 "fast")或表示动画时长的毫秒数值</desc>
            </argument>
            <argument name="easing">
               <desc>要使用的缓冲效果的名称，默认值是 "swing"。jQuery 内置提供 "linear" 和 "swing" 两种效果，如果要使用更多缓冲效果，需要插件支持。</desc>
            </argument>
            <argument name="callback">
               <desc>在动画完成时执行的函数。</desc>
            </argument>
         </signature>
         <longdesc>
            <p><code>.slideUp()</code> 方法对匹配元素的高度进行动画操作。这会导致页面中，在这个元素下面的内容往下滑。当高度变成 0 之后，会把 <code>display</code> 样式属性设置成 <code>none</code> 以确保这个元素不再对页面布局产生影响。</p>
            <p>duration 参数可以提供一个毫秒数，代表动画运行的时间，时间越长动画越慢。还可以提供字符串 <code>'fast'</code> 和 <code>'slow'</code> ，分别对应了 <code>200</code> 和 <code>600</code> 毫秒。如果没有设置 <code>duration</code> 参数，或者设置成其他无法识别的字符串，就会使用默认值 400 毫秒。</p>
            <p>从 jQuery 1.4.3 起，增加了一个可选的参数，用于确定使用的缓冲函数。缓冲函数确定了动画在不同的位置的速度。jQuery默认只提供两个缓冲效果：<code>swing</code> 和 <code>linear</code>。更多特效需要使用插件。可以访问 <a href="http://jqueryui.com">jQuery UI 网站</a> 来获得更多信息。</p>
            <p>如果提供了回调函数，那么当动画结束时，会调用这个函数。通常用来几个不同的动画依次完成。这个函数不接受任何参数，但是 <code>this</code> 会设成将要执行动画的那个元素。如果对多个元素设置动画，那么要非常注意，回调函数会在每一个动画完成的元素上都执行一次，而不是对这组动画整体才执行一次。</p>
            <p>比如下面这个页面：</p>
            <pre>&lt;div id="clickme"&gt;
  Click here
&lt;/div&gt;
&lt;img id="book" src="book.png" alt="" width="100" height="123" /&gt;</pre>
            <p>如果元素一开始是显现的，我们可以这样将其缓慢的隐藏：</p>
            <pre>$('#clickme').click(function() {
  $('#book').slideUp('slow', function() {
    // 动画完成
  });
});
  </pre>
            <p class="image four-across"> 
               <img src="images/0042_06_21.png" alt=""/>
               <img src="images/0042_06_22.png" alt=""/>
               <img src="images/0042_06_23.png" alt=""/> 
               <img src="images/0042_06_24.png" alt=""/>
            </p>
         </longdesc>
         <example>
            <desc>让所有的 div 向上滑，用时 400 毫秒。</desc>
         </example>
         <example>
            <desc>用 200 毫秒让父元素滑动收起。动画完成后，显示一个提示信息。</desc>
         </example>
      </entry>
      <entry type="method" name="nextAll">
         <desc>Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.</desc>
         <signature>
            <argument name="selector">
               <desc>用于匹配元素的选择器字符串</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Given a jQuery object that represents a set of DOM elements, the <code>.nextAll()</code> method allows us to search through the successors of these elements in the DOM tree and construct a new jQuery object from the matching elements.</p>
            <p>The method optionally accepts a selector expression of the same type that we can pass to the <code>$()</code> function. If the selector is supplied, the elements will be filtered by testing whether they match it.</p>
            <p>Consider a page with a simple list on it:</p>
            <pre>
&lt;ul&gt;
   &lt;li&gt;list item 1&lt;/li&gt;
   &lt;li&gt;list item 2&lt;/li&gt;
   &lt;li class="third-item"&gt;list item 3&lt;/li&gt;
   &lt;li&gt;list item 4&lt;/li&gt;
   &lt;li&gt;list item 5&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>If we begin at the third item, we can find the elements which come after it:</p>
            <pre>$('li.third-item').nextAll().css('background-color', 'red');</pre>
            <p>The result of this call is a red background behind items 4 and 5. Since we do not supply a selector expression, these following elements are unequivocally included as part of the object. If we had supplied one, the elements would be tested for a match before they were included.</p>
         </longdesc>
         <example>
            <desc>Locate all the divs after the first and give them a class.</desc>
         </example>
         <example>
            <desc>Locate all the paragraphs after the second child in the body and give them a class.</desc>
         </example>
      </entry>
      <entry type="method" name="next">
         <desc>Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.</desc>
         <signature>
            <argument name="selector">
               <desc>用于匹配元素的选择器字符串</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Given a jQuery object that represents a set of DOM elements, the <code>.next()</code> method allows us to search through the immediately following sibling of these elements in the DOM tree and construct a new jQuery object from the matching elements.</p>
            <p>The method optionally accepts a selector expression of the same type that we can pass to the <code>$()</code> function. If the immediately following sibling matches the selector, it remains in the newly constructed jQuery object; otherwise, it is excluded.</p>
            <p>Consider a page with a simple list on it:</p>
            <pre>
&lt;ul&gt;
   &lt;li&gt;list item 1&lt;/li&gt;
   &lt;li&gt;list item 2&lt;/li&gt;
   &lt;li class="third-item"&gt;list item 3&lt;/li&gt;
   &lt;li&gt;list item 4&lt;/li&gt;
   &lt;li&gt;list item 5&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>If we begin at the third item, we can find the element which comes just after it:</p>
            <pre>$('li.third-item').next().css('background-color', 'red');</pre>
            <p>The result of this call is a red background behind item 4. Since we do not supply a selector expression, this following element is unequivocally included as part of the object. If we had supplied one, the element would be tested for a match before it was included.</p>
         </longdesc>
         <example>
            <desc>Find the very next sibling of each disabled button and change its text "this button is disabled".</desc>
         </example>
         <example>
            <desc>Find the very next sibling of each paragraph. Keep only the ones with a class "selected".</desc>
         </example>
      </entry>
      <entry type="method" name="slideDown">
         <desc>通过滑动的形式显示元素。</desc>
         <signature>
            <argument name="duration">
               <desc>字符串("slow"或 "fast")或表示动画时长的毫秒数值</desc>
            </argument>
            <argument name="callback">
               <desc>在动画完成时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="duration">
               <desc>字符串("slow"或 "fast")或表示动画时长的毫秒数值</desc>
            </argument>
            <argument name="easing">
               <desc>要使用的缓冲效果的名称，默认值是 "swing"。jQuery 内置提供 "linear" 和 "swing" 两种效果，如果要使用更多缓冲效果，需要插件支持。</desc>
            </argument>
            <argument name="callback">
               <desc>在动画完成时执行的函数。</desc>
            </argument>
         </signature>
         <longdesc>
            <p><code>.slideDown()</code> 方法对匹配元素的高度进行动画操作。这会导致页面中，在这个元素下面的内容往下滑。</p>
            <p>duration 参数可以提供一个毫秒数，代表动画运行的时间，时间越长动画越慢。还可以提供字符串 <code>'fast'</code> 和 <code>'slow'</code> ，分别对应了 <code>200</code> 和 <code>600</code> 毫秒。如果没有设置 <code>duration</code> 参数，或者设置成其他无法识别的字符串，就会使用默认值 400 毫秒。</p>
            <p>从 jQuery 1.4.3 起，增加了一个可选的参数，用于确定使用的缓冲函数。缓冲函数确定了动画在不同的位置的速度。jQuery默认只提供两个缓冲效果：<code>swing</code> 和 <code>linear</code>。更多特效需要使用插件。可以访问 <a href="http://jqueryui.com">jQuery UI 网站</a> 来获得更多信息。</p>
            <p>如果提供了回调函数，那么当动画结束时，会调用这个函数。通常用来几个不同的动画依次完成。这个函数不接受任何参数，但是 <code>this</code> 会设成将要执行动画的那个元素。如果对多个元素设置动画，那么要非常注意，回调函数会在每一个动画完成的元素上都执行一次，而不是对这组动画整体才执行一次。</p>
            <p>比如下面这个页面：</p>
            <pre>&lt;div id="clickme"&gt;
  Click here
&lt;/div&gt;
&lt;img id="book" src="book.png" alt="" width="100" height="123" /&gt;</pre>
            <p>如果元素一开始是隐藏的，我们可以这样将其缓慢地显现：</p>
            <pre>$('#clickme').click(function() {
  $('#book').slideDown('slow', function() {
    // 动画完成
  });
});</pre>
            <p class="image four-across"> 
               <img src="images/0042_06_17.png" alt=""/>
               <img src="images/0042_06_18.png" alt=""/>
               <img src="images/0042_06_19.png" alt=""/>
               <img src="images/0042_06_20.png" alt=""/>
            </p>
         </longdesc>
         <example>
            <desc>用 600 毫秒让所有 div 下滑显示出来。</desc>
         </example>
         <example>
            <desc>用 1000 毫秒让所有文本框组件下滑显示出来。动画完成后改变这些文本框的外观，并让中间的文本框获得输入焦点。</desc>
         </example>
      </entry>
      <entry type="method" name="find">
         <desc>Get the descendants of each element in the current set of matched elements, filtered by a selector.</desc>
         <signature>
            <argument name="selector">
               <desc>用于匹配元素的选择器字符串</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Given a jQuery object that represents a set of DOM elements, the <code>.find()</code> method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements. The <code>.find()</code> and <code>.children()</code> methods are similar, except that the latter only travels a single level down the DOM tree.</p>
            <p>The method accepts a selector expression of the same type that we can pass to the <code>$()</code> function. The elements will be filtered by testing whether they match this selector.</p>
            <p>Consider a page with a basic nested list on it:</p>
            <pre>
&lt;ul class="level-1"&gt;
  &lt;li class="item-i"&gt;I&lt;/li&gt;
  &lt;li class="item-ii"&gt;II
    &lt;ul class="level-2"&gt;
      &lt;li class="item-a"&gt;A&lt;/li&gt;
      &lt;li class="item-b"&gt;B
        &lt;ul class="level-3"&gt;
          &lt;li class="item-1"&gt;1&lt;/li&gt;
          &lt;li class="item-2"&gt;2&lt;/li&gt;
          &lt;li class="item-3"&gt;3&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="item-c"&gt;C&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="item-iii"&gt;III&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>If we begin at item II, we can find list items within it:</p>
            <pre>$('li.item-ii').find('li').css('background-color', 'red');</pre>
            <p>The result of this call is a red background on items A, B, 1, 2, 3, and C. Even though item II matches the selector expression, it is not included in the results; only descendants are considered candidates for the match.</p>
            <blockquote>
               <p>Unlike in the rest of the tree traversal methods, the selector expression is required in a call to <code>.find()</code>. If we need to retrieve all of the descendant elements, we can pass in the universal selector <code>'*'</code> to accomplish this.</p>
            </blockquote>
            <p>
               <a href="http://api.jquery.com/jquery/#selector-context">Selector context</a> is implemented with the <code>.find()</code> 
               <code>method;</code> therefore, <code>$('li.item-ii').find('li')</code> is equivalent to <code>$('li', 'li.item-ii')</code>.</p>
         </longdesc>
         <example>
            <desc>Starts with all paragraphs and searches for descendant span elements, same as $("p span")</desc>
         </example>
         <example>
            <desc>Add spans around each word then add a hover and italicize words with the letter <strong>t</strong>.</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.getScript">
         <desc>通过 HTTP GET 方式从服务器请求一个 JavaScript 文件，并执行它。</desc>
         <signature>
            <argument name="url">
               <desc>将要请求的 URL 字符串。</desc>
            </argument>
            <argument name="success(data, textStatus)">
               <desc>当请求成功后会执行的回调函数。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>这是一个 Ajax 函数的简写形式。他等价于：</p>
            <pre>$.ajax({
  url: <em>url</em>,
  dataType: 'script',
  success: <em>success</em>
});
</pre>
            <p>这里的回调函数会传入返回的 JavaScript 文件。但这通常没什么用，因为此时脚本已经运行过了。</p>
            <p>载入的脚本会以全局的上下文来执行，所以可以修改其他变量，或者运行 jQuery 函数。比如加载一个 test.js 文件，里边包含下面这段代码：</p>
            <pre>$('.result').html('&lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;');</pre>
            <p>于是就可以动态载入并运行了：</p>
            <pre>$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});</pre>
         </longdesc>
         <example>
            <desc>动态的载入 <a href="http://github.com/jquery/jquery-color">jQuery 官方颜色插件</a> ，并且在载入成功后绑定一些色彩动画。</desc>
         </example>
         <example>
            <desc>载入 test.js JavaScript 文件并执行。</desc>
         </example>
         <example>
            <desc>载入 test.js JavaScript 文件并执行。当执行完毕后显示一个警告信息。</desc>
         </example>
      </entry>
      <entry type="method" name="contents">
         <desc>Get the children of each element in the set of matched elements, including text and comment nodes.</desc>
         <signature/>
         <longdesc>
            <p>Given a jQuery object that represents a set of DOM elements, the <code>.contents()</code> method allows us to search through the immediate children of these elements in the DOM tree and construct a new jQuery object from the matching elements. The <code>.contents()</code> and <code>.children()</code> methods are similar, except that the former includes text nodes as well as HTML elements in the resulting jQuery object.</p>
            <p>The <code>.contents()</code> method can also be used to get the content document of an iframe, if the iframe is on the same domain as the main page.</p>
            <p>Consider a simple <code>&lt;div&gt;</code> with a number of text nodes, each of which is separated by two line break elements (<code>&lt;br /&gt;</code>):</p>
            <pre>&lt;div class="container"&gt;
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
  do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  &lt;br /&gt;&lt;br /&gt;
  Ut enim ad minim veniam, quis nostrud exercitation ullamco 
  laboris nisi ut aliquip ex ea commodo consequat.
  &lt;br /&gt; &lt;br /&gt;
  Duis aute irure dolor in reprehenderit in voluptate velit 
  esse cillum dolore eu fugiat nulla pariatur.
&lt;/div&gt;
</pre>
            <p>We can employ the <code>.contents()</code> method to help convert this blob of text into three well-formed paragraphs:</p>
            <pre>
$('.container').contents().filter(function() {
  return this.nodeType == 3;
})
  .wrap('&lt;p&gt;&lt;/p&gt;')
.end()
.filter('br')
  .remove();
</pre>
            <p>This code first retrieves the contents  of <code>&lt;div class="container"&gt;</code> and then filters it for text nodes, which are wrapped in paragraph tags. This is accomplished by testing the <a href="https://developer.mozilla.org/en/nodeType">
                  <code>.nodeType</code> property</a> of the element. This DOM property holds a numeric code indicating the node's type; text nodes use the code 3. The contents are again filtered, this time for <code>&lt;br /&gt;</code> elements, and these elements are removed.</p>
         </longdesc>
         <example>
            <desc>Find all the text nodes inside a paragraph and wrap them with a bold tag.</desc>
         </example>
         <example>
            <desc>Change the background colour of links inside of an iframe.</desc>
         </example>
      </entry>
      <entry type="method" name="closest">
         <desc>Get the first ancestor element that matches the selector, beginning at the current element and progressing up through the DOM tree.</desc>
         <signature>
            <argument name="selector">
               <desc>用于匹配元素的选择器字符串</desc>
            </argument>
         </signature>
         <signature>
            <argument name="selector">
               <desc>用于匹配元素的选择器字符串</desc>
            </argument>
            <argument name="context">
               <desc>A DOM element within which a matching element may be found. If no context is passed in then the context of the jQuery set will be used instead.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Given a jQuery object that represents a set of DOM elements, the <code>.closest()</code> method allows us to search through these elements and their ancestors in the DOM tree and construct a new jQuery object from the matching elements. The <code>.parents()</code> and <code>.closest()</code> methods are similar in that they both traverse up the DOM tree. The differences between the two, though subtle, are significant:</p>
            <table>
               <thead>
  	               <tr>
  	                  <th>.closest()</th>
  	                  <th>.parents()</th>
  	               </tr>
               </thead>
               <tbody>
  	               <tr>
  	                  <td>Begins with the current element</td>
  	                  <td>Begins with the parent element</td>
                  </tr>
  	               <tr>
  	                  <td>Travels up the DOM tree until it finds a match for the supplied selector</td>
  	                  <td>Travels up the DOM tree to the document's root element, adding each ancestor element to a temporary collection; it then filters that collection based on a selector if one is supplied </td>
  	               </tr>
  	               <tr>
  	                  <td>The returned jQuery object contains zero or one element</td>
  	                  <td>The returned jQuery object contains zero, one, or multiple elements</td>
  	               </tr>
               </tbody>
            </table>

              
            <pre>
  &lt;ul id="one" class="level-1"&gt;
    &lt;li class="item-i"&gt;I&lt;/li&gt;
    &lt;li id="ii" class="item-ii"&gt;II
    &lt;ul class="level-2"&gt;
      &lt;li class="item-a"&gt;A&lt;/li&gt;
      &lt;li class="item-b"&gt;B
        &lt;ul class="level-3"&gt;
          &lt;li class="item-1"&gt;1&lt;/li&gt;
          &lt;li class="item-2"&gt;2&lt;/li&gt;
          &lt;li class="item-3"&gt;3&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="item-c"&gt;C&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="item-iii"&gt;III&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>Suppose we perform a search for <code>&lt;ul&gt;</code> elements starting at item A:</p>
            <pre>
$('li.item-a').closest('ul')
  .css('background-color', 'red');
</pre>
            <p>This will change the color of the level-2 <code>&lt;ul&gt;</code>, since it is the first encountered when traveling up the DOM tree.</p>
            <p>Suppose we search for an <code>&lt;li&gt;</code> element instead:</p>
            <pre>$('li.item-a').closest('li')
  .css('background-color', 'red');
</pre>
            <p>This will change the color of list item A. The <code>.closest()</code> method begins its search with the element itself before progressing up the DOM tree, and stops when item A matches the selector.</p>
            <p>We can pass in a DOM element as the context within which to search for the closest element.</p>
            <pre>var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII)
  .css('background-color', 'red');
$('li.item-a').closest('#one', listItemII)
  .css('background-color', 'green');</pre>
            <p>This will change the color of the level-2 <code>&lt;ul&gt;</code>, because it is both the first <code>&lt;ul&gt;</code> ancestor of list item A and a descendant of list item II. It will not change the color of the level-1 <code>&lt;ul&gt;</code>, however, because it is not a descendant of list item II.</p>
         </longdesc>
         <example>
            <desc>Show how event delegation can be done with closest.</desc>
         </example>
      </entry>
      <entry type="method" name="closest">
         <desc>Gets an array of all the elements and selectors matched against the current element up through the DOM tree.</desc>
         <signature>
            <argument name="selectors">
               <desc>An array or string containing a selector expression to match elements against (can also be a jQuery object).</desc>
            </argument>
            <argument name="context">
               <desc>A DOM element within which a matching element may be found. If no context is passed in then the context of the jQuery set will be used instead.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>This method is primarily meant to be used internally or by plugin authors.</p>
         </longdesc>
         <example>
            <desc>Show how event delegation can be done with closest.</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.getJSON">
         <desc>通过 HTTP GET 方式从服务器载入 JSON 编码的数据。</desc>
         <signature>
            <argument name="url">
               <desc>将要请求的 URL 字符串。</desc>
            </argument>
            <argument name="data">
               <desc>发送给服务器的字符串或者映射。</desc>
            </argument>
            <argument name="callback(data, textStatus)">
               <desc>当请求成功后会执行的回调函数。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>这是一个 Ajax 函数的简写形式。他等价于：</p>
            <pre>$.ajax({
  url: <em>url</em>,
  dataType: 'json',
  data: <em>data</em>,
  success: <em>callback</em>
});
</pre>
            <p>数据会以 URL 查询字符串形式发送给服务器。如果 <code>data</code> 参数的值是一个对象(映射)，他会自动被转换成 URL 编码的字符串。</p>
            <p>回调函数会传入一个返回的数据，这个数据是由 <code><a href="jQuery.parseJSON.htm">$.parseJSON()</a></code> 方法解析后得到的 JavaScript 对象或者数组。</p>
            <p>大多数情况下都会指定一个请求成功后的回调函数：</p>
            <pre>$.getJSON('ajax/test.json', function(data) {
  $('.result').html('&lt;p&gt;' + data.foo + '&lt;/p&gt;'
    + '&lt;p&gt;' + data.baz[1] + '&lt;/p&gt;');
});
</pre>
	           <p>当然，这个例子需要依赖下面的 JSON 文件结构：</p>
	           <pre>{
  "foo": "The quick brown fox jumps over the lazy dog.",
  "bar": "ABCDEFG",
  "baz": [52, 97]
}
</pre>
            <p>使用这种结构数据后，这个例子就能把第一个字符串和第二个数字插入到页面当中。</p>
            <blockquote>
               <p><strong>重要提示：</strong> 从 jQuery 1.4 起，如果 JSON 文件包含语法错误，这个请求会失败而不会返回任何提示信息。因此，请尽量避免频繁地手动编辑 JSON 数据。JSON 是一个数据交换格式，所以他的语法规则比普通的 JavaScript 对象字面量表示法还要严格。比如 JSON 中的所有字符串都必须用双引号包裹，不管他是属性还是值。更多信息请参考：<a href="http://json.org/">http://json.org/</a>。</p>
            </blockquote>
            <h4 id="jsonp">JSONP</h4>
            <p>如果 URL 中包涵字符串 "callback=?" (或者其他类似的，取决于服务器端 API 是如何定义的)，这个请求就会被看做 JSONP 请求。更多关于 <code>jsonp</code> 数据类型的探讨，请参考 <code><a href="jQuery.ajax.htm">$.ajax()</a></code>。</p>
         </longdesc>
         <example>
            <desc>用 Flickr 的 JSONP API 载入最近的四张关于猫的图片。</desc>
         </example>
         <example>
            <desc>从 test.js 中载入 JSON 数据，并且从返回的 JSON 数据中获得 name 的值。</desc>
         </example>
         <example>
            <desc>从 test.js 中载入 JSON 数据，传递一个附加的数据，并且从返回的 JSON 数据中获得 name 的值。</desc>
         </example>
         <example>
            <desc>列出从 pages.php 中获得的信息。</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.get">
         <desc>通过 HTTP GET 方式从服务器载入数据。</desc>
         <signature>
            <argument name="url">
               <desc>将要请求的 URL 字符串。</desc>
            </argument>
            <argument name="data">
               <desc>发送给服务器的字符串或者映射。</desc>
            </argument>
            <argument name="callback(data, textStatus, XMLHttpRequest)">
               <desc>当请求成功后会执行的回调函数。</desc>
            </argument>
            <argument name="dataType">
               <desc>预计从服务器返回的数据类型。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>这是一个 Ajax 函数的简写形式。他等价于：</p>
            <pre>$.ajax({
  url: <em>url</em>,
  data: <em>data</em>,
  success: <em>success</em>,
  dataType: <em>dataType</em>
});
</pre>
            <p><code>success</code> 回调函数会传入返回的数据，根据响应的 MIME 类型的不同，他可能是一个 XML 根元素、文本字符串、JavaScript 文件或者 JSON 对象。同时还会传入描述响应状态的字符串。</p>
            <p>从 jQuery 1.4 起，<code>success</code> 回调函数还会传入一个 XMLHttpRequest 对象。</p>
            <p>大多数情况下都会指定一个请求成功后的回调函数：</p>
            <pre>$.get('ajax/test.html', function(data) {
  $('.result').html(data);
  alert('Load was performed.');
});
</pre>
            <p>这个例子会把请求到的 HTML 代码片段插入到页面中。</p>
         </longdesc>
         <example>
            <desc>请求 test.php 页面，但忽略返回的结果。</desc>
         </example>
         <example>
            <desc>请求 test.php 页面，并传递一些附加的数据，但依然忽略返回的结果。</desc>
         </example>
         <example>
            <desc>传递一个数据数组到服务器，继续忽略返回的结果。</desc>
         </example>
         <example>
            <desc>弹出从 test.php 请求到的结果(HTML 或者 XML，根据返回的结果而不同)。</desc>
         </example>
         <example>
            <desc>弹出从 test.cgi 请求到的数据，同时传递一些数据。</desc>
         </example>
      </entry>
      <entry type="method" name="load">
         <desc>Load data from the server and place the returned HTML into the matched element.</desc>
         <signature>
            <argument name="url">
               <desc>A string containing the URL to which the request is sent.</desc>
            </argument>
            <argument name="data">
               <desc>A map or string that is sent to the server with the request.</desc>
            </argument>
            <argument name="complete(responseText, textStatus, XMLHttpRequest)">
               <desc>A callback function that is executed when the request completes.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>This method is the simplest way to fetch data from the server. It is roughly equivalent to <code>$.get(url, data, success)</code> except that it is a method rather than global function and it has an implicit callback function.  When a successful response is detected (i.e. when <code>textStatus</code> is "success" or "notmodified"), <code>.load()</code> sets the HTML contents of the matched element to the returned data. This means that most uses of the method can be quite simple:</p>
            <pre>$('#result').load('ajax/test.html');</pre>
            <p>The provided callback, if any, is executed after this post-processing has been performed:</p>
            <pre>$('#result').load('ajax/test.html', function() {
  alert('Load was performed.');
});</pre>
            <p>In the two examples above, if the current document does not contain an element with an ID of "result," the <code>.load()</code> method is not executed.</p>
            <p>The POST method is used if data is provided as an object; otherwise, GET is assumed.</p>

            <blockquote>
               <p>Note: The event handling suite also has a method named <code><a href="load-event.htm">.load()</a></code>. Which one is fired depends on the set of arguments passed.</p>
            </blockquote>
            <h4>Loading Page Fragments</h4>
            <p>The <code>.load()</code> method, unlike <code><a href="jQuery.get.htm">$.get()</a></code>, allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the <code>url</code> parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.   </p>
            <p>We could modify the example above to use only part of the document that is fetched:</p>
            <pre>$('#result').load('ajax/test.html #container');</pre>
            <p>When this method executes, it retrieves the content of <code>ajax/test.html</code>, but then jQuery parses the returned document to find the element with an ID of <code>container</code>. This element, along with its contents, is inserted into the element with an ID of <code>result</code>, and the rest of the retrieved document is discarded.</p>
            <p>jQuery uses the browser's <code>.innerHTML</code> property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as <code>&lt;html&gt;</code>, <code>&lt;title&gt;</code>, or <code>&lt;head&gt;</code> elements. As a result, the elements retrieved by <code>.load()</code> may not be exactly the same as if the document were retrieved directly by the browser.</p>
         </longdesc>
         <example>
            <desc>Load the main page's footer navigation into an ordered list.</desc>
         </example>
         <example>
            <desc>Display a notice if the Ajax request encounters an error.</desc>
         </example>
         <example>
            <desc>Load the feeds.html file into the div with the ID of feeds.</desc>
         </example>
         <example>
            <desc>pass arrays of data to the server.</desc>
         </example>
         <example>
            <desc>Same as above, but will POST the additional parameters to the server and a callback that is executed when the server is finished responding.</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.ajax">
         <desc>执行异步 HTTP (Ajax) 请求。</desc>
         <signature>
            <argument name="settings">
               <desc>一组用于配置 Ajax 请求的键值对。所有的选项都是可选的。任何一个选项的默认值都可以通过 <a href="jQuery.ajaxSetup.htm">$.ajaxSetup()</a> 来设定。</desc>
            </argument>
            <option name="async">
               <desc>默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。跨域请求以及 <code>dataType: "jsonp"</code> 的请求不支持同步方式。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。</desc>
            </option>
            <option name="beforeSend(XMLHttpRequest)">
               <desc>发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 <a href="http://docs.jquery.com/Ajax_Events">Ajax 事件</a>。如果返回false可以取消本次ajax请求。</desc>
            </option>
            <option name="cache">
               <desc>设置为 false 将强制不缓所请求的页面。</desc>
            </option>
            <option name="complete(XMLHttpRequest, textStatus)">
               <desc>请求完成后回调函数 (请求成功或失败之后均调用)。参数： XMLHttpRequest 对象和一个描述请求状态的字符串。 (<code>"success"</code>, <code>"notmodified"</code>, <code>"error"</code>, <code>"timeout"</code>, 或 <code>"parsererror"</code>)。这是一个 <a href="http://docs.jquery.com/Ajax_Events">Ajax 事件</a>。</desc>
            </option>
            <option name="contentType">
               <desc>发送信息至服务器时内容编码类型。 默认值 "application/x-www-form-urlencoded" 适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么他必定也会发送给服务器（即使没有数据要发送） 数据总是以 UTF-8 的编码传输的。你必须在服务器端进行适当的解码。</desc>
            </option>
            <option name="context">
               <desc>这个对象用于设置Ajax相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么this就指向调用本次AJAX请求时传递的 settings 参数）。比如指定一个 DOM 元素作为 context 参数，就能把 success 回调函数的上下文设置成了这个 DOM 元素： <pre>$.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
      }});</pre>
               </desc>
            </option>
            <option name="data">
               <desc>发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。对象必须是键值对，如果数据是一个数组，jQuery 会按照 <code>traditional</code> 参数的值(查看下面的说明)，自动将数据序列化成一个同名的多值查询字符串。</desc>
            </option>
            <option name="dataFilter(data, type)">
               <desc>给 Ajax 返回的原始数据的进行预处理的函数。必须返回处理后的数据。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据， type 是调用 $.ajax 时提供的 dataType 参数。</desc>
            </option>
            <option name="dataType">
               <desc>预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为 XML 。在 jQuery 1.4中， JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本，而其他的任何值都会看成是字符串。可用的类型 (并且其结果会作为 success 回调函数的第一个参数) 有：
        <ul>
                     <li>"xml": 返回 XML 文档，可用 jQuery 处理。</li>
                     <li>"html":  返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。</li>
                     <li>"script": 把响应的结果当作 JavaScript 执行，并将其当作纯文本返回。默认情况下不会自动缓存结果，除非设置了"cache"参数。<strong>注意:</strong> 在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)</li>
                     <li>"json": 把响应的结果当作 JSON  执行，之后返回一个 JavaScript 对象。在 jQuery 1.4 中，JSON 格式以严格的方式解析，任何格式有误的 JSON 都会被拒绝并抛出一个解析错误的异常。 (参考  <a href="http://json.org/">json.org</a> 获取更多关于 JSON 格式的信息。)</li>
                     <li>"jsonp": 以 <a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">JSONP</a> 的方式载入 JSON 数据块。会自动添加 "?callback=?" 到所请求 URL 的最后。</li>
                     <li>"text": 纯文本字符串。</li>
                  </ul>
               </desc>
            </option>
            <option name="error(XMLHttpRequest, textStatus, errorThrown)">
               <desc>请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是"timeout", "error", "notmodified" 和 "parsererror"。这是一个 <a href="http://docs.jquery.com/Ajax_Events">Ajax 事件</a>。</desc>
            </option>
            <option name="global">
               <desc>是否触发全局 AJAX 事件。默认值是 true 。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 <a href="http://docs.jquery.com/Ajax_Events">Ajax 事件</a>。</desc>
            </option>
            <option name="ifModified">
               <desc>仅在服务器数据从上次请求后发生改变后，请求才会成功。使用 HTTP 包 Last-Modified 头信息判断。默认值是 false ，忽略响应报头。在jQuery 1.4中，他也会检查服务器指定的'etag'来确定数据没有被修改过。</desc>
            </option>
            <option name="jsonp">
               <desc>在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如 <code>{jsonp:'onJsonPLoad'}</code> 会导致将 <code>'onJsonPLoad=?'</code> 传给服务器。</desc>
            </option>
            <option name="jsonpCallback">
               <desc>为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。</desc>
            </option>
            <option name="password">
               <desc>用于响应HTTP访问认证请求的密码</desc>
            </option>
            <option name="processData">
               <desc>默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。</desc>
            </option>
            <option name="scriptCharset">
               <desc>只有当请求时 dataType 为 "jsonp" 或 "script" ，并且 type 是 "GET" 时，才会用于强制修改charset。通常只在本地和远程的内容编码不同时使用。</desc>
            </option>
            <option name="success(data, textStatus, XMLHttpRequest)">
               <desc>请求成功后的回调函数。函数接受 3 个参数：服务器返回，并根据dataType参数进行处理后的数据、描述状态的字符串、以及一个 XMLHttpRequest 对象(jQuery 1.4 开始才有)。这是一个 <a href="http://docs.jquery.com/Ajax_Events">Ajax 事件</a>。</desc>
            </option>
            <option name="timeout">
               <desc>设置请求超时时间（毫秒）。此设置将覆盖用 <a href="jQuery.ajaxSetup.htm">$.ajaxSetup</a> 做的全局设置。例如你可以给某一个请求单独设置较长的超时时间。参考 <a href="jQuery.ajaxSetup.htm">$.ajaxSetup</a>() 获得全局 timeout 的更多信息。</desc>
            </option>
            <option name="traditional">
               <desc>如果你想要用传统的方式来序列化数据，那么就设置为true。请参 <a href="jQuery.param.htm">参数序列化</a> 方法。</desc>
            </option>
            <option name="type">
               <desc>请求方式 ("POST" 或 "GET")， 默认为 "GET"。 <strong>注意：</strong> 其它 HTTP 请求方法，如 PUT 和 DELETE ，这里也可以使用，但只有部分浏览器能支持。</desc>
            </option>
            <option name="url">
               <desc>发送请求的地址。</desc>
            </option>
            <option name="username">
               <desc>用于响应HTTP访问认证请求的用户名</desc>
            </option>
            <option name="xhr">
               <desc>需要返回一个 XMLHttpRequest 对象。默认在IE下是 ActiveXObject 而其他浏览器下是 XMLHttpRequest 。用于重写或者提供一个增强的XMLHttpRequest 对象。这个参数在jQuery 1.3以前不可用。</desc>
            </option>
         </signature>
         <longdesc>
            <p>jQuery 发送的所有 Ajax 请求，内部都会通过调用 <code>$.ajax()</code> 函数来实现。通常没有必要直接调用这个函数，有几个简单易用的封装可以使用，比如 <code><a href="jQuery.get.htm">$.get()</a></code> 和 <code><a href="load.htm">.load()</a></code>。如果你需要使用几个不常用的选项，那么 <code>$.ajax()</code> 可以提供更高的灵活性。</p>
            <p>最简单的情况下， <code>$.ajax()</code> 可以不带任何参数直接使用:</p>
            <pre>$.ajax();</pre>

            <p>
               <strong>注意：</strong> 所有选项的默认值都可以通过 <code><a href="jQuery.ajaxSetup.htm">$.ajaxSetup()</a></code> 函数来全局设置。</p>

            <p>上面这个例子中，我们没用使用任何选项，于是默认会载入当前页面的内容，但载入的结果是无法使用的。如果想要进一步处理先前载入的数据，我们就需要使用回调函数来操作了。</p>

            <h4 id="callback-functions">回调函数</h4>
            <p><code>beforeSend</code>, <code>error</code>, <code>dataFilter</code>, <code>success</code> 和 <code>complete</code> 等选项都可以接受一个函数，这个函数会在适当的时机执行。这些函数中的 <code>this</code> 会始终指向传递给 <code>$.ajax</code> 函数的选项中， <code>context</code> 属性所指向的对象。如果没有设置 <code>context</code> ，则 <code>context</code> 会指向传给 <code>$.ajax</code> 函数的选项本身。有些类型的 Ajax 请求，比如 JSONP 和跨域的 GET 请求，本身不使用 XHR，所以在这种情况下，传给回调函数的 <code>XMLHttpRequest</code> 参数就是 <code>undefined</code> 了。</p>
            <ol>
               <li>
                  <code>beforeSend</code> 会在发送请求之前调用，并且传入一个 <code>XMLHttpRequest</code> 对象作为参数。</li>
               <li>
                  <code>error</code> 会在请求失败时调用。他会传入 <code>XMLHttpRequest</code>，描述错误类型的字符串，以及一个异常对象（如果有的话）</li>
               <li>
                  <code>dataFilter</code> 会在请求成功之后调用。他会传入请求到的数据以及 <code>dataType</code> 参数的值。并且必须返回一个新的数据（可以是处理过的），这个数据将传递给 <code>success</code> 回调函数做进一步处理。</li>
               <li>
                  <code>success</code> 会在请求成功之后调用。他会传入请求到的数据，包含成功代码的字符串，以及 <code>XMLHttpRequest</code> 对象。</li>
               <li>
                  <code>complete</code> 无论请求成败与否，他都会在请求结束后调用。他会传入 <code>XMLHttpRequest</code> 对象，以及一个包含成功或失败代码的字符串</li>
            </ol>
            <p>如果想直接使用返回的 HTML，可以给 <code>success</code> 添加如下的处理函数:</p>
            <pre>$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});</pre>
	           <p>如此简单的例子，还可以用更优雅的方式来替代： <code><a href="load.htm">.load()</a></code> 或 <code><a href="jQuery.get.htm">$.get()</a></code>。</p>
				
            <h4 id="data-types">数据类型</h4>
            <p><code>$.ajax()</code> 函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是XML，那么返回的结果就可以用普通的XML方法或者jQuery的选择器来遍历。如果检测到到其他类型，比如HTML，则数据就以文本形式来对待。</p>
            <p>通过设定 <code>dataType</code> 选项，可以指定成其他不同数据类型. 除了 <code>xml</code>, <code>dataType</code> 还可以是 <code>html</code>, <code>json</code>, <code>jsonp</code>, <code>script</code>, 火 <code>text</code>.</p>
            <p>其中， <code>text</code> 和 <code>xml</code> 类型返回的数据不会经过处理。数据仅仅简单的将 <code>XMLHttpRequest</code> 的 <code>responseText</code> 或 <code>responseXML</code> 属性传递给 success 回调函数。</p>
            <p>
               <strong>注意：</strong> 我们必须确保服务器端报告的 MIME 类型与我们选择的 <code>dataType</code> 所匹配。比如说，选择 XML 的话，服务器端就必须声明 <code>text/xml</code> 或 <code>application/xml</code>。</p>
            <p>如果指定为 <code>html</code> 类型，任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。类似的，指定 <code>script</code> 类型的话，也会先执行服务器端生成 JavaScript 脚本，然后再把脚本作为一个文本数据返回。</p>
            <p>如果指定为 <code>json</code> 类型，则会把获取到的数据作为一个JavaScript对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，首先尝试使用 <code>JSON.parse()</code>。如果浏览器不支持，则使用一个<code>Function</code><strong>constructor</strong>。格式有误的 JSON 数据会抛出一个错误，详见 <a href="http://json.org/">json.org</a> 。JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型来代替。</p>
            <p>使用 <code>jsonp</code> 类型的话，会创建一个查询字符串参数 <code>callback=?</code> ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback，可以通过设置 <code>$.ajax()</code> 的 <code>jsonp</code> 参数。 </p>
            <p>
               <strong>注意，</strong> JSONP是JSON格式的扩展。他要求一些服务器端的代码来检测并处理查询字符串参数。更多信息可以参阅 <a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">最早关于 JSONP 的文章</a>.</p>
            <p>当数据需要从远端服务器上获得时(这只可能是用了 <code>script</code> 或 <code>jsonp</code> 数据类型)，这个操作实际上是使用了 <code>&lt;script&gt;</code> 标签，而并非 <code>XMLHttpRequest</code> 对象。所以这种情况下，<code>XMLHttpRequest</code> 对象既不会作为 <code>$.ajax()</code> 函数的返回值，也不会传递给任何回调函数（比如 <code>beforeSend</code>）。</p>

            <h4 id="sending-data-to-server">发送数据到服务器</h4>
            <p>默认情况下，Ajax请求使用GET方法。如果要使用POST方法，可以设定 <code>type</code> 选项。这个选项也会影响 <code>data</code> 选项中的内容如何发送到服务器。按照 W3C  XMLHTTPRequest 的标准，POST 的数据始终是用 UTF-8 字符集传输的。</p>
            <p><code>data</code> 选项既可以包含一个查询字符串，比如  <code>key1=value1&amp;key2=value2</code>也可以是一个映射，比如 <code>{key1: 'value1', key2: 'value2'}</code>。如果使用了后者的形式，则数据在发送给服务器前会被 <code><a href="jQuery.param.htm">jQuery.param()</a></code> 转换成查询字符串。这个处理过程也可以通过设置 <code>processData</code> 为 <code>false</code> 来回避。比如我们希望发送一个 XML 对象给服务器时，这种处理就可能不合适了。同时在这种情况下，我们还应当设置 <code>contentType</code> 选项，使用其他合适的 MIME 类型，取代默认的 <code>application/x-www-form-urlencoded</code>。</p>
            <h4 id="advanced-options">高级选项</h4>
            <p><code>global</code> 选项用于在 Ajax 请求时，阻止响应全局注册的 Ajax 事件回调函数，比如 <code><a href="ajaxSend.htm">.ajaxSend()</a></code>, <code><a href="ajaxError.htm">.ajaxError()</a></code> ，以及其他类似的方法。这在有些时候很有用，比如发送的请求非常频繁且简短的时候，就可以禁用 <a href="ajaxSend.htm">.ajaxSend()</a> 里设置的载入等待指示器。更多关于这些方法的详细信息，请参阅下面的内容。</p>
            <p>如果服务器需要HTTP认证，可以使用用户名和密码可以通过 <code>username</code> 和 <code>password</code> 选项来设置。</p>
            <p>Ajax请求是限时的，所以错误警告被捕获并处理后，可以用来提升用户体验。请求超时这个参数通常就保留其默认值，或者就通过<code><a href="jQuery.ajaxSetup.htm">$.ajaxSetup()</a></code>来全局设定，很少为特定的请求重新设置 <code>timeout</code> 选项。</p>
            <p>默认情况下，请求总会被发出去的，但浏览器有可能从他的缓存中调取数据。要禁止使用缓存的结果，可以设置 <code>cache</code> 参数为 <code>false</code> 。如果希望判断数据自从上次请求后是否更改过，如果没有更改过就报告请求失败的话，可以设置 <code>ifModified</code> 参数为 <code>true</code>。</p>
            <p><code>scriptCharset</code> 参数允许给 <code>&lt;script&gt;</code> 标签的请求设定一个特定的字符集，通常用户 用于 <code>script</code> 或者 <code>script</code> 的数据。当脚本和页面字符集不同时，这特别好用。</p>
            <p>Ajax 的第一个字母是 "asynchronous" 的开头字母，这意味着所有的操作都是并行的，完成的顺序没有前后关系。<code>$.ajax()</code> 的 <code>async</code> 选项默认是 <code>true</code>，这意味着在请求开始后，其他代码依然能够执行。强烈不建议把这个选项设置成<code>false</code>（意味着所有的请求都不再是异步的了），这会导致浏览器显得反应迟钝。</p>
            <p><code>$.ajax()</code> 函数返回他创建的 <code>XMLHttpRequest</code>对象。通常jQuery只在内部处理并创建这个对象，但用户也可以通过 <code>xhr</code> 选项来传递一个自己创建的xhr对象。返回的对象通常已经被丢弃了，但依然提供一个底层接口来观察和操控请求。比如说，调用对象上的 <code>.abort()</code> 可以在请求完成前中止请求。</p>
         </longdesc>
         <example>
            <desc>加载并执行一个 JavaScript 文件。</desc>
         </example>
         <example>
            <desc>保存数据到服务器，成功时显示信息。</desc>
         </example>
         <example>
            <desc>装入一个 HTML 网页最新版本。</desc>
         </example>
         <example>
            <desc>同步加载数据。发送请求时锁住浏览器。当需要使用同步方式加载数据时，最好通过其他方式锁住用户的交互行为。</desc>
         </example>
         <example>
            <desc>发送 XML 数据至服务器。设置 processData 选项为 false，防止自动转换数据格式。</desc>
         </example>
         <example>
            <desc>发送一个 id 数据到服务器，并在成功后通知用户。<strong>注意这种用法——把返回的数据装入一个变量中——必须使用同步请求（即锁住脚本进程）！<em>(async:false)</em></strong>
            </desc>
         </example>
      </entry>
      <entry type="property" name="length">
         <desc>jQuery 对象中元素的个数。</desc>
         <signature/>
         <longdesc>
            <p>当前匹配的元素个数。<a href="size.htm">size()</a> 方法将返回相同的值。</p>
         </longdesc>
         <example>
            <desc>计算 div 数目，点击后增加还会增加。</desc>
         </example>
      </entry>
      <entry type="method" name="children">
         <desc>Get the children of each element in the set of matched elements, optionally filtered by a selector.</desc>
         <signature>
            <argument name="selector">
               <desc>用于匹配元素的选择器字符串</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Given a jQuery object that represents a set of DOM elements, the <code>.children()</code> method allows us to search through the immediate children of these elements in the DOM tree and construct a new jQuery object from the matching elements. The <code>.find()</code> and <code>.children()</code> methods are similar, except that the latter only travels a single level down the DOM tree. Note also that like most jQuery methods, <code>.children()</code> does not return text nodes; to get <em>all</em> children including text and comment nodes, use <code>.contents()</code>.</p>
            <p>The method optionally accepts a selector expression of the same type that we can pass to the <code>$()</code> function. If the selector is supplied, the elements will be filtered by testing whether they match it.</p>
            <p>Consider a page with a basic nested list on it:</p>
            <pre>
&lt;ul class="level-1"&gt;
  &lt;li class="item-i"&gt;I&lt;/li&gt;
  &lt;li class="item-ii"&gt;II
    &lt;ul class="level-2"&gt;
      &lt;li class="item-a"&gt;A&lt;/li&gt;
      &lt;li class="item-b"&gt;B
        &lt;ul class="level-3"&gt;
          &lt;li class="item-1"&gt;1&lt;/li&gt;
          &lt;li class="item-2"&gt;2&lt;/li&gt;
          &lt;li class="item-3"&gt;3&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="item-c"&gt;C&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="item-iii"&gt;III&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>If we begin at the level-2 list, we can find its children:</p>
            <pre>$('ul.level-2').children().css('background-color', 'red');</pre>
            <p>The result of this call is a red background behind items A, B, and C. Since we do not supply a selector expression, all of the children are part of the returned jQuery object. If we had supplied one, only the matching items among these three would be included.</p>
         </longdesc>
         <example>
            <desc>Find all children of the clicked element.</desc>
         </example>
         <example>
            <desc>Find all children of each div.</desc>
         </example>
         <example>
            <desc>Find all children with a class "selected" of each div.</desc>
         </example>
      </entry>
      <entry type="property" name="selector">
         <desc>传给jQuery()的原始选择器。</desc>
         <signature/>
         <longdesc>
            <p>应当与context一起使用，用于精确检测选择器查询情况。</p>
            <p><code>.live()</code> 方法在绑定事件处理函数时，使用这个属性来确定如何重现他的搜索过程。需要实现类似功能的插件就很可能需要使用这个属性。 这个属性包含一个字符串，他代表了匹配的元素集合，但是如果 DOM 遍历方法调用过之后，这个字符串就可能不再是一个有效的 jQuery 选择器表达式了。基于这个原因，<code>.selector</code> 的值应当在创建对象的代码后面马上使用。因此，<code>.live()</code> 方法也应当在创建对象后马上使用。</p>
         </longdesc>
         <example>
            <desc>检测使用的选择器。</desc>
         </example>
         <example>
            <desc>不同的方式收集元素</desc>
         </example>
      </entry>
      <entry type="method" name="add">
         <desc>Add elements to the set of matched elements.</desc>
         <signature>
            <argument name="selector">
               <desc>A string containing a selector expression to match additional elements against.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="elements">
               <desc>one or more elements to add to the set of matched elements.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="html">
               <desc>An HTML fragment to add to the set of matched elements.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="selector">
               <desc>A string containing a selector expression to match additional elements against.</desc>
            </argument>
            <argument name="context">
               <desc>Add some elements rooted against the specified context.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Given a jQuery object that represents a set of DOM elements, the <code>.add()</code> method constructs a new jQuery object from the union of those elements and the ones passed into the method. The argument to <code>.add()</code> can be pretty much anything that  <code>$()</code> accepts, including a jQuery selector expression, references to DOM elements, or an HTML snippet.</p>
            <p>Consider a page with a simple list and a paragraph following it:</p>
            <pre>&lt;ul&gt;
  &lt;li&gt;list item 1&lt;/li&gt;
  &lt;li&gt;list item 2&lt;/li&gt;
  &lt;li&gt;list item 3&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;a paragraph&lt;/p&gt;</pre>
            <p>We can select the list items and then the paragraph by using either a selector or a reference to the DOM element itself as the <code>.add()</code> method's argument:</p>
            <pre>$('li').add('p').css('background-color', 'red');</pre>
            <p>Or:</p>
            <pre>$('li').add(document.getElementsByTagName('p')[0])
  .css('background-color', 'red');</pre>
            <p>The result of this call is a red background behind all four elements.
Using an HTML snippet as the <code>.add()</code> method's argument (as in the third version), we can create additional elements on the fly and add those elements to the matched set of elements. Let's say, for example, that we want to alter the background of the list items along with a newly created paragraph:</p>
            <pre>$('li').add('&lt;p id="new"&gt;new paragraph&lt;/p&gt;')
  .css('background-color', 'red');</pre>
            <p>Although the new paragraph has been created and its background color changed, it still does not appear on the page. To place it on the page, we could add one of the insertion methods to the chain.</p>
            <p>As of jQuery 1.4 the results from .add() will always be returned in document order (rather than a simple concatenation).</p>
         </longdesc>
         <example>
            <desc>Finds all divs and makes a border.  Then adds all paragraphs to the jQuery object to set their backgrounds yellow.</desc>
         </example>
         <example>
            <desc>Adds more elements, matched by the given expression, to the set of matched elements.</desc>
         </example>
         <example>
            <desc>Adds more elements, created on the fly, to the set of matched elements.</desc>
         </example>
         <example>
            <desc>Adds one or more Elements to the set of matched elements.</desc>
         </example>
         <example>
            <desc>Demonstrates how to add (or push) elements to an existing collection</desc>
         </example>
      </entry>
      <entry type="property" name="context">
         <desc>传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。如果没有传递过第二个参数，那么 context 指向当前的文档(document)。</desc>
         <signature/>
         <longdesc>
            <p><code>.live()</code> 方法绑定事件处理函数时会用到这个属性，用于检测将要使用的元素根节点以实现事件委派。需要实现类似功能的插件就很可能需要使用这个属性。</p>
            <p>这个属性的值通常等价于 document 。因为 jQuery 对象的 context 参数默认情况下是无需提供的。有时候这个值会有变化，比如是在 <code>&lt;iframe&gt;</code> 中搜索，或者 XML 文档中搜索时。</p>
         </longdesc>
         <example>
            <desc>检测实际使用的上下文。</desc>
         </example>
      </entry>
      <entry type="method" name="not">
         <desc>Remove elements from the set of matched elements.</desc>
         <signature>
            <argument name="selector">
               <desc>用于匹配元素的选择器字符串</desc>
            </argument>
         </signature>
         <signature>
            <argument name="elements">
               <desc>One or more DOM elements to remove from the matched set.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="function(index)">
               <desc>A function used as a test for each element in the set. <code>this</code> is the current DOM element.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Given a jQuery object that represents a set of DOM elements, the <code>.not()</code> method constructs a new jQuery object from a subset of the matching elements. The supplied selector is tested against each element; the elements that don't match the selector will be included in the result.</p>
            <p>Consider a page with a simple list on it:</p>
            <pre>
&lt;ul&gt;
  &lt;li&gt;list item 1&lt;/li&gt;
  &lt;li&gt;list item 2&lt;/li&gt;
  &lt;li&gt;list item 3&lt;/li&gt;
  &lt;li&gt;list item 4&lt;/li&gt;
  &lt;li&gt;list item 5&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>We can apply this method to the set of list items:</p>
            <pre>$('li').not(':even').css('background-color', 'red');</pre>
            <p>The result of this call is a red background for items 2 and 4, as they do not match the selector (recall that :even and :odd use 0-based indexing).</p>
            <h4>Removing Specific Elements</h4>
            <p>The second version of the <code>.not()</code> method allows us to remove elements from the matched set, assuming we have found those elements previously by some other means. For example, suppose our list had an id applied to one of its items:</p>
            <pre>
&lt;ul&gt;
  &lt;li&gt;list item 1&lt;/li&gt;
  &lt;li&gt;list item 2&lt;/li&gt;
  &lt;li id="notli"&gt;list item 3&lt;/li&gt;
  &lt;li&gt;list item 4&lt;/li&gt;
  &lt;li&gt;list item 5&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>We can fetch the third list item using the native JavaScript <code>getElementById()</code> function, then remove it from a jQuery object:</p>
            <pre>
$('li').not(document.getElementById('notli'))
  .css('background-color', 'red');
</pre>
            <p>This statement changes the color of items 1, 2, 4, and 5. We could have accomplished the same thing with a simpler jQuery expression, but this technique can be useful when, for example, other libraries provide references to plain DOM nodes.</p>
            <p>As of jQuery 1.4, the <code>.not()</code> method can take a function as its argument in the same way that <code>.filter()</code> does. Elements for which the function returns <code>true</code> are excluded from the filtered set; all other elements are included.</p>
         </longdesc>
         <example>
            <desc>Adds a border to divs that are not green or blue.</desc>
         </example>
         <example>
            <desc>Removes the element with the ID "selected" from the set of all paragraphs.</desc>
         </example>
         <example>
            <desc>Removes the element with the ID "selected" from the set of all paragraphs.</desc>
         </example>
         <example>
            <desc>Removes all elements that match "div p.selected" from the total set of all paragraphs.</desc>
         </example>
      </entry>
      <entry type="method" name="outerWidth">
         <desc>Get the current computed width for the first element in the set of matched elements, including padding and border.</desc>
         <signature>
            <argument name="includeMargin">
               <desc>A Boolean indicating whether to include the element's margin in the calculation.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Returns the width of the element, along with left and right padding, border, and optionally margin, in pixels.</p>
            <p>If <code>includeMargin</code> is omitted or <code>false</code>, the padding and border are included in the calculation; if <code>true</code>, the margin is also included.</p>
            <p>This method is not applicable to <code>window</code> and <code>document</code> objects; for these, use <code><a href="width.htm">.width()</a></code> instead.</p>
            <p class="image">
               <img src="images/0042_04_06.png"/>
            </p>
         </longdesc>
         <example>
            <desc>Get the outerWidth of a paragraph.</desc>
         </example>
      </entry>
      <entry type="method" name="outerHeight">
         <desc>Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin.</desc>
         <signature>
            <argument name="includeMargin">
               <desc>A Boolean indicating whether to include the element's margin in the calculation.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The top and bottom padding and border are always included in the <code>.outerHeight()</code> calculation; if the <code>includeMargin</code> argument is set to <code>true</code>, the margin (top and bottom) is also included.</p>
            <p>This method is not applicable to <code>window</code> and <code>document</code> objects; for these, use <code><a href="height.htm">.height()</a></code> instead.</p>
            <p class="image">
               <img src="images/0042_04_03.png"/>
            </p>
         </longdesc>
         <example>
            <desc>Get the outerHeight of a paragraph.</desc>
         </example>
      </entry>
      <entry type="method" name="toggle">
         <desc>Display or hide the matched elements.</desc>
         <signature>
            <argument name="duration">
               <desc>字符串("slow"或 "fast")或表示动画时长的毫秒数值</desc>
            </argument>
            <argument name="callback">
               <desc>在动画完成时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="duration">
               <desc>字符串("slow"或 "fast")或表示动画时长的毫秒数值</desc>
            </argument>
            <argument name="easing">
               <desc>要使用的缓冲效果的名称，默认值是 "swing"。jQuery 内置提供 "linear" 和 "swing" 两种效果，如果要使用更多缓冲效果，需要插件支持。</desc>
            </argument>
            <argument name="callback">
               <desc>在动画完成时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="showOrHide">
               <desc>A Boolean indicating whether to show or hide the elements.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>With no parameters, the <code>.toggle()</code> method simply toggles the visibility of elements:</p>
            <pre>$('.target').toggle();
</pre>
            <p>The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS <code>display</code> property. If the element is initially displayed, it will be hidden; if hidden, it will be shown. The <code>display</code> property is saved and restored as needed. If an element has a <code>display</code> value of <code>inline</code>, then is hidden and shown, it will once again be displayed <code>inline</code>.</p>
            <p>When a duration is provided, <code>.toggle()</code> becomes an animation method. The <code>.toggle()</code> method animates the width, height, and opacity of the matched elements simultaneously. When these properties reach 0 after a hiding animation, the <code>display</code> style property is set to <code>none</code> to ensure that the element no longer affects the layout of the page.</p>
            <p>duration 参数可以提供一个毫秒数，代表动画运行的时间，时间越长动画越慢。还可以提供字符串 <code>'fast'</code> 和 <code>'slow'</code> ，分别对应了 <code>200</code> 和 <code>600</code> 毫秒。如果没有设置 <code>duration</code> 参数，或者设置成其他无法识别的字符串，就会使用默认值 400 毫秒。</p>
            <blockquote><p>Note: The event handling suite also has a method named <a href="http://api.jquery.com/toggle-event/">.toggle()</a>. Which one is fired depends on the set of arguments passed.</p></blockquote>
            <p>从 jQuery 1.4.3 起，增加了一个可选的参数，用于确定使用的缓冲函数。缓冲函数确定了动画在不同的位置的速度。jQuery默认只提供两个缓冲效果：<code>swing</code> 和 <code>linear</code>。更多特效需要使用插件。可以访问 <a href="http://jqueryui.com">jQuery UI 网站</a> 来获得更多信息。</p>
            <p>如果提供了回调函数，那么当动画结束时，会调用这个函数。通常用来几个不同的动画依次完成。这个函数不接受任何参数，但是 <code>this</code> 会设成将要执行动画的那个元素。如果对多个元素设置动画，那么要非常注意，回调函数会在每一个动画完成的元素上都执行一次，而不是对这组动画整体才执行一次。</p>
            <p>比如下面这个页面：</p>
            <pre>&lt;div id="clickme"&gt;
  Click here
&lt;/div&gt;
&lt;img id="book" src="book.png" alt="" width="100" height="123" /&gt;
</pre>
            <p>We will cause <code>.toggle()</code> to be called when another element is clicked:</p>
            <pre>$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // 动画完成
  });
});
</pre>
            <p>With the element initially shown, we can hide it slowly with the first click:
</p>
            <p class="image four-across"> 
               <img src="images/0042_06_09.png" alt=""/>
               <img src="images/0042_06_10.png" alt=""/>
               <img src="images/0042_06_11.png" alt=""/>
               <img src="images/0042_06_12.png" alt=""/>
            </p>
            <p>A second click will show the element once again:</p>
            <p class="image four-across">
               <img src="images/0042_06_13.png" alt=""/>
               <img src="images/0042_06_14.png" alt=""/>
               <img src="images/0042_06_15.png" alt=""/>
               <img src="images/0042_06_16.png" alt=""/>
            </p>
            <p>The second version of the method accepts a Boolean parameter. If this parameter is <code>true</code>, then the matched elements are shown; if <code>false</code>, the elements are hidden. In essence, the statement:
</p>
            <pre>$('#foo').toggle(showOrHide);</pre>
            <p>is equivalent to:</p>
            <pre>if (showOrHide) {
  $('#foo').show();
} else {
  $('#foo').hide();
}
</pre>
         </longdesc>
         <example>
            <desc>Toggles all paragraphs.</desc>
         </example>
         <example>
            <desc>Animates all paragraphs to be shown if they are hidden and hidden if they are visible, 用时 600 毫秒。</desc>
         </example>
         <example>
            <desc>Shows all paragraphs, then hides them all, back and forth.</desc>
         </example>
      </entry>
      <entry type="method" name="innerWidth">
         <desc>Get the current computed width for the first element in the set of matched elements, including padding but not border.</desc>
         <signature/>
         <longdesc>
            <p>This method returns the width of the element, including left and right padding, in pixels.</p>
            <p>This method is not applicable to <code>window</code> and <code>document</code> objects; for these, use <code><a href="width.htm">.width()</a></code> instead.</p>
            <p class="image">
               <img src="images/0042_04_05.png"/>
            </p>
         </longdesc>
         <example>
            <desc>Get the innerWidth of a paragraph.</desc>
         </example>
      </entry>
      <entry type="method" name="innerHeight">
         <desc>Get the current computed height for the first element in the set of matched elements, including padding but not border.</desc>
         <signature/>
         <longdesc>
            <p>This method returns the height of the element, including top and bottom padding, in pixels.</p>
            <p>This method is not applicable to <code>window</code> and <code>document</code> objects; for these, use <code><a href="height.htm">.height()</a></code> instead.</p>
            <p class="image">
               <img src="images/0042_04_02.png"/>
            </p>
         </longdesc>
         <example>
            <desc>Get the innerHeight of a paragraph.</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.param">
         <desc>创建一个数组或者对象的序列化表示。适用于 URL 查询字符串或者 Ajax 请求。</desc>
         <signature>
            <argument name="obj">
               <desc>用于序列化的数组或对象。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="obj">
               <desc>用于序列化的数组或对象。</desc>
            </argument>
            <argument name="traditional">
               <desc>一个布尔值，用于确定是否使用传统的“浅层”序列化。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>将表单元素值转换成序列化的字符串时，jQuery 内部也会使用这个函数。参考 <a href="serialize.htm">.serialize()</a> 获得更多信息。</p>

            <p>从 jQuery 1.3 起，如果传入的 obj 是一个函数，则会执行这个函数并序列化这个函数的返回值，而不再仅仅简单地将这个函数当作字符串处理。</p>

            <p>从 jQuery 1.4 起，<code>$.param()</code> 方法将会通过深度递归的方式序列化对象，以便符合现代化脚本语言的需求，比如 PHP 和 Ruby on Rails。你也可以通过设置 <code>jQuery.ajaxSettings.traditional = true;</code> 这个选项来全局的禁用这个特性。</p>
            <p>如果传入的对象是在一个数组中，则他必须是一个对象数组，其格式要跟 <a href="serializeArray.htm">.serializeArray()</a> 返回的格式一样：</p> 
            <pre>[{name:"first",value:"Rick"},
{name:"last",value:"Astley"},
{name:"job",value:"Rock Star"}]</pre>
            <p>注意，由于某些框架能力有限，无法解析序列化数组，所以在传递 obj 参数时要务必小心，尽量不要传递含有对象的数组，或者数组中嵌套着数组。</p>
            <p>在 jQuery 1.4 中，HTML5 的表单元素也已经可以序列化了。</p>
            <p>下面我们显示一个代表对象的查询字符串，以及对应的 URI 编码版：</p>
            <pre>var myObject = {
  a: {
    one: 1, 
    two: 2, 
    three: 3
  }, 
  b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));

alert(recursiveEncoded);
alert(recursiveDecoded);
</pre>
            <p><code>recursiveEncoded</code> 和 <code>recursiveDecoded</code> 的值应该是下面的样子：</p>
            <p>
               <span class="output">a%5Bone%5D=1&amp;a%5Btwo%5D=2&amp;a%5Bthree%5D=3&amp;b%5B%5D=1&amp;b%5B%5D=2&amp;b%5B%5D=3</span>
               <br/>
               <span class="output">a[one]=1&amp;a[two]=2&amp;a[three]=3&amp;b[]=1&amp;b[]=2&amp;b[]=3</span>
            </p>
            <p>如果想要模拟 <code>$.param()</code> 函数在 jQuery 1.4 之前的行为，我们可以将 <code>traditional</code> 参数设置成 <code>true</code>:</p>
            <pre>var myObject = {
  a: {
    one: 1, 
    two: 2, 
    three: 3
  }, 
  b: [1,2,3]
};
var shallowEncoded = $.param(myObject, true);
var shallowDecoded = decodeURIComponent(shallowEncoded);

alert(shallowEncoded);
alert(shallowDecoded);
</pre>
            <p>此时，<code>recursiveEncoded</code> 和 <code>recursiveDecoded</code> 的值就成了下面的样子：</p>
            <p>
               <span class="output">a=%5Bobject+Object%5D&amp;b=1&amp;b=2&amp;b=3</span>
               <br/>
               <span class="output">a=[object+Object]&amp;b=1&amp;b=2&amp;b=3</span>
            </p>
         </longdesc>
         <example>
            <desc>序列化一个键值对对象。</desc>
         </example>
         <example>
            <desc>序列化一些复杂对象。</desc>
         </example>
      </entry>
      <entry type="method" name="hide">
         <desc>隐藏匹配的元素。</desc>
         <signature/>
         <signature>
            <argument name="duration">
               <desc>字符串("slow"或 "fast")或表示动画时长的毫秒数值</desc>
            </argument>
            <argument name="callback">
               <desc>在动画完成时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="duration">
               <desc>字符串("slow"或 "fast")或表示动画时长的毫秒数值</desc>
            </argument>
            <argument name="easing">
               <desc>要使用的缓冲效果的名称，默认值是 "swing"。jQuery 内置提供 "linear" 和 "swing" 两种效果，如果要使用更多缓冲效果，需要插件支持。</desc>
            </argument>
            <argument name="callback">
               <desc>在动画完成时执行的函数。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>隐藏元素的最简单方式就是不带参数的 <code>.hide()</code> 方法：</p>
            <pre>$('.target').hide();
</pre>
            <p>此时元素会立即隐藏起来，不带有任何动画。这基本等价于 <code>.css('display', 'none')</code> ，只不过此时 <code>display</code> 属性值会保存到 jQuery 的数据缓存中，之后还能恢复 <code>display</code> 的初始值。比如，如果一个元素的 <code>display</code> 值为 <code>inline</code>，那么当隐藏再显示时，他仍然是 <code>inline</code>。</p>
            <p>如果提供 duration 参数，<code>.hide()</code> 就变成一个动画方法了。<code>.hide()</code> 会同时对元素的高、宽以及透明度进行动画操作。当这些属性值变成 0 之后，再把 <code>display</code> 样式属性设置成 <code>none</code> 以确保这个元素不再对页面布局产生影响。</p>
            <p>duration 参数可以提供一个毫秒数，代表动画运行的时间，时间越长动画越慢。还可以提供字符串 <code>'fast'</code> 和 <code>'slow'</code> ，分别对应了 <code>200</code> 和 <code>600</code> 毫秒。如果没有设置 <code>duration</code> 参数，或者设置成其他无法识别的字符串，就会使用默认值 400 毫秒。</p>
            <p>从 jQuery 1.4.3 起，增加了一个可选的参数，用于确定使用的缓冲函数。缓冲函数确定了动画在不同的位置的速度。jQuery默认只提供两个缓冲效果：<code>swing</code> 和 <code>linear</code>。更多特效需要使用插件。可以访问 <a href="http://jqueryui.com">jQuery UI 网站</a> 来获得更多信息。</p>
            <p>如果提供了回调函数，那么当动画结束时，会调用这个函数。通常用来几个不同的动画依次完成。这个函数不接受任何参数，但是 <code>this</code> 会设成将要执行动画的那个元素。如果对多个元素设置动画，那么要非常注意，回调函数会在每一个动画完成的元素上都执行一次，而不是对这组动画整体才执行一次。</p>
            <p>比如下面这个页面：</p>
            <pre>&lt;div id="clickme"&gt;
  Click here
&lt;/div&gt;
&lt;img id="book" src="book.png" alt="" width="100" height="123" /&gt;</pre>
            <p>元素一开始显现的，我们可以让他缓慢的隐藏起来：</p>
            <pre>$('#clickme').click(function() {
  $('#book').hide('slow', function() {
    alert('Animation complete.');
  });
});</pre>

            <p class="image four-across"> 
               <img src="images/0042_06_05.png" alt=""/> 
               <img src="images/0042_06_06.png" alt=""/>
               <img src="images/0042_06_07.png" alt=""/>
               <img src="images/0042_06_08.png" alt=""/>
            </p>

         </longdesc>
         <example>
            <desc>点击链接后隐藏所有段落。</desc>
         </example>
         <example>
            <desc>把所有段落缓慢的隐藏起来，用时 600 毫秒。</desc>
         </example>
         <example>
            <desc>快速隐藏所有的 span 元素，用时 200 毫秒。一个结束后立即开始下一个。</desc>
         </example>
         <example>
            <desc>当点击 div 之后用 2 秒时间隐藏这个 div。当完全隐藏后从文档中移除。试试一次多点几个 div 看看。</desc>
         </example>
      </entry>
      <entry type="method" name="width">
         <desc>Get the current computed width for the first element in the set of matched elements.</desc>
         <signature/>
         <longdesc>
            <p>The difference between <code>.css(width)</code> and <code>.width()</code> is that the latter returns a unit-less pixel value (for example, <code>400</code>) while the former returns a value with units intact (for example, <code>400px</code>). The <code>.width()</code> method is recommended when an element's width needs to be used in a mathematical calculation.</p>
            <p class="image">
               <img src="images/0042_04_04.png"/>
            </p>
            <p>This method is also able to find the width of the window and document.</p>

            <pre>$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document</pre>

            <p>Note that <code>.width()</code> will always return the content width, regardless of the value of the CSS <code>box-sizing</code> property.</p>
         </longdesc>
         <example>
            <desc>Show various widths.  Note the values are from the iframe so might be smaller than you expected.  The yellow highlight shows the iframe body.</desc>
         </example>
      </entry>
      <entry type="method" name="width">
         <desc>Set the CSS width of each element in the set of matched elements.</desc>
         <signature>
            <argument name="value">
               <desc>An integer representing the number of pixels, or an integer along with an optional unit of measure appended (as a string).</desc>
            </argument>
         </signature>
         <signature>
            <argument name="function(index, width)">
               <desc>A function returning the width to set. Receives the index position of the element in the set and the old width as arguments.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>When calling <code>.width('value')</code>, the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, any valid CSS measurement may be used for the width (such as <code>100px</code>, <code>50%</code>, or <code>auto</code>). Note that in modern browsers, the CSS width property does not include padding, border, or margin, unless the <code>box-sizing</code> CSS property is used.</p>

            <p>If no explicit unit was specified (like 'em' or '%') then "px" is concatenated to the value.</p>

            <p>Note that <code>.width('value')</code> sets the width of the box in accordance with the CSS <code>box-sizing</code> property. Changing this property to <code>border-box</code> will cause this function to change the outerWidth of the box instead of the content width.</p>
         </longdesc>
         <example>
            <desc>To set the width of each div on click to 30px plus a color change.</desc>
         </example>
      </entry>
      <entry type="method" name="height">
         <desc>Get the current computed height for the first element in the set of matched elements.</desc>
         <signature/>
         <longdesc>
            <p>The difference between <code>.css('height')</code> and <code>.height()</code> is that the latter returns a unit-less pixel value (for example, <code>400</code>) while the former returns a value with units intact (for example, <code>400px</code>). The <code>.height()</code> method is recommended when an element's height needs to be used in a mathematical calculation.</p>
            <p class="image">
               <img src="images/0042_04_01.png"/>
            </p>

            <p>This method is also able to find the height of the window and document.</p>

            <pre>$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document</pre>

            <p>Note that <code>.height()</code> will always return the content height, regardless of the value of the CSS <code>box-sizing</code> property.</p>
         </longdesc>
         <example>
            <desc>Show various heights.  Note the values are from the iframe so might be smaller than you expected.  The yellow highlight shows the iframe body.</desc>
         </example>
      </entry>
      <entry type="method" name="height">
         <desc>Set the CSS height of every matched element.</desc>
         <signature>
            <argument name="value">
               <desc>An integer representing the number of pixels, or an integer with an optional unit of measure appended (as a string).</desc>
            </argument>
         </signature>
         <signature>
            <argument name="function(index, height)">
               <desc>A function returning the height to set. Receives the index position of the element in the set and the old height as arguments.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>When calling <code>.height(value)</code>, the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, any valid CSS measurement may be used for the height (such as <code>100px</code>, <code>50%</code>, or <code>auto</code>). Note that in modern browsers, the CSS height property does not include padding, border, or margin.</p>
            <p>If no explicit unit was specified (like 'em' or '%') then "px" is concatenated to the value.</p>
            <p>Note that <code>.height(value)</code> sets the height of the box in accordance with the CSS <code>box-sizing</code> property. Changing this property to <code>border-box</code> will cause this function to change the outerHeight of the box instead of the content height.</p>
         </longdesc>
         <example>
            <desc>To set the height of each div on click to 30px plus a color change.</desc>
         </example>
      </entry>
      <entry type="method" name="show">
         <desc>显示匹配的元素。</desc>
         <signature/>
         <signature>
            <argument name="duration">
               <desc>字符串("slow"或 "fast")或表示动画时长的毫秒数值</desc>
            </argument>
            <argument name="callback">
               <desc>在动画完成时执行的函数。</desc>
            </argument>
         </signature>
         <signature>
            <argument name="duration">
               <desc>字符串("slow"或 "fast")或表示动画时长的毫秒数值</desc>
            </argument>
            <argument name="easing">
               <desc>要使用的缓冲效果的名称，默认值是 "swing"。jQuery 内置提供 "linear" 和 "swing" 两种效果，如果要使用更多缓冲效果，需要插件支持。</desc>
            </argument>
            <argument name="callback">
               <desc>在动画完成时执行的函数。</desc>
            </argument>
         </signature>
         <longdesc>
            <p>显示元素的最简单方式就是不带参数的 <code>.show()</code> 方法：</p>
            <pre>$('.target').show();
</pre>
            <p>此时元素会立即显示起来，不带有任何动画。这基本等价于 <code>.css('display', 'block')</code> ，只不过此时 <code>display</code> 属性值会保存到 jQuery 的数据缓存中，之后还能恢复 <code>display</code> 的初始值。比如，如果一个元素的 <code>display</code> 值为 <code>inline</code>，那么当隐藏再显示时，他仍然是 <code>inline</code>。</p>
            <p>如果提供 duration 参数，<code>.show()</code> 就变成一个动画方法了。<code>.show()</code> 会同时对元素的高、宽以及透明度进行动画操作。</p>
            <p>duration 参数可以提供一个毫秒数，代表动画运行的时间，时间越长动画越慢。还可以提供字符串 <code>'fast'</code> 和 <code>'slow'</code> ，分别对应了 <code>200</code> 和 <code>600</code> 毫秒。如果没有设置 <code>duration</code> 参数，或者设置成其他无法识别的字符串，就会使用默认值 400 毫秒。</p>
            <p>从 jQuery 1.4.3 起，增加了一个可选的参数，用于确定使用的缓冲函数。缓冲函数确定了动画在不同的位置的速度。jQuery默认只提供两个缓冲效果：<code>swing</code> 和 <code>linear</code>。更多特效需要使用插件。可以访问 <a href="http://jqueryui.com">jQuery UI 网站</a> 来获得更多信息。</p>
            <p>如果提供了回调函数，那么当动画结束时，会调用这个函数。通常用来几个不同的动画依次完成。这个函数不接受任何参数，但是 <code>this</code> 会设成将要执行动画的那个元素。如果对多个元素设置动画，那么要非常注意，回调函数会在每一个动画完成的元素上都执行一次，而不是对这组动画整体才执行一次。</p>
            <p>比如下面这个页面：</p>
            <pre>&lt;div id="clickme"&gt;
  Click here
&lt;/div&gt;
&lt;img id="book" src="book.png" alt="" width="100" height="123" /&gt;</pre>
            <p>如果元素一开始隐藏的，我们可以让他缓慢的显示出来：</p>
            <pre>$('#clickme').click(function() {
  $('#book').show('slow', function() {
    // 动画完毕
  });
});</pre>
            <p class="image four-across">
               <img src="images/0042_06_01.png" alt=""/>
               <img src="images/0042_06_02.png" alt=""/>
               <img src="images/0042_06_03.png" alt=""/>
               <img src="images/0042_06_04.png" alt=""/>
            </p>

         </longdesc>
         <example>
            <desc>把所有隐藏的段落缓慢显现出来，用时 600 毫秒。</desc>
         </example>
         <example>
            <desc>把隐藏的 div 依次迅速显示出来，每个用时 200 毫秒。一个动画完成后立即开始下一个。</desc>
         </example>
         <example>
            <desc>动画显示所有 span 和 input 元素。可以试着在下面的文本框中输入 yes 并按回车。</desc>
         </example>
      </entry>
      <entry type="method" name="scrollLeft">
         <desc>Get the current horizontal position of the scroll bar for the first element in the set of matched elements.</desc>
         <signature/>
         <longdesc>
            <p>The horizontal scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very left, or if the element is not scrollable, this number will be <code>0</code>.</p>
         </longdesc>
         <example>
            <desc>Get the scrollLeft of a paragraph.</desc>
         </example>
      </entry>
      <entry type="method" name="scrollLeft">
         <desc>Set the current horizontal position of the scroll bar for each of the set of matched elements.</desc>
         <signature>
            <argument name="value">
               <desc>An integer indicating the new position to set the scroll bar to.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The horizontal scroll position is the same as the number of pixels that are hidden from view above the scrollable area. Setting the <code>scrollLeft</code> positions the horizontal scroll of each matched element.</p>
         </longdesc>
         <example>
            <desc>Set the scrollLeft of a div.</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.trim">
         <desc>Remove the whitespace from the beginning and end of a string.</desc>
         <signature>
            <argument name="str">
               <desc>The string to trim.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>$.trim()</code> function removes all newlines, spaces (including non-breaking spaces), and tabs from the beginning and end of the supplied string. If these whitespace characters occur in the middle of the string, they are preserved.</p>
         </longdesc>
         <example>
            <desc>Remove the two white spaces at the start and at the end of the string.</desc>
         </example>
         <example>
            <desc>Remove the two white spaces at the start and at the end of the string.</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.isFunction">
         <desc>Determine if the argument passed is a Javascript function object. </desc>
         <signature>
            <argument name="obj">
               <desc>Object to test whether or not it is a function.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>
               <strong>Note:</strong> As of jQuery 1.3, functions provided by the browser like <code>alert()</code> and DOM element methods like <code>getAttribute()</code> are not guaranteed to be detected as functions in browsers such as Internet Explorer.</p>
         </longdesc>
         <example>
            <desc>Test a few parameter examples.</desc>
         </example>
         <example>
            <desc>Finds out if the parameter is a funcion.</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.isArray">
         <desc>Determine whether the argument is an array.</desc>
         <signature>
            <argument name="obj">
               <desc>Object to test whether or not it is an array.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>
               <code>$.isArray()</code> returns a Boolean indicating whether the object is a JavaScript array (not an array-like object, such as a jQuery object).</p>
         </longdesc>
         <example>
            <desc>Finds out if the parameter is an array.</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.unique">
         <desc>Sorts an array of DOM elements, in place, with the duplicates removed. Note that this only works on arrays of DOM elements, not strings or numbers.</desc>
         <signature>
            <argument name="array">
               <desc>The Array of DOM elements.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>$.unique()</code> function searches through an array of objects, sorting the array, and removing any duplicate nodes. This function only works on plain JavaScript arrays of DOM elements, and is chiefly used internally by jQuery.</p>
            <p>As of jQuery 1.4 the results will always be returned in document order.</p>
         </longdesc>
         <example>
            <desc>Removes any duplicate elements from the array of divs.</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.merge">
         <desc>Merge the contents of two arrays together into the first array. </desc>
         <signature>
            <argument name="first">
               <desc>The first array to merge, the elements of second added.</desc>
            </argument>
            <argument name="second">
               <desc>The second array to merge into the first, unaltered.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>$.merge()</code> operation forms an array that contains all elements from the two arrays. The orders of items in the arrays are preserved, with items from the second array appended. The <code>$.merge()</code> function is destructive. It alters the first parameter to add the items from the second.  </p>
            <p>If you need the original first array, make a copy of it before calling <code>$.merge()</code>. Fortunately, <code>$.merge()</code> itself can be used for this duplication:</p>
            <pre>var newArray = $.merge([], oldArray);</pre>
            <p>This shortcut creates a new, empty array and merges the contents of oldArray into it, effectively cloning the array.</p>
            <p>Prior to jQuery 1.4, the arguments should be true Javascript Array objects; use <code>$.makeArray</code> if they are not.</p>
         </longdesc>
         <example>
            <desc>Merges two arrays, altering the first argument.</desc>
         </example>
         <example>
            <desc>Merges two arrays, altering the first argument.</desc>
         </example>
         <example>
            <desc>Merges two arrays, but uses a copy, so the original isn't altered.</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.inArray">
         <desc>Search for a specified value within an array and return its index (or -1 if not found).</desc>
         <signature>
            <argument name="value">
               <desc>The value to search for.</desc>
            </argument>
            <argument name="array">
               <desc>An array through which to search.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>$.inArray()</code> method is similar to JavaScript's native <code>.indexOf()</code> method in that it returns -1 when it doesn't find a match. If the first element within the array matches <code>value</code>, <code>$.inArray()</code> returns 0.</p> 

            <p>Because JavaScript treats 0 as loosely equal to false (i.e. 0 == false, but 0 !== false), if we're checking for the presence of <code>value</code> within <code>array</code>, we need to check if it's not equal to (or greater than) -1.</p>
         </longdesc>
         <example>
            <desc>Report the index of some elements in the array.</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.map">
         <desc>Translate all items in an array or array-like object to another array of items.</desc>
         <signature>
            <argument name="array">
               <desc>The Array to translate.</desc>
            </argument>
            <argument name="callback(elementOfArray, indexInArray)">
               <desc>The function to process each item against.  The first argument to the function is the list item, the second argument is the index in array The function can return any value.  <code>this</code> will be the global window object. </desc>
            </argument>
         </signature>
         <longdesc>
            <p>The $.map() method applies a function to each item in an array, collecting the results into a new array.</p> 
            <p>The translation function that is provided to this method is called for each item in the array and is passed two arguments: The item to be translated, and the index within the array.</p>

            <p>The function can return:</p>
            <ul>
               <li>the translated value, which will be mapped to the resulting array</li>
               <li>
                  <code>null</code>, to remove the item</li>
               <li>an array of values, which will be flattened into the full array</li>
            </ul>
            <p>Map can  iterate through Array-like objects, like a jQuery object, that have a length property.</p>
         </longdesc>
         <example>
            <desc>A couple examples of using .map()</desc>
         </example>
         <example>
            <desc>Maps the original array to a new one and adds 4 to each value.</desc>
         </example>
         <example>
            <desc>Maps the original array to a new one and adds 1 to each value if it is bigger then zero, otherwise it's removed.</desc>
         </example>
         <example>
            <desc>Maps the original array to a new one, each element is added with it's original value and the value plus one.</desc>
         </example>
         <example>
            <desc>Maps the original array to a new one, each element is squared.</desc>
         </example>
         <example>
            <desc>Remove items by returning <code>null</code> from the function. This removes any numbers less than 50, and the rest are decreased by 45.</desc>
         </example>
         <example>
            <desc>Augmenting the resulting array by returning an array inside the function.</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.makeArray">
         <desc>Convert an array-like object into a true JavaScript array.</desc>
         <signature>
            <argument name="obj">
               <desc>Any object to turn into a native Array.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Many methods, both in jQuery and in JavaScript in general, return objects that are array-like. For example, the jQuery factory function <code>$()</code> returns a jQuery object that has many of the properties of an array (a length, the <code>[]</code> array access operator, etc.), but is not exactly the same as an array and lacks some of an array's built-in methods (such as <code>.pop()</code> and <code>.reverse()</code>).</p>

            <p>Note that after the conversion, any special features the object had (such as the jQuery methods in our example) will no longer be present. The object is now a plain array.</p>
         </longdesc>
         <example>
            <desc>Turn a collection of HTMLElements into an Array of them.</desc>
         </example>
         <example>
            <desc>Turn a jQuery object into an array</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.grep">
         <desc>Finds the elements of an array which satisfy a filter function. The original array is not affected.</desc>
         <signature>
            <argument name="array">
               <desc>The array to search through.</desc>
            </argument>
            <argument name="function(elementOfArray, indexInArray)">
               <desc>The function to process each item against.  The first argument to the function is the item, and the second argument is the index.  The function should return a Boolean value.  <code>this</code> will be the global window object.</desc>
            </argument>
            <argument name="invert">
               <desc>If "invert" is false, or not provided, then the function returns an array consisting of all elements for which "callback" returns true.  If "invert" is true, then the function returns an array consisting of all elements for which "callback" returns false.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>$.grep()</code> method removes items from an array as necessary so that all remaining items pass a provided test. The test is a function that is passed an array item and the index of the item within the array. Only if the test returns true will the item be in the result array.</p>

            <p> The filter function will be passed two arguments: the current array item and its index. The filter function must return 'true' to include the item in the result array.</p>
         </longdesc>
         <example>
            <desc>Filters the original array of numbers leaving that are not 5 and have an index greater than 4.  Then it removes all 9s.</desc>
         </example>
         <example>
            <desc>Filter an array of numbers to include only numbers bigger then zero.</desc>
         </example>
         <example>
            <desc>Filter an array of numbers to include numbers that are not bigger than zero.</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.extend">
         <desc>Merge the contents of two or more objects together into the first object.</desc>
         <signature>
            <argument name="target">
               <desc> An object that will receive the new properties if additional objects are passed in or that will extend the jQuery namespace if it is the sole argument.</desc>
            </argument>
            <argument name="object1">
               <desc>An object containing additional properties to merge in.</desc>
            </argument>
            <argument name="objectN">
               <desc>Additional objects containing properties to merge in.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="deep">
               <desc>If true, the merge becomes recursive (aka. deep copy).</desc>
            </argument>
            <argument name="target">
               <desc>The object to extend. It will receive the new properties.</desc>
            </argument>
            <argument name="object1">
               <desc>An object containing additional properties to merge in.</desc>
            </argument>
            <argument name="objectN">
               <desc>Additional objects containing properties to merge in.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>When we supply two or more objects to <code>$.extend()</code>, properties from all of the objects are added to the target object.</p>
            <p>If only one argument is supplied to <code>$.extend()</code>, this means the target argument was omitted. In this case, the jQuery object itself is assumed to be the target. By doing this, we can add new functions to the jQuery namespace.  This can be useful for plugin authors wishing to add new methods to JQuery.</p>
            <p>Keep in mind that the target object (first argument) will be modified, and will also be returned from <code>$.extend()</code>. If, however, we want to preserve both of the original objects, we can do so by passing an empty object as the target:</p>
            <pre>var object = $.extend({}, object1, object2);</pre>

            <p>The merge performed by <code>$.extend()</code> is not recursive by default; if a property of the first object is itself an object or array, it will be completely overwritten by a property with the same key in the second object. The values are not merged. This can be seen in the example below by examining the value of banana. However, by passing <code>true</code> for the first function argument, objects will be recursively merged.</p>
            <p>Undefined properties are not copied. However, properties inherited from the object's prototype <em>will</em> be copied over.</p>
         </longdesc>
         <example>
            <desc>Merge two objects, modifying the first.</desc>
         </example>
         <example>
            <desc>Merge two objects recursively, modifying the first.</desc>
         </example>
         <example>
            <desc>Merge settings and options, modifying settings.</desc>
         </example>
         <example>
            <desc>Merge defaults and options, without modifying the defaults. This is a common plugin development pattern.</desc>
         </example>
      </entry>
      <entry type="method" name="jQuery.each">
         <desc>A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties.</desc>
         <signature>
            <argument name="collection">
               <desc>The object or array to iterate over.</desc>
            </argument>
            <argument name="callback(indexInArray, valueOfElement)">
               <desc>The function that will be executed on every object.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>$.each()</code> function is not the same as <a href="each.htm">.each()</a>, which is used to iterate, exclusively, over a jQuery object. The <code>$.each()</code> function can be used to iterate over any collection, whether it is a map (JavaScript object) or an array. In the case of an array, the callback is passed an array index and a corresponding array value each time. (The value can also be accessed through the <code>this</code> keyword, but Javascript will always wrap the <code>this</code> value as an <code>Object</code> even if it is a simple string or number value.) The method returns its first argument, the object that was iterated.</p>

            <pre>$.each([52, 97], function(index, value) { 
  alert(index + ': ' + value); 
});
</pre>
            <p>This produces two messages:</p>
            <p>
               <span class="output">0: 52</span>
               <br/>
               <span class="output">1: 97</span>
            </p>
            <p>If a map is used as the collection, the callback is passed a key-value pair each time:</p>
            <pre>var map = { 
  'flammable': 'inflammable', 
  'duh': 'no duh' 
}; 
$.each(map, function(key, value) { 
  alert(key + ': ' + value); 
});</pre>
            <p>Once again, this produces two messages:</p>
            <p>
               <span class="output">flammable: inflammable</span>
               <br/>
               <span class="output">duh: no duh</span>
            </p>
    
            <p>We can break the <code>$.each()</code> loop at a particular iteration by making the callback function return <code>false</code>. Returning <em>non-false</em> is the same as a <code>continue</code> statement in a for loop; it will skip immediately to the next iteration.</p>
         </longdesc>
         <example>
            <desc>Iterates through the array displaying each number as both a word and numeral</desc>
         </example>
         <example>
            <desc>Iterates over items in an array, accessing both the current item and its index.</desc>
         </example>
         <example>
            <desc>Iterates over the properties in an object, accessing both the current item and its key.</desc>
         </example>
      </entry>
      <entry type="property" name="jQuery.boxModel">
         <desc>
            <strong>Deprecated in jQuery 1.3 (see <a href="jQuery.support.htm">jQuery.support</a>)</strong>. States if the current page, in the user's browser, is being rendered using the <a href="http://www.w3.org/TR/REC-CSS2/box.htm">W3C CSS Box Model</a>.</desc>
         <signature/>
         <longdesc/>
         <example>
            <desc>Returns the box model for the iframe.</desc>
         </example>
         <example>
            <desc>Returns false if the page is in Quirks Mode in Internet Explorer</desc>
         </example>
      </entry>
      <entry type="method" name="scrollTop">
         <desc>Get the current vertical position of the scroll bar for the first element in the set of matched elements.</desc>
         <signature/>
         <longdesc>
            <p>The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be <code>0</code>.</p>
         </longdesc>
         <example>
            <desc>Get the scrollTop of a paragraph.</desc>
         </example>
      </entry>
      <entry type="method" name="scrollTop">
         <desc>Set the current vertical position of the scroll bar for each of the set of matched elements.</desc>
         <signature>
            <argument name="value">
               <desc>An integer indicating the new position to set the scroll bar to.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. Setting the <code>scrollTop</code> positions the vertical scroll of each matched element.</p>
         </longdesc>
         <example>
            <desc>Set the scrollTop of a div.</desc>
         </example>
      </entry>
      <entry type="property" name="jQuery.support">
         <desc>A collection of properties that represent the presence of different browser features or bugs.</desc>
         <signature/>
         <longdesc>
            <p>Rather than using <code>$.browser</code> to detect the current user agent and alter the page presentation based on which browser is running, it is a good practice to perform <strong>feature detection</strong>. This means that prior to executing code which relies on a browser feature, we test to ensure that the feature works properly. To make this process simpler, jQuery performs many such tests and makes the results available to us as properties of the <code>jQuery.support</code> object.</p>
            <p>The values of all the support properties are determined using feature detection (and do not use any form of browser sniffing). </p>

            <blockquote>
               <p>Following are a few resources that explain how feature detection works:</p>
               <ul>
                  <li>
                     <a href="http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting">http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting</a>
                  </li>
                  <li>
                     <a href="http://www.jibbering.com/faq/faq_notes/not_browser_detect.htm">http://www.jibbering.com/faq/faq_notes/not_browser_detect.html</a>
                  </li>
                  <li>
                     <a href="http://yura.thinkweb2.com/cft/">http://yura.thinkweb2.com/cft/</a>
                  </li>
               </ul>
            </blockquote>
            <p>While jQuery includes a number of properties, developers should feel free to add their own as their needs dictate. Many of the <code>jQuery.support</code> properties are rather low-level, so they are most useful for plugin and jQuery core development, rather than general day-to-day development. Since jQuery requires these tests internally, they must be performed on <em>every</em> page load; for that reason this list is kept short and limited to features needed by jQuery itself.</p>

            <p>The tests included in <code>jQuery.support</code> are as follows:</p>
            <ul>
               <li>
                  <code>boxModel</code>: Is equal to true if the page is rendering according to the <a href="http://www.w3.org/TR/REC-CSS2/box.htm">W3C CSS Box Model</a> (is currently false in IE 6 and 7 when they are in Quirks Mode). This property is null until document ready occurs.</li>
               <li>
                  <code>changeBubbles</code>: Is equal to true if the change event bubbles up the DOM tree, as required by the <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents">W3C DOM event model</a>. (It is currently false in IE, and jQuery simulates bubbling).</li>
               <li>
                  <code>cssFloat</code>: Is equal to true if the name of the property containing the CSS float value is .cssFloat, as defined in the <a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties-cssFloat">CSS Spec</a>. (It is currently false in IE, it uses styleFloat instead).</li>
               <li>
                  <code>hrefNormalized</code>: Is equal to true if the <code>.getAttribute()</code> method retrieves the <code>href</code> attribute of elements unchanged, rather than normalizing it to a fully-qualified URL. (It is currently false in IE, the URLs are normalized). 
  <div>
                     <a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-666EE0F9">DOM l3 spec</a>
                  </div>
               </li>
               <li>
                  <code>htmlSerialize</code>: Is equal to true  if the browser is able to serialize/insert <code>&lt;link&gt;</code> elements using the <code>.innerHTML</code> property of elements. (is currently false in IE). <div>
                     <a href="http://www.w3.org/TR/2008/WD-html5-20080610/serializing.html#html-fragment">HTML5 wd</a>
                  </div>
               </li>
               <li>
                  <code>leadingWhitespace</code>: Is equal to true if the browser inserts content with .innerHTML exactly as provided—specifically, if leading whitespace characters are preserved. (It is currently false in IE 6-8). <div>
                     <a href="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">HTML5 wd</a>
                  </div>
               </li>
               <li>
                  <code>noCloneEvent</code>: Is equal to true  if cloned DOM elements are created without event handlers (that is, if the event handlers on the source element are not cloned). (It is currently false in IE). <div>
                     <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Registration-interfaces-h3">DOM l2 spec</a>
                  </div>
               </li>
               <li>
                  <code>opacity</code>: Is equal to true if a browser can properly interpret the opacity style property. (It is currently false in IE, it uses alpha filters instead). <div>
                     <a href="http://www.w3.org/TR/css3-color/#transparency">CSS3 spec</a>
                  </div>
               </li>
               <li>
                  <code>scriptEval</code>: Is equal to true if inline scripts are automatically evaluated and executed when inserted to the document using standard DOM manipulation methods, such as <code>appendChild()</code> and <code>createTextNode()</code>. (It is currently false in IE, it uses <code>.text</code> to insert executable scripts). <div>
                     <a href="http://www.w3.org/TR/2008/WD-html5-20080610/tabular.html#script">HTML5 WD</a>
                  </div>
               </li>
               <li>
                  <code>style</code>: Is equal to true if inline styles for an element can be accessed through the DOM attribute called style, as required by the DOM Level 2 specification. In this case, <code>.getAttribute('style')</code> can retrieve this value; in Internet Explorer, <code>.cssText</code> is used for this purpose. <div>
                     <a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM l2 Style spec</a>
                  </div>
               </li>
               <li>
                  <code>submitBubbles</code>: Is equal to true if the submit event bubbles up the DOM tree, as required by the <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents">W3C DOM event model</a>. (It is currently false in IE, and jQuery simulates bubbling).</li>
               <li>
                  <code>tbody</code>: Is equal to true if an empty <code>&lt;table&gt;</code> element can exist without a <code>&lt;tbody&gt;</code> element. According to the HTML specification, this sub-element is optional, so the property should be true in a fully-compliant browser. If false, we must account for the possibility of the browser injecting <code>&lt;tbody&gt;</code> tags implicitly. (It is currently false in IE, which automatically inserts <code>tbody</code> if it is not present in a string assigned to <code>innerHTML</code>). <div>
                     <a href="http://dev.w3.org/html5/spec/Overview.html#the-table-element">HTML5 spec</a>
                  </div>
               </li>
            </ul>
         </longdesc>
         <example>
            <desc>Returns the box model for the iframe.</desc>
         </example>
         <example>
            <desc>Returns false if the page is in QuirksMode in Internet Explorer</desc>
         </example>
      </entry>
      <entry type="method" name="position">
         <desc>Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.</desc>
         <signature/>
         <longdesc>
            <p>The <code>.position()</code> method allows us to retrieve the current position of an element <em>relative to the offset parent</em>. Contrast this with <code><a href="offset.htm">.offset()</a></code>, which retrieves the current position <em>relative to the document</em>. When positioning a new element near another one and within the same containing DOM element, <code>.position()</code> is the more useful.</p>
            <p>Returns an object containing the properties <code>top</code> and <code>left</code>.</p>
         </longdesc>
         <example>
            <desc>Access the position of the second paragraph:</desc>
         </example>
      </entry>
      <entry type="method" name="offset">
         <desc>Get the current coordinates of the first element in the set of matched elements, relative to the document.</desc>
         <signature/>
         <longdesc>
            <p>The <code>.offset()</code> method allows us to retrieve the current position of an element <em>relative to the document</em>. Contrast this with <code>.position()</code>, which retrieves the current position <em>relative to the offset parent</em>. When positioning a new element on top of an existing one for global manipulation (in particular, for implementing drag-and-drop), <code>.offset()</code> is the more useful.</p>

            <p>
               <code>.offset()</code> returns an object containing the properties <code>top</code> and <code>left</code>.</p>
            <blockquote>
               <p>
                  <strong>Note:</strong> jQuery does not support getting the offset coordinates of hidden elements.</p>
            </blockquote>    
         </longdesc>
         <example>
            <desc>Access the offset of the second paragraph:</desc>
         </example>
         <example>
            <desc>Click to see the offset.</desc>
         </example>
      </entry>
      <entry type="method" name="offset">
         <desc>Set the current coordinates of every element in the set of matched elements, relative to the document.</desc>
         <signature>
            <argument name="coordinates">
               <desc>An object containing the properties <code>top</code> and <code>left</code>, which are integers indicating the new top and left coordinates for the elements.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="function(index, coords)">
               <desc>A function to return the coordinates to set. Receives the index of the element in the collection as the first argument and the current coordinates as the second argument. The function should return an object with the new <code>top</code> and <code>left</code> properties.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>.offset()</code> setter method allows us to reposition an element. The element's position is specified <em>relative to the document</em>. If the element's <code>position</code> style property is currently <code>static</code>, it will be set to <code>relative</code> to allow for this repositioning.</p>
         </longdesc>
         <example>
            <desc>Set the offset of the second paragraph:</desc>
         </example>
      </entry>
      <entry type="method" name="css">
         <desc>Get the value of a style property for the first element in the set of matched elements.</desc>
         <signature>
            <argument name="propertyName">
               <desc>A CSS property.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>.css()</code> method is a convenient way to get a style property from the first matched element, especially in light of the different ways browsers access most of those properties (the <code>getComputedStyle()</code> method in standards-based browsers versus the <code>currentStyle</code> and <code>runtimeStyle</code> properties in Internet Explorer) and the different terms browsers use for certain properties. For example, Internet Explorer's DOM implementation refers to the <code>float</code> property as <code>styleFloat</code>, while W3C standards-compliant browsers refer to it as <code>cssFloat</code>. The <code>.css()</code> method accounts for such differences, producing the same result no matter which term we use. For example, an element that is floated left will return the string <code>left</code> for each of the following three lines:</p>
            <ol>
	              <li>
                  <code>$('div.left').css('float');</code>
               </li>
	              <li>
                  <code>$('div.left').css('cssFloat');</code>
               </li>
	              <li>
                  <code>$('div.left').css('styleFloat');</code>
               </li>
            </ol>
            <p>Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both <code>.css('background-color')</code> and <code>.css('backgroundColor')</code>.</p>
            <p>Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: <code>$(elem).css('marginTop')</code> and <code>$(elem).css('marginRight')</code>, and so on.</p>
         </longdesc>
         <example>
            <desc>To access the background color of a clicked div.</desc>
         </example>
      </entry>
      <entry type="method" name="css">
         <desc>Set one or more CSS properties for the  set of matched elements.</desc>
         <signature>
            <argument name="propertyName">
               <desc>A CSS property name.</desc>
            </argument>
            <argument name="value">
               <desc>A value to set for the property.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="propertyName">
               <desc>A CSS property name.</desc>
            </argument>
            <argument name="function(index, value)">
               <desc>A function returning the value to set. Receives the index position of the element in the set and the old value as arguments.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="map">
               <desc>A map of property-value pairs to set.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>As with the <code>.attr()</code> method, the <code>.css()</code> method makes setting properties of elements quick and easy. This method can take either a property name and value as separate parameters, or a single map of key-value pairs (JavaScript object notation).</p>
            <p>Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both <code>.css({'background-color': '#ffe', 'border-left': '5px solid #ccc'})</code> and <code>.css({backgroundColor: '#ffe', borderLeft: '5px solid #ccc'})</code>. Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name.</p>
            <p>As with <code><a href="attr.htm">.attr()</a></code>, <code>.css()</code> allows us to pass a function as the property value:</p>
            <pre>$('div.example').css('width', function(index) {
  return index * 50;
});</pre>
            <p>This example sets the widths of the matched elements to incrementally larger values.</p>
         </longdesc>
         <example>
            <desc>To change the color of any paragraph to red on mouseover event.</desc>
         </example>
         <example>
            <desc>To highlight a clicked word in the paragraph.</desc>
         </example>
         <example>
            <desc>To set the color of all paragraphs to red and background to blue:</desc>
         </example>
         <example>
            <desc>Increase the size of a div when you click it:</desc>
         </example>
      </entry>
      <entry type="method" name="unwrap">
         <desc>Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.</desc>
         <signature/>
         <longdesc>
            <p>The <code>.unwrap()</code> method removes the element's parent. This is effectively the inverse of the <code><a href="wrap.htm">.wrap()</a></code> method. The matched elements (and their siblings, if any) replace their parents within the DOM structure.</p>
         </longdesc>
         <example>
            <desc>Wrap/unwrap a div around each of the paragraphs.</desc>
         </example>
      </entry>
      <entry type="method" name="detach">
         <desc>Remove the set of matched elements from the DOM.</desc>
         <signature>
            <argument name="selector">
               <desc>A selector expression that filters the set of matched elements to be removed.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>.detach()</code> method is the same as <code><a href="remove.htm">.remove()</a></code>, except that <code>.detach()</code> keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.</p>
         </longdesc>
         <example>
            <desc>Detach all paragraphs from the DOM</desc>
         </example>
      </entry>
      <entry type="method" name="clone">
         <desc>Create a deep copy of the set of matched elements.</desc>
         <signature>
            <argument name="withDataAndEvents">
               <desc>A Boolean indicating whether event handlers should be copied along with the elements. As of jQuery 1.4 element data will be copied as well.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>.clone()</code> method performs a <em>deep</em> copy of the set of matched elements, meaning that it copies the matched elements as well as all of their descendant elements and text nodes. When used in conjunction with one of the insertion methods, <code>.clone()</code> is a convenient way to duplicate elements on a page. Consider the following HTML:</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="hello"&gt;Hello&lt;/div&gt;
  &lt;div class="goodbye"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>As shown in the discussion for <code><a href="append.htm">.append()</a></code>,  normally when we insert an element somewhere in the DOM, it is moved from its old location. So, given the code:</p>
            <pre>$('.hello').appendTo('.goodbye');</pre>
            <p>The resulting DOM structure would be:</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="goodbye"&gt;
    Goodbye
    &lt;div class="hello"&gt;Hello&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
            <p>To prevent this and instead create a copy of the element, we could write the following:</p>
            <pre>$('.hello').clone().appendTo('.goodbye');</pre>
            <p>This would produce:</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="hello"&gt;Hello&lt;/div&gt;
  &lt;div class="goodbye"&gt;
    Goodbye
    &lt;div class="hello"&gt;Hello&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
            <blockquote>
               <p>Note that when using the <code>.clone()</code> method, we can modify the cloned elements or their contents before (re-)inserting them into the document.</p>
            </blockquote>
            <p>Normally, any event handlers bound to the original element are <em>not</em> copied to the clone. The optional <code>withDataAndEvents </code>parameter allows us to change this behavior, and to instead make copies of all of the event handlers as well, bound to the new copy of the element. As of jQuery 1.4, all element data (attached by the <code>.data()</code> method) is also copied to the new copy. </p>
         </longdesc>
         <example>
            <desc>Clones all b elements (and selects the clones) and prepends them to all paragraphs.</desc>
         </example>
      </entry>
      <entry type="method" name="remove">
         <desc>Remove the set of matched elements from the DOM.</desc>
         <signature>
            <argument name="selector">
               <desc>A selector expression that filters the set of matched elements to be removed.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Similar to <code><a href="empty.htm">.empty()</a></code>, the <code>.remove()</code> method takes elements out of the DOM. We use <code>.remove()</code> when we want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data  associated with the elements are removed.</p>
            <p>Consider the following HTML:</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="hello"&gt;Hello&lt;/div&gt;
  &lt;div class="goodbye"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>We can target any element for removal:</p>
            <pre>$('.hello').remove();</pre>
            <p>This will result in a DOM structure with the <code>&lt;div&gt;</code> element deleted:</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="goodbye"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>If we had any number of nested elements inside <code>&lt;div class="hello"&gt;</code>, they would be removed, too. Other jQuery constructs such as data or event handlers are erased as well.</p>
            <p>We can also include a selector as an optional parameter. For example, we could rewrite the previous DOM removal code as follows:</p>
            <pre>$('div').remove('.hello');</pre>
            <p>This would result in the same DOM structure:</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="goodbye"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
         </longdesc>
         <example>
            <desc>Removes all paragraphs from the DOM</desc>
         </example>
         <example>
            <desc>Removes all paragraphs that contain "Hello" from the DOM</desc>
         </example>
      </entry>
      <entry type="method" name="empty">
         <desc>Remove all child nodes of the set of matched elements from the DOM.</desc>
         <signature/>
         <longdesc>
            <p>This method removes not only child (and other descendant) elements, but also any text within the set of matched elements. This is because, according to the DOM specification, any string of text within an element is considered a child node of that element. Consider the following HTML:</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="hello"&gt;Hello&lt;/div&gt;
  &lt;div class="goodbye"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>We can target any element for removal:</p>
            <pre>$('.hello').empty();</pre>
            <p>This will result in a DOM structure with the <code>Hello</code> text deleted:</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="hello"&gt;&lt;/div&gt;
  &lt;div class="goodbye"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>If we had any number of nested elements inside <code>&lt;div class="hello"&gt;</code>, they would be removed, too. </p>
            <p>To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves.</p>
         </longdesc>
         <example>
            <desc>Removes all child nodes (including text nodes) from all paragraphs</desc>
         </example>
      </entry>
      <entry type="method" name="replaceAll">
         <desc>Replace each target element with the set of matched elements.</desc>
         <signature/>
         <longdesc>
            <p>The <code>.replaceAll()</code> method is corollary to <code><a href="replaceWith.htm">.replaceWith()</a></code>, but with the source and target reversed. Consider this DOM structure:</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="inner first"&gt;Hello&lt;/div&gt;
  &lt;div class="inner second"&gt;And&lt;/div&gt;
  &lt;div class="inner third"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>We can create an element, then replace other elements with it:</p>
            <pre>$('&lt;h2&gt;New heading&lt;/h2&gt;').replaceAll('.inner');</pre>
            <p>This causes all of them to be replaced:</p>
            <pre>&lt;div class="container"&gt;
  &lt;h2&gt;New heading&lt;/h2&gt;
  &lt;h2&gt;New heading&lt;/h2&gt;
  &lt;h2&gt;New heading&lt;/h2&gt;
&lt;/div&gt;</pre>
            <p>Or, we could select an element to use as the replacement:</p>
            <pre>$('.first').replaceAll('.third');</pre>
            <p>This results in the DOM structure:</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="inner second"&gt;And&lt;/div&gt;
  &lt;div class="inner first"&gt;Hello&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>From this example, we can see that the selected element replaces the target by being moved from its old location, not by being cloned.</p>
         </longdesc>
         <example>
            <desc>Replace all the paragraphs with bold words.</desc>
         </example>
      </entry>
      <entry type="method" name="replaceWith">
         <desc>Replace each element in the set of matched elements with the provided new content.</desc>
         <signature>
            <argument name="newContent">
               <desc>The content to insert. May be an HTML string, DOM element, or jQuery object.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="function">
               <desc>A function that returns an HTML string to replace the set of matched elements with.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>.replaceWith()</code> method allows us to remove content from the DOM and insert new content in its place with a single call. Consider this DOM structure:</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="inner first"&gt;Hello&lt;/div&gt;
  &lt;div class="inner second"&gt;And&lt;/div&gt;
  &lt;div class="inner third"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>We can replace the second inner <code>&lt;div&gt;</code> with specified HTML:</p>
            <pre>$('.second').replaceWith('&lt;h2&gt;New heading&lt;/h2&gt;');</pre>
            <p>This results in the structure:</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="inner first"&gt;Hello&lt;/div&gt;
  &lt;h2&gt;New heading&lt;/h2&gt;
  &lt;div class="inner third"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>We could equally target all inner <code>&lt;div&gt;</code> elements at once:</p>
            <pre>$('.inner').replaceWith('&lt;h2&gt;New heading&lt;/h2&gt;');</pre>
            <p>This causes all of them to be replaced:</p>
            <pre>&lt;div class="container"&gt;
  &lt;h2&gt;New heading&lt;/h2&gt;
  &lt;h2&gt;New heading&lt;/h2&gt;
  &lt;h2&gt;New heading&lt;/h2&gt;
&lt;/div&gt;</pre>
            <p>Or, we could select an element to use as the replacement:</p>
            <pre>$('.third').replaceWith($('.first'));</pre>
            <p>This results in the DOM structure:</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="inner second"&gt;And&lt;/div&gt;
  &lt;div class="inner first"&gt;Hello&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>From this example, we can see that the selected element replaces the target by being moved from its old location, not by being cloned.</p>
            <p>The <code>.replaceWith()</code> method, like most jQuery methods, returns the jQuery object so that other methods can be chained onto it. However, it must be noted that the <emphasis role="italics">original</emphasis> jQuery object is returned. This object refers to the element that has been removed from the DOM, not the new element that has replaced it.</p>
            <p>In jQuery 1.4 <code>.replaceWith()</code>, <code>.before()</code>, and <code>.after()</code> can also work on disconnected DOM nodes. For example, with the following code:</p>
            <pre>$("&lt;div/&gt;").replaceWith("&lt;p&gt;&lt;/p&gt;");</pre>
            <p>The <code>.replaceWith()</code> method returns a jQuery set containing only a paragraph.</p>
         </longdesc>
         <example>
            <desc>On click, replace the button with a div containing the same word.</desc>
         </example>
         <example>
            <desc>Replace all the paragraphs with bold words.</desc>
         </example>
         <example>
            <desc>Replace all the paragraphs with empty div elements.</desc>
         </example>
         <example>
            <desc>On click, replace each paragraph with a jQuery div object that is already in the DOM.  Notice it doesn't clone the object but rather moves it to replace the paragraph.</desc>
         </example>
      </entry>
      <entry type="method" name="wrapInner">
         <desc>Wrap an HTML structure around the content of each element in the set of matched elements.</desc>
         <signature>
            <argument name="wrappingElement">
               <desc>An HTML snippet, selector expression, jQuery object, or DOM element specifying the structure to wrap around the content of the matched elements.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="wrappingFunction">
               <desc>A callback function which generates a structure to wrap around the content of the matched elements.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>.wrapInner()</code> function can take any string or object that could be passed to the <code>$()</code> factory function to specify a DOM structure. This structure may be nested several levels deep, but should contain only one inmost element. The structure will be wrapped around the content of each of the elements in the set of matched elements.</p>
            <p>Consider the following HTML:</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>Using <code>.wrapInner()</code>, we can insert an HTML structure around the content of each inner <code>&lt;div&gt;</code> elements like so:</p>
            <pre>$('.inner').wrapInner('&lt;div class="new" /&gt;');</pre>
            <p>The new <code>&lt;div&gt;</code> element is created on the fly and added to the DOM. The result is a new <code>&lt;div&gt;</code> wrapped around the content of each matched element:</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="inner"&gt;
    &lt;div class="new"&gt;Hello&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="inner"&gt;
    &lt;div class="new"&gt;Goodbye&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
            <p>The second version of this method allows us to instead specify a callback function. This callback function will be called once for every matched element; it should return a DOM element, jQuery object, or HTML snippet in which to wrap the content of the corresponding element. For example:</p>
            <pre>$('.inner').wrapInner(function() {
  return '&lt;div class="' + this.nodeValue + '" /&gt;';
});</pre>
            <p>This will cause each <code>&lt;div&gt;</code> to have a class corresponding to the text it wraps:</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="inner"&gt;
    &lt;div class="Hello"&gt;Hello&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="inner"&gt;
    &lt;div class="Goodbye"&gt;Goodbye&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
         </longdesc>
         <example>
            <desc>Selects all paragraphs and wraps a bold tag around each of its contents.</desc>
         </example>
         <example>
            <desc>Wraps a newly created tree of objects around the inside of the body.</desc>
         </example>
         <example>
            <desc>Selects all paragraphs and wraps a bold tag around each of its contents.</desc>
         </example>
         <example>
            <desc>Selects all paragraphs and wraps a jQuery object around each of its contents.</desc>
         </example>
      </entry>
      <entry type="method" name="wrapAll">
         <desc>Wrap an HTML structure around all elements in the set of matched elements.</desc>
         <signature>
            <argument name="wrappingElement">
               <desc>An HTML snippet, selector expression, jQuery object, or DOM element specifying the structure to wrap around the matched elements.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>.wrapAll()</code> function can take any string or object that could be passed to the <code>$()</code> function to specify a DOM structure. This structure may be nested several levels deep, but should contain only one inmost element. The structure will be wrapped around all of the elements in the set of matched elements, as a single group.</p>
            <p>Consider the following HTML:</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>Using <code>.wrapAll()</code>, we can insert an HTML structure around the inner <code>&lt;div&gt;</code> elements like so:</p>
            <pre>$('.inner').wrapAll('&lt;div class="new" /&gt;');</pre>
            <p>The new <code>&lt;div&gt;</code> element is created on the fly and added to the DOM. The result is a new <code>&lt;div&gt;</code> wrapped around all matched elements:</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="new"&gt;
    &lt;div class="inner"&gt;Hello&lt;/div&gt;
    &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
         </longdesc>
         <example>
            <desc>Wrap a new div around all of the paragraphs.</desc>
         </example>
         <example>
            <desc>Wraps a newly created tree of objects around the spans.  Notice anything in between the spans gets left out like the &lt;strong&gt; (red text) in this example.  Even the white space between spans is left out.  Click View Source to see the original html.</desc>
         </example>
         <example>
            <desc>Wrap a new div around all of the paragraphs.</desc>
         </example>
         <example>
            <desc>Wrap a jQuery object double depth div around all of the paragraphs.  Notice it doesn't move the object but just clones it to wrap around its target.</desc>
         </example>
      </entry>
      <entry type="method" name="wrap">
         <desc>Wrap an HTML structure around each element in the set of matched elements.</desc>
         <signature>
            <argument name="wrappingElement">
               <desc>An HTML snippet, selector expression, jQuery object, or DOM element specifying the structure to wrap around the matched elements.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="wrappingFunction">
               <desc>A callback function which generates a structure to wrap around the matched elements.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>.wrap()</code> function can take any string or object that could be passed to the <code>$()</code> factory function to specify a DOM structure. This structure may be nested several levels deep, but should contain only one inmost element. The structure will be wrapped around each of the elements in the set of matched elements. This method returns the original set of elements for chaining purposes.</p>
            <p>Consider the following HTML:</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>Using <code>.wrap()</code>, we can insert an HTML structure around the inner <code>&lt;div&gt;</code> elements like so:</p>
            <pre>$('.inner').wrap('&lt;div class="new" /&gt;');</pre>
            <p>The new <code>&lt;div&gt;</code> element is created on the fly and added to the DOM. The result is a new <code>&lt;div&gt;</code> wrapped around each matched element:</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="new"&gt;
    &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="new"&gt;
    &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
            <p>The second version of this method allows us to instead specify a callback function. This callback function will be called once for every matched element; it should return a DOM element, jQuery object, or HTML snippet in which to wrap the corresponding element. For example:</p>
            <pre>$('.inner').wrap(function() {
  return '&lt;div class="' + $(this).text() + '" /&gt;';
});</pre>
            <p>This will cause each <code>&lt;div&gt;</code> to have a class corresponding to the text it wraps:</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="Hello"&gt;
    &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="Goodbye"&gt;
    &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
         </longdesc>
         <example>
            <desc>Wrap a new div around all of the paragraphs.</desc>
         </example>
         <example>
            <desc>Wraps a newly created tree of objects around the spans.  Notice anything in between the spans gets left out like the &lt;strong&gt; (red text) in this example.  Even the white space between spans is left out.  Click View Source to see the original html.</desc>
         </example>
         <example>
            <desc>Wrap a new div around all of the paragraphs.</desc>
         </example>
         <example>
            <desc>Wrap a jQuery object double depth div around all of the paragraphs.  Notice it doesn't move the object but just clones it to wrap around its target.</desc>
         </example>
      </entry>
      <entry type="method" name="insertBefore">
         <desc>Insert every element in the set of matched elements before the target.</desc>
         <signature>
            <argument name="target">
               <desc>A selector, element, HTML string, or jQuery object; the matched set of elements will be inserted before the element(s) specified by this parameter.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code><a href="before.htm">.before()</a></code> and <code>.insertBefore()</code> methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With<code> .before()</code>, the selector expression preceding the method is the container before which the content is inserted. With <code>.insertBefore()</code>, on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted before the target container.</p>
            <p>Consider the following HTML:</p>
            <pre>&lt;div class="container"&gt;
  &lt;h2&gt;Greetings&lt;/h2&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>We can create content and insert it before several elements at once:</p>
            <pre>$('&lt;p&gt;Test&lt;/p&gt;').insertBefore('.inner');</pre>
            <p>Each inner <code>&lt;div&gt;</code> element gets this new content:</p>
            <pre>&lt;div class="container"&gt;
  &lt;h2&gt;Greetings&lt;/h2&gt;
  &lt;p&gt;Test&lt;/p&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;p&gt;Test&lt;/p&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>We can also select an element on the page and insert it before another:</p>
            <pre>$('h2').insertBefore($('.container'));</pre>
            <p>If an element selected this way is inserted elsewhere, it will be moved before the target (not cloned):</p>
            <pre>&lt;h2&gt;Greetings&lt;/h2&gt;
&lt;div class="container"&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.</p>
         </longdesc>
         <example>
            <desc>Inserts all paragraphs before an element with id of "foo". Same as $("#foo").before("p")</desc>
         </example>
      </entry>
      <entry type="method" name="before">
         <desc>Insert content, specified by the parameter, before each element in the set of matched elements.</desc>
         <signature>
            <argument name="content">
               <desc>An element, HTML string, or jQuery object to insert before each element in the set of matched elements.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="function">
               <desc>A function that returns an HTML string to insert before each element in the set of matched elements.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>.before()</code> and <code><a href="insertBefore.htm">.insertBefore()</a></code> methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With<code> .before()</code>, the selector expression preceding the method is the container before which the content is inserted. With <code>.insertBefore()</code>, on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted before the target container.</p>
            <p>Consider the following HTML:</p>
            <pre>&lt;div class="container"&gt;
  &lt;h2&gt;Greetings&lt;/h2&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>We can create content and insert it before several elements at once:</p>
            <pre>$('.inner').before('&lt;p&gt;Test&lt;/p&gt;');</pre>
            <p>Each inner <code>&lt;div&gt;</code> element gets this new content:</p>
            <pre>&lt;div class="container"&gt;
  &lt;h2&gt;Greetings&lt;/h2&gt;
  &lt;p&gt;Test&lt;/p&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;p&gt;Test&lt;/p&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>We can also select an element on the page and insert it before another:</p>
            <pre>$('.container').before($('h2'));</pre>
            <p>If an element selected this way is inserted elsewhere, it will be moved before the target (not cloned):</p>
            <pre>&lt;h2&gt;Greetings&lt;/h2&gt;
&lt;div class="container"&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.</p>
            <p>In jQuery 1.4, <code>.before()</code> and <code>.after()</code> will also work on disconnected DOM nodes:</p>
            <pre>$("&lt;div/&gt;").before("&lt;p&gt;&lt;/p&gt;");</pre>
            <p>The result is a jQuery set that contains a paragraph and a div (in that order).</p>
         </longdesc>
         <example>
            <desc>Inserts some HTML before all paragraphs.</desc>
         </example>
         <example>
            <desc>Inserts a DOM element before all paragraphs.</desc>
         </example>
         <example>
            <desc>Inserts a jQuery object (similar to an Array of DOM Elements) before all paragraphs.</desc>
         </example>
      </entry>
      <entry type="method" name="insertAfter">
         <desc>Insert every element in the set of matched elements after the target.</desc>
         <signature>
            <argument name="target">
               <desc>A selector, element, HTML string, or jQuery object; the matched set of elements will be inserted after the element(s) specified by this parameter.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code><a href="after.htm">.after()</a></code> and <code>.insertAfter()</code> methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With<code> .after()</code>, the selector expression preceding the method is the container after which the content is inserted. With <code>.insertAfter()</code>, on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted after the target container.</p>
            <p>Consider the following HTML:</p>
            <pre>&lt;div class="container"&gt;
  &lt;h2&gt;Greetings&lt;/h2&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>We can create content and insert it after several elements at once:</p>
            <pre>$('&lt;p&gt;Test&lt;/p&gt;').insertAfter('.inner');</pre>
            <p>Each inner <code>&lt;div&gt;</code> element gets this new content:</p>
            <pre>&lt;div class="container"&gt;
  &lt;h2&gt;Greetings&lt;/h2&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;p&gt;Test&lt;/p&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
  &lt;p&gt;Test&lt;/p&gt;
&lt;/div&gt;</pre>
            <p>We can also select an element on the page and insert it after another:</p>
            <pre>$('h2').insertAfter($('.container'));</pre>
            <p>If an element selected this way is inserted elsewhere, it will be moved after the target (not cloned):</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;
&lt;h2&gt;Greetings&lt;/h2&gt;</pre>
            <p>If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.</p>
         </longdesc>
         <example>
            <desc>Inserts all paragraphs after an element with id of "foo". Same as $("#foo").after("p")</desc>
         </example>
      </entry>
      <entry type="method" name="after">
         <desc>Insert content, specified by the parameter, after each element in the set of matched elements.</desc>
         <signature>
            <argument name="content">
               <desc>An element, HTML string, or jQuery object to insert after each element in the set of matched elements.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="function(index)">
               <desc>A function that returns an HTML string to insert after each element in the set of matched elements.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>.after()</code> and <code><a href="insertAfter.htm">.insertAfter()</a></code> methods perform the same task. The major difference is in the syntax—specifically, in the placement of the content and target. With<code> .after()</code>, the selector expression preceding the method is the container after which the content is inserted. With <code>.insertAfter()</code>, on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted after the target container.</p>
            <p>Consider the following HTML:</p>
            <pre>&lt;div class="container"&gt;
  &lt;h2&gt;Greetings&lt;/h2&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>We can create content and insert it after several elements at once:</p>
            <pre>$('.inner').after('&lt;p&gt;Test&lt;/p&gt;');</pre>
            <p>Each inner <code>&lt;div&gt;</code> element gets this new content:</p>
            <pre>&lt;div class="container"&gt;
  &lt;h2&gt;Greetings&lt;/h2&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;p&gt;Test&lt;/p&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
  &lt;p&gt;Test&lt;/p&gt;
&lt;/div&gt;</pre>
            <p>We can also select an element on the page and insert it after another:</p>
            <pre>$('.container').after($('h2'));</pre>
            <p>If an element selected this way is inserted elsewhere, it will be moved after the target (not cloned):</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;
&lt;h2&gt;Greetings&lt;/h2&gt;</pre>
            <p>If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.</p>
            <h4 id="disconnected-dom-nodes">Inserting Disconnected DOM nodes</h4>
            <p>As of jQuery 1.4, <code>.before()</code> and <code>.after()</code> will also work on disconnected DOM nodes. For example, given the following code:</p>
            <pre>$('&lt;div/&gt;').after('&lt;p&gt;&lt;/p&gt;');</pre>
            <p>The result is a jQuery set containing a div and a paragraph, in that order. We can further manipulate that set, even before inserting it in the document.</p>
            <pre>$('&lt;div/&gt;').after('&lt;p&gt;&lt;/p&gt;').addClass('foo')
  .filter('p').attr('id', 'bar').html('hello')
.end()
.appendTo('body');</pre>
            <p>This results in the following elements inserted just before the closing <code>&lt;/body&gt;</code> tag:</p>
            <pre>
&lt;div class="foo"&gt;&lt;/div&gt;
&lt;p class="foo" id="bar"&gt;hello&lt;/p&gt;
</pre>
            <p>As of jQuery 1.4, <code>.after()</code> allows us to pass a function that returns the elements to insert.</p>
            <pre>$('p').after(function() {
  return '&lt;div&gt;' + this.className + '&lt;/div&gt;';
});</pre>
            <p>This inserts a <code>&lt;div&gt;</code> after each paragraph, containing the class name(s) of each paragraph in turn.</p>
         </longdesc>
         <example>
            <desc>Inserts some HTML after all paragraphs.</desc>
         </example>
         <example>
            <desc>Inserts a DOM element after all paragraphs.</desc>
         </example>
         <example>
            <desc>Inserts a jQuery object (similar to an Array of DOM Elements) after all paragraphs.</desc>
         </example>
      </entry>
      <entry type="method" name="prependTo">
         <desc>Insert every element in the set of matched elements to the beginning of the target.</desc>
         <signature>
            <argument name="target">
               <desc>A selector, element, HTML string, or jQuery object; the matched set of elements will be inserted at the beginning of the element(s) specified by this parameter.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code><a href="prepend.htm">.prepend()</a></code> and <code>.prependTo()</code> methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With<code> .prepend()</code>, the selector expression preceding the method is the container into which the content is inserted. With <code>.prependTo()</code>, on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.</p>
            <p>Consider the following HTML:</p>
            <pre>&lt;h2&gt;Greetings&lt;/h2&gt;
&lt;div class="container"&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>We can create content and insert it into several elements at once:</p>
            <pre>$('&lt;p&gt;Test&lt;/p&gt;').prependTo('.inner');</pre>
            <p>Each inner <code>&lt;div&gt;</code> element gets this new content:</p>
            <pre>&lt;h2&gt;Greetings&lt;/h2&gt;
&lt;div class="container"&gt;
  &lt;div class="inner"&gt;
    &lt;p&gt;Test&lt;/p&gt;
    Hello
  &lt;/div&gt;
  &lt;div class="inner"&gt;
    &lt;p&gt;Test&lt;/p&gt;
    Goodbye
  &lt;/div&gt;
&lt;/div&gt;</pre>
            <p>We can also select an element on the page and insert it into another:</p>
            <pre>$('h2').prependTo($('.container'));</pre>
            <p>If an element selected this way is inserted elsewhere, it will be moved into the target (not cloned):</p>
            <pre>&lt;div class="container"&gt;
  &lt;h2&gt;Greetings&lt;/h2&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.</p>
         </longdesc>
         <example>
            <desc>Prepends all spans to the element with the ID "foo"</desc>
         </example>
      </entry>
      <entry type="method" name="prepend">
         <desc>Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.</desc>
         <signature>
            <argument name="content">
               <desc>An element, HTML string, or jQuery object to insert at the beginning of each element in the set of matched elements.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="function(index, html)">
               <desc>A function that returns an HTML string to insert at the beginning of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>.prepend()</code> method inserts the specified content as the first child of each element in the jQuery collection (To insert it as the <em>last</em> child, use <a href="http://api.jquery.com/append/">
                  <code>.append()</code>
               </a>). </p>
            <p>The <code>.prepend()</code> and <code><a href="prependTo.htm">.prependTo()</a></code> methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With<code> .prepend()</code>, the selector expression preceding the method is the container into which the content is inserted. With <code>.prependTo()</code>, on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.</p>
            <p>Consider the following HTML:</p>
            <pre>&lt;h2&gt;Greetings&lt;/h2&gt;
&lt;div class="container"&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>We can create content and insert it into several elements at once:</p>
            <pre>$('.inner').prepend('&lt;p&gt;Test&lt;/p&gt;');</pre>
            <p>Each <code>&lt;div class="inner"&gt;</code> element gets this new content:</p>
            <pre>&lt;h2&gt;Greetings&lt;/h2&gt;
&lt;div class="container"&gt;
  &lt;div class="inner"&gt;
    &lt;p&gt;Test&lt;/p&gt;
    Hello
  &lt;/div&gt;
  &lt;div class="inner"&gt;
    &lt;p&gt;Test&lt;/p&gt;
    Goodbye
  &lt;/div&gt;
&lt;/div&gt;</pre>
            <p>We can also select an element on the page and insert it into another:</p>
            <pre>$('.container').prepend($('h2'));</pre>
            <p>If an element selected this way is inserted elsewhere, it will be moved into the target (not cloned):</p>
            <pre>&lt;div class="container"&gt;
  &lt;h2&gt;Greetings&lt;/h2&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.</p>
         </longdesc>
         <example>
            <desc>Prepends some HTML to all paragraphs.</desc>
         </example>
         <example>
            <desc>Prepends a DOM Element to all paragraphs.</desc>
         </example>
         <example>
            <desc>Prepends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.</desc>
         </example>
      </entry>
      <entry type="method" name="appendTo">
         <desc>Insert every element in the set of matched elements to the end of the target.</desc>
         <signature>
            <argument name="target">
               <desc>A selector, element, HTML string, or jQuery object; the matched set of elements will be inserted at the end of the element(s) specified by this parameter.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code><a href="append.htm">.append()</a></code> and <code>.appendTo()</code> methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With<code> .append()</code>, the selector expression preceding the method is the container into which the content is inserted. With <code>.appendTo()</code>, on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.</p>
            <p>Consider the following HTML:</p>
            <pre>&lt;h2&gt;Greetings&lt;/h2&gt;
&lt;div class="container"&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;
</pre>
            <p>We can create content and insert it into several elements at once:</p>
            <pre>$('&lt;p&gt;Test&lt;/p&gt;').appendTo('.inner');
</pre>
            <p>Each inner <code>&lt;div&gt;</code> element gets this new content:</p>
            <pre>&lt;h2&gt;Greetings&lt;/h2&gt;
&lt;div class="container"&gt;
  &lt;div class="inner"&gt;
    Hello
    &lt;p&gt;Test&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="inner"&gt;
    Goodbye
    &lt;p&gt;Test&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
            <p>We can also select an element on the page and insert it into another:</p>
            <pre>$('h2').appendTo($('.container'));
</pre>
            <p>If an element selected this way is inserted elsewhere, it will be moved into the target (not cloned):</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
  &lt;h2&gt;Greetings&lt;/h2&gt;
&lt;/div&gt;
</pre>
            <p>If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.</p>
         </longdesc>
         <example>
            <desc>Appends all spans to the element with the ID "foo"</desc>
         </example>
      </entry>
      <entry type="method" name="append">
         <desc>Insert content, specified by the parameter, to the end of each element in the set of matched elements.</desc>
         <signature>
            <argument name="content">
               <desc>An element, HTML string, or jQuery object to insert at the end of each element in the set of matched elements.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="function(index, html)">
               <desc>A function that returns an HTML string to insert at the end of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>.append()</code> method inserts the  specified content as the last child of each element in the jQuery collection (To insert it as the <em>first</em> child, use <a href="http://api.jquery.com/prepend/">
                  <code>.prepend()</code>
               </a>). </p>
            <p>The <code>.append()</code> and <code><a href="appendTo.htm">.appendTo()</a></code> methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With<code> .append()</code>, the selector expression preceding the method is the container into which the content is inserted. With <code>.appendTo()</code>, on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.</p>
            <p>Consider the following HTML:</p>
            <pre>&lt;h2&gt;Greetings&lt;/h2&gt;
&lt;div class="container"&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;
</pre>
            <p>We can create content and insert it into several elements at once:</p>
            <pre>$('.inner').append('&lt;p&gt;Test&lt;/p&gt;');
</pre>
            <p>Each inner <code>&lt;div&gt;</code> element gets this new content:</p>
            <pre>&lt;h2&gt;Greetings&lt;/h2&gt;
&lt;div class="container"&gt;
  &lt;div class="inner"&gt;
    Hello
    &lt;p&gt;Test&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="inner"&gt;
    Goodbye
    &lt;p&gt;Test&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
            <p>We can also select an element on the page and insert it into another:</p>
            <pre>$('.container').append($('h2'));
</pre>
            <p>If an element selected this way is inserted elsewhere, it will be moved into the target (not cloned):</p>
            <pre>&lt;div class="container"&gt;
  &lt;div class="inner"&gt;Hello&lt;/div&gt;
  &lt;div class="inner"&gt;Goodbye&lt;/div&gt;
  &lt;h2&gt;Greetings&lt;/h2&gt;
&lt;/div&gt;
</pre>
            <p>If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.</p>
         </longdesc>
         <example>
            <desc>Appends some HTML to all paragraphs.</desc>
         </example>
         <example>
            <desc>Appends an Element to all paragraphs.</desc>
         </example>
         <example>
            <desc>Appends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.</desc>
         </example>
      </entry>
      <entry type="method" name="val">
         <desc>Get the current value of the first element in the set of matched elements.</desc>
         <signature/>
         <longdesc>
            <p>The <code>.val()</code> method is primarily used to get the values of form elements. In the case of <code>&lt;select multiple="multiple"&gt;</code> elements, the <code>.val()</code> method returns an array containing each selected option.</p>

            <p>For selects and checkboxes, you can also use the <a href="selected.htm">:selected</a> and <a href="checked.htm">:checked</a> selectors to get at values, for example:</p>
            <pre>$('select.foo option:selected').val();    // get the value from a dropdown select
$('select.foo').val();                    // get the value from a dropdown select even easier
$('input:checkbox:checked').val();        // get the value from a checked checkbox
$('input:radio[name=bar]:checked').val(); // get the value from a set of radio buttons</pre>
         </longdesc>
         <example>
            <desc>Get the single value from a single select and an array of values from a multiple select and display their values.</desc>
         </example>
         <example>
            <desc>Find the value of an input box.</desc>
         </example>
      </entry>
      <entry type="method" name="val">
         <desc>Set the value of each element in the set of matched elements.</desc>
         <signature>
            <argument name="value">
               <desc>A string of text or an array of strings to set as the value property of each matched element.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="function(index, value)">
               <desc>A function returning the value to set.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>This method is typically used to set the values of form fields. For <code>&lt;select multiple="multiple"&gt;</code> elements, multiple <code>&lt;option&gt;</code>s can be selected by passing in an array.</p>
            <p>The <code>.val()</code> method allows us to set the value by passing in a function. As of jQuery 1.4, the function is passed two arguments, the current element's index and its current value: </p>
            <pre>$('input:text.items').val(function(index, value) {
  return value + ' ' + this.className;
});
</pre>
            <p>This example appends the string " items" to the text inputs' values.</p>
         </longdesc>
         <example>
            <desc>Set the value of an input box.</desc>
         </example>
         <example>
            <desc>Set a single select and a multiple select .</desc>
         </example>
      </entry>
      <entry type="method" name="text">
         <desc>Get the combined text contents of each element in the set of matched elements, including their descendants.</desc>
         <signature/>
         <longdesc>
            <p>Unlike the <code>.html()</code> method, <code>.text()</code> can be used in both XML and HTML documents. The result of the <code>.text()</code> method is a string containing the combined text of all matched elements. (Due to variations in the HTML parsers in different browsers, the text returned may vary in newlines and other white space.) Consider the following HTML:</p>
            <pre>&lt;div class="demo-container"&gt;
  &lt;div class="demo-box"&gt;Demonstration Box&lt;/div&gt;
  &lt;ul&gt;
  &lt;li&gt;list item 1&lt;/li&gt;
  &lt;li&gt;list &lt;strong&gt;item&lt;/strong&gt; 2&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
</pre>
            <p>The code <code>$('div.demo-container').text()</code> would produce the following result:</p>
            <p>
               <code>Demonstration Box list item 1 list item 2</code>
            </p>
            <p>The <code>.text()</code> method cannot be used on input elements.  For input field text, use the <a href="val.htm">.val()</a> method.</p>
            <p>As of jQuery 1.4, the <code>.text()</code> method returns the value of text and CDATA nodes as well as element nodes.</p>
         </longdesc>
         <example>
            <desc>Find the text in the first paragraph (stripping out the html), then set the html of the last paragraph to show it is just text (the red bold is gone).</desc>
         </example>
      </entry>
      <entry type="method" name="text">
         <desc>Set the content of each element in the set of matched elements to the specified text.</desc>
         <signature>
            <argument name="textString">
               <desc>A string of text to set as the content of each matched element.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="function(index, text)">
               <desc>A function returning the text content to set. Receives the index position of the element in the set and the old text value as arguments.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Unlike the <code>.html()</code> method, <code>.text()</code> can be used in both XML and HTML documents. </p>
            <p>We need to be aware that this method escapes the string provided as necessary so that it will render correctly in HTML. To do so, it calls the DOM method <code>.createTextNode()</code>, which replaces special characters with their HTML entity equivalents (such as <code>&amp;lt;</code> for <code>&lt;</code>).  Consider the following HTML:</p>
            <pre>&lt;div class="demo-container"&gt;
  &lt;div class="demo-box"&gt;Demonstration Box&lt;/div&gt;
  &lt;ul&gt;
    &lt;li&gt;list item 1&lt;/li&gt;
    &lt;li&gt;list &lt;strong&gt;item&lt;/strong&gt; 2&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</pre>
	           <p>The code <code>$('div.demo-container').text('&lt;p&gt;This is a test.&lt;/p&gt;');</code> will produce the following DOM output:</p>
	           <pre>&lt;div class="demo-container"&gt;
&amp;lt;p&amp;gt;This is a test.&amp;lt;/p&amp;gt;
&lt;/div&gt;</pre>
	           <p>It will appear on a rendered page as though the tags were exposed, like this:</p>
	           <pre>&lt;p&gt;This is a test&lt;/p&gt;</pre>
	           <p>The <code>.text()</code> method cannot be used on input elements.  For input field text, use the <a href="val.htm">.val()</a> method.</p>
            <p>As of jQuery 1.4, the <code>.text()</code> method allows us to set the text content by passing in a function.</p>
            <pre>$('ul li').text(function(index) {
  return 'item number ' + (index + 1);
});</pre>
            <p>Given an unordered list with three <code>&lt;li&gt;</code> elements, this example will produce the following DOM output:</p>
            <pre>&lt;ul&gt;
  &lt;li&gt;item number 1&lt;/li&gt;
  &lt;li&gt;item number 2&lt;/li&gt;
  &lt;li&gt;item number 3&lt;/li&gt;
&lt;/ul&gt;
</pre>
         </longdesc>
         <example>
            <desc>Add text to the paragraph (notice the bold tag is escaped).</desc>
         </example>
      </entry>
      <entry type="method" name="html">
         <desc>Get the HTML contents of the first element in the set of matched elements.</desc>
         <signature/>
         <longdesc>
            <p>This method is not available on XML documents.</p>
            <p>In an HTML document, we can use <code>.html()</code> to get the contents of any element. If the selector expression matches more than one element, only the first one's HTML content is returned. Consider this code:</p>
            <pre>$('div.demo-container').html();</pre>
            <p>In order for the following <code>&lt;div&gt;</code>'s content to be retrieved, it would have to be the first one with <code>class="demo-container"</code> in the document:</p>
            <pre>&lt;div class="demo-container"&gt;
  &lt;div class="demo-box"&gt;Demonstration Box&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>The result would look like this:</p>
            <pre>&lt;div class="demo-box"&gt;Demonstration Box&lt;/div&gt;</pre>
            <p>This method uses the browser's <code>innerHTML</code> property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters.</p>
         </longdesc>
         <example>
            <desc>Click a paragraph to convert it from html to text.</desc>
         </example>
      </entry>
      <entry type="method" name="html">
         <desc>Set the HTML contents of each element in the set of matched elements.</desc>
         <signature>
            <argument name="htmlString">
               <desc>A string of HTML to set as the content of each matched element.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="function(index, oldhtml)">
               <desc>A function returning the HTML content to set. Receives the index position of the element in the set and the old HTML value as arguments. jQuery empties the element before calling the function; use the oldhtml argument to reference the previous content.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>.html()</code> method is not available in XML documents. </p>
            <p>When we use <code>.html()</code> to set elements' contents, any contents that were in those elements is completely replaced by the new contents. Consider the following HTML:</p>
            <pre>&lt;div class="demo-container"&gt;
  &lt;div class="demo-box"&gt;Demonstration Box&lt;/div&gt;
&lt;/div&gt;</pre>
            <p>We can set the HTML contents of <code>&lt;div class="demo-container"&gt;</code> like so:</p>
            <pre>$('div.demo-container')
  .html('&lt;p&gt;All new content. &lt;em&gt;You bet!&lt;/em&gt;&lt;/p&gt;');</pre>
            <p>That line of code will replace everything inside <code>&lt;div class="demo-container"&gt;</code>:</p>
            <pre>&lt;div class="demo-container"&gt;
  &lt;p&gt;All new content. &lt;em&gt;You bet!&lt;/em&gt;&lt;/p&gt;
&lt;/div&gt;</pre>
            <p>As of jQuery 1.4, the <code>.html()</code> method allows us to set the HTML content by passing in a function.</p>
            <pre>$('div.demo-container').html(function() {
  var emph = '&lt;em&gt;' + $('p').length + ' paragraphs!&lt;/em&gt;';
  return '&lt;p&gt;All new content for ' + emph + '&lt;/p&gt;';
});</pre>

            <p>Given a document with six paragraphs, this example will set the HTML of <code>&lt;div class="demo-container"&gt;</code> to <code>&lt;p&gt;All new content for &lt;em&gt;6 paragraphs!&lt;/em&gt;&lt;/p&gt;</code>.</p>

            <p>This method uses the browser's <code>innerHTML</code> property. Some browsers may not generate a DOM that exactly replicates the HTML source provided. For example, Internet Explorer prior to version 8 will convert all <code>href</code> properties on links to absolute URLs, and Internet Explorer prior to version 9 will not correctly handle HTML5 elements without the addition of a separate <a href="http://code.google.com/p/html5shiv/">compatibility layer</a>.</p>

         </longdesc>
         <example>
            <desc>Add some html to each div.</desc>
         </example>
         <example>
            <desc>Add some html to each div then immediately do further manipulations to the inserted html.</desc>
         </example>
      </entry>
      <entry type="method" name="map">
         <desc>Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.</desc>
         <signature>
            <argument name="callback(index, domElement)">
               <desc>A function object that will be invoked for each element in the current set.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>As the return value is a jQuery-wrapped array, it's very common to <code>get()</code> the returned object to work with a basic array.</p>
            <p>The <code>.map()</code> method is particularly useful for getting or setting the value of a collection of elements. Consider a form with a set of checkboxes in it:</p>
            <pre>
&lt;form method="post" action=""&gt;
  &lt;fieldset&gt;
    &lt;div&gt;
      &lt;label for="two"&gt;2&lt;/label&gt;
      &lt;input type="checkbox" value="2" id="two" name="number[]"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label for="four"&gt;4&lt;/label&gt;
      &lt;input type="checkbox" value="4" id="four" name="number[]"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label for="six"&gt;6&lt;/label&gt;
      &lt;input type="checkbox" value="6" id="six" name="number[]"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label for="eight"&gt;8&lt;/label&gt;
      &lt;input type="checkbox" value="8" id="eight" name="number[]"&gt;
    &lt;/div&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;
</pre>
            <p>We can get a comma-separated list of checkbox <code>ID</code>s:</p>
            <pre>$(':checkbox').map(function() {
  return this.id;
}).get().join(',');</pre>
            <p>The result of this call is the string, <code>"two,four,six,eight"</code>.</p>
            <p>Within the callback function, <code>this</code> refers to the current DOM element for each iteration. The function can return an individual data item or an array of data items to be inserted into the resulting set. If an array is returned, the elements inside the array are inserted into the set. If the function returns <code>null</code> or <code>undefined</code>, no element will be inserted.</p>
         </longdesc>
         <example>
            <desc>Build a list of all the values within a form.</desc>
         </example>
         <example>
            <desc>A contrived example to show some functionality.</desc>
         </example>
         <example>
            <desc>Equalize the heights of the divs.</desc>
         </example>
      </entry>
      <entry type="method" name="is">
         <desc>Check the current matched set of elements against a selector and return true if at least one of these elements matches the selector.</desc>
         <signature>
            <argument name="selector">
               <desc>用于匹配元素的选择器字符串</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Unlike the other filtering and traversal methods, <code>.is()</code> does not create a new jQuery object. Instead, it allows us to test the contents of a jQuery object without modification. This is often useful inside callbacks, such as event handlers.</p>
            <p>Suppose we have a list, with two of its items containing a child element:</p>
            <pre>
&lt;ul&gt;
  &lt;li&gt;list &lt;strong&gt;item 1&lt;/strong&gt;&lt;/li&gt;
  &lt;li&gt;&lt;span&gt;list item 2&lt;/span&gt;&lt;/li&gt;
  &lt;li&gt;list item 3&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>We can attach a click handler to the &lt;ul&gt; element, and then limit the code to be triggered only when a list item itself, not one of its children, is clicked:</p>
            <pre>$('ul').click(function(event) {
  if ($(event.target).is('li') ) {
    $(event.target).css('background-color', 'red');
  }
});</pre>
            <p>Now, when the user clicks on the word list in the first item or anywhere in the third item, the clicked list item will be given a red background. However, when the user clicks on item 1 in the first item or anywhere in the second item, nothing will occur, because in those cases the target of the event would be <code>&lt;strong&gt;</code> or <code>&lt;span&gt;</code>, respectively.
</p>
         </longdesc>
         <example>
            <desc>Shows a few ways is() can be used inside an event handler.</desc>
         </example>
         <example>
            <desc>Returns true, because the parent of the input is a form element</desc>
         </example>
         <example>
            <desc>Returns false, because the parent of the input is a p element</desc>
         </example>
      </entry>
      <entry type="method" name="eq">
         <desc>Reduce the set of matched elements to the one at the specified index.</desc>
         <signature>
            <argument name="index">
               <desc>An integer indicating the 0-based position of the element. </desc>
            </argument>
         </signature>
         <signature>
            <argument name="-index">
               <desc>An integer indicating the position of the element, counting backwards  from the last element in the set. </desc>
            </argument>
         </signature>
         <longdesc>
            <p>Given a jQuery object that represents a set of DOM elements, the <code>.eq()</code> method constructs a new jQuery object from one element within that set. The supplied index identifies the position of this element in the set. </p>
            <p>Consider a page with a simple list on it:</p>
            <pre>
  &lt;ul&gt;
    &lt;li&gt;list item 1&lt;/li&gt;
    &lt;li&gt;list item 2&lt;/li&gt;
    &lt;li&gt;list item 3&lt;/li&gt;
    &lt;li&gt;list item 4&lt;/li&gt;
    &lt;li&gt;list item 5&lt;/li&gt;
  &lt;/ul&gt;
</pre>
            <p>We can apply this method to the set of list items:</p>
            <pre>
  $('li').eq(2).css('background-color', 'red');
</pre>
            <p>The result of this call is a red background for item 3. Note that the supplied index is zero-based, and refers to the position of the element within the jQuery object, not within the DOM tree.</p>
            <p>Providing a negative number indicates a position starting from the end of the set, rather than the beginning. For example:</p>
            <pre>
  $('li').eq(-2).css('background-color', 'red');
</pre>
            <p>This time list item 4 is turned red, since it is two from the end of the set.</p>
            <p>If an element cannot be found at the specified zero-based index, the method constructs a new jQuery object with an empty set and a <code>length</code> property of 0. </p>
            <pre>
  $('li').eq(5).css('background-color', 'red');
</pre>
            <p>Here, none of the list items is turned red, since <code>.eq(5)</code> indicates the sixth of five list items.</p>
         </longdesc>
         <example>
            <desc>Turn the div with index 2 blue by adding an appropriate class.</desc>
         </example>
      </entry>
      <entry type="method" name="filter">
         <desc>Reduce the set of matched elements to those that match the selector or pass the function's test. </desc>
         <signature>
            <argument name="selector">
               <desc>A string containing a selector expression to match the current set of elements against.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="function(index)">
               <desc>A function used as a test for each element in the set. <code>this</code> is the current DOM element.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="element">
               <desc>An element to match the current set of elements against.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="jQuery object">
               <desc>An existing jQuery object to match the current set of elements against.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Given a jQuery object that represents a set of DOM elements, the <code>.filter()</code> method constructs a new jQuery object from a subset of the matching elements. The supplied selector is tested against each element; all elements matching the selector will be included in the result.</p>
            <p>Consider a page with a simple list on it:</p>
&lt;ul&gt;
  &lt;li&gt;list item 1&lt;/li&gt;
  &lt;li&gt;list item 2&lt;/li&gt;
  &lt;li&gt;list item 3&lt;/li&gt;
  &lt;li&gt;list item 4&lt;/li&gt;
  &lt;li&gt;list item 5&lt;/li&gt;
  &lt;li&gt;list item 6&lt;/li&gt;
&lt;/ul&gt;
<p>We can apply this method to the set of list items:</p>
            <pre>
  $('li').filter(':even').css('background-color', 'red');
</pre>
            <p>The result of this call is a red background for items 1, 3, and 5, as they match the selector (recall that <code>:even</code> and <code>:odd</code> use 0-based indexing).</p>
            <h4 id="using-filter-function">Using a Filter Function</h4>
            <p>The second form of this method allows us to filter elements against a function rather than a selector. For each element, if the function returns <code>true</code>, the element will be included in the filtered set; otherwise, it will be excluded. Suppose we have a somewhat more involved HTML snippet:</p>
            <pre>
&lt;ul&gt;
  &lt;li&gt;&lt;strong&gt;list&lt;/strong&gt; item 1 -
    one strong tag&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;list&lt;/strong&gt; item &lt;strong&gt;2&lt;/strong&gt; -
    two &lt;span&gt;strong tags&lt;/span&gt;&lt;/li&gt;
  &lt;li&gt;list item 3&lt;/li&gt;
  &lt;li&gt;list item 4&lt;/li&gt;
  &lt;li&gt;list item 5&lt;/li&gt;
  &lt;li&gt;list item 6&lt;/li&gt;
&lt;/ul&gt;
</pre>
            <p>We can select the list items, then filter them based on their contents:</p>
            <pre>
$('li').filter(function(index) {
  return $('strong', this).length == 1;
}).css('background-color', 'red');
</pre>
            <p>This code will alter the first list item only, as it contains exactly one <code>&lt;strong&gt;</code> tag. Within the filter function, <code>this</code> refers to each DOM element in turn. The parameter passed to the function tells us the index of that DOM element within the set matched by the jQuery object.</p>
            <p>We can also take advantage of the <code>index</code> passed through the function, which indicates the 0-based position of the element within the unfiltered set of matched elements:</p>
            <pre>
$('li').filter(function(index) {
  return index % 3 == 2;
}).css('background-color', 'red');
</pre>
            <p>This alteration to the code will cause the third and sixth list items to be highlighted, as it uses the modulus operator (<code>%</code>) to select every item with an <code>index</code> value that, when divided by 3, has a remainder of <code>2</code>.</p>
         </longdesc>
         <example>
            <desc>Change the color of all divs then put a border around only some of them.</desc>
         </example>
         <example>
            <desc>Selects all paragraphs and removes those without a class "selected".</desc>
         </example>
         <example>
            <desc>Selects all paragraphs and removes those that aren't of class "selected" or the first one.</desc>
         </example>
         <example>
            <desc>Change the color of all divs then put a border to specific ones.</desc>
         </example>
         <example>
            <desc>Remove all elements that have a descendant ol element</desc>
         </example>
      </entry>
      <entry type="method" name="toggleClass">
         <desc>Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.</desc>
         <signature>
            <argument name="className">
               <desc>One or more class names (separated by spaces) to be toggled for each element in the matched set.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="className">
               <desc>One or more class names (separated by spaces) to be toggled for each element in the matched set.</desc>
            </argument>
            <argument name="switch">
               <desc>A boolean value to determine whether the class should be added or removed.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="function(index, class)">
               <desc>A function that returns class names to be toggled in the class attribute of each element in the matched set. Receives the index position of the element in the set and the old class value as arguments.</desc>
            </argument>
            <argument name="switch">
               <desc>A boolean value to determine whether the class should be added or removed.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>This method takes one or more class names as its parameter. In the first version, if an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added. For example, we can apply <code>.toggleClass()</code> to a simple <code>&lt;div&gt;</code>: </p>
            <pre>&lt;div class="tumble"&gt;Some text.&lt;/div&gt;
      </pre>
            <p>The first time we apply <code>$('div.tumble').toggleClass('bounce')</code>, we get the following:</p>
            <pre>&lt;div class="tumble bounce"&gt;Some text.&lt;/div&gt;
      </pre>
            <p>The second time we apply <code>$('div.tumble').toggleClass('bounce')</code>, the <code>&lt;div&gt;</code> class is returned to the single <code>tumble</code> value:</p>
            <pre>&lt;div class="tumble"&gt;Some text.&lt;/div&gt;</pre>
            <p>Applying <code>.toggleClass('bounce spin')</code> to the same <code>&lt;div&gt;</code> alternates between <code>&lt;div class="tumble bounce spin"&gt;</code> and <code>&lt;div class="tumble"&gt;</code>.</p>
            <p>The second version of <code>.toggleClass()</code> uses the second parameter for determining whether the class should be added or removed. If this parameter's value is <code>true</code>, then the class is added; if <code>false</code>, the class is removed. In essence, the statement:</p>
            <pre>$('#foo').toggleClass(className, addOrRemove);</pre>
            <p>is equivalent to:</p>
            <pre>if (addOrRemove) {
    $('#foo').addClass(className);
  }
  else {
    $('#foo').removeClass(className);
  }
  </pre>
            <p>As of jQuery 1.4, the <code>.toggleClass()</code> method allows us to indicate the class name to be toggled by passing in a function.</p>
            <pre>$('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar')) {
    return 'happy';
  } else {
    return 'sad';
  }
});</pre>
            <p>This example will toggle the <code>happy</code> class for <code>&lt;div class="foo"&gt;</code> elements if their parent element has a class of <code>bar</code>; otherwise, it will toggle the <code>sad</code> class.</p>
  
         </longdesc>
         <example>
            <desc>Toggle the class 'highlight' when a paragraph is clicked.</desc>
         </example>
         <example>
            <desc>Add the "highlight" class to the clicked paragraph on every third click of that paragraph, remove it every first and second click.</desc>
         </example>
      </entry>
      <entry type="method" name="removeClass">
         <desc>Remove a single class, multiple classes, or all classes from each element in the set of matched elements.</desc>
         <signature>
            <argument name="className">
               <desc>A class name to be removed from the class attribute of each matched element.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="function(index, class)">
               <desc>A function returning one or more space-separated class names to be removed. Receives the index position of the element in the set and the old class value as arguments.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>If a class name is included as a parameter, then only that class will be removed from the set of matched elements. If no class names are specified in the parameter, all classes will be removed.</p>
            <p>More than one class may be removed at a time, separated by a space, from the set of matched elements, like so:</p>
            <pre>$('p').removeClass('myClass yourClass')
</pre>
            <p>This method is often used with <code>.addClass()</code> to switch elements' classes from one to another, like so:</p>
            <pre>$('p').removeClass('myClass noClass').addClass('yourClass');
</pre>
            <p>Here, the <code>myClass</code> and <code>noClass</code> classes are removed from all paragraphs, while <code>yourClass</code> is added.</p>
            <p>To replace all existing classes with another class, we can use <code>.attr('class', 'newClass')</code> instead.</p>
            <p>As of jQuery 1.4, the <code>.removeClass()</code> method allows us to indicate the class to be removed by passing in a function.</p>
            <pre>$('li:last').removeClass(function() {
          return $(this).prev().attr('class');
        });</pre>
            <p>This example removes the class name of the penultimate <code>&lt;li&gt;</code> from the last <code>&lt;li&gt;</code>.</p>
         </longdesc>
         <example>
            <desc>Remove the class 'blue' from the matched elements.</desc>
         </example>
         <example>
            <desc>Remove the class 'blue' and 'under' from the matched elements.</desc>
         </example>
         <example>
            <desc>Remove all the classes from the matched elements.</desc>
         </example>
      </entry>
      <entry type="method" name="hasClass">
         <desc>Determine whether any of the matched elements are assigned the given class.</desc>
         <signature>
            <argument name="className">
               <desc>The class name to search for.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>Elements may have more than one class assigned to them. In HTML, this is represented by separating the class names with a space:</p>
            <pre>&lt;div id="mydiv" class="foo bar"&gt;&lt;/div&gt;</pre>
            <p>The <code>.hasClass()</code> method will return <code>true</code> if the class is assigned to an element, even if other classes also are. For example, given the HTML above, the following will return <code>true</code>:</p>
            <pre>$('#mydiv').hasClass('foo')</pre>
            <p>as would:</p>
            <pre>$('#mydiv').hasClass('bar')</pre>
         </longdesc>
         <example>
            <desc>Looks for the class 'selected' on the matched elements.</desc>
         </example>
      </entry>
      <entry type="method" name="removeAttr">
         <desc>Remove an attribute from each element in the set of matched elements.</desc>
         <signature>
            <argument name="attributeName">
               <desc>An attribute to remove.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>.removeAttr()</code> method uses the JavaScript <code>removeAttribute()</code> function, but it has the advantage of being able to be called directly on a jQuery object and it accounts for different attribute naming across browsers.</p>
         </longdesc>
         <example>
            <desc>Clicking the button enables the input next to it.</desc>
         </example>
      </entry>
      <entry type="method" name="attr">
         <desc>Get the value of an attribute for the first element in the set of matched elements.</desc>
         <signature>
            <argument name="attributeName">
               <desc>The name of the attribute to get.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>It's important to note that the <code>.attr()</code> method gets the attribute value for only the <em>first</em> element in the matched set. To get the value for each element individually, we need to rely on a looping construct such as jQuery's <code>.each()</code> or <code>.map()</code> method.</p>
            <p>Using jQuery's <code>.attr()</code> method to get the value of an element's attribute has two main benefits:</p>
            <ol>
               <li>
                  <strong>Convenience</strong>: It can be called directly on a jQuery object and chained to other jQuery methods.</li>
               <li>
                  <strong>Cross-browser consistency</strong>: Some attributes have inconsistent naming from browser to browser. Furthermore, the values of some attributes are reported inconsistently across browsers, and even across versions of a single browser. The <code>.attr()</code> method reduces such inconsistencies. </li>
            </ol>
            <p>If we try to get the value of an attribute that has not been set, the <code>.attr()</code> method returns <code>undefined</code>.</p>
         </longdesc>
         <example>
            <desc>Finds the title attribute of the first &lt;em&gt; in the page.</desc>
         </example>
      </entry>
      <entry type="method" name="attr">
         <desc>Set one or more attributes for the set of matched elements.</desc>
         <signature>
            <argument name="attributeName">
               <desc>The name of the attribute to set.</desc>
            </argument>
            <argument name="value">
               <desc>A value to set for the attribute.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="map">
               <desc>A map of attribute-value pairs to set.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="attributeName">
               <desc>The name of the attribute to set.</desc>
            </argument>
            <argument name="function(index, attr)">
               <desc>A function returning the value to set. <code>this</code> is the current element. Receives the index position of the element in the set and the old attribute value as arguments.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>The <code>.attr()</code> method is a convenient and powerful way to set the value of attributes—especially when setting multiple attributes or using values returned by a function. Let's consider the following image:</p>
					       <pre>&lt;img id="greatphoto" src="brush-seller.jpg" alt="brush seller" /&gt;</pre>
					       <h4>Setting a simple attribute</h4>
					       <p>We can change the <code>alt</code> attribute by simply passing the name of the attribute and its new value to the <code>.attr()</code> method:</p>
					       <pre>$('#greatphoto').attr('alt', 'Beijing Brush Seller');</pre>
					       <p>We can <em>add</em> an attribute the same way:</p>
					       <pre>$('#greatphoto')
  .attr('title', 'Photo by Kelly Clark');</pre>
				
					       <h4>Setting several attributes at once</h4>
					       <p>To change the <code>alt</code> attribute and add the <code>title</code> attribute at the same time, we can pass both sets of names and values into the method at once using a map (JavaScript object literal). Each key-value pair in the map adds or modifies an attribute:</p>
					       <pre>$('#greatphoto').attr({
  alt: 'Beijing Brush Seller',
  title: 'photo by Kelly Clark'
});</pre>
					       <p>When setting multiple attributes, the quotes around attribute names are optional.</p>
					       <p>
               <strong>WARNING</strong> When setting the 'class' attribute, you must always use quotes!</p>

				
				
					       <h4>Computed attribute values</h4>
					       <p>By using a function to set attributes, we can compute the value based on other properties of the element. For example, we could concatenate a new value with an existing value:</p>
					       <pre>$('#greatphoto').attr('title', function() {
  return this.alt + ' - photo by Kelly Clark'
});</pre>
					       <p>This use of a function to compute attribute values can be particularly useful when we modify the attributes of multiple elements at once.</p>
         </longdesc>
         <example>
            <desc>Set some attributes for all &lt;img&gt;s in the page.</desc>
         </example>
         <example>
            <desc>Disables buttons greater than the 1st button.</desc>
         </example>
         <example>
            <desc>Sets id for divs based on the position in the page.</desc>
         </example>
         <example>
            <desc>Sets src attribute from title attribute on the image.</desc>
         </example>
      </entry>
      <entry type="method" name="addClass">
         <desc>Adds the specified class(es) to each of the set of matched elements.</desc>
         <signature>
            <argument name="className">
               <desc>One or more class names to be added to the class attribute of each matched element.</desc>
            </argument>
         </signature>
         <signature>
            <argument name="function(index, class)">
               <desc>A function returning one or more space-separated class names to be added. Receives the index position of the element in the set and the old class value as arguments.</desc>
            </argument>
         </signature>
         <longdesc>
            <p>It's important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.</p>
            <p>More than one class may be added at a time, separated by a space, to the set of matched elements, like so:</p>
            <pre>$('p').addClass('myClass yourClass');</pre>
            <p>This method is often used with <code>.removeClass()</code> to switch elements' classes from one to another, like so:</p>
            <pre>$('p').removeClass('myClass noClass').addClass('yourClass');</pre>
            <p>Here, the <code>myClass</code> and <code>noClass</code> classes are removed from all paragraphs, while <code>yourClass</code> is added.</p>
            <p>As of jQuery 1.4, the <code>.addClass()</code> method allows us to set the class name by passing in a function.</p>
            <pre>$('ul li:last').addClass(function() {
  return 'item-' + $(this).index();
});</pre>
            <p>Given an unordered list with five <code>&lt;li&gt;</code> elements, this example adds the class "item-4" to the last <code>&lt;li&gt;</code>.</p>


         </longdesc>
         <example>
            <desc>Adds the class 'selected' to the matched elements.</desc>
         </example>
         <example>
            <desc>Adds the classes 'selected' and 'highlight' to the matched elements.</desc>
         </example>
      </entry>
   </entries>
</api>