jQuery 1.4 15个你应该知道的新特性(译)


Posted in Javascript onJanuary 24, 2010

首先现在你可以从这里下载最新的1.4的版本了: http://code.jquery.com/jquery-1.4.js

1. 传递属性给jQuery

1.4之前的版本中jQuery就通过"attr”方法支持了添加属性到元素集合中,"attr”方法不仅可以传递属性名和值,也可以传递包含有多个属性的对象集合。在1.4中,除了可以创建新的对象,现在它更能将属性对象作为参数传递给jQuery函数或对象自身。如你可以创建一个含有多个属性的链接元素,通过1.4代码如下:

jQuery('<a/>', { 
   id: 'gid', 
   href: 'http://www.google.com', 
   title: 'google非和谐版', 
   rel: 'external', 
   text: '进入Google!' 
 });

你可能会注意到"text”属性并且猜测它是干吗的,因为a标签是没有"text”属性的。呵呵,当你传递某些属性时,jquery 1.4同样会检查并使用它自己的方法。因此上面的"text”属性可以让jQuery调用它的".text()”方法并将"进入Google!“作为它的唯一参数。

这里给出一个更好的例子:

jQuery('<div/>', { 
   id: 'foo', 
   css: { 
     fontWeight: 700, 
     color: 'green' 
   }, 
   click: function(){ 
     alert('Foo被点击过!'); 
   } 
 });

"id”属性是作为一个普通属性被添加的。但"css”和"click”属性则对应特定的jQuery方法。上面的代码在1.4之前一种写法如下:

jQuery('<div/>') 
   .attr('id', 'foo') 
   .css({ 
     fontWeight: 700, 
     color: 'green' 
   }) 
   .click(function(){ 
     alert('Foo被点击过!'); 
   });

 

更多关于jQuery特性

2. 所有的东西都可以"until“了

1.4新增了三个对DOM操作的方法,他们分别是"nextUntil",  "prevUntil"  和  "parentsUntil"。 这些方法会按照某个顺序去遍历DOM对象直到满足指定的筛选条件。假设我们有一个水果列表:

<ul>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>草莓</li>
<li>例子</li>
<li>桃子</li>
</ul>

如果你想选择所有在"Apple”和"Strawberry”之间的元素。代码可以这样写:

jQuery('ul li:contains(苹果)').nextUntil(':contains(梨子)'); 
// 得到 香蕉,葡萄,草莓

更多关于: prevUntil, nextUntil, parentsUntil

3. 绑定多个事件

与通过jquery链绑定多个方法到一起相比,现在你可以通过一次调用来绑定所有这些事件,如:

jQuery 1.4 15个你应该知道的新特性(译)jQuery 1.4 15个你应该知道的新特性(译)
jQuery('#foo).bind({ 
   click: function() { 
     // 具体代码 
   }, 
   mouseover: function() { 
     // 具体代码
   }, 
   mouseout: function() { 
     // 具体代码 
   } 
 })

 

你也可以通过 ".one()"方法操作。

更多关于.bind(…)

4. Per-Property Easing

与给一个动画仅仅定义一个缓动效果相比,现在你可以给你想要添加动画效果的属性定义不同的缓动函数了。jQuery包含两个缓动函数,旋转(默认)和线性移动。如果你需要其他的效果的话,你需要去单独下载它们 !

要给每个属性指定一个缓动函数的话,你可以简单的通过属性数组来达到目的,在数组中,第一个值是你想要实现的效果值,第二个参数则是使用的缓动函数,如:

jQuery('#foo').animate({ 
   left: 500, 
   top: [500, 'easeOutBounce'] 
 }, 2000);

 

查看代码演示!

你也可以以键值对的形式在那些可选设置项中单独指定属性缓动函数:

jQuery('#foo').animate({ 
   left: 500, 
   top: 500 
 }, { 
   duration: 2000, 
   specialEasing: { 
     top: 'easeOutBounce' 
   } 
 });

 

原文作者注 - 小小谦虚一下,这个新特性是作者James Padolsey的主意!

更多关于per-property easing

5. 新的Live事件!

1.4添加了对"submit”,"change”,"focus”,和"blur”事件的委托支持。在jQuery中,我们可以使用".live()”方法去委托事件。这在你需要注册事件到大量元素中或新的元素需要不断的被添加(使用".live()”会比不断的重新绑定事件更高效)将会很有用。

但是,注意!如果你需要委托"focus”和"blur”事件的时候,你必须使用"focusin”和"focusout”事件名称!

jQuery('input').live('focusin', function(){
//具体操作
});

 

6. 控制函数的上下文

jQuery 1.4提供了一个新的叫"proxy”的函数,它在jQuery命名空间下。该函数需要两个参数,不管是代码域还是方法名,或者是函数和其所处的代码域。t"this”关键字在JavaScrip中是相当难掌握的。有时候你可能期待它指的是你之前创建的某个对象,而不是一个你可能没想到的元素。

举例说明,假设我们有一个"app”对象,它有两个属性,一个是"clickHandler”方法, 另外一个则是一个config对象。

