新人求教，不知道该怎么形容这个问题

Question

自学新人，遇到个问题不知道该搜索什么关键词，所以来叨扰大家一下。
这是HTML部分：

<li class="article-item featured">
    <header>Article #2</header>
    //code
</li>
<li class="article-item">
    <header>Article #3</header>
    //code
</li>

这是JS部分：

var article2, article3;
article2=$('.featured');
article2.toggleClass('featured');
article3=article2.next();
article3.toggleClass('featured');

article2的位置是.featured 。article3是article2的同级下一个标签。
但是article3是在article2删除了.featured之后赋值的。
为什么还能准确的找到原.featured的位置？这背后是什么运行机制？
谢谢

Answer 1

article2=$('.featured'); article2 获取到这个节点的引用后，可以执行dom 操作了，

article2.toggleClass('featured'); 这里删除了featured类，我想最大的影响是 下次article5 = $(".featured") 就不能获取到这个节点了，已经赋值了的article2并没有改变，除非重新赋值 article2 = $(".featured") 就拿不到了。

Answer 2

article2是个变量，保存着对第一个li标签的引用地址，article2的值你并没有改变。所以能找到

Answer 3

article2=$('.featured');

这个代码把 article2 指向了 <li class="article-item featured">...

article2.toggleClass('featured');

这个代码 把 <li class="article-item featured"> 变成了 <li class="article-item"> 也仅仅只是去掉了一个 class 而已，操作的是 article2 指向的对象，并没有操作 article2 的指针；除非，你在后面再重新执行一遍这个代码，这个时候才找不到了

article2=$('.featured');

因为这个时候改动的是指针，
ps:当把一个对象赋值给一个变量时，其实是把这个变量指向这个对象；如果你修改变量的属性，其实是修改这个对象，指针没有变；当你重新赋值时，就是把他的指针重新指向右边的表达式；

Answer 4

代码执行完article2=$('.featured');的时候就获取到了article2的位置，toggleClass只改变了article2的class，并不影响article2元素本身。所以并不影响元素的位置

Answer 5

article2=$('.featured');先执行 执行完毕 article2就代表这个DOM 节点 只要没有重新赋值 其他的操作对他没有影响