jquery 实例
jQuery 实例
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是一些常见的 jQuery 实例，涵盖基础操作和常见场景。
选择元素
通过 jQuery 选择器可以轻松获取 DOM 元素。例如，选择所有 <p> 元素并修改其内容：
$("p").text("Hello, jQuery!");选择类名为 .example 的元素并隐藏：
$(".example").hide();事件处理
为按钮添加点击事件，点击时显示或隐藏元素：
$("#toggleBtn").click(function() {
$("#target").toggle();
});监听输入框的变化事件：
$("#inputField").on("change", function() {
console.log("Input changed: " + $(this).val());
});动画效果
淡入淡出效果：
$("#fadeBtn").click(function() {
$("#box").fadeToggle(1000);
});滑动效果：
$("#slideBtn").click(function() {
$("#panel").slideToggle();
});Ajax 请求
通过 jQuery 发送 GET 请求获取数据：
$.get("https://api.example.com/data", function(data) {
console.log("Received data: ", data);
});发送 POST 请求并提交表单数据：
$.post("submit.php", $("#form").serialize(), function(response) {
alert("Submission successful: " + response);
});DOM 操作
动态添加元素：
$("#container").append("<div>New element</div>");移除元素：
$("#oldElement").remove();表单操作
获取表单输入值：
var username = $("#username").val();阻止表单默认提交行为并验证：
$("#loginForm").submit(function(event) {
event.preventDefault();
if ($("#username").val() === "") {
alert("Username is required!");
}
});链式调用
jQuery 支持链式调用，可以在一行代码中完成多个操作：
$("#element").addClass("active").css("color", "red").fadeOut(500);遍历元素
使用 .each() 遍历元素并执行操作：
$("li").each(function(index) {
console.log("Item " + index + ": " + $(this).text());
});属性操作
获取或设置元素属性：
var href = $("a").attr("href");
$("img").attr("src", "new-image.jpg");修改 CSS 样式：
$("#styledDiv").css({
"background-color": "blue",
"padding": "10px"
});实用工具
检查浏览器窗口大小：
$(window).resize(function() {
console.log("Window width: " + $(window).width());
});延迟执行代码：
$("#delayBtn").click(function() {
$("#message").delay(1000).fadeIn();
});这些实例覆盖了 jQuery 的核心功能，适用于日常开发需求。通过灵活组合这些方法，可以实现复杂的交互效果和动态页面行为。
