Question

我正在尝试关注YouTube上的jQuery tutorial video以执行以下操作：

如何链接到jQuery Framework大量定位网页上特定元素的方法
如何动态更改CSS属性什么是匿名函数
如何在页面加载时执行JQuery代码

然而，jQuery不起作用，我都看到HTML。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery Ex 1</title>
<style>
table,th,td {
    border: 1px solid black;
}

tr.nice td {
    background: #FAFAD2;
}

tr.mouseon td {
    background: #1E90FF;
}
</style>

<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>

<script type="text/javascript">
$("document").ready(function(){
    $("td").css("padding","6px 10 px");
    $(".hero").css("color","red");

})    
</script>

<noscript>
<h3>This site requires JavaScript</h3>
</noscript>
</head>

<body>
<div id="numbers">
    <p>
    <h3>The Most Important Numbers</h3>
    <table>
        <tr>
            <th>Number</th>
            <th>Why I Care</th>
        </tr>
        <tr>
            <td>2012</td>
            <td>Year We All Die</td>
        </tr>
        <tr>
            <td>12-21-12</td>
            <td>My Next Birthday</td>
        </tr>
        <tr>
            <td>12-21-12</td>
            <td>The Day We All Die</td>
        </tr>
    </table>
    </p>
</div>
<div>
    <h3>The Most Powerful Superhumans</h3>
    <ul id="superhumans">
        <li class="unknown">Beyonder</li>
        <li class="villian">Galactus</li>
        <li class="hero">Franklin Richards</li>
        <li class="hero">Reed Richards</li>
    </ul>
    <p>
    <h4>Who Do You Think is Most Powerful?</h4>
    </p>
    <h6>Very Small</h6>
</div>
<div>
    <h3 id="randstuff">Stuff 1</h3>
    <h4>Stuff 2</h4>
    <h5>Stuff 3</h5>
</div>
</body>
</html>

Answer 1

问题出在这里

""错误地用于分配类

使用：

<li class="villian">Galactus</li> <li class="hero">Franklin Richards</li> <li class="hero">Reed Richards</li>

代替：

<li class=”villian”>Galactus</li> <li class=”hero”>Franklin Richards</li> <li class=”hero”>Reed Richards</li>

正确使用""

<强> FIDDLE DEMO

Answer 2

在document.ready代码

中

$("document").ready(function(){
    $("td").css({"padding":"6px 10 px"});
    $(".hero").css({"color":"red"});
});

在document.ready

结尾处也缺少分号你的html替换中的

<li class="unknown">Beyonder</li>
<li class=”villian”>Galactus</li>
<li class=”hero”>Franklin Richards</li>
<li class=”hero”>Reed Richards</li>

与超越者吞噬者富兰克林理查兹里德理查兹问题是你在正确插入它的第一个li中的（“），但在其他3 li（”）中它是不正确的。你需要在其他3个li中替换（“）和（”）。我用jsfiddle尝试了它并且它有效。

Answer 3

尝试使用onready handler $(document).ready(function(){或$(function(){

 $(function(){
    $("td").css({"padding":"6px 10 px"});
    $(".hero").css({"color":"red"});
});

而不是

 $("document").ready(function(){
    $("td").css("padding","6px 10 px");
    $(".hero").css("color","red");

})

参考：http://api.jquery.com/css/

Answer 4

在html代码中你犯了一个错误，你必须使用“”而不是“”。正如您在中使用的那样。要查看html中生成的内容，请参阅视图源。所以使用“”，您将看到您的代码正在运行。 html代码中只有语法问题。

尝试使用CSS时jQuery无法正常工作

4 个答案: