jquery - 为什么这个 jquery 代码在页面加载时不起作用？（Wordpress 模板）

Question

$(document).ready(function() {
    alert("hi");
    $('body #pagetop').css("height", "38px");
});

我检查了 jquery 是否正确加载，所以我的 jquery 代码有问题。既不会弹出“hi”，也不会改变 #pagetop 元素的 css。我希望在页面首次加载时加载此代码。

Answer 1

尝试使用：

jQuery(document).ready(function($) { 
    alert("hi");
    $('body #pagetop').css("height", "38px");
});

这是将 jQuery 与其他库一起使用的指南：http: //docs.jquery.com/Using_jQuery_with_Other_Libraries

我还建议使用此代码（来自 HTML5 Boilerplate）：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/jquery-1.9.1.min.js"><\/script>')</script>

这将确保即使 CND 关闭，也可以加载 jQuery 的副本。只需将 替换path/to/为 jQuery 的本地副本即可。

注意：如果您在本地运行，请添加http: 到 Google CDN src。

Answer 2

您正在使用的其他库可能覆盖了 $ 符号。要确保 $ 属于 jQuery，请使用立即函数：

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

还请记住该方法：jQuery.noConflict()如果您使用的是冲突的 JS 库：

var jq = jQuery.noConflict();
jq(function() {
    alert("hi");
    jq('body #pagetop').css("height", "38px");
});

或与以前的组合：

(function($) {
    $(function() {
        alert("hi");
        $('body #pagetop').css("height", "38px");
    });
})(jQuery.noConflict());