ホームページ > 記事 > ウェブフロントエンド > jQuery 1.4 知っておくべき15の新機能 (翻訳)_jquery

jQuery 1.4 知っておくべき15の新機能 (翻訳)_jquery

WBOYオリジナル: 2016-05-16 18:35:53941ブラウズ

首先现在你可以从这里下载最新的1.4的版本了: <a href="http://code.jquery.com/jquery-1.4.js">http://code.jquery.com/jquery-1.4.js</a> <h3>1. 传递属性给jQuery </h3> 1.4之前的版本中jQuery就通过"attr”方法支持了添加属性到元素集合中，"attr”方法不仅可以传递属性名和值，也可以传递包含有多个属性的对象集合。在1.4中，除了可以创建新的对象，现在它更能将属性对象作为参数传递给jQuery函数或对象自身。如你可以创建一个含有多个属性的链接元素，通过1.4代码如下： <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div>  jQuery('<a/>', { id: 'gid', href: 'http://www.google.com', title: 'google非和谐版', rel: 'external', text: '进入Google!' }); </div></pre></div> 你可能会注意到"text”属性并且猜测它是干吗的，因为a标签是没有"text”属性的。呵呵，当你传递某些属性时，jquery 1.4同样会检查并使用它自己的方法。因此上面的"text”属性可以让jQuery调用它的".text()”方法并将"进入Google!“作为它的唯一参数。 这里给出一个更好的例子： <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div>  jQuery('<div/>', { id: 'foo', css: { fontWeight: 700, color: 'green' }, click: function(){ alert('Foo被点击过!'); } }); </div></pre></div> "id”属性是作为一个普通属性被添加的。但"css”和"click”属性则对应特定的jQuery方法。上面的代码在1.4之前一种写法如下： <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div>  jQuery('<div/>') .attr('id', 'foo') .css({ fontWeight: 700, color: 'green' }) .click(function(){ alert('Foo被点击过!'); }); </div></pre></div> <a href="http://api.jquery.com/jQuery/">更多关于jQuery特性</a> <h3>2. 所有的东西都可以"until“了</h3> 1.4新增了三个对DOM操作的方法，他们分别是"<code>nextUntil</code>", "<code>prevUntil</code>" 和 "<code>parentsUntil</code>"。这些方法会按照某个顺序去遍历DOM对象直到满足指定的筛选条件。假设我们有一个水果列表： <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div> <ul> <li>苹果</li> <li>香蕉</li> <li>葡萄</li> <li>草莓</li> <li>例子</li> <li>桃子</li> </ul> </div></pre></div> 如果你想选择所有在"Apple”和"Strawberry”之间的元素。代码可以这样写： <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div>  jQuery('ul li:contains(苹果)').nextUntil(':contains(梨子)'); // 得到香蕉，葡萄，草莓 </div></pre></div> 更多关于: <a href="http://api.jquery.com/prevUntil/">prevUntil</a>, <a href="http://api.jquery.com/nextUntil/">nextUntil</a>, <a href="http://api.jquery.com/parentsUntil/">parentsUntil</a> <h3>3. 绑定多个事件</h3> 与通过jquery链绑定多个方法到一起相比，现在你可以通过一次调用来绑定所有这些事件，如： <div class="cnblogs_code" onclick="cnblogs_code_show('f34285c2-08ac-439d-99d2-19370a4cf75e')"> <img class="code_img_closed" id="code_img_closed_f34285c2-08ac-439d-99d2-19370a4cf75e" style="max-width:90%" src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt="jQuery 1.4 知っておくべき15の新機能 (翻訳)_jquery" ><img class="code_img_opened" id="code_img_opened_f34285c2-08ac-439d-99d2-19370a4cf75e" onclick="cnblogs_code_hide('f34285c2-08ac-439d-99d2-19370a4cf75e',event)" src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="jQuery 1.4 知っておくべき15の新機能 (翻訳)_jquery" > <div id="cnblogs_code_open_f34285c2-08ac-439d-99d2-19370a4cf75e"><pre class="brush:php;toolbar:false"><div> jQuery('#foo).bind({ click: function() { // 具体代码 }, mouseover: function() { // 具体代码 }, mouseout: function() { // 具体代码 } }) </div></pre></div> </div> 你也可以通过 "<code>.one()</code>"方法操作。 <a href="http://api.jquery.com/bind/">更多关于.bind(…)</a> <h3>4. Per-Property Easing</h3> 与给一个动画仅仅定义一个缓动效果相比，现在你可以给你想要添加动画效果的属性定义不同的缓动函数了。jQuery包含两个缓动函数，旋转(默认)和线性移动。如果你需要其他的效果的话，你需要去<a href="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js">单独下载它们 </a>! 要给每个属性指定一个缓动函数的话，你可以简单的通过属性数组来达到目的，在数组中，第一个值是你想要实现的效果值，第二个参数则是使用的缓动函数，如： <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div>  jQuery('#foo').animate({ left: 500, top: [500, 'easeOutBounce'] }, 2000); </div></pre></div> <a href="http://james.padolsey.com/demos/jquery/easing/easing-jq14.html">查看代码演示!</a> 你也可以以键值对的形式在那些可选设置项中单独指定属性缓动函数： <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div>  jQuery('#foo').animate({ left: 500, top: 500 }, { duration: 2000, specialEasing: { top: 'easeOutBounce' } }); </div></pre></div> 原文作者注 - 小小谦虚一下，这个新特性是作者James Padolsey的主意! <a href="http://api.jquery.com/animate/#per-property-easing">更多关于per-property easing</a> <h3>5. 新的Live事件!</h3> 1.4添加了对"submit”,"change”,"focus”,和"blur”事件的委托支持。在jQuery中，我们可以使用".live()”方法去委托事件。这在你需要注册事件到大量元素中或新的元素需要不断的被添加(使用".live()”会比不断的重新绑定事件更高效)将会很有用。 但是，注意！如果你需要委托"focus”和"blur”事件的时候，你必须使用"focusin”和"focusout”事件名称！ <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div> jQuery('input').live('focusin', function(){ //具体操作 }); </div></pre></div> <h3>6. 控制函数的上下文</h3> jQuery 1.4提供了一个新的叫"proxy”的函数，它在jQuery命名空间下。该函数需要两个参数，不管是代码域还是方法名，或者是函数和其所处的代码域。t"this”关键字在JavaScrip中是相当难掌握的。有时候你可能期待它指的是你之前创建的某个对象，而不是一个你可能没想到的元素。 举例说明，假设我们有一个"app”对象，它有两个属性，一个是"clickHandler”方法, 另外一个则是一个config对象。 <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div> var app = { config: { clickMessage: '你好!' }, clickHandler: function() { alert(this.config.clickMessage); } }; </div></pre></div> 当我们调用如"<code>app.clickHandler()</code>"时，"<code>clickHandler</code>"会将"app”作为其上下文。这意味着在这里"<code>this</code>"关键字将允许其访问"<code>app</code>"。这在我们简单调用下面函数时没什么问题： <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div> app.clickHandler(); // "你好!" 消息触发 </div></pre></div> 让我们试试将其作为事件绑定会有什么情况： <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div> jQuery('a').bind('click', app.clickHandler); </div></pre></div> 当我们点击一个链接的时候什么都不会发生，函数不会工作。这是因为jQuery(其他任何正常的事件模型同样如此)默认会把目标元素a设置成为事件的上下文。即"this”现在其实是指刚刚被点击过的元素a。但我们实际上并不想这样子的。我们期待"this”应该被设置为"app”.在jQuery 1.4中实现这个再简单不过了： <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div> jQuery('a').bind( 'click', jQuery.proxy(app, 'clickHandler') ); </div></pre></div> 现在无论什么时候一个链接被点击到，"你好"的消息都会被触发了！ proxy函数会返回一个你的函数被"包装过"之后的对象，在该对象中，"this”被设置成任意你指定的对象。这在其他的情景下同样有用，如传递回调函数给其他的jQuery对象或者一些插件的时候。 更多关于<a href="http://api.jquery.com/jQuery.proxy"><code>jQuery.proxy</code></a> <h3>7. 在动画中添加停顿</h3> 现在你可以再你的动画队列中添加停顿效果了。事实上，任何队列中都可以添加该函数，但最常用的情况应该还是在使用"fx”队列的时候。这允许你在多个动作中间添加暂停而不需要通过回调函数去调用"<code>setTimeout</code>"。"<code>.delay()</code>" 函数的第一个参数是你想停顿的毫秒数。 <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div> jQuery('#foo') .slideDown() // Slide down .delay(200) // 停顿 200 ms .fadeIn(); // Fade in </div></pre></div> 如果你想给其他不是默认的"fx”的队列也添加停顿的话，这时候，你需要将队列名作为第二个参数传递给"<code>.delay()</code>"。 <a href="http://api.jquery.com/delay">更多关于<code>.delay(…)</code></a> <h3>8. 检查元素是否拥有某对象</h3> 通过".has()”方法，jQuery 1.4使得检查一个元素(或者集合)是不是有某对象变得相当简单。从程序角度看，它和jQuery的selector过滤器":has()”是一样的。该方法会返回在当前集合中所有包含有至少一个符合条件的元素数组。 <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div> jQuery('div').has('ul'); </div></pre></div> 上面方法会返回所有包含有UL元素的DIV元素数组。在这种情况下，你可能会更倾向于简单使用选择器的过滤器("<code>:has()</code>"), 但当你需要通过代码过滤一个数组的时候，该方法仍会很有用。 1.4同样在jQuery命名空间下添加了新的"<code>contains</code>"函数。这是一个低级的函数，它接受两个DOM节点作为参数。它会返回一个布尔值来表示后面一个元素是否在前面一个元素中存在。如： <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div> jQuery.contains(document.documentElement, document.body); // 返回true - <body>在<html>存在 </div></pre></div> 更多关于: <a href="http://api.jquery.com/has/"><code>.has(…)</code></a>, <a href="http://api.jquery.com/jQuery.contains/"><code>jQuery.contains(…)</code></a> <h3>9. 去掉元素的包装</h3> ".warp()”已经在jQuery中有段日子了，现在跟它对应的".unwrap()”方法也被加进到1.4中了。这个方法刚好跟warp()方法相反。假设有下面的DOM结构： <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div> <div> <p>Foo</p> </div> </div></pre></div> 我们可以用下面的函数去掉段落元素的外层： <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div> jQuery('p').unwrap(); </div></pre></div> 最终的DOM结构如下： <div class="syntaxhighlighter xml" id="highlighter_279734"> <div class="bar"> <div class="toolbar"> <a class="item viewSource" title="view source" style="WIDTH: 16px; HEIGHT: 16px" href="http://www.cnblogs.com/jujusharp/archive/2010/01/24/jquery-1-4-the-15-new-features-you-must-know.html#viewSource" commandname="viewSource" highlighterid="highlighter_279734">view source</a> <div class="item copyToClipboard"> <object id="highlighter_279734_clipboard" title="copy to clipboard" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" type="application/x-shockwave-flash" height="16" width="16" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"><param name="_cx" value="423"> <param name="_cy" value="423"> <param name="FlashVars" value=""> <param name="Movie" value="http://common.cnblogs.com/flash/clipboard.swf"> <param name="Src" value="http://common.cnblogs.com/flash/clipboard.swf"> <param name="WMode" value="Transparent"> <param name="Play" value="-1"> <param name="Loop" value="-1"> <param name="Quality" value="High"> <param name="SAlign" value=""> <param name="Menu" value="0"> <param name="Base" value=""> <param name="AllowScriptAccess" value="always"> <param name="Scale" value="ShowAll"> <param name="DeviceFont" value="0"> <param name="EmbedMovie" value="0"> <param name="BGColor" value=""> <param name="SWRemote" value=""> <param name="MovieData" value=""> <param name="SeamlessTabbing" value="1"> <param name="Profile" value="0"> <param name="ProfileAddress" value=""> <param name="ProfilePort" value="0"> <param name="AllowNetworking" value="all"> <param name="AllowFullScreen" value="false"></object> </div> <a class="item printSource" title="print" style="WIDTH: 16px; HEIGHT: 16px" href="http://www.cnblogs.com/jujusharp/archive/2010/01/24/jquery-1-4-the-15-new-features-you-must-know.html#printSource" commandname="printSource" highlighterid="highlighter_279734">print</a><a class="item about" title="?" style="WIDTH: 16px; HEIGHT: 16px" href="http://www.cnblogs.com/jujusharp/archive/2010/01/24/jquery-1-4-the-15-new-features-you-must-know.html#about" commandname="about" highlighterid="highlighter_279734">?</a> </div> </div> <div class="lines"> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>1</code></td> <td class="content"><code class="xml plain"><</CODE><CODE class="xml keyword">p</CODE><CODE class="xml plain">>Foo</</CODE><CODE class="xml keyword">p</CODE><CODE class="xml plain">></code></td> </tr> </tbody> </table> </div> </div> </div> 注意，这个方法处理比较简单，它会移掉任何元素的父节点。 <a href="http://api.jquery.com/unwrap/">更多关于 <code>.unwrap(…)</code></a> <h3>10. detach() vs remove()</h3> 新的".detach()”方法允许你从DOM中移掉元素，这跟".remove()”很像。但与".remove()”有本质不同的是"detach()”不会将jQuery赋给该元素的数据也给注销掉。这包含通过".data()”和其他任意的通过jQuery的事件系统添加的事件等数据。 如果你想从DOM中移除某个元素，但你又可能需要在后面的某个时候把该元素重新添加到DOM中的时候这个函数将会很有用，这时候该元素的事件和其他的数据都会被保留下来。 <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div> var foo = jQuery('#foo'); // 绑定一个重要的事件 foo.click(function(){ alert('Foo!'); }); foo.detach(); // 从 DOM中移除事件 // … 其他操作 foo.appendTo('body'); // 将元素重新加入到 DOM foo.click(); // 弹出 "Foo!" </div></pre></div> <a href="http://api.jquery.com/detach">更多 <code>.detach(…)</code></a> <h3>11. index(…) 加强</h3> jQuery 1.4中我们有两种使用".index()”方法的方式。首先，你可以仅仅将一个元素自身作为参数，这样你可以得到该元素在当前集合中所处的索引位置值。 如果不设置参数的话，现在会返回该元素的兄弟节点。因此，假设有下面的DOM结构： <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div> <ul> <li>苹果</li> <li>香蕉</li> <li>葡萄</li> <li>草莓</li> <li>例子</li> <li>桃子</li> </ul> </div></pre></div> 当一个节点被点击的时候，你如果想找到在所有的节点集合中被单击的节点的位置，你可以这样写： <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div> jQuery('li').click(function(){ alert( jQuery(this).index() ); }); </div></pre></div> jQuery 1.4还允许你指定一个选择器作为".index()”的第一个参数，这样它会返回该元素在选择器中产生的元素集合中的位置。 最后需要注意的是，如果该元素在集合中存在的话，该函数会返回一个其位置的整数，如果不存在，则返回-1。 <a href="http://api.jquery.com/index">更多关于 <code>.index(…)</code></a> <h3>12. DOM 操作的方法支持回调函数</h3> 大部分对DOM进行操作的函数现在都支持传递函数作为唯一参数了(如果是".css()”和".attr()”的情况的话，它会作为第二参数)。该函数会在集合中的每个元素上都执行一次，从而确定哪些应作为该函数的实际值提供给回调函数调用。 下面给出所有支持该功能的函数列表: <ul> <li> <a href="http://api.jquery.com/after">after</a> </li> <li> <a href="http://api.jquery.com/before">before</a> </li> <li> <a href="http://api.jquery.com/append">append</a> </li> <li> <a href="http://api.jquery.com/prepend">prepend</a> </li> <li> <a href="http://api.jquery.com/addClass">addClass</a> </li> <li> <a href="http://api.jquery.com/toggleClass">toggleClass</a> </li> <li> <a href="http://api.jquery.com/removeClass">removeClass</a> </li> <li> <a href="http://api.jquery.com/wrap">wrap</a> </li> <li> <a href="http://api.jquery.com/wrapAll">wrapAll</a> </li> <li> <a href="http://api.jquery.com/wrapInner">wrapInner</a> </li> <li> <a href="http://api.jquery.com/val">val</a> </li> <li> <a href="http://api.jquery.com/text">text</a> </li> <li> <a href="http://api.jquery.com/replaceWith">replaceWith</a> </li> <li> <a href="http://api.jquery.com/css">css</a> </li> <li> <a href="http://api.jquery.com/attr">attr</a> </li> <li> <a href="http://api.jquery.com/html">html</a> </li> </ul> 通过回调函数，你可以通过"this”访问数组中的当前元素，还可以通过第一个参数得到它在数组中的位置。 <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div> jQuery('li').html(function(i){ return '该列表中的索引位置: ' + i; }); </div></pre></div> 同样，你也可以通过上面的某些方法得到另外一个参数，如果你调用一个setter方法(如".html()”或".attr(‘href')")你就可以直接访问当前的值了。如： <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div> jQuery('a').attr('href', function(i, currentHref){ return currentHref + '?foo=bar'; }); </div></pre></div> 正如上面看到的，在使用"<code>.css()</code>" 和 "<code>.attr()</code>" 方法时，因为第一个参数需要被用作指定那些你需要设置或改变的属性名，你需要将回调函数作为第二参数。 <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div> jQuery('li').css('color', function(i, currentCssColor){ return i % 2 ? 'red' : 'blue'; }); </div></pre></div> <h3>13. 对象类型判断</h3> jQuery 1.4添加了两个新的方法(直接放到了jQuery命名空间下面)以方便我们来判断当前处理的对象的类型。 首先是方法"isEmptyObject”，顾名思义，这个函数会返回一个布尔值来表明传递的对象是不是空对象(缺乏属性--无论是对象自身还是继续的对象)。其次是方法"isPlainObject”，它会返回一个布尔值来表明操作的对象是否是一个简单的js对象(指通过"{ }"或者"new Object”创建的对象)。 <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div> jQuery.isEmptyObject({}); // true jQuery.isEmptyObject({foo:1}); // false jQuery.isPlainObject({}); // true jQuery.isPlainObject(window); // false jQuery.isPlainObject(jQuery()); // false </div></pre></div> 更多关于: <a href="http://api.jquery.com/jQuery.isPlainObject"><code>isPlainObject(…)</code></a>, <a href="http://api.jquery.com/jQuery.isEmptyObject"><code>isEmptyObject(…)</code></a> <h3>14. Closest(…) 增强</h3> jQuery的".closest()”方法现在可以接受一组选择器了。如果开发人员想遍历一个元素的祖先，并在其中查找离其最近的那些符合某些特征的节点的时候，这会很有用。 另外，该函数现在也接受将上下文作为第二参数了。这意味着你现在可以控制你想在DOM中遍历的元素范围了。虽然这两种情况我们一般很少用到，不过它们在jQuery内部被很好的使用。 <a href="http://api.jquery.com/closest">更多关于 <code>.closest(…)</code></a> <h3>15. 新的事件! focusIn 和focusOut</h3> 上文已经提到，为了委托"focus”和"blur”事件你需要这些新的事件，它们是"focusin”和"focusout”。这些新的事件将允许你在一个元素或其子元素获取焦点的时候进行相应操作。 <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div> jQuery('form') .focusin(function(){ jQuery(this).addClass('focused'); }); .focusout(function(){ jQuery(this).removeClass('focused'); }); </div></pre></div> 同时应该注意的是这两个事件都不是按冒泡顺序传递，它们将按捕获顺序触发。这意味着最外层的(也即祖先)元素会在实际节点事件触发前被触发。 更多关于 <a href="http://api.jquery.com/focusin"><code>focusIn</code></a> 和 <a href="http://api.jquery.com/focusout"><code>focusOut</code></a> 事件。 大家开始玩转jQuery 1.4吧。它是目前jQuery发布的一个最有前瞻性，最多特性支持和表现最好的一个版本！ 好了，本文就到这里了。我已经开始准备跟随这个改变了，我相信这些改变同样会让你印象深刻的！ 如果你还没准备好，你可以看看 "<a href="http://jquery14.com/">jQuery14天</a>", 一个专门为jQuery 1.4为做的在线站点，对了，另外还是为了庆祝jQeury的四岁生日！ 最后不要忘了去阅读 <a href="http://api.jquery.com/">API 文档</a> ! <div id="MySignature">作者：<a href="http://jujusharp.cnblogs.com/">Sean Zhu</a> 出处：<a href="http://jujusharp.cnblogs.com/">http://jujusharp.cnblogs.com</a> </div>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：js は array_javascript スキルから重複を巧みに削除します次の記事：js は array_javascript スキルから重複を巧みに削除します

続きを見る

jQuery 1.4 知っておくべき15の新機能 (翻訳)_jquery

関連記事