jquery例子

jQuery 基础示例

选择元素与修改内容
通过 $() 选择器获取元素，使用 .text() 或 .html() 修改内容：

// 修改段落文本
$("p").text("新文本内容");
// 修改div内的HTML
$("#myDiv").html("<strong>加粗文本</strong>");

事件处理
使用 .on() 绑定点击事件：

$("#myButton").on("click", function() {
    alert("按钮被点击");
});

样式操作
通过 .css() 动态修改样式：

// 单个样式
$(".box").css("color", "red");
// 多个样式
$(".box").css({
    "background": "#eee",
    "padding": "10px"
});

DOM操作
追加或移除元素：

// 追加元素
$("#list").append("<li>新项目</li>");
// 移除元素
$(".item").remove();

Ajax请求
发送GET请求并处理响应：

$.get("https://api.example.com/data", function(response) {
    console.log("收到数据:", response);
});

动画效果
使用 .fadeIn() 和 .fadeOut()：

$("#box").fadeOut(500).fadeIn(500);

实用技巧

• 链式调用：jQuery支持方法链式调用：

  $("div").addClass("highlight").fadeTo(1000, 0.5);

• 遍历元素：使用 .each() 遍历匹配的元素集：

  $("li").each(function(index) {
      console.log(index + ": " + $(this).text());
  });

注意事项

• 确保DOM加载完成后执行代码，通常将代码放在 $(document).ready() 中：

  $(document).ready(function() {
      // jQuery代码
  });

• 现代浏览器已支持大部分DOM操作，若项目仅需简单功能，可考虑原生JavaScript替代。