为什么这个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

您正在使用的其他库可能会覆盖$ sign。 要确保$属于jQuery，请使用immediate-function：

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

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

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());