jQuery技术

有效提高 jQuery 代码效率的25个技巧(4)

字号+ 作者:H5之家 来源:H5之家 2016-11-29 13:00 我要评论( )

12. 了解事件代理 与之前相比,jQuery能够更容易得向DOM元素无缝添加事件。这是很棒的特性,然而向元素添加太多的事件是效率很差的。在很多情况下事件代理允许你

12. 了解事件代理
与之前相比,jQuery能够更容易得向DOM元素无缝添加事件。这是很棒的特性,然而向元素添加太多的事件是效率很差的。在很多情况下事件代理允许你用少量的事件实现同样的目的。最好的解释方法就是使用实例:

$('#myTable TD').click(function(){
$(this).css('background', 'red');
});

当我们点击表格中的单元格时,上面的代码将使所有单元格背景变为红色。比方说,你有一个10列、50行的网格,那么就会绑定上500个事件。嗯,这时就是事件代理出场的时候了:

$('#myTable').click(function(e) {
var clicked = $(e.target);
clicked.css('background', 'red');
});

e’包含了事件的信息,包括了实际接收到click事件的目标元素。我们所要做的就是检查是哪个单元格被点击了。相当的巧妙!
事件代理带来了另外一个好处。正常情况下,在你往一个元素集合绑定一个事件,该事件仅仅只是绑定到这些集合元素上。如果你向DOM中添加了新的元素,尽管这些新元素被选择器所匹配,但是这些新元素并不会绑定上事件处理(你同意我的观点吗?),因此不会有事件发生。
当使用事件代理时,你能够在事件被DOM绑定后仍然可以添加多个被匹配的元素到其中,而它们同样能够正常工作。

13. 利用classes存储状态
这是在html中存储信息最基本的方法。jQuery擅长基于classes进行元素的操作,因此如果你需要存储元素的状态信息,为什么不试试使用额外的class来存储它呢?
这里有一个例子。我们想创建一个展开的菜单。当你点击按钮时,我们希望通过slideDown()和slideUp()进行菜单的展开与收缩。请看下面的HTML:

<div class="expanded menuItem">
<div class="button">
click me
</div>
<div class="panel">
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</div>
</div>

非常的简单!我们仅仅向包装器DIV添加一个额外的class,它只是告诉我们item项的状态。因此在按钮点击之后我们所需要的只是click事件处理,这会执行相应的slideUp()和slideDown()方法。

$('.button').click(function() {

var menuItem = $(this).parent();
var panel = menuItem.find('.panel');

if (menuItem.hasClass("expanded")) {
menuItem.removeClass('expanded').addClass('collapsed');
panel.slideUp(); //liehuo.net
}
else if (menuItem.hasClass("collapsed")) {
menuItem.removeClass('collapsed').addClass('expanded');
panel.slideDown();
}
});

这是很简单的一个例子,不过你可以给一个元素或HTML片断添加额外的classes以存储所有种类的信息。
然而,除了在简单的情况之外我们更应该使用下面这个技巧。

14. 更好的方法是利用jQuery内置的data()方法存储状态
由于某些原因,这方面没有很好的文档可以参考。jQuery提供了内置的data()方法,与DOM元素不同的是,它可以用来存储key/value类型的数据。数据的存储是很容易的:

$('#myDiv').data('currentState', 'off');

我们修改上一个例子的代码,以便于我们可以使用相同的HTML内容(除了没有”expanded”类)并使用data()函数来进行状态的存储:

$('.button').click(function() {

var menuItem = $(this).parent(); //liehuo.net
var panel = menuItem.find('.panel');

if (menuItem.data('collapsed')) {
menuItem.data('collapsed', false);
panel.slideDown();
}
else {
menuItem.data('collapsed', true);
panel.slideUp();
}
});

我相信你也会赞同这种方法的使用的确更加的精巧,对于data()和removeData()的更多信息,请查看jQuery internals

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jquery 技巧与示例

    jquery 技巧与示例

    2016-11-29 12:00

  • 网页中引用jQuery的方法 自学教程视频1qun.com

    网页中引用jQuery的方法 自学教程视频1qun.com

    2016-11-29 11:00

  • 前端程序员应该知道的 15 个 jQuery 小技巧 码农网

    前端程序员应该知道的 15 个 jQuery 小技巧 码农网

    2016-11-28 17:01

  • 超经典jQuery应用技巧大全.pdf

    超经典jQuery应用技巧大全.pdf

    2016-11-27 13:00

网友点评