Question

我想在网站上使用一些jQuery。

我首先编写了一个微小的静态测试页面，其中只包含能够专注于jQuery部分的相关元素。我的脚本最终在这个测试页面上正常工作。

接下来，我尝试在（本地）WordPress网站上运行此脚本。现在脚本不起作用，特定问题似乎是它找不到任何h2元素。

当我添加

(function(){
    console.log("I'm here!!");
    jQuery('html').css('background','green');
})();

控制台正确记录并且背景变为绿色所以看起来 jQuery以及我的脚本都正确加载。

现在我添加

(function(){
    var anchorH2 = jQuery('h2');
    console.log(anchorH2.text());
})();

将空字符串打印回控制台。在我的测试页面上，h2文本正确打印回来。

我认为(function(){})是jQuery(document).ready的缩写，所以我认为 DOM未满载也不是问题。

我在控制台JS下的SyntaxError: Using //@ to indicate source map URL pragmas is deprecated. Use //# instead下遇到一个语法错误：div.excerpt h2。但是，我在我的脚本工作的测试页面上遇到同样的错误，所以我不确定它是否与手头的问题有任何关联。

以下是我的DOM的一部分（选择器应为h2但我将其替换为{{1}}以进行测试。

enter image description here 有人可以建议我在这里误解或忽视吗？

Answer 1

我相信（function（）{}）是jQuery（document）.ready的缩写。所以我认为没有完全加载的DOM也不是问题。

不，事实并非如此。简写涉及将函数传递给$（或jQuery）函数：

$(function () { });
// or 
jQuery(function () { });

你写的是IIFE：

(function () { })();

这些非常不同，IIFE与jQuery或DOM准备无关。

Answer 2

因为当您按标签名称选择元素时（在您的情况下为h2），jquery会返回一个元素数组（因为页面上可能有多个带有h2标记的元素）。因此，对元素数组运行text（）函数将返回undefined。

尝试在第0个元素上运行text（）函数（或迭代所有元素），它会起作用

(function(){
    var anchorH2 = jQuery('h2');
    console.log($(anchorH2[0]).text());
})();

这是小提琴http://jsfiddle.net/RKks8/1/

jQuery没有找到一些元素

2 个答案: