jquery代码

以下是关于jQuery代码的常见用法和示例，涵盖基础操作、事件处理、DOM操作等核心功能：

基础语法

jQuery通过$()函数选择元素，支持CSS选择器语法：

// 选择所有<p>元素
$("p").hide();

// 选择class为test的元素
$(".test").css("color", "red");

// 选择id为demo的元素
$("#demo").html("Hello World");

事件处理

jQuery简化了事件绑定：

// 点击事件
$("#btn").click(function() {
  alert("Button clicked");
});

// 表单提交事件
$("form").submit(function(e) {
  e.preventDefault();
  console.log("Form submitted");
});

DOM操作

常见DOM操作方法：

// 插入内容
$("#container").append("<div>New element</div>");

// 修改属性
$("img").attr("src", "new-image.jpg");

// 遍历元素
$("li").each(function(index) {
  console.log(index + ": " + $(this).text());
});

AJAX请求

简化异步数据请求：

$.ajax({
  url: "api/data",
  method: "GET",
  dataType: "json",
  success: function(response) {
    $("#result").text(response.message);
  },
  error: function(xhr, status, error) {
    console.error("Error:", error);
  }
});

动画效果

内置动画方法：

// 显示/隐藏
$("#box").fadeIn(500);
$("#box").slideUp(300);

// 自定义动画
$("#element").animate({
  opacity: 0.5,
  left: "+=50"
}, 1000);

链式调用

jQuery支持方法链式调用：

$("div")
  .addClass("highlight")
  .css("font-weight", "bold")
  .fadeOut(1000);

插件扩展

自定义jQuery插件示例：

$.fn.greenify = function() {
  this.css("color", "green");
  return this; // 保持链式调用
};

$("p").greenify();

注意事项

• 使用$(document).ready()确保DOM加载完成：

  $(document).ready(function() {
  // 初始化代码
  });

• 现代浏览器已原生支持多数jQuery功能，考虑项目需求决定是否引入jQuery
• jQuery 3.x版本移除了旧版API，需注意兼容性