Question

鉴于此HTML：

<div id="flashcard-001" class="flashcard">
    <div class="question">What color is the sky?</div>
    <div class="answer">blue</div>
    <button class="show">Show</button>
    <button class="hide">Hide</button>
</div>

这有效：

$("div")[1].innerHTML = "What color is an apple?";
$("div")[2].innerHTML = '<span style="font-size:48pt;color:red">red</span>';

这样可行（两个按钮都变为红色）：

$("body div button").css('background-color', 'red');

那么为什么这不起作用（第一个按钮不会按预期变红）：

$("body div button")[0].css('background-color', 'red');

Answer 1

正如其他人已经指出的那样，当你使用括号语法时，你正在访问实际的DOM元素而不是jQuery对象。

尝试

$("body div button").eq(0).css('background-color', 'red');

甚至更好

$("body div button:first").css('background-color', 'red');

Answer 2

在jQuery对象之后指定[0]时，您正在访问直接DOM元素，而DOM元素没有定义'css'方法（reference）。 css方法适用于jQuery对象，因为它在jQuery.prototype中定义，并且所有jQuery对象都继承该方法，这就是原因：

$（'body'）。css（'background'，'red'）

Works，$（'body'）[0] .css会抛出错误。

Answer 3

如果你这样做了：

$("body div button")[0].cssText = 'background-color', 'red';

这应该有效。

当你使用[0]时，你正在查看DOM对象，所以此时你不能使用jQuery辅助函数，而只是直接转到dom属性。

Answer 4

改为使用：

$("body div button:first").css(...

请参阅here

为什么这不起作用：$（“body div button”）[0] .css

4 个答案: