jQuery对象链详解

Posted on June 16, 2016 本文总阅读量次

jQuery函数通过返回jQuery对象集，可以继续使用jQuery函数，这样就形成了一个链条。
需要注意的是，有些方法会改变对象集，此时想要返回到上一个对象集，要用end()方法。

<table>
  <tr>
    <td>As You Like It</td>
    <td>Comedy</td>
    <td></td>
  </tr>
  <tr>
    <td>All's Well that Ends Well</td>
    <td>Comedy</td>
    <td>1601</td>
  </tr>
  <tr>
    <td>Hamlet</td>
    <td>Tragedy</td>
    <td>1604</td>
  </tr>
  <tr>
    <td>Macbeth</td>
    <td>Tragedy</td>
    <td>1606</td>
  </tr>
  <tr>
    <td>Romeo and Juliet</td>
    <td>Tragedy</td>
    <td>1595</td>
  </tr>
  <tr>
    <td>Henry IV, Part I</td>
    <td>History</td>
    <td>1596</td>
  </tr>
  <tr>
    <td>Henry V</td>
    <td>History</td>
    <td>1599</td>
  </tr>
</table>

$('td:contains(Henry)') // Find every cell containing "Henry"
  .parent() // Select its parent
  .find('td:eq(1)') // Find the 2nd descendant cell
    .addClass('highlight') // Add the "highlight" class
  .end() // Return to the parent of the cell containing "Henry"
  .find('td:eq(2)') // Find the 3rd descendant cell
    .addClass('highlight'); // Add the "highlight" class

在这个例子中

1 2	$('td:contains(Henry)') // Find every cell containing "Henry" .parent()

表示包含了文本Henry的列，所在的tr，也就是包含了文本Henry的行。

$('td:contains(Henry)') // Find every cell containing "Henry"
  .parent() // Select its parent
  .find('td:eq(1)') // Find the 2nd descendant cell
    .addClass('highlight') // Add the "highlight" class

find方法，改变了对象集，变成了这些行的第二列的集合。而addClass方法在对这些列进行操作后，将对象集原样返回，仍然是第二列的集合。
此时，如果要重新获取上一个对象集，也就是包含了文本Henry的行，需要使用end方法。
end()方法不是针对函数，而是对象集的，返回的永远是上一个对象集，而不是上一次操作的结果，所以

$('td:contains(Henry)') // Find every cell containing "Henry"
  .parent() // Select its parent
  .find('td:eq(1)') // Find the 2nd descendant cell
    .addClass('highlight') // Add the "highlight" class
  .end() // Return to the parent of the cell containing "Henry"

返回到

1 2	$('td:contains(Henry)') // Find every cell containing "Henry" .parent() // Select its parent

而不是

1
2
3

$('td:contains(Henry)') // Find every cell containing "Henry"
  .parent() // Select its parent
  .find('td:eq(1)') // Find the 2nd descendant cell

所以

1
2
3

.end() // Return to the parent of the cell containing "Henry"
.find('td:eq(2)') // Find the 3rd descendant cell
  .addClass('highlight'); // Add the "highlight" class

获取到包含了文本Henry的行后，继续对这些行的第三列进行addClass操作。

有些方法如无参的text()方法，不再返回对象链，而是一个字符串，这样，不仅对象集改变，而且对象链也无法继续下去了。因为是个字符串，此时，不可以使用end方法获取text()方法对应的对象集。话说，实际开发过程中，获取到这些文本，也应该是操作的终点。

使用get()方法或get(index)或者使用[]会将对象转为普通的dom对象，不能再使用jQuery函数，所以，对象链也被破坏了。此时，不可以使用end方法获取text()方法对应的对象集。

使用对象链对同一个元素进行连续操作或在附近的元素间移动和操作，在实际开发中用处很大。但是如果链条过长，在可读性方面较差，应该拆解成几个语句。当拆解成多个语句时，有时候会使用变量存储jQuery对象集，这时候要注意一个问题，当jQuery对象集增加或减少jQuery对象时，变量的对象集不会相应修改，对应的然后是原来的对象集。详见本站的《浅谈变量对jQuery对象集的引用》
您可以在这里查看效果和调试。