jQuery 1.4实现15个新特性实例源码_Javascript教程(3)_H5之家

复制内容到剪贴板代码: <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() );
});

jQuery 1.4 也允许你将选择符作为  .index()  的第一个参数。这样做会返回当前元素在你指定的选择符所匹配出的元素集合中的索引值。

还得提醒一点，这一方法返回的是数值，如果文档中无法找到指定条件的元素，会返回数值 -1 。

详细了解  .index(…)

12. DOM 操纵可接收回调函数

现在，大部分的DOM操纵方法都支持了将函数作为单一参数传入（ .css()  和  .attr()  传入为第二个参数）。这个函数会为选择集中的每一个元素都跑一遍，从而为相应操纵方法提供更“有个性”的值。

下列方法支持这一功能：

after

before

append

prepend

addClass

toggleClass

removeClass

wrap

wrapAll

wrapInner

val

text

replaceWith

css

attr

html

有了回调函数，你就能在选择集中利用 this 关键字来访问当前元素，用回调函数的第一个参数来访问其索引值。

复制内容到剪贴板代码: jQuery('li').html(function(i){
return 'Index of this list item: ' + i;
});

还有还有，上面的某些方法还提供第二个参数供你利用。如果你调用的是一个设定型方法（如 .html() 和 .attr('href...) ），你还能取得当前值。例如：

复制内容到剪贴板代码: 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. 判定对象类型

jQuery 1.4 新增了两个全新的辅助函数（都直接位于 jQuery 命名空间下），可以帮助你判别你正在操纵的是何种对象。

第一个函数是 isEmptyObject , ，它返回一个布尔值，判定对象是否为空（）。第二个是 isPlainObject ，它返回的布尔值代表传递过去的参数是否为JavaScript的简单对象（plain object），也就是用 {} 或 new Object() 创建的对象。

复制内容到剪贴板代码: jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({foo:1}); // false
jQuery.isPlainObject({}); // true
jQuery.isPlainObject(window); // false
jQuery.isPlainObject(jQuery()); // false

了解更多： isPlainObject(…) , isEmptyObject(…)

14. Closest(…) 的功能增强

jQuery的 .closest() 方法现在可以接受一组选择符作为参数。当你需要遍历某一元素的所有上级，找到一个以上符合特定特征的最近元素时，此功能就能派上用场。

而且，现在它还能接受上下文环境作为第二个参数，也就是说你可以控制DOM遍历的深度或者说远度。虽然说大家可能很少会用到这两个新特性，但一旦用上效果是惊人的！

了解更多 .closest(…)

15. 新事件！ focusIn 与 focusOut

如前所述，现在部署 focus 和 blur 事件时，你需要使用 focusin 和 focusout 这两个新事件。这两个事件帮助你在特定元素或者该元素的子元素获取/失去焦点时采取行动。

复制内容到剪贴板代码: jQuery('form')
.focusin(function(){
jQuery(this).addClass('focused');
});
.focusout(function(){
jQuery(this).removeClass('focused');
});

值得说明的是，这两个事件不会传播开来（即所谓的“冒泡”），它们会被捕获住。也就是说，外部元素（父辈）会在作孽的“目标”元素（causal "target" element）之前被触发。