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.　如果出现３次以上级联，通常都可以优化。

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