JQuery引入及相关标签和动态效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery 引入及相关标签和动态效果示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight { background-color: yellow; }
</style>
</head>
<body>
<h2>JQuery 引入及相关标签和动态效果示例</h2>
<button id="highlight">高亮显示段落</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<script>
// 当按钮被点击时，为所有段落添加高亮类
$('#highlight').click(function() {
$('p').toggleClass('highlight');
});
</script>
</body>
</html>这段代码展示了如何使用JQuery库来为页面上的元素添加动态效果。当用户点击按钮时，所有的段落标签会切换高亮背景色。这个简单的示例演示了JQuery如何使得前端开发更加便捷和高效。
评论已关闭