jquery例子

jQuery 基本选择器示例

通过选择器获取DOM元素并修改样式或内容：

$("#myId").css("color", "red"); // 通过ID选择
$(".myClass").hide();           // 通过类选择隐藏元素
$("p").text("新内容");          // 修改所有<p>标签文本

jQuery 事件处理

绑定点击事件与事件委托：

$("#btn").click(function() {
  alert("按钮被点击");
});
$(document).on("click", ".dynamic-element", function() {
  console.log("动态元素被点击");
});

jQuery AJAX 请求

发起GET/POST请求并处理响应：

$.ajax({
  url: "api/data",
  type: "GET",
  success: function(response) {
    $("#result").html(response);
  },
  error: function(xhr) {
    console.log("请求失败:", xhr.status);
  }
});

DOM 操作示例

动态添加/删除元素：

$("#list").append("<li>新项目</li>");  // 追加元素
$("#oldItem").remove();               // 删除元素
$("#content").empty();                // 清空子元素

动画效果

淡入淡出与滑动效果：

$("#box").fadeIn(1000);               // 1秒淡入
$("#panel").slideUp(500);             // 0.5秒上滑隐藏
$(".item").animate({ 
  left: "+=50px",
  opacity: 0.5
}, 1000);                            // 自定义动画

表单操作

获取表单值与序列化：

var inputVal = $("#username").val();  // 获取输入值
var formData = $("#myForm").serialize(); // 序列化为查询字符串
$("#checkbox").prop("checked", true); // 设置复选框状态

链式调用

连续执行多个方法：

$("#header")
  .css("background", "#333")
  .find("h1")
  .text("新标题")
  .end()
  .fadeOut(300);