jQuery 1.6+新增的方法介绍
admin 13年前
<div> <p>jQuery是一个积极开发的JavaScript库并拥有一个较快的发布周期。每一次发布都会有增强，性能调整和bug修复，并且也会有新的方法经常添加到库中。</p> <p>在这篇文章中，我们将看看在已经发布的1.6+版本之后一些新增加/增强的方法。</p> <h2>Delaying the ready event with the holdReady() method</h2> <p>The holdReady() method is used to delay the firing of jQuery’s ready event, a cornerstone event which is popularly used to execute custom code once the DOM is ready to be manipulated. As of jQuery 1.6 we can now postpone the triggering of this event for an arbitrary length of time in order to wait for other conditions to be satisfied, such as the loading of a plugin.</p> <p>It’s a dual-purpose method, as is the jQuery way, and can be used to both delay the event and release the event using the same simple signature. The method accepts a Boolean argument which specifies whether the event should be held or released.</p> <p>One downside to this method is that it should be called as early in the document as possible, such as in the <head> of the page, and can obviously only be called after jQuery itself has loaded. As we know, for performance reasons, scripts should usually be placed as close to the end of the document as possible, so moving jQuery to the <head> should only be considered when absolutely required.</p> <p>Using holdReady() is super easy; as early in the document loading as possible simply call the method with the value true as the argument:</p> <pre class="brush: js">jQuery.holdReady(true);</pre> <p>Then, once the additional file(s) you require have loaded, call the method again with the value false:</p> <pre class="brush: js">jQuery.holdReady(false);</pre> <h2>Adding and removing element properties</h2> <p>The prop() method is a way to explicitly retrieve element property values. There is a subtle difference between properties and attributes and this difference used to cause occasional issues when trying to get or set property values using jQuery’s attr() method.</p> <p>The classic example is with checkbox elements; there were sometimes issues when trying to dynamically set the checked property using the attr() method. When the prop() method was released in version 1.6 the attr() method was changed so that it retuned only the initial state of the property, however this was changed in the 1.6.1 release so that it also returns the current state when using attr(). To use the prop() method we use the same syntax as with attr():</p> <pre class="brush: js">$("input[type='checkbox']).prop("checked");</pre> <p>The method in this format returns the current value. To use the method in setter mode we just supply a second argument specifying what we would like the value to be.</p> <p>The prop() method can also be used to set custom properties on elements, and you should note that the method only returns the property value for the first element in a collection, not each element in the collection.</p> <p>To remove custom properties, the new removeProp() method is also available since jQuery 1.6. This method should only be used to remove custom properties; if native properties are removed it is not possible for them to be re-added. Custom properties should always be removed before the element that they have been added to is removed from the DOM in order to prevent memory leaks in old versions of IE.</p> <h2>Promise objects</h2> <p>The new promise() method returns a promise object that can be used to execute arbitrary code once all actions on each element in the collection the method is attached to have completed. By default the promise object monitors fx queues, but custom queues can also be specified by supplying an optional first argument to the method. The object that the promise methods are attached to can also be specified using an optional second argument to avoid creating a new object.</p> <p>The method can be used in conjunction with methods such as done() to execute a function when all animations on an element have completed:</p> <pre class="brush: js">$("#animated").promise().done(function () { //do stuff });</pre> <h2>A new selector</h2> <p>We can now make use of the :focus pseudo-selector to select a focused element, or determine whether an element has focus, a great new addition that could help save on convoluted work-arounds.<span> </span></p> <h2>New deferred methods</h2> <p>jQuery 1.6 brings two new methods for use with deferred objects; the first is the always() method which can be used to execute a function regardless of whether the deferred object is resolved or rejected. The second new method is pipe(), which can be used to filter deferred objects either when they resolve or fail. The method returns either a filtered value which can be passed to the done() or fail() methods of the deferred object the pipe() method is attached to, or a new promise object.</p> <h2>Method updates</h2> <p>In addition to the totally new methods we’ve looked at so far, some of jQuery’s existing methods have also been modified, these include:</p> <table border="1" cellspacing="0" cellpadding="0"> <tbody> <tr> <td valign="top" width="127">attr()</td> <td valign="top" width="489">This method now returns undefined when retrieving an attribute that has not been set</td> </tr> <tr> <td valign="top" width="127">closest()</td> <td valign="top" width="489">This method now accepts jQuery elements and DOM nodes as the filter</td> </tr> <tr> <td valign="top" width="127">find()</td> <td valign="top" width="489">This method now accepts jQuery elements and DOM nodes as the filter</td> </tr> <tr> <td valign="top" width="127">Is()</td> <td valign="top" width="489">This method now accepts jQuery elements and DOM nodes as the filter</td> </tr> <tr> <td valign="top" width="127">map()</td> <td valign="top" width="489">This method can now iterate over objects as well as arrays</td> </tr> <tr> <td valign="top" width="127">nextUntil()</td> <td valign="top" width="489">This method now accepts jQuery elements and DOM nodes as the filter</td> </tr> <tr> <td valign="top" width="127">parentsUntil()</td> <td valign="top" width="489">This method now accepts jQuery elements and DOM nodes as the filter</td> </tr> <tr> <td valign="top" width="127">prevUntil()</td> <td valign="top" width="489">This method now accepts jQuery elements and DOM nodes as the filter</td> </tr> <tr> <td valign="top" width="127">Undelegate()</td> <td valign="top" width="489">This method can now unbind all event handlers from a namespace</td> </tr> </tbody> </table> <h2>Summary</h2> <p>In this article we’ve focused on the new methods exposed by the 1.6 version of the jQuery JavaScript library, as well as the changes to existing methods. The information provided is just a quick summary, so I’d recommend a trip to the jQuery docs pages for further information when using any of the new methods.</p> <p>I’d also recommend learning how they work and getting familiar with them quickly, it won’t be long before jQuery 1.7 is released.</p> </div>