jquery案例
以下是一些常见的 jQuery 案例，涵盖基础操作、动画效果、表单处理等场景，适合学习和参考：
基础 DOM 操作
通过 jQuery 选择器获取元素并修改内容或样式：
// 修改文本内容
$("#target").text("Hello, jQuery!");
// 修改 CSS
$(".box").css("background-color", "red");
// 添加/移除类
$("#button").addClass("active");
$("#button").removeClass("inactive");事件绑定
处理点击、悬停等交互事件：
// 点击事件
$("#btn-submit").click(function() {
alert("Button clicked!");
});
// 悬停事件（鼠标进入/离开）
$(".menu-item").hover(
function() { $(this).addClass("highlight"); },
function() { $(this).removeClass("highlight"); }
);动画效果
实现滑动、淡入淡出等动画：
// 淡入淡出
$("#fade-btn").click(function() {
$("#box").fadeOut(500).fadeIn(500);
});
// 滑动效果
$("#slide-btn").click(function() {
$("#panel").slideToggle("slow");
});AJAX 请求
动态加载数据或提交表单：
// GET 请求
$.get("api/data", function(response) {
$("#result").html(response);
});
// POST 请求
$("#form").submit(function(e) {
e.preventDefault();
$.post("api/submit", $(this).serialize(), function(data) {
console.log("Submission successful:", data);
});
});表单验证
实时校验输入内容：
$("#email").on("input", function() {
const email = $(this).val();
if (!email.includes("@")) {
$(this).addClass("error");
} else {
$(this).removeClass("error");
}
});动态内容操作
添加或删除 DOM 元素：
// 添加列表项
$("#add-item").click(function() {
$("#list").append("<li>New Item</li>");
});
// 删除元素
$(".delete-btn").click(function() {
$(this).parent().remove();
});插件使用案例
集成第三方插件（如日期选择器）：
<input type="text" id="datepicker">
<script>
$("#datepicker").datepicker();
</script>这些案例覆盖了 jQuery 的常见应用场景，可根据实际需求调整代码逻辑。
