木木彡blog

您现在的位置是：首页 > 学无止境

jQuery 1.4 发布:你必须知道的15个新特征

木木彡82 2010-01-18 09:09:00 共688人围观

jQuery 1.4 Released: The 15 New Features you Must Know
原文：http://net.tutsplus.com/tutorial ... ures-you-must-know/

作者: James Padolsey

1. Passi...

jQuery 1.4 Released: The 15 New Features you Must Know
原文：http://net.tutsplus.com/tutorial ... ures-you-must-know/

作者: James Padolsey

1. Passing Attributes to jQuery(…)
jQuery 1.4支持传送一个对象作为第2个参数给jquery自身。
在1.4，创建一个元素，可以这样做

jQuery('<div/>', { id: 'foo', css: { fontWeight: 700, color: 'green' }, click: function(){ alert('Foo has been clicked!'); } });

在之前需要这样：

jQuery('<div/>') .attr('id', 'foo') .css({ fontWeight: 700, color: 'green' }) .click(function(){ alert('Foo has been clicked!'); });

第一段代码中,id添加到元素的属性上,为foo；css和click属性调用相应的方法,再比如,创建一个超链接:

jQuery('<a></a>', { id: 'foo', href: 'http://google.com', title: 'Become a Googler', rel: 'external', text: 'Go to Google!' });

超链接是没有text属性的，jQuery1.4在这里就调用了".text()"的方法，"Go to Google!" 作为.text()的参数。
jQuery(…)

2. Everything "until"!
1.4添加了3个新的DOM遍历方法 "nextUntil", "prevUntil" 和 "parentsUntil"：朝某个方向遍历直到符合传进这些方法的选择器。
比如一列水果

<ul> <li>Apple</li> <li>Banana</li> <li>Grape</li> <li>Strawberry</li> <li>Pear</li> <li>Peach</li> </ul>

要取得"Apple"之后"Strawberry"之前的，可以这样：

jQuery('ul li:contains(Apple)').nextUntil(':contains(Pear)'); // Selects Banana, Grape, Strawberry

prevUntil , nextUntil , parentsUntil

3. Binding Multiple Event Handlers
可以在一次调用中绑定一大堆事件，替换掉链式绑定

