JQuery 级联操作实践

来源:互联网 时间:1970-01-01

JQuery 级联操作实践,有需要的朋友可以参考下。

请看下面这段代码:

$(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

版权声明:本文为博主原创文章,未经博主允许不得转载。



相关阅读:
Top