js jquery

jQuery 简介

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它兼容多种浏览器，提供易于使用的 API，使得开发者可以更高效地操作 DOM 和处理跨浏览器兼容性问题。

核心功能

• DOM 操作：通过选择器快速查找和修改页面元素。
• 事件处理：简化事件绑定与委托机制。
• 动画效果：内置滑动、淡入淡出等动画方法。
• Ajax 支持：封装 $.ajax() 等方法实现异步数据交互。

基础语法

jQuery 通过 $ 或 jQuery 关键字调用，基本语法为：

$(selector).action();

示例：点击按钮隐藏段落

$("button").click(function() {
  $("p").hide();
});

常用方法

• 选择器：

  $("#id")      // ID 选择器
  $(".class")   // 类选择器
  $("div")      // 标签选择器

• DOM 操作：

  .html()       // 获取或设置 HTML 内容
  .text()       // 获取或设置文本内容
  .val()        // 获取或设置表单值
  .attr()       // 操作属性

• 事件：

  .click()      // 点击事件
  .on()         // 通用事件绑定

• Ajax：

  $.get(url, callback);
  $.post(url, data, callback);

链式调用

jQuery 支持链式写法，例如：

$("#demo").css("color", "red").slideUp(2000).slideDown(2000);

注意事项

• 引入 jQuery 库需在自定义脚本之前：

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

• 使用 $(document).ready() 确保 DOM 加载完成后执行脚本：

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

替代方案

现代前端开发中，原生 JavaScript（如 querySelector、fetch）和框架（React、Vue）逐渐替代 jQuery，但在遗留项目或快速原型中仍具价值。