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表示本机DOM节点。在第二个中，courseTab表示jQuery对象。

尝试第二个例子：

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

Answer 2

jQuery是否有一些自动转换？

有点儿。您的事件侦听器有效，因为jQuery calls it so that“ this关键字是对正在传递事件的元素的引用”。注意“元素”，而不是“jQuery集合”。

相反，您的courseTab变量包含一个jQuery实例（而不是一个普通的DOM节点）。使用

$("li a:contains('Search')").each(function() {
    this.parentNode.replaceChild(newBox, this);
});

或

$("li a:contains('Search')").replaceWith(newBox);

Javascript / jQuery中节点访问方法的区别

2 个答案: