jQuery中pushStack()方法使用

pushStack()是jQuery中一个核心方法，用于将DOM元素集合添加到jQuery栈中。它通过为新创建的jQuery对象添加prevObject属性，实现链式调用中的"回溯"功能，使得开发者可以轻松地返回到链式调用的前一个状态。

工作原理

pushStack()方法的工作原理如下：

1. 创建一个新的jQuery对象
2. 将传入的DOM元素集合合并到新对象中
3. 为新对象设置prevObject属性，指向当前jQuery对象
4. 返回新创建的jQuery对象

这种机制形成了一个"栈"结构，遵循"先进后出"的原则，使end()方法能够返回到之前的jQuery对象。

语法

.pushStack(elements, name, selector)

参数说明：

• elements: 需要压入栈的DOM元素数组（或类似数组的集合）
• name: 可选，生成元素数组的jQuery方法名（如"eq"、"find"等）
• selector: 可选，传递给jQuery方法的参数（用于序列化）

代码操作

1. 基本使用

<div>div1</div>
<div>div2</div>
<div>div3</div>
<script>
  // 原始jQuery对象
  var $divs = $('div');
  
  // 使用pushStack压入新的元素集合
  var $newDivs = $divs.pushStack($('div:eq(1)'));
  
  // 这时$newDivs包含第二个div
  $newDivs.css('background', 'yellow');
  
  // 通过end()返回到原始的$divs
  $newDivs.end().css('font-weight', 'bold');
  
  console.log('原始jQuery对象:', $divs);
  console.log('新jQuery对象:', $newDivs);
</script>

2. 与end()方法配合使用

<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<script>
  // 选择所有p元素，然后选择第二个p元素
  var $p = $('p').eq(1);
  
  // 使用pushStack将第二个p元素压入栈
  $p.pushStack($('p:eq(0)'))
    .css('color', 'red')  // 只对第一个p元素生效
    .end()               // 返回到之前的状态（即第二个p元素）
    .css('font-weight', 'bold');  // 对第二个p元素生效
</script>

3. 自定义jQuery插件中的应用

<div id="grandparent">
  I am grandparent.
  <div id="parent">
    I am parent.
    <div id="child">
      I am child.
    </div>
  </div>
</div>
<script>
  // 自定义grandparent方法
  $.fn.grandparent = function() {
    // 获取父元素的父元素
    var parent = this.parent().parent();
    // 使用pushStack返回新的jQuery对象，保留当前对象的引用
    return this.pushStack(parent.get());
  };
  
  // 使用自定义方法
  $('#child')
    .grandparent()  // 返回到祖父元素
    .css('color', 'green')  // 设置祖父元素颜色
    .end()          // 返回到子元素
    .css('font-size', '20px');  // 设置子元素字体大小
</script>

4. 与eq()和slice()方法的关联

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<script>
  // 使用eq()方法（内部使用pushStack）
  $('li').eq(2).css('background', 'yellow');
  
  // 使用slice()方法（内部使用pushStack）
  $('li').slice(1, 3).css('font-style', 'italic');
  
  // 混合使用
  $('li')
    .slice(1, 3)
    .css('color', 'red')
    .end()  // 返回到所有li元素
    .css('font-weight', 'bold');
</script>

5. 从DOM元素创建jQuery对象

<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<script>
  // 从DOM元素创建jQuery对象
  var $divs = jQuery([]).pushStack(document.getElementsByTagName('div'));
  
  // 操作新创建的jQuery对象
  $divs.css('background', 'lightblue');
  
  // 通过end()返回到空的jQuery对象
  $divs.end().css('color', 'red');  // 这不会生效，因为end()后是空对象
</script>