jquery基础

jQuery 基础概述

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。其设计宗旨是“写得更少，做得更多”。

jQuery 的核心功能

DOM 操作
通过选择器快速定位元素，支持链式调用。例如：

$("p").addClass("highlight").css("color", "red");

事件处理
简化事件绑定，支持动态事件委托：

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

动画效果
内置滑动、淡入淡出等效果：

$("#box").fadeIn(1000).slideUp(500);

Ajax 支持
封装 $.ajax() 方法实现异步请求：

$.ajax({
  url: "data.json",
  success: function(data) {
    console.log(data);
  }
});

jQuery 选择器

• 基本选择器：$("#id"), $(".class"), $("tag")
• 层级选择器：$("parent > child"), $("ancestor descendant")
• 过滤选择器：$("li:first"), $("input[type='text']")

常用方法示例

修改内容

$("#element").html("<b>新内容</b>");
$("#input").val("默认值");

属性操作

$("img").attr("src", "new-image.jpg");
$("a").removeAttr("target");

遍历与查找

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

插件扩展

jQuery 允许通过插件扩展功能。例如，使用 jQuery UI 添加拖拽效果：

$("#draggable").draggable();

性能优化建议

• 缓存选择器结果：var $elem = $("#elem");
• 使用 on() 替代直接事件绑定以支持动态元素。
• 合并多个 DOM 操作，减少重绘次数。

兼容性与版本

• jQuery 1.x 支持 IE6-8，2.x+ 仅支持现代浏览器。
• 最新稳定版为 3.6.0（截至2023年），推荐使用 CDN 引入：

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