我正在尝试使用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>
我只添加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>
<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>
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>
添加jquery库
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
请使用classname应用css。
<script>
$(document).ready(function() {
$("div.text-center").css("color", "red");
});
</script>
这种类型的问题可能是由于CSS应用于h1和h3而无法由父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>