javascript - Javascript/jQuery中节点访问方式的区别

Question

我对 Javascript/jQuery 中的选择器到底如何工作有点困惑。我有两个以几乎相同的方式调用的方法，它们似乎返回不同的选择器，但我不太清楚为什么。

if (document.URL.indexOf("search?s=") !== -1){
    updateOldSearch();
} else {
    $("li a:contains('Search')").bind("click", replaceWithSearch);
}

这里的 else 语句一切正常:

function replaceWithSearch(){
    this.parentNode.replaceChild(searchWrapper, this); //Works fine
}

但是当我以在我看来相同的方式访问它时(显然它实际上并不相同)，它就崩溃了

function updateOldSearch(){
    var courseTab = $("li a:contains('Search')");
    courseTab.parentNode.replaceChild(newBox, courseTab); //parentNode is undefined
}

对于幕后发生的事情有什么解释吗？ jQuery 是否有一些我滥用的自动转换？

Answer 1

在第一个示例中，this 表示 native DOM 节点。在第二个中，courseTab 表示一个 jQuery 对象。

尝试第二个示例:

function updateOldSearch(){
    var courseTab = $("li a:contains('Search')").get(0);
    courseTab.parentNode.replaceChild(newBox, courseTab);
}