YII Blog
Yeah Cheung 's Yeah Cheung
yeah
如需合作,请发邮件! (realloveyou@foxmail.com)
热门文章
搜索
计数器
62813
最新留言
链接
最新评论
jQuery 1.4 发布:你必须知道的15个新特征
yeah
posted @ Jan 16, 2010 08:07:55 PM
in 教程
, 2136 阅读
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('', {
id: 'foo',
css: {
fontWeight: 700,
color: 'green'
},
click: function(){
alert('Foo has been clicked!');
}
});
复制代码在之前需要这样： jQuery('')
.attr('id', 'foo')
.css({
fontWeight: 700,
color: 'green'
})
.click(function(){
alert('Foo has been clicked!');
});
复制代码第一段代码中,id添加到元素的属性上,为foo；css和click属性调用相应的方法,再比如,创建一个超链接: jQuery('', {
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"：朝某个方向遍历直到符合传进这些方法的选择器。
比如一列水果
复制代码要取得"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
复制代码而下面代码调用时候就不起作用了。 Query('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 - is within
复制代码.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()"的新方式，之前只是传入一个元素返回表示位置的数字
一种是不传入参数
复制代码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!
原文：http://net.tutsplus.com/tutorial ... ures-you-must-know/
作者: James Padolsey
1. Passing Attributes to jQuery(…)
jQuery 1.4支持传送一个对象作为第2个参数给jquery自身。
在1.4，创建一个元素，可以这样做 jQuery('', {
id: 'foo',
css: {
fontWeight: 700,
color: 'green'
},
click: function(){
alert('Foo has been clicked!');
}
});
复制代码在之前需要这样： jQuery('')
.attr('id', 'foo')
.css({
fontWeight: 700,
color: 'green'
})
.click(function(){
alert('Foo has been clicked!');
});
复制代码第一段代码中,id添加到元素的属性上,为foo；css和click属性调用相应的方法,再比如,创建一个超链接: jQuery('', {
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"：朝某个方向遍历直到符合传进这些方法的选择器。
比如一列水果
- Apple
- Banana
- Grape
- Strawberry
- Pear
- Peach
复制代码要取得"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
复制代码而下面代码调用时候就不起作用了。 Query('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 - is within
复制代码.has(…)jQuery.contains(…)
9. Unwrap Elements!
对应".wrap()"方法添加了一个".unwrap()"的新方法，用来去掉任一元素的父元素
Foo
复制代码去掉（unwrap）p可以这样： jQuery('p').unwrap();
复制代码变成
Foo
复制代码.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()"的新方式，之前只是传入一个元素返回表示位置的数字
一种是不传入参数
- Apple
- Banana
- Grape
- Strawberry
- Pear
- Peach
复制代码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!
Oct 22, 2018 08:16:37 PM
Users of the J query can get lots of benefits with take a look on this share that provides helpful tips and tricks. It’s very important for us that always hire cv professional writing service that provides professional services.