Question

我正在尝试使用JQuery来设置我的HTML页面，但它不起作用。

我的JQuery是否正确？

<script>
    $(document).ready(function() {
        $("div").css("color", "red");
    });
</script>


<div class="container-fluid text-center jumbotron">
    <h1 id="heading1">Protector of the Environment</h1>
    <h3 id="heading2">Wangari Maathai</h3>
</div>

Answer 1

我只添加了jQuery库，并且效果很好。检查以下代码段：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $("div").css("color", "red");
    });
</script>


<div class="container-fluid text-center jumbotron">
    <h1 id="heading1">Protector of the Environment</h1>
    <h3 id="heading2">Wangari Maathai</h3>
</div>

Answer 2

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $("div").css("color", "red");
    });
</script>


<div class="container-fluid text-center jumbotron">
    <h1 id="heading1">Protector of the Environment</h1>
    <h3 id="heading2">Wangari Maathai</h3>
</div>

Answer 3

jquery库必须通过script标签显式添加。添加库后，您的代码将开始工作。

可以使用CDN（内容交付网络）添加jquery库

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

或者如果您有本地jquery文件，也可以使用它。

<script src="myProject/JavaScripts/jquery-3.3.1.js"></script>

Answer 4

添加jQuery库

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 5

请使用具有类名的CSS。

angle = Math.toRadians(45)

Answer 6

由于适用于h1和h3的CSS无法被父div覆盖，因此可能会产生这种类型的问题，因此请尝试将CSS也应用于h1和h3

 $(document).ready(function() {
      $("div, div h1, div h3 ").css("color", "red");
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<div class="container-fluid text-center jumbotron">
    <h1 id="heading1">Protector of the Environment</h1>
    <h3 id="heading2">Wangari Maathai</h3>
</div>

JQuery样式没有得到应用

6 个答案: