Javaweb_jQuery动画&遍历&事件&显示/隐藏&抽奖&插件机制
以下是一个使用jQuery实现的简单动画效果、遍历DOM元素、事件绑定、显示和隐藏元素以及抽奖系统的代码示例。
<!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>
.box { width: 50px; height: 50px; background-color: red; }
.hide { display: none; }
</style>
</head>
<body>
<button id="animateBtn">动画</button>
<button id="toggleBtn">显示/隐藏</button>
<div class="box" id="theBox"></div>
<button id="traverseBtn">遍历DOM</button>
<div id="result"></div>
<script>
$(document).ready(function() {
// 动画效果
$('#animateBtn').click(function() {
$('#theBox').animate({
width: "toggle"
}, 3000);
});
// 显示/隐藏
$('#toggleBtn').click(function() {
$('#theBox').toggleClass('hide');
});
// DOM遍历
$('#traverseBtn').click(function() {
$('#result').empty();
$('div').each(function(index, element) {
$('#result').append('Div ' + index + ': ' + $(element).attr('class') + '<br>');
});
});
});
</script>
</body>
</html>这段代码展示了如何使用jQuery库来实现基本的动画、显示和隐藏、事件绑定以及DOM元素遍历。点击相应的按钮会触发对应的功能。这个示例简单易懂，适合作为学习jQuery的入门教程。
评论已关闭