使用jQuery更改背景颜色

Question

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

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

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

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

- Susie

Answer 1

使用 document.ready 来处理JS代码。

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

- andi

Answer 2

使用$(document).ready()函数：

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

请查看jsfiddle，以获得有效示例。

- Oliver

Answer 3

window.onload很可能被其他东西覆盖了。

相反，尝试使用

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

这是 $(document).ready 的速记方式。

这里 是讨论 onload 和 ready 事件之间差别的地方。

- user1234

Answer 4

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

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

或者更简洁地说：

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

- Kevin Ji

Answer 5

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

在末尾添加 (); 调用它。

http://jsfiddle.net/p2Uwx/5/ <-- 更新的 fiddle

- BenM

---

除非您的JavaScript位于实际元素之后，否则在所有情况下都无法正常工作（至少正确）。没有()是正确的，尽管jsFiddle上的window.onload可能被jQuery覆盖。 - Kevin Ji

是的，我建议他们使用 $(document).ready()。 - BenM

谢谢你的回答，它起作用了，但我只是好奇，为什么我们必须在结尾处添加();？ - Susie

嗨，苏茜。这不是最佳实践，特别是在使用jQuery时，$(document).ready比window.onload更适合。至于你关于末尾的();的问题。当你在javascript中编写一个函数时，你只是声明它。要让它运行，你可以调用它，或者如果你想在声明后立即运行它，你可以添加();，它就会运行。有时它被称为立即调用函数表达式或IIFE（iffy）。 - BenM

这段代码目前等同于 $('.myClass td').css("background-color", "yellow");，没有使用 window.onload，这实际上违背了使用 $(document).ready 或 window.onload 的初衷。 - Kevin Ji