这篇博客主要展示了如何使用JavaScript的jQuery库来操作DOM元素，包括改变元素的背景色、字体大小、颜色以及实现显示和隐藏的效果。示例中演示了通过$(document).ready()函数绑定事件，以及链式操作和隐式迭代来批量修改元素样式。此外，还介绍了通过按钮点击事件控制元素的显示和隐藏功能。
<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
// 设置p元素 背景色蓝色 字体大小 24px加粗 字体颜色<ul class="mui-table-view mui-table-view-radio">
$("#p1").css({"backgroundColor":"blue","fontSize":"24px","fontWeight":"700","color":"red"})
// 第二种写法
// $("#p1").css("backgroundColor","blue")
// 通过按钮点击事件触发显示和隐藏
$("#showbtn").click(function(){
$("#p1").show();
});
$("#hidebtn").click(function(){
// 让p标签隐藏
$("#p1").hide()
});
// 设置p元素 背景色蓝色 字体大小 字体颜色
// 链式操作
$("#p1").css({"backgroundColor":"blue","color":"red"}).next()css("backgroundColor","red")
// 隐士迭代，自动遍历多个元素
$("li").css("color","green");
})
body部分
<body>
<p id="p1">三生三世</p>
<button type="button" id="showbtn">显示</button>
<button type="button" id="hidebtn">隐藏</button>
</body>
S01E09
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
