jQuery1.4中你应该知道的15个新特性

从Nettuts+博客上看到了这票jQuery1.4新特性的总结性文章，该博总结了15条新的特性，便给出相应的实现代码。觉得不错，便整理后翻译过来供大家参考，并加入了1.32版本的实现方法进行比较性地学习。

一、给jQuery(…)方法传递新的参数：
jQuery()方法是jQuery库的核心方法之一，在1.32版本及早期的版本中，该方法是用来获取节点或者创建DOM对象的，它只支持一个参数。在使用来创建新的DOM对象时，我们若要给该DOM对象添加属性的话，只能通过attr()方法在后面追加，很是不方便，阅读起来也比较累。在 jQuery1.4中，给jQuery方法新增了一个对象型的参数，用来创建新的DOM对象设置该DOM对象相应的属性。
jQuery1.32版本中实现代码：

jQuery('<a></a>').attr({
    id: 'foo',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external'
}).text('Go to Google!')
   .css({
       fontWeight: 700,
       color: 'green'
   })
   .click(function(){
       alert('Foo has been clicked!');
   });

jQuery('').attr({
    id: 'foo',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external'
}).text('Go to Google!')
   .css({
       fontWeight: 700,
       color: 'green'
   })
   .click(function(){
       alert('Foo has been clicked!');
   });

jQuery1.4版本中实现代码：

jQuery('<a>', {
    id: 'foo',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external',
    text: 'Go to Google!',
    css: {
        fontWeight: 700,
        color: 'green'
    },
    click: function(){
        alert('Foo has been clicked!');
    }
});
</a>

jQuery('', {
    id: 'foo',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external',
    text: 'Go to Google!',
    css: {
        fontWeight: 700,
        color: 'green'
    },
    click: function(){
        alert('Foo has been clicked!');
    }
});

阅读更多关于jQuery(…)方法的资料…

二、新增”until”系列方法：

新增”until”系列方法中有三个方法：”nextUntil”, “prevUntil” 和”parentsUntil”，这些方法是用来获取符合条件内的DOM对象。中文你可以理解为“直到”的意思。
若有一段XHtml代码如下：

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

Apple
Banana
Grape
Strawberry
Pear
Peach

现在我想选取从含有apple的li到含有pear的li,则代码实现：
jQuery1.32版本中实现代码：

jQuery('ul li').slice(1, 4);

jQuery('ul li').slice(1, 4);

jQuery1.4版本中实现代码：
jQuery(‘ul li:contains(Apple)’).nextUntil(‘:contains(Pear)’);
虽然上面两者的选取效果是一样的，但若现在我在含有apple的li到含有pear的li中间再添加内容的话，1.32版本的代码就需要修改了，而1.4 版本的则可继续使用，也就说1.4版本的代码可用性和语义性增强了。
阅读更多关于prevUntil, nextUntil, parentsUntil方法的资料…

三、给事件对象一次绑定多个事件：
1.4不再像1.32版本中那样链式地给对象绑定事件，现在你可以将多个事件归纳后绑定到一个方法中。
jQuery1.32版本中实现代码：

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

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

jQuery1.4版本中实现代码：

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()一次点击事件也是适用的哦！
阅读更多关于.bind(…)方法的资料…

四、Per-Property Easing动画效果
在1.32版本中，我们使用animate()方法给对象添加动画效果时，特效很单一，只能再引入jquery.easing.js插件来丰富动画特效。在新版本1.4中将该插件集成到了jQuery库中，这样在使用过的过程中就更加地方便了。
jQuery1.4版本中实现代码：

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

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

当然也可以给附加的属性参数内添加动画效果，如：

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

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

阅读更多关于per-property easing的资料…
五、新增live事件：

在1.32版本中，live()方法只对click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup这些事件提供了支持，而不支持也比较常用的focus和blur事件。在1.4版本中新增了submit, change, focus, blur四种事件的支持。其中focus对应的是focusin事件，而blur对应了focusout事件。

jQuery1.4版本中实现代码：

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

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

六、控制方法的上下文对象：

1.4版本在jQuery命名空间下新增了一个名叫”proxy“的方法，该方法有两个参数：一个是作用域，一个是准备执行的处理方法。在 Javascript中，this关键字很巧妙地自动执行父亲对象或某个DOM元素对象。当有时候我们希望this指向的不是一个DOM元素对象，而是希望它指向一个之前创建的对象。

举个列子，就很容易明白！比如，现在我们有一个app对象，该对象内部有一个”clickHandler“方法和一个命名为”config“的对象。代码如下：

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

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

当我们调用app.clickHandler()方法时，app对象就有了自己的上下文对象：clickHandler方法中的this指向的是 app对象。执行后会弹出内容为”Hi!“的提示框。若现在我希望将该app对象下的clickHandler方法绑定在一个超链接上，如下：

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

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

而此时，当我们点击该超链接时，app对象下的clickHandler方法并不会执行，用Firebug测试则会提示”app.clickHandler is not a function!”。原因在于jQuery（以及绝大部分的事件对象）默认地将事件对象作为了该clickHandler方法的上下文对象，也就是此时 this指向了a超链接标签元素。而我们的实际愿望是希望this执行app对象，那么1.4中我们就可以使用新增的proxy()方法来处理这一问题。代码如下：

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

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

这样执行后提示框就会正常地弹出了。proxy()方法返回的是一个包装后的方法，它将执行你所期望的对象（通过第一个参数传递）。这在其他上下文对象中也很实用，比如给其他方法或插件传递回调函数。

阅读更多关于jQuery.proxy()方法的资料…

七、延迟动画队列：

在平时编写代码时，你或许发现有一个动画效果还没完成呢，下面的代码就已经执行完了。而我们希望的是等动画效果执行完成后或执行一段时间后再执行后面的代码。1.4版本中新增了delay()方法来延迟代码的执行。

jQuery1.32版本中实现代码：

setTimeout(500, function() {
        // do something
});

setTimeout(500, function() {
        // do something
});

jQuery1.4版本中实现代码：

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

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

若你希望延迟一个动画队列比默认的“fx”(queue()函数的默认参数)还要慢的话，你只需要将这个queue的变量名当作delay()方法的第二个参数传递即可。

阅读更多关于.delay(…)方法的资料…

八、判断一个DOM父对象中是否含有某个匹配的子对象：

1.4中新增了一个过滤型的方法has()来判断某个对象是否在某个标签或集合内出现过。该方法将返回在标签中出现的所有匹配子对象的集合，至少会包含一个子对象。若没有找到匹配子对象，则返回的是一个空的集合。

jQuery('div').has('ul');

jQuery('div').has('ul');

当然jQuery1.32版本中的.contains()方法其实也可以达到同样的效果，1.4版本又对.contains()进行了完善。在 1.4版本中通过给.contains()方法传递两个DOM对象参数，从而判断第二个参数对象是否在第一个参数对象中。代码如下：

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

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

阅读更多关于.has(…)，jQuery.contains(…)方法的资料…

 

 

九、去除标签元素的父标签：

在之前的版本中已经有了.wrap()方法来个标签添加新的父标签，而在1.4新版本中又添加了相对的.unwrap()方法来去除标签的父标签。实例Html代码如下：

 

<div>

Foo
</div>

 

Foo

jQuery1.4版本中实现代码：

 

jQuery('p').unwrap();

 

jQuery('p').unwrap();

执行后的话题Html代码如下:

Foo

阅读更多关于.unwrap()方法的资料…
十、不用删除数据，即可删除掉DOM中的标签元素：

新版本中的.detach()方法允许你删除DOM中的任何标签元素，就像.remove()方法一样。但它与.remove()方法的不同之处是：.remove()是将标签直接删除，而.detach()方法则是将标签暂时移除，并通过方法内部调用.data()方法将标签缓存后赋予变量，再后面的代码中若还需要找回该标签，变量则会自动读取缓存的数据；另外若被.detach()方法移除的标签在移除前绑定了事件机制的话，在后面恢复后，该事件机制依然存在，无需再次绑定。
jQuery1.4版本中实现代码：

 

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!"

 

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()方法的资料…
十一、对.index()方法进行了扩展：

1.4新版本中新增了两个.index()的调用方法。而之前，我们将一个标签元素作为.index()方法的参数，并希望执行后返回一个标识当前集合中匹配元素序列号的数字结果。

若有一段XHtml代码如下：

 

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

 

Apple
Banana
Grape
Strawberry
Pear
Peach

点击li标签获得该li标签的序号

jQuery1.32版本中实现代码：

 

$('li').click(function() {
       alert($('li').index(this));
});

 

$('li').click(function() {
       alert($('li').index(this));
});

