当前位置:编程学习 > JAVA >>

jQuery最新1.4 版本的十五个新特性

 

文章出处:http://www.weboffer.cn/index.php/html/628.html

 

1. 传参给jQuery(…)

 

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

 

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

 

Js代码 

jQuery(‘<a/>’, {  

id: ‘foo’,  

href: ‘http://google.com’,  

title: ‘Become a Googler’,  

rel: ‘external’,  

text: ‘Go to Google!’  

}); 

 

jQuery(‘<a/>’, {

id: ‘foo’,

href: ‘http://google.com’,

title: ‘Become a Googler’,

rel: ‘external’,

text: ‘Go to Google!’

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

 

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

 

Js代码 

jQuery(‘<div/>’, {  

id: ‘foo’,  

css: {  

fontWeight: 700,  

color: ‘green’  

},  

click: function(){  

alert(‘Foo has been clicked!’);  

}  

}); 

 

jQuery(‘<div/>’, {

id: ‘foo’,

css: {

fontWeight: 700,

color: ‘green’

},

click: function(){

alert(‘Foo has been clicked!’);

}

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

 

Js代码 

jQuery(‘<div/>’)  

.attr(‘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!’);

});2. 直到遇见你…

 

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

 

Html代码 

<ul> 

<li>Apple</li> 

<li>Banana</li> 

<li>Grape</li> 

<li>Strawberry</li> 

<li>Pear</li> 

<li>Peach</li> 

</ul> 

 

<ul>

<li>Apple</li>

<li>Banana</li>

<li>Grape</li>

<li>Strawberry</li>

<li>Pear</li>

<li>Peach</li>

</ul> 

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

 

Js代码 

jQuery(‘ul li:contains(Apple)’).nextUntil(‘:contains(Pear)’); 

 

jQuery(‘ul li:contains(Apple)’).nextUntil(‘:contains(Pear)’);3. 绑定多个事件处理器

 

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

 

Js代码 

jQuery(‘#foo).bind({  

click: function() {  

// do something  

},  

mouseover: function() {  

// do something  

},  

mouseout: function() {  

// do something  

}  

}) 

 

jQuery(‘#foo).bind({

click: function() {

// do something

},

mouseover: function() {

// do something

},

mouseout: function() {

// do something

}

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

 

 

 

4. 依属性指定缓动效果

 

以前只能为一个动画指定一种缓动效果(easing,即动画过程中的速度变化规律。jQuery 原生支持两种缓动效果,swing(默认)和linear 。要使用其他效果,你需要自己另行下载 。),现在你可以为动画的各个属性参数指定不同的缓动效果:

 

Js代码 

jQuery(‘#foo’).animate({  

left: 500,  

top: [500, 'easeOutBounce']  

}, 2000); 

 

jQuery(‘#foo’).animate({

left: 500,

top: [500, 'easeOutBounce']

}, 2000); 

点此查看实际效果

 

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

 

Js代码 

jQuery(‘#foo’).animate({  

left: 500,  

top: 500  

}, {  

duration: 2000,  

specialEasing: {  

top: ‘easeOutBounce’  

}  

}); 

 

jQuery(‘#foo’).animate({

left: 500,

top: 500

}, {

duration: 2000,

specialEasing: {

top: ‘easeOutBounce’

}

}); 

5. 更新的Live 事件

 

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

 

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

 

Js代码 

jQuery(‘input’).live(‘focusin’, function(){  

// do something with this  

}); 

 

jQuery(‘input’).live(‘focusin’, function(){

// do something with this

}); 

6. 控制函数上下文

 

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

 

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

 

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

 

Js代码 

var app = {  

config: {  

clickMessage: ‘Hi!’  

},  

clickHandler: function() {  

alert(this.config.clickMessage);  

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,