`
pharaohsprince
  • 浏览: 287504 次
  • 性别: Icon_minigender_1
  • 来自: 南京
文章分类
社区版块
存档分类
最新评论

jQuery 1.4版本的15个新功能

阅读更多
<!-- Render the gadget into a div. -->

jQuery 1.4版本的15个新功能

1.jQuery()创建DOM元素:支持传参设置属性

之前,jQuery可以通过 attr 方法设置元素的属性,既可传属性的名和值,也可以是包含几组特定 属性名值对 的 对象。在 jQuery 1.4 中,你可以把一个参数对象作为附属参数传给 jQuery 函数本身,同时创建HTML元素。

比方说你想要创建一个带有几个属性的锚记元素(<a></a>)。在1.4中,一切如此简单:

  1. jQuery('<a></a>',{
  2. id:'foo',
  3. href:'http://google.com',
  4. title:'BecomeaGoogler',
  5. rel:'external',
  6. text:'GotoGoogle!'
  7. });

你大概也能猜到,这个锚记元素没有的 text 属性会调用 jQuery 的私有方法”.text()” ,把元素里的文字设置为“Go to Google!”

针对这一用法,下面是更有用的实例:

  1. jQuery('
  2. <div>',{
  3. id:'foo',
  4. css:{
  5. fontWeight:700,
  6. color:'green'
  7. },
  8. click:function(){
  9. alert('Foohasbeenclicked!');
  10. }
  11. });</div>

id 为一般属性,被直接加上了,而 css 和 click 则激发了相应的 jQuery 方法。在1.4以前,上面的代码需写成这个样子:

  1. jQuery('
  2. <div>')
  3. .attr('id','foo')
  4. .css({
  5. fontWeight:700,
  6. color:'green'
  7. })
  8. .click(function(){
  9. alert('Foohasbeenclicked!');
  10. });</div>

2. parentsUntil()、prevUntil()、nextUntil()

1.4的DOM遍历工具包里又增加了3个新方法:nextUntilprevUntil parentsUntil。这些方法会按照特定的方向遍历DOM,直到遇到满足指定选择符的元素为止。举例来说,现 在我们有一张水果名的清单:

  1. <ul>
  2. <li>Apple</li>
  3. <li>Banana</li>
  4. <li>Grape</li>
  5. <li>Strawberry</li>
  6. <li>Pear</li>
  7. <li>Peach</li>
  8. </ul>

我们想挑选出所有在 Apple 后,Pear 前的所有条目。代码十分简单:

  1. jQuery('ulli:contains(Apple)').nextUntil(':contains(Pear)');
  2. //选出的是Banana,Grape,Strawberry

3. bind()、one()支持绑定多个事件

不再需要把各个事件绑定方法“链”在一起,现在你可以把它们捆成一堆,如下:

  1. jQuery('#foo).bind({
  2. click:function(){
  3. //dosomething
  4. },
  5. mouseover:function(){
  6. //dosomething
  7. },
  8. mouseout:function(){
  9. //dosomething
  10. }
  11. })

这一用法也适用于 “.one()”.

4. 动画效果Easing的增强

在jQuery1.4以前版本只能为一个动画指定一种缓动效果。现在你可以为动画的各 个属性参数指定不同的缓动效果:

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

你也可以在一个可选的动画选项对象中为 secialEasing 设置一系列名值对来完全上面的工作:

  1. jQuery('#foo').animate({
  2. left:500,
  3. top:500
  4. },{
  5. duration:2000,
  6. specialEasing:{
  7. top:'easeOutBounce'
  8. }
  9. });

5. 增强版的 live() 事件

jQuery 1.4 添加了对指派 submitchange focus blur 事件的支持。在jQuery中,我们利用”.live()” 方法指派事件。当你想要为多个元素注册事件处理器时,这会非常有用。而且就算满足选择符的元素是新出现的,这些事件也会继续有效(使用 .live() 比不断重复绑定要省力省心得多)。

不过,当心了!注册 focus 和 blur 事件时你需要用 focusin 和 focusout 作为事件名。

  1. jQuery('input').live('focusin',function(){
  2. //dosomethingwiththis
  3. });

6. 使用proxy()函数指定this

jQuery 1.4 提供了一个全新的 proxy 函数,位于 jQuery 命名空间下。这一函数接受两个参数,一个是“作用域”(scope)或者一个方法名,另一个是某函数或者目标作用域(the intended scope)。

众所周知, JavaScript的 this 关键字是一个很难把握的东西。有时候你并不想它代表一个元素,而想让它代表你前面创建的某个对象。

例如,在这里我们创建了一个 app 对象,它拥有两个属性,一个是 clickHandler 方法,一个是负责参数配置的对象。

  1. varapp={
  2. config:{
  3. clickMessage:'Hi!'
  4. },
  5. clickHandler:function(){
  6. alert(this.config.clickMessage);
  7. }
  8. };

这个 clickHandler 方法,当像 app.clickHandler() 这样调用时,app 就是其上下文,也就是说 this 关键字指向的是 app 。如果只需简单地调用,这样的写法没什么问题:

  1. app.clickHandler();//"Hi!"isalerted

不过如果把它当作一个事件处理器:

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

当我们点击这个锚记时,并没有达到预想的效果(没东西 alert 出来)。这是因为 jQuery (以及大部分理智的事件模型),默认地,都会把处理器的上下文指定为目标元素本身。也就是说,this 所代表正是被点击的这个链接。而我们想的是,this 应该继续代表 app 。在jQuery 1.4中,实现这一目的十分简单:

  1. jQuery('a').bind(
  2. 'click',
  3. jQuery.proxy(app,'clickHandler')
  4. );

现在点击所有锚记都会弹出“Hi!”了。

代理函数把你的函数包裹一圈,同时把函数内的 this 设定为你想要东西。在其他上下文应用场景,如把回调函数传给其他 jQuery 方法或插件,代理函数也能派上用场。

7. 动画队列延迟

现在,可以给动画队列加一个延迟了。虽然这个功能可以在任何队列里实现,但最常用的可能还是延迟“fx 队列”(”fx” queue,jQuery默认的动画队列)。它能让你在两个动画行为之间暂停一下,而不用牵扯到回调函数和 setTimeout 之类的东西。.delay() 的第一个参数即你需要设定的延迟毫秒数:

  1. jQuery('#foo')
  2. .slideDown()//Slidedown
  3. .delay(200)//Donothingfor200ms
  4. .fadeIn();//Fadein

如果你想延迟一个除 fx 以外的队列,把队列名作为第二个参数传给 .delay() 就可以了。

8. 使用has()检测元素是否含有特定内容

jQuery 1.4 让检测一个元素(或集合)是否含有(.has())某项东西更为容易。其背后的机理和选 择过滤器 :has()是一样的。这个方法会从当前集合中选出满足任意指定条件之一的元素。

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

这条语句在所有DIV元素中挑出那些包含UL元素的。这种情况可能用选择过滤器 :has() 就好了,但当你要更程式化地过滤选择集时 .has() 方法就十分有用了。

jQuery 1.4 还在 jQuery 命名空间下新增了一个 contains 函数。这是一个比较底层的函数,接受两个 DOM 节点为参数。返回一个布尔值,指示第二个元素是否包含在第一个元素中。例如:

jQuery.contains(document.documentElement, document.body); // 返回true – 确实包含在中

9. 给元素剥皮!

很早以前,jQuery 就可以用 .wrap() 给元素裹一层皮。现在, jQuery 1.4 添加了 .unwrap() 方法,用以剥皮。看下面的DOM结构:

  1. <div>
  2. <p>
  3. Foo
  4. </p>
  5. </div>

来把 p 元素外面的一层皮(div)剥掉:

  1. jQuery('p').unwrap();

DOM 变成了:

  1. <p>
  2. Foo
  3. </p>

总而言之,这个方法可以把任意元素的父元素移除。

10. 使用detach()移除元素,而不删除数据

以前有一个.remove()方法,是把元素剥离后抛弃。全新的 .detach() 方法可以让你把一个元素从DOM中剥离,而不丢失数据。囊括该元素的 jQuery 对象会在操作完成后还保留这个元素。数据可以通过 .data() 或者 jQuery 事件系统中的任意事件处理器传入 jQuery 对象。

当你需要把某个元素从DOM中移除,然后在将来某个场景中重新引入时,这个函数会很有用。元素的事件句柄和其他所有数据都会被保留。

  1. varfoo=jQuery('#foo');
  2. //绑定一个重要的事件处理器
  3. foo.click(function(){
  4. alert('Foo!');
  5. });
  6. foo.detach();//从DOM中移除
  7. //…dostuff
  8. foo.appendTo('body');//重新加入到DOM
  9. foo.click();//弹出alert信息:"Foo!"

11. index() 的功能增强

jQuery 1.4 为您使用 .index() 提供了两种新方法。以前,你必须把元素作为参数传给它,然后获得一个返回的数值,代表在当前集合中这个元素的索引。现在,如果不传参数过去,返回的值就代 表某元素在其同辈中排行老几。比方说下面的DOM:

  1. <ul>
  2. <li>Apple</li>
  3. <li>Banana</li>
  4. <li>Grape</li>
  5. <li>Strawberry</li>
  6. <li>Pear</li>
  7. <li>Peach</li>
  8. </ul>

你想要晓得点击一个条目后它是列表中的第几个,实现的代码十分简单:

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

jQuery 1.4 也允许你将选择符作为 .index() 的第一个参数。这样做会返回当前元素在你指定的选择符所匹配出的元素集合中的索引值。

还得提醒一点,这一方法返回的是数值,如果文档中无法找到指定条件的元素,会返回数值 -1 。

12. DOM 操作可接收回调函数

现在,大部分的DOM操作方法都支持了将 函数 作为单一参数传入(.css().attr() 传入为第二个参数)。这个函数会为选择集中的每一个元素都跑一遍,从而为相应操纵方法提供更“有个性”的值。

下列方法支持这一功能:

  1. after()
  2. before()
  3. append()
  4. prepend()
  5. addClass()
  6. toggleClass()
  7. removeClass()
  8. wrap()
  9. wrapAll()
  10. wrapInner()
  11. val()
  12. text()
  13. replaceWith()
  14. css()
  15. attr()
  16. html()

有了回调函数,你就能在选择集中利用 this 关键字来访问当前元素,用回调函数的第一个参数来访问其索引值。

  1. jQuery('li').html(function(i){
  2. return'Indexofthislistitem:'+i;
  3. });

还有还有,上面的某些方法还提供第二个参数供你利用。如果你调用的是一个设定型方法(如.html() 和 .attr(’href…) ),你还能取得当前值。例如:

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

如您所见,对于.css() 和 .attr() 方法来说,之所以要把函数作为 第二个参数传递,是因为第一个参数要用来指定我们需要修改的是哪一个属性:

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

13. 判定对象类型:isEmptyObject、isPlainObject

jQuery 1.4 新增了两个全新的辅助函数(都直接位于 jQuery 命名空间下),可以帮助你判别你正在操纵的是何种对象。

第一个函数是 isEmptyObject, ,它返回一个布尔值,判定对象是否为空()。第二个是 isPlainObject ,它返回的布尔值代表传递过去的参数是否为JavaScript的简单对象(plain object),也就是用 {} 或 new Object()创建的对象。

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

14. Closest() 的功能增强

jQuery的.closest() 方法现在可以接受一组选择符作为参数。当你需要遍历某一元素的所有上级, 找到一个以上符合特定特征的最近元素时,此功能就能派上用场。

而且,现在它还能接受上下文环境作为第二个参数,也就是说你可以控制DOM遍历的深度或者说远度。虽然说大家可能很少会用到这两个新特性,但一旦用 上效果是惊人的!

15. 新事件: focusIn 与 focusOut

如前所述,现在部署 focus 和 blur 事件时,你需要使用 focusin 和 focusout 这两个新事件。这两个事件帮助你在特定元素或者该元素的子元素 获取/失去 焦点时采取行动。

  1. jQuery('form')
  2. .focusin(function(){
  3. jQuery(this).addClass('focused');
  4. });
  5. .focusout(function(){
  6. jQuery(this).removeClass('focused');
  7. });

值得说明的是,这两个事件不会传播开来(即所谓的“冒泡”),它们会被捕获住。

爱上 jQuery 1.4 吧!史上考虑最周到,功能最丰富,性能最好的 jQuery !

分享到:
评论

相关推荐

    jquery 1.4.x中文api

    关于本CHM手册 jQuery 1.3自从2008年1月14日发布后,后引来了各界的关注。...用*标注了1.3版本新加的内容,@标注1.4新加的内容,方便大家查看。 如果发现什么错误,请联系我:www.ajaxa.cn,QQ:274430124

    jQuery 1.4官方文档详细讲述

    jQuery 1.4官方文档详细讲述新特性功能.mht

    JQuery_1.4_API

    JQery1.4API文档,很实用。 jQuery 1.3自从2008年1月14日发布后,后引来了各界的关注。我们也随即投入到翻译文档的工作中来。经过4天的努力,终于...用*标注了1.3版本新加的内容,@标注1.4新加的内容,方便大家查看。

    jQuery EasyUI 1.4 离线简体中文API文档

    jQuery EasyUI 1 4版本更新内容: Bug(修复) menu:修复在删除一个菜单项的时候该菜单无法正确自适应高度的问题; datagrid:修复在datagrid宽度太小的时候“fitColumns”方法无法正常工作的问题 Improvement...

    jQuery 1.4参考手册.CHM

    由于赶上中国农历新年,本人未能及时制作成CHM版本,特意在开工的当天将其整理完成,由于时间赶的比较急,难免会有错误,如发现错误,请联系本人,我将会及时修正。 自从jQuery面世以来,它以其快速、简洁,能够很...

    GalleryView jQuery 1.4 精美相册下载

    内容索引:脚本资源,jQuery,jQuery相册,GalleryView jQuery GalleryView精美相册程序打包,使用 jQuery1.4插件,本来使用的是jquery 1.3.2,但是想体验一下新版本的强大功能,就用了jquery 1.4,测试没有问题,就是...

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

    jQuery 1.4 最近刚刚发布. 这个版本可不是一个简单的改进,它不仅包含了很多新的特性,还改进了很多功能, 更在性能优化方面下了很大功夫, 本文将对这些新的特性和增强的部分进行讨论,希望能对你有所帮助.

    jQuery EasyUI 1.4 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

     时隔4个月之久 EasyUI终于迎来大版本更新了 本次更新内容诸多 除了常规维护外 还新增了3个新组件 都很实用 详细的可以阅读更新说明 里面给了详细的解读 另外 从该版本开始我将会逐步的将EasyUI官方以及第三方较好...

    jQuery最新1.4.4精简版+1.4中文手册

    jQuery是一款免费且开放源代码的JavaScript代码库,由John Resig创建。授权协议为GPL和MIT许可证双协议。 改动内容和功能增强: (New) Added a new animation method, .fadeToggle() (Enh) Calling .data() with ...

    jquery插件使用方法大全

    可以用来添加不向外部公开的方法,或者对jQuery的某些方法进行重新定义以提供新功能,或者提供更好的封装、避免名称空间冲突。当然,也可以用来开发插件,但Resig强烈建议在开发插件之前,先考虑jQuery UI widget...

    《jQuery实战》 第二版.rar

    书中紧紧地围绕“用实际的示例来解释每一个新概念”这一宗旨,生动描述了jQuery如何与其他工具和框架交互以及如何生成jQuery插件。jQuery 是目前最受欢迎的javascript/Ajax库之一,能用最少的代码实现最多的功能。 ...

    jQuery权威指南-源代码

    内容新颖,基于jQuery的最新版本撰写,所有新功能和新特性一览无余;内容全面,不仅讲解了jQuery技术本身的方方面面,而且还包括与jQuery相关的扩展知识;实战性强,不仅每个知识点都配有完整的小案例,而且还有两个...

    jquery1.5版本开发应用

    很好的资源不要浪费,次版本高于1.4,新增添了很多功能;欢迎下载!快快来吧!!!

    jQuery详细教程

    您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中: $(document).ready(function(){ --- jQuery functions go here ---- }); 这是为了防止文档在完全加载(就绪)之前运行 jQuery...

    超实用的jQuery代码段

    超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...

    jQuery EasyUI 1.4.4 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    本次更新内容主要是BUG修复和功能改进,相隔4个月又发布了新版本,这次更新更像是例行公事,不过好在修复了很多BUG,另外需要说一下,EasyUI框架当中其实官方还隐藏了不少API没有开放出来,有些朋友建议我把整理一下...

    50个必备的实用jQuery代码段

    27. 如何在一段时间之后自动隐藏或关闭元素(支持1.4版本): 7 28. 如何把已创建的元素动态地添加到DOM中: 8 29. 如何限制“Text-Area”域中的字符的个数: 8 30. 如何为函数创建一个基本的测试 8 31. 如何在...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    基于jquery实现多功能日历插件(weekcalendar)1.2版本下载 5.实用漂亮jQuery网页日历插件datePicker下载 6.简洁实用jquery日期选择插件之jQuery datePicker下载 8)图片展示 1.2款jQuery图片自动切换常用广告...

    javapms门户管理系统 v1.4 beta

    JAVAPMS v1.4 更新日志:1、全面检测系统前后台,进一步提升了系统安全性;2、优化系统数据库,进一步提升了系统性能;3、升级最新版spring框架,兼容jdk1.8;4、修正子站点删除功能无效的问题;5、修正管理员删除...

    Jquery权威指南

    特别是新版本1.4.X的发布,jQuery在功能和性能方面都有质的提升,极大地满足了广大开发者提出的更高要求。因此,为了提高Web开发的效率和强化Web应用的功能,熟练使用iQuery是Web开发者必备的一种能力。

Global site tag (gtag.js) - Google Analytics