副标题[/!--empirenews.page--]
jQuery 1.4 最近刚刚发布. 这个版本可不是一个简单的改进,它不仅包含了很多新的特性,还改进了很多功能, 更在性能优化方面下了很大功夫, 本文将对这些新的特性和增强的部分进行讨论,希望能对你有所帮助。
推荐阅读:JQuery 1.4 API中文手册
首先现在你可以从这里下载最新的1.4的版本了:http://code.jquery.com/jquery-1.4.js
1. 传递属性给jQuery 1.4之前的版本中jQuery就通过"attr”方法支持了添加属性到元素集合中,"attr”方法不仅可以传递属性名和值,也可以传递包含有多个属性的对象集合。在1.4中,除了可以创建新的对象,现在它更能将属性对象作为参数传递给jQuery函数或对象自身。如你可以创建一个含有多个属性的链接元素,通过1.4代码如下:
Copy to Clipboard 引用的内容:[www.veryhuo.com]
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!“作为它的唯一参数。
这里给出一个更好的例子:
Copy to Clipboard 引用的内容:[www.veryhuo.com]
jQuery('<div/>', { id: 'foo', css: { fontWeight: 700, color: 'green' }, click: function(){ alert('Foo被点击过!'); } });
"id”属性是作为一个普通属性被添加的。但"css”和"click”属性则对应特定的jQuery方法。上面的代码在1.4之前一种写法如下:
Copy to Clipboard 引用的内容:[www.veryhuo.com]
jQuery('<div/>') .attr('id', 'foo') .css({ fontWeight: 700, color: 'green' }) .click(function(){ alert('Foo被点击过!'); });
更多关于jQuery特性
2. 所有的东西都可以"until“了 1.4新增了三个对DOM操作的方法,他们分别是"nextUntil", "divvUntil" 和 "parentsUntil"。 这些方法会按照某个顺序去遍历DOM对象直到满足指定的筛选条件。假设我们有一个水果列表:
Copy to Clipboard 引用的内容:[www.veryhuo.com]
<ul> <li>苹果</li> <li>香蕉</li> <li>葡萄</li> <li>草莓</li> <li>例子</li> <li>桃子</li> </ul>
如果你想选择所有在"Apple”和"Strawberry”之间的元素。代码可以这样写:
Copy to Clipboard 引用的内容:[www.veryhuo.com]
jQuery('ul li:contains(苹果)').nextUntil(':contains(梨子)'); // 得到 香蕉,葡萄,草莓
更多关于: prevUntil, nextUntil, parentsUntil
3. 绑定多个事件 与通过jquery链绑定多个方法到一起相比,现在你可以通过一次调用来绑定所有这些事件,如:
Copy to Clipboard 引用的内容:[www.veryhuo.com]
jQuery('#foo).bind({ click: function() { // 具体代码 }, mouseover: function() { // 具体代码 }, mouseout: function() { // 具体代码 } })
你也可以通过 ".one()"方法操作。
更多关于.bind(…)
4. Per-Property Easing 与给一个动画仅仅定义一个缓动效果相比,现在你可以给你想要添加动画效果的属性定义不同的缓动函数了。jQuery包含两个缓动函数,旋转(默认)和线性移动。如果你需要其他的效果的话,你需要去单独下载它们 !
要给每个属性指定一个缓动函数的话,你可以简单的通过属性数组来达到目的,在数组中,第一个值是你想要实现的效果值,第二个参数则是使用的缓动函数,如:
Copy to Clipboard 引用的内容:[www.veryhuo.com]
jQuery('#foo').animate({ left: 500, top: [500, 'easeOutBounce'] }, 2000);
(编辑:广州站长网)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|