JQuery 级联操作实践

本文通过示例展示了如何优化JQuery代码中的级联操作,提高代码可读性和性能。建议包括:减少级联调用,使用closest()替代多次parent(),缓存重复使用的JQuery对象,避免频繁DOM查找,以及利用对象字面量优化css设置。遵循这些最佳实践,可以使代码更加健壮且易于维护。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 请看下面这段代码:

$(this).css('background', 'red');

$(this).parent().parent().css('display', 'none');

var a = $('td', $(this).parent().parent()).eq(0).text();

var b = $('td', $(this).parent().parent()).eq(1).find('span').eq(1).text();

 

以上代码理解起来是费时的,必须先知道dom结构。

一种更容易理解些的写法:

var $this = $(this);

var $tr = $this.closest('tr');

var $tds = $tr.find('td');

$this.css('background', 'red');

$tr.css('display', 'none');

var a = $tds.eq(0).text();

var b = $tds.eq(1).find('span:nth-child(2)').text();

 

原则:

1. 如果出现3次以上级联,通常都可以优化。

2.   重复出现的jquery对象多用缓存。如$this, $tr, $tds. 可以提高性能,代码更容易读。

3. 找父节点如果多次出现parent()级联, 最好用closest()替换。性能快,好理解,而且即使dom结构变化,js也无需改代码。

      代码中尽可能少用next(),parent()等寻址方式,因为dom结构一旦发生变化,js代码也会失效。

      多设置class,通过class来查找元素是提高代码健壮性的好办法。

4.  $(this).parent().parent().find('td') 比 $('td', $(this).parent().parent())  性能快,清晰易读。

 

另外css是不需要级联的。

$(this).css('border-left', ‘red').css('border-right', 'red').css('border-bottom', 'red')

可以写成

$(this).css({

         'border-left': ‘red',

         'border-right': 'red',

         'border-bottom': 'red'

})

性能快, 易读。

 

更多jquery实践,大家可以参考这篇文章:

http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值