JQuery方法没有给出预期的结果答案

【问题标题】：JQuery method not giving the expected resultJQuery方法没有给出预期的结果
【发布时间】：2016-07-01 12:04:33
【问题描述】：

这是我的代码：

$("p").css("background-color", "yellow");
alert( $("p").css("background-color"));

警报返回 undefined 而不是颜色。

我在 Google Chrome 和 Firefox 上都试过了。我从 w3c 网站上提取了这个，在他们的例子中，它可以工作（我什至使用相同的 jQuery 版本）。

【问题讨论】：

尝试改用backgroundColor
DOM 中有P 元素吗？
你添加了jquery js库
似乎在这里工作jsfiddle.net/u2eLngan。仅当您没有 p 元素时，它才会给出 undefined 参见 jsfiddle.net/u2eLngan/2
我从字面上复制粘贴了您的代码，它运行良好，问题一定出在其他地方，您还有更多代码吗？ jsfiddle.net/3hLffwnd

标签： javascript jquery html css

【解决方案1】：

要么在加载 jQuery 之前调用该代码，要么在执行代码时文档中没有 <p> 标记。

要测试第一种情况，请将脚本移至窗口的 onload 事件处理程序。这段代码只有在所有脚本加载完毕后才会运行。

window.onload = function(){
  if(window.jQuery){
    $("p").css("background-color", "yellow");
    alert( $("p").css("background-color"));
  }
  else{
    alert("jQuery is not loaded");
  }
}

如果警报 jQuery is not loaded 打开，则表明您发现了问题

要测试第二种情况，请确保在尝试更改其 CSS 之前在文档中包含 <p> 标记。

【讨论】：

【解决方案2】：

在这个 JSFiddle 中工作得很好。

$("p").css("background-color", "yellow");
alert( $("p").css("background-color"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
test
</p>

验证您的 HTML 中是否有 <p> 标记（就像我的小提琴中一样），并检查您是否包含 JQuery，如下所示：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

【讨论】：

我部分同意 Turnip，也许在 DOM 中没有 <p> 元素的附加示例来重现原始错误会更好。但我还是选择了投赞成票，投反对票在这里不合适
我添加了一些关于我的 JSFiddle 及其工作原理的解释。但大多数时候，一个例子胜于雄辩，尤其是一个非常小的工作例子。感谢您的提醒，从现在开始我将解释更多我的答案。

【解决方案3】：

试试这个而不是你的脚本。

  $(document).ready(function(){
            $("button").click(function(){
               $("p").css("background-color", "yellow");
        alert( $("p").css("background-color"));
            });
        });

html 试试这个

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

</body>

这是基本的 Javascript。您应该需要使用 Javascript 定义要更改的 html 属性。

【讨论】：

【解决方案4】：

确保您已将 JQuery 源代码包含在 head 标记中。

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

代码在 JSFiddle 上运行良好。结帐：here

【讨论】：

OP 包含 jQuery，否则会抛出错误

【解决方案5】：

没关系，我找到了它不起作用的原因。我在这条指令之后创建了p，所以它实际上没有选择任何内容。

【讨论】：

这里有很多人为您提供正确有效的答案，您应该接受其中一个。这不是自我回答问题的情况
您可能应该接受@beetlejuice 的回答，而不是添加您自己的回答