使用 jQuery 更改背景颜色答案

【问题标题】：Change background color using jQuery使用 jQuery 更改背景颜色
【发布时间】：2013-08-30 19:11:01
【问题描述】：

我正在尝试使用 jQuery 更改背景颜色。我究竟做错了什么？我知道这可以用 CSS 更容易地完成，但我正在尝试用 jQuery 来完成。

链接到jsfiddle。我正在尝试将“嗨”的背景更改为黄色。

window.onload=function(){
     $('.myClass td').css({'background-color': 'yellow'}); 
}

<table>
    <tr class="myClass">
        <td>Hi</td>
    </tr>
    <tr>
        <td>Bye</td>
    </tr>
</table>

【问题讨论】：

标签： jquery jsp web-applications html-table

【解决方案1】：

为你的 JS 使用 document.ready。

$(document).ready(function(){
     $('.myClass td').css({'background-color': 'yellow'}); 
});

【讨论】：

【解决方案2】：

使用$(document).ready():

$(document).ready(function(){
     $('.myClass td').css({'background-color': 'yellow'}); 
});

有关工作示例，请参阅 jsfiddle。

【讨论】：

【解决方案3】：

window.onload 可能被某些东西覆盖了。

不如试试

$(function(){
     $('.myClass td').css({'background-color': 'yellow'}); 
});

这是$(document).ready 的简写。

Here 讨论了onload 和ready 事件之间的区别。

【讨论】：

【解决方案4】：

将你的函数绑定到 jQuery 的 document.ready 事件：

$(document).ready(function () {
    $('.myClass td').css({'background-color': 'yellow'});
});

或者，更简洁：

$(function () {
    $('.myClass td').css({'background-color': 'yellow'});
});

【讨论】：

【解决方案5】：

window.onload=function(){
     $('.myClass td').css("background-color", "yellow"); 
}();

刚刚添加在();最后调用它。

http://jsfiddle.net/p2Uwx/5/

【讨论】：

这在所有情况下实际上都不起作用（至少正确），除非您的 JavaScript 在实际元素之后。没有 () 是正确的，尽管 jsFiddle 上的 window.onload 可能被 jQuery 覆盖。
是的，我建议他们改用 $(document).ready()。
感谢您的回答，它有效，但我只是好奇，为什么我们必须添加 ();最后？
嗨，苏西。这不是最佳实践，尤其是在使用 jQuery 时，$(document).ready 比 window.onload 更合适。至于你关于 () 的问题；在末尾。当你用 javascript 写出一个函数时，你只是在声明它。要让它运行，您可以调用它，或者如果您希望它在声明后立即运行，您可以添加 ();它会运行。它有时被称为立即调用函数表达式或 IIFE (iffy)
这段代码目前等效于$('.myClass td').css("background-color", "yellow");，没有window.onload，这基本上违背了使用$(document).ready或window.onload的目的。