jQuery('#foo).bind({ click: function() { // do something }, mouseover: function() { // do something }, mouseout: function() { // do something } })

".one()"也可以多重绑定
.bind(…)

4. Per-Property Easing
可以对动画的每一个属性设置变换函数，而不再是一个函数对应单独一次动画。
jQuery包含2个变换函数：默认的为swing，还有一个是linear，其他的可以单独下载
可以设置属性为数组，第1个为将改变到的属性值，第2个为使用的函数

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

See this code in action!
也可以定义可选的options对象属性中"specialEasing" 对象的键/值

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

（这个特性正是作者James Padolsey的主意）
Read more about per-property easing

5. New Live Events!
1.4支持"submit", "change", "focus" 和 "blur" 事件的委派，在使用".live()"方法的时候对大量元素或者新添加元素注册事件耗费资源更少。要注意的是，使用时要用"focusin" 和 "focusout"替换掉"focus" 和 "blur"

jQuery('input').live('focusin', function(){ // do something with this });

6. Controlling a Function's Context
jQuery 1.4 在jQuery的命名空间下提供了一个新的代理函数。这个函数有2个参数，作用域+方法名或者函数+函数的作用域，我们可以改变this指向到自己先前创建的对象，而不是默认的那个元素上。
例如

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

在调用的时候this指app

app.clickHandler(); // "Hi!" is alerted

而下面代码调用时候就不起作用了。

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

这种原生的事件模型触发时候handler的上下文指向target元素，要改变的话：

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

点击链接的时候"Hi!"弹出
proxy函数包装了原函数，把this指向你定义的任何东西。可以用在多种方面，比如把回调函数传到其他jQuery方法或者插件
Read more about jQuery.proxy

7. Delay an Animation Queue
让你在动画之间停止而不需要使用 "setTimeout"

jQuery('#foo') .slideDown() // Slide down .delay(200) // Do nothing for 200 ms .fadeIn(); // Fade in

第一个参数是时间
第2个可选参数传入列名字用来改变默认的"fx" queue
Read more about .delay(…)

8. Check if an Element Has Something
同":has()"的过滤选择器作用一样".has()"用来查看一个或一组元素有没有某种东西,用在程序流程中动态使用

jQuery('div').has('ul');//获取包含UL的div

"contains"函数重写为第2个参数是否包含第1个参数

jQuery.contains(document.documentElement, document.body); // Returns true - <body> is within <html>

.has(…) jQuery.contains(…)

9. Unwrap Elements!
对应".wrap()"方法添加了一个".unwrap()"的新方法，用来去掉任一元素的父元素

去掉（unwrap）p可以这样：

jQuery('p').unwrap();

变成

.unwrap(…)

10. Remove Elements Without Deleting Data
新方法".detach()"同 ".remove()"方法不同在于不会摧毁".data()"添加的数据和移除绑定的事件
这对于从DOM中取出再插入元素很有用

var foo = jQuery('#foo'); // Bind an important event handler foo.click(function(){ alert('Foo!'); }); foo.detach(); // Remove it from the DOM // … do stuff foo.appendTo('body'); // Add it back to the DOM foo.click(); // alerts "Foo!"

.detach(…)

11. index(…) Enhancements
jQuery 1.4 给出了2种使用 ".index()"的新方式，之前只是传入一个元素返回表示位置的数字，一种是不传入参数

<ul> <li>Apple</li> <li>Banana</li> <li>Grape</li> <li>Strawberry</li> <li>Pear</li> <li>Peach</li> </ul> jQuery('li').click(function(){ alert( jQuery(this).index() ); });

返回所点击元素的位置（当前元素在它的兄弟siblings中的index）
另外也可以传入一个选择器selector，返回当前元素element在选择器返回的集合中的index。返回-1，则表示不符合
.index(…)

12. DOM Manipulation Methods Accept Callbacks
after
before
append
prepend
addClass
toggleClass
removeClass
wrap
wrapAll
wrapInner
val
text
replaceWith
css
attr
html
这些方法可以传入一个函数。回调函数遍历时候，this指向当前元素，元素在集合中的位置作为第1个参数，其返回值作为相应实际的值

jQuery('li').html(function(i){ return 'Index of this list item: ' + i; });

在使用".html()" 或 ".attr('href)"等方法设置值的时候，回调函数第2个参数为当前值

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. Determine the Type of Object
"isEmptyObject"根据是不是空对象（没有直接的或是继承的属性）返回一个布尔值
"isPlainObject"根据是不是"{}"或者"new Object()"创建的JavaScript对象返回一个布尔值

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

14. Closest(…) Enhancements
".closest()"可以接受一组选择器过滤（遍历父代的时候只选择一定特征的）和第2个参数控制遍历深度
.closest(…)

15. New Events! focusIn and focusOut
上面提到的这两个新委派事件方法用来在当前元素或后代元素获得焦点的时候捕获。注意只有从上到下的捕获过程而没有冒泡过程，也就是说外层的父代的元素比引起事件的目标"target"元素先触发。

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

focusIn and focusOut events.

更多参考

"14 days of jQuery "
API documentation!

上一篇：手机网站开发必修课[2009总结版]

下一篇：subversion总结

文章评论

登录后评论

PHP
JavaScript
Linux
MySQL
MongoDB
Python
Docker
Html5
网络
其它
Java
Go
Redis

点击排行

php-fpm安装、配置与优化
转载自：https://www.zybuluo.com/phper/note/89081 1、php中...
centos下postgresql的安装与配置
一、安装(以root身份进行)1、检出最新的postgresql的yum配置从ht...
Mysql的大小写敏感性
MYSQL在默认的情况下查询是不区分大小写的，例如：CREATE TABLE...
关于URL编码
转载自：http://www.ruanyifeng.com/blog/2010/02/url_encoding....
header中的Cache-control
网页的缓存是由HTTP消息头中的“Cache-control”来控制的，常见的...

您现在的位置是：首页 > 学无止境

jQuery 1.4 发布:你必须知道的15个新特征

相关文章

文章评论

点击排行