jquery实例
jQuery 实例
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是一些常见的 jQuery 实例，帮助快速上手。
选择器示例
jQuery 选择器用于选取 HTML 元素，语法类似于 CSS 选择器。
// 选取所有 <p> 元素
$("p").css("color", "red");
// 选取 ID 为 "demo" 的元素
$("#demo").hide();
// 选取 class 为 "test" 的元素
$(".test").fadeOut();事件处理
jQuery 可以轻松绑定事件，例如点击、鼠标移入等。
// 点击按钮时隐藏段落
$("button").click(function() {
$("p").hide();
});
// 鼠标移入时改变背景色
$("div").mouseenter(function() {
$(this).css("background-color", "lightblue");
});DOM 操作
jQuery 提供了丰富的 DOM 操作方法，如添加、删除或修改元素。
// 在元素末尾追加内容
$("p").append("追加的文本");
// 删除所有 <div> 元素
$("div").remove();
// 修改元素属性
$("img").attr("src", "new-image.jpg");动画效果
jQuery 内置了多种动画效果，如淡入淡出、滑动等。
// 淡入显示元素
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
// 向上滑动隐藏元素
$("p").slideUp();
// 自定义动画
$("div").animate({
left: '250px',
opacity: '0.5'
}, 1000);Ajax 请求
jQuery 简化了 Ajax 请求，方便与服务器交互。
// 加载远程数据
$("#content").load("demo.txt");
// 发送 GET 请求
$.get("test.php", function(data) {
alert("数据: " + data);
});
// 发送 POST 请求
$.post("test.php", { name: "John" }, function(data) {
alert("结果: " + data);
});表单处理
jQuery 可以方便地获取表单数据或验证输入。
// 获取输入框的值
$("button").click(function() {
alert("输入的值: " + $("#input1").val());
});
// 阻止表单提交
$("form").submit(function(event) {
event.preventDefault();
alert("表单未提交");
});链式调用
jQuery 支持链式调用，可以在一行代码中执行多个操作。
$("#p1")
.css("color", "red")
.slideUp(2000)
.slideDown(2000);以上实例涵盖了 jQuery 的常见用法，适合快速入门和参考。更多功能可以参考 jQuery 官方文档。