jQuery1.4版本中实现代码：

 

$('li').click(function() {
       alert($(this).index());
});
//或者
$('li').click(function() {
    alert($(this).index('li'));
});

 

$('li').click(function() {
       alert($(this).index());
});
//或者
$('li').click(function() {
	alert($(this).index('li'));
});

阅读更多关于.index()方法的资料…

十二、DOM控制方法支持回调函数：

在1.4版本中绝大部分的DOM控制方法只支持回调函数作为唯一的参数，除了极个别的（比如：.attr()、.css()）方法中可以作为第二参数。这些回调函数将被匹配集合中所有元素所执行，
以确定哪些应作为该方法的实际值。

下面的这些DOM控制方法都支持回调函数：

* after
* before
* append
* prepend
* addClass
* toggleClass
* removeClass
* wrap
* wrapAll
* wrapInner
* val
* text
* replaceWith
* css
* attr
* html

在回调方法中，若你想访问该匹配集合的话，你需要使用”this”，或者序号index作为该方法的第一个参数。
jQuery1.4版本中实现代码：

 

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

 

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

当然你可以给该回调函数传递第二个参数，比如是在使用设置类的DOM控制方法（如：.html()、.attr()等），你若想得到当前的值。

jQuery1.4版本中实现代码：

 

jQuery('a').attr('href', function(i, currentHref){
    return currentHref + '?foo=bar';
});

 

jQuery('a').attr('href', function(i, currentHref){
    return currentHref + '?foo=bar';
});

正如你看到的一样，在使用.attr()和.css()方法是，当该方法的第一个是属性名称时，你可以将回调函数作为方法的第二参数。

jQuery1.4版本中实现代码：

 

jQuery('li').css('color', function(i, currentCssColor){
    return i % 2 ? 'red' : 'blue';
});

 

jQuery('li').css('color', function(i, currentCssColor){
    return i % 2 ? 'red' : 'blue';
});

十三、检测对象类型方法：

jQuery1.4新版本在命名空间下新增了两个帮助型的方法，用来帮助你检测对象类型。

第一个方法：.isEmptyObject()用来判断一个对象是否是空对象，返回一个布尔类型的结果；
第二个方法：.isPlainObject()用来判断一个对象是否是最原始的Javascript对象(该对象是否是通过{}或者new Object()创建)，同样也返回一个布尔类型的结果。

jQuery1.4版本中实现代码：

 

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

jQuery.isPlainObject({}); // true
jQuery.isPlainObject(window); // false
jQuery.isPlainObject(jQuery()); // false

 

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

jQuery.isPlainObject({}); // true
jQuery.isPlainObject(window); // false
jQuery.isPlainObject(jQuery()); // false

阅读更多关于.isEmptyObject().isPlainObject()方法的资料…

十四、.Closest()方法扩展：

扩展后的.Closest()支持数组选择器作为参数，这在遍历一个元素的祖先元素时非常有用。

 

<style></style>

  <script src="/scripts/jquery-1.4.js"></script>

<ul>
<li></li>
<li></li>
</ul>

<script>
var close = $("li:first").closest(["ul", "body"]);
$.each(close, function(i){
  $("li").eq(i).html( this.selector + ": " + this.elem.nodeName );
});
</script>

 

执行后的结果是：

* ul: UL
* body: BODY

另外该方法还支持使用上下文对象作为它的第二参数，也就是说你可以遍历任意上下文对象直到的元素的祖先元素。这个扩展使用的列子非常少，但在内部使用时非常的有效率。
阅读更多关于.closest()方法的资料…

十五、新的事件机制（focusIn 、focusOut）：

新版本中若要给事件对象委派”focus”和”blur”事件，也可以使用.focusIn()和.focusOut()方法（它们是一一对应的）。更加重要的是focus和blur事件不支持.live()方法委派，但focusIn和focusOut事件是支持.live()方法委派。

jQuery1.4版本中实现代码：

 

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

jQuery('input')
 .live('focusin', function(){
     jQuery(this).addClass('focused');
 });
 .live('focusout', function(){
     jQuery(this).removeClass('focused');
 });

 

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

   jQuery('input')
    .live('focusin', function(){
        jQuery(this).addClass('focused');
    });
    .live('focusout', function(){
        jQuery(this).removeClass('focused');
    });

阅读更多关于.focusin().focusin()方法的资料…