var app = {
  config: {
    clickMessage: '你好!'
  },
  clickHandler: function() {
    alert(this.config.clickMessage);
  }
};

当我们调用如"app.clickHandler()"时,"clickHandler"会将"app”作为其上下文。这意味着在这里"this"关键字将允许其访问"app"。这在我们简单调用下面函数时没什么问题:

app.clickHandler(); // "你好!" 消息触发

让我们试试将其作为事件绑定会有什么情况:

jQuery('a').bind('click', app.clickHandler);

 

当我们点击一个链接的时候什么都不会发生,函数不会工作。这是因为jQuery(其他任何正常的事件模型同样如此)默认会把目标元素a设置成为事件的上下文。即"this”现在其实是指刚刚被点击过的元素a。但我们实际上并不想这样子的。我们期待"this”应该被设置为"app”.在jQuery 1.4中实现这个再简单不过了:

jQuery('a').bind(
'click',
  jQuery.proxy(app, 'clickHandler')
);

 

现在无论什么时候一个链接被点击到,"你好"的消息都会被触发了!

proxy函数会返回一个你的函数被"包装过"之后的对象,在该对象中,"this”被设置成任意你指定的对象。这在其他的情景下同样有用,如传递回调函数给其他的jQuery对象或者一些插件的时候。

更多关于jQuery.proxy

7. 在动画中添加停顿

现在你可以再你的动画队列中添加停顿效果了。事实上,任何队列中都可以添加该函数,但最常用的情况应该还是在使用"fx”队列的时候。这允许你在多个动作中间添加暂停而不需要通过回调函数去调用"setTimeout"。".delay()" 函数的第一个参数是你想停顿的毫秒数。

jQuery('#foo')
  .slideDown() // Slide down
  .delay(200) // 停顿 200 ms
  .fadeIn(); // Fade in

如果你想给其他不是默认的"fx”的队列也添加停顿的话,这时候,你需要将队列名作为第二个参数传递给".delay()"。

更多关于.delay(…)

8. 检查元素是否拥有某对象

通过".has()”方法,jQuery 1.4使得检查一个元素(或者集合)是不是有某对象变得相当简单。从程序角度看,它和jQuery的selector过滤器":has()”是一样的。该方法会返回在当前集合中所有包含有至少一个符合条件的元素数组。

jQuery('div').has('ul');

 

上面方法会返回所有包含有UL元素的DIV元素数组。在这种情况下,你可能会更倾向于简单使用选择器的过滤器(":has()"), 但当你需要通过代码过滤一个数组的时候,该方法仍会很有用。

1.4同样在jQuery命名空间下添加了新的"contains"函数。这是一个低级的函数,它接受两个DOM节点作为参数。它会返回一个布尔值来表示后面一个元素是否在前面一个元素中存在。如:

jQuery.contains(document.documentElement, document.body);
// 返回true - <body>在<html>存在

 

更多关于: .has(…), jQuery.contains(…)

9. 去掉元素的包装

".warp()”已经在jQuery中有段日子了,现在跟它对应的".unwrap()”方法也被加进到1.4中了。这个方法刚好跟warp()方法相反。假设有下面的DOM结构:

<div>
<p>Foo</p>
</div>

我们可以用下面的函数去掉段落元素的外层:

jQuery('p').unwrap();

 

最终的DOM结构如下:

注意,这个方法处理比较简单,它会移掉任何元素的父节点。

更多关于 .unwrap(…)

10. detach() vs remove()

新的".detach()”方法允许你从DOM中移掉元素,这跟".remove()”很像。但与".remove()”有本质不同的是"detach()”不会将jQuery赋给该元素的数据也给注销掉。这包含通过".data()”和其他任意的通过jQuery的事件系统添加的事件等数据。

如果你想从DOM中移除某个元素,但你又可能需要在后面的某个时候把该元素重新添加到DOM中的时候这个函数将会很有用,这时候该元素的事件和其他的数据都会被保留下来。

var foo = jQuery('#foo');
// 绑定一个重要的事件
foo.click(function(){
  alert('Foo!');
});
foo.detach(); // 从 DOM中移除事件
// … 其他操作
foo.appendTo('body'); // 将元素重新加入到 DOM
foo.click(); // 弹出 "Foo!"

更多 .detach(…)

11. index(…) 加强

jQuery 1.4中我们有两种使用".index()”方法的方式。首先,你可以仅仅将一个元素自身作为参数,这样你可以得到该元素在当前集合中所处的索引位置值。

如果不设置参数的话,现在会返回该元素的兄弟节点。因此,假设有下面的DOM结构:

<ul>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>草莓</li>
<li>例子</li>
<li>桃子</li>
</ul>

当一个节点被点击的时候,你如果想找到在所有的节点集合中被单击的节点的位置,你可以这样写:

jQuery('li').click(function(){
  alert( jQuery(this).index() );
});

 

jQuery 1.4还允许你指定一个选择器作为".index()”的第一个参数,这样它会返回该元素在选择器中产生的元素集合中的位置。

最后需要注意的是,如果该元素在集合中存在的话,该函数会返回一个其位置的整数,如果不存在,则返回-1。

更多关于 .index(…)

12. DOM 操作的方法支持回调函数

大部分对DOM进行操作的函数现在都支持传递函数作为唯一参数了(如果是".css()”和".attr()”的情况的话,它会作为第二参数)。该函数会在集合中的每个元素上都执行一次,从而确定哪些应作为该函数的实际值提供给回调函数调用。

下面给出所有支持该功能的函数列表:

  • after
  • before
  • append
  • prepend
  • addClass
  • toggleClass
  • removeClass
  • wrap
  • wrapAll
  • wrapInner
  • val
  • text
  • replaceWith
  • css
  • attr
  • html

通过回调函数,你可以通过"this”访问数组中的当前元素,还可以通过第一个参数得到它在数组中的位置。

jQuery('li').html(function(i){
return '该列表中的索引位置: ' + i;
});

 

同样,你也可以通过上面的某些方法得到另外一个参数,如果你调用一个setter方法(如".html()”或".attr(‘href')")你就可以直接访问当前的值了。如:

jQuery('a').attr('href', function(i, currentHref){
return currentHref + '?foo=bar';
});

 

正如上面看到的,在使用".css()" 和 ".attr()" 方法时,因为第一个参数需要被用作指定那些你需要设置或改变的属性名,你需要将回调函数作为第二参数。

jQuery('li').css('color', function(i, currentCssColor){
return i % 2 ? 'red' : 'blue';
});

 

13. 对象类型判断

jQuery 1.4添加了两个新的方法(直接放到了jQuery命名空间下面)以方便我们来判断当前处理的对象的类型。

首先是方法"isEmptyObject”,顾名思义,这个函数会返回一个布尔值来表明传递的对象是不是空对象(缺乏属性--无论是对象自身还是继续的对象)。其次是方法"isPlainObject”,它会返回一个布尔值来表明操作的对象是否是一个简单的js对象(指通过"{ }"或者"new Object”创建的对象)。

jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({foo:1}); // false
jQuery.isPlainObject({}); // true
jQuery.isPlainObject(window); // false 
jQuery.isPlainObject(jQuery()); // false

 

更多关于: isPlainObject(…), isEmptyObject(…)

14. Closest(…) 增强

jQuery的".closest()”方法现在可以接受一组选择器了。如果开发人员想遍历一个元素的祖先,并在其中查找离其最近的那些符合某些特征的节点的时候,这会很有用。

另外,该函数现在也接受将上下文作为第二参数了。这意味着你现在可以控制你想在DOM中遍历的元素范围了。虽然这两种情况我们一般很少用到,不过它们在jQuery内部被很好的使用。

更多关于 .closest(…)

15. 新的事件! focusIn 和focusOut

上文已经提到,为了委托"focus”和"blur”事件你需要这些新的事件,它们是"focusin”和"focusout”。这些新的事件将允许你在一个元素或其子元素获取焦点的时候进行相应操作。

jQuery('form')
  .focusin(function(){
    jQuery(this).addClass('focused');
  });
  .focusout(function(){
    jQuery(this).removeClass('focused');
  });

 

同时应该注意的是这两个事件都不是按冒泡顺序传递,它们将按捕获顺序触发。这意味着最外层的(也即祖先)元素会在实际节点事件触发前被触发。

更多关于 focusInfocusOut 事件。

大家开始玩转jQuery 1.4吧。它是目前jQuery发布的一个最有前瞻性,最多特性支持和表现最好的一个版本!

好了,本文就到这里了。我已经开始准备跟随这个改变了,我相信这些改变同样会让你印象深刻的!

如果你还没准备好,你可以看看 "jQuery14天", 一个专门为jQuery 1.4为做的在线站点,对了,另外还是为了庆祝jQeury的四岁生日!

最后不要忘了去阅读 API 文档 !

作者:Sean Zhu
出处:http://jujusharp.cnblogs.com
Javascript 相关文章推荐
js常用函数 不错
Sep 08 Javascript
JS去除数组重复值的五种不同方法
Sep 06 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
Java无向树分析 实现最小高度树
Apr 09 Javascript
优化javascript的执行速度
Jan 23 #Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 #Javascript
JQuery 1.4 中的Ajax问题
Jan 23 #Javascript
用JS写的一个TableView控件代码
Jan 23 #Javascript
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 #Javascript
JavaScript 学习笔记(十四) 正则表达式
Jan 22 #Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 #Javascript
You might like
php自动获取目录下的模板的代码
2010/08/08 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
使用express获取微信小程序二维码小记
2019/05/21 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
python爬虫之百度API调用方法
2017/06/11 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
python实现按日期归档文件
2021/01/30 Python
法国珠宝店:CLEOR
2017/01/29 全球购物
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
数控专业推荐信范文
2013/12/02 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
村居抓节水倡议书
2014/05/19 职场文书
中职生求职信
2014/07/01 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
酒店员工管理制度
2015/08/05 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python
青岛市的收音机研制与生产
2022/04/07 无线电