`

jQuery 之 1.4十大新特性解读

 
阅读更多
http://developer.51cto.com/art/201005/199747_1.htm

今年1月51CTO曾为您报道过jQuery 1.4发布的消息，在这个版本中，jQuery有相当多的改进与功能更新，包括将属性传递给jQurey、多事件绑定以及一些元素处理的功能，我们将通过讲解和示例代码的方式向您详细介绍。
AD：2013云计算架构师峰会精彩课程曝光
今年1月51CTO曾为您报道过jQuery 1.4发布的消息，在这个版本中，jQuery有相当多的改进与功能更新,它不仅包含了很多新的特性，还改进了很多功能, 更在性能优化方面下了很大功夫, 本文将对这些新的特性和增强的部分进行讨论,希望能对你有所帮助。

jQuery 1.4版本下载地址: http://code.jquery.com/jquery-1.4.js

下面我们通过讲解和示例代码来详细介绍jQurey 1.4版本中你应该知道并使用的十大新特性。

1. 传递属性给jQuery

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

jQuery('<a></a>', {       
      id: 'gid',       
      href: 'http://www.google.com',       
      title: 'google非和谐版',       
      rel: 'external',       
      text: '进入<SPAN class=t_tag onclick=tagshow(event) href="tag.php?name=Google"
mce_href="tag.php?name=Google">Google</SPAN>!'      
  });    
你可能会注意到"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被点击过!');       
      });     
2. 所有的东西都可以"until“了

jQuery 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(梨子)');   // 得到 香蕉，葡萄，草莓   

3. 绑定多个事件

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

jQuery('#foo).bind({       
      click: function() {       
          // 具体代码       
     },       
      mouseover: function() {       
          // 具体代码       
    },       
      mouseout: function() {       
          // 具体代码       
     }       
  })       
你也可以通过 ".one()"方法操作。

4、检查元素是否拥有某对象

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

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

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

jQuery.contains(document.documentElement, document.body);       
// 返回true - <body>在<html>存在   
5、去掉元素的包装

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

<div>       
    <p>Foo</p>       
</div>  
我们可以用下面的函数去掉段落元素的外层：

jQuery('p').unwrap();    
最终的DOM结构如下：

<p>Foo</p>  
注意，这个方法处理比较简单，它会移掉任何元素的父节点。


6、detach() vs remove()

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

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

8、对象类型判断

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     
9、Closest(…) 增强

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

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

10、 新的事件focusIn和focusOut

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

jQuery('form')       
    .focusin(function(){       
        jQuery(this).addClass('focused');       
    });       
    .focusout(function(){       
        jQuery(this).removeClass('focused');       
    });     
同时应该注意的是这两个事件都不是按冒泡顺序传递，它们将按捕获顺序触发。这意味着最外层的(也即祖先)元素会在实际节点事件触发前被触发。

除了以上提到的十点，jQuery 1.4还有很多有用的改进和增强，更多特性的解析及示例可以参考jQuery 1.4的官方文档。
分享到：
| 13333
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery_1.4中文文档(PDF版).pdf

    《jQuery_1.4中文文档》是一份详细阐述...这份PDF文档详细解读了jQuery 1.4的各种特性和用法，对于初学者和进阶者来说都是极好的学习资源。通过深入阅读和实践，开发者能够掌握jQuery的核心技术，提高前端开发效率。

    jQuery.1.4.Plugin.Development.Beginner's.Guide.pdf

    ### 二、jQuery 1.4版本特性 #### 2.1 新增功能 - **动画增强**：在1.4版本中，jQuery增强了动画功能，允许开发者更加灵活地控制动画效果。 - **性能优化**：对原有的代码进行了优化，提高了整体性能。 - **新方法...

    jquery集合1.2至1.8版本

    - **jQuery api 1.8 中文版.chm**: 该文档详细解读了jQuery 1.8版本的API，包括核心功能和插件，是学习和查找问题的好助手。 ### 3. jQuery 核心文件 - **jquery-1.x.x.min.js**: 这些是不同版本的jQuery压缩文件...

    prototype.js　1.4版开发者手册(强烈推荐)

    在1.4版本中，Prototype.js引入了许多关键特性，这些特性对提升Web应用的性能和可维护性至关重要。以下是对这些知识点的详细解读： 1. **对象扩展**：Prototype.js的核心在于它对JavaScript原生对象的扩展，如Array...

    prototype.js1.4版开发者手册

    - **社区资源**: 社区中有许多关于 1.3 版本的解读资料，但由于 1.4 版本进行了较大的扩展，因此建议寻找针对 1.4 版本的源代码解读资料，以便更好地理解新的特性和改进。 #### 五、与其他技术的比较 - **Ruby ...

    jQuery.in.Action.2nd.Edition

    该书覆盖了jQuery 1.4以及jQuery UI 1.8版本的功能和特性，并通过大量的示例代码来帮助读者理解和掌握这些技术。 根据书评，本书获得了来自业界专业人士的高度赞扬。David Sills在其博客JavaLobby和Dzone上给予了...

    Jquery1.4.4中文帮助文档

    本文将基于提供的“Jquery1.4.4中文帮助文档”进行详细解读，旨在帮助开发者更好地理解和应用jQuery 1.4.4。 一、基础概念与核心功能 1. 选择器：jQuery 的核心在于其强大的选择器机制，它支持CSS1至CSS3的选择器...

    CSS-JS-JQuery-xHTML-w3c参考手册（共11册）

    8. **jQuery 1.3/1.4参考手册**：这些手册记录了jQuery早期版本的API，对于研究jQuery的历史演进和不同版本间的差异有一定价值。 通过这套手册，开发者可以系统地学习并掌握Web前端开发的各个环节，从基础到高级，...

    JavaScript编码规范

    - **2.1.7 大括号**：使用“K&R”风格的大括号，即左大括号放在新行上，而右大括号则与相应的左大括号对齐。 ##### 2.2 代码注释 - **2.2.1 文件的注释**：每个文件顶部应包含文件描述、作者、创建日期等信息。 - *...

Magicbox
Global site tag (gtag.js) - Google Analytics