jquery中
jQuery 基础概念
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。其核心特点是“写得更少，做得更多”（Write Less, Do More）。
jQuery 选择器
jQuery 使用 CSS 风格的选择器选取 DOM 元素：
$("p")：选择所有<p>元素。$("#id")：选择 ID 为id的元素。$(".class")：选择所有类名为class的元素。$("div.class")：选择<div>中类名为class的元素。
DOM 操作
- 修改内容：
$("#element").text("新文本")或$("#element").html("<b>加粗文本</b>")。 - 修改属性：
$("#img").attr("src", "new-image.jpg")。 - 添加/移除类：
$("#div").addClass("highlight")或$("#div").removeClass("highlight")。
事件处理
- 绑定点击事件：
$("button").click(function() { alert("按钮被点击"); }); - 通用事件绑定：
$("input").on("change", function() { console.log($(this).val()); });
Ajax 请求
- GET 请求：
$.get("url", function(data) { console.log(data); }); - POST 请求：
$.post("url", { key: "value" }, function(data) { console.log(data); });
动画效果
- 显示/隐藏：
$("#box").hide(500)或$("#box").show(500)（参数为毫秒）。 - 淡入淡出：
$("#box").fadeIn()或$("#box").fadeOut()。
链式调用
jQuery 支持链式调用，例如：
$("#div").css("color", "red").slideUp(300).slideDown(300);实用工具方法
$.each()遍历数组或对象：$.each([1, 2, 3], function(index, value) { console.log(value); });$.extend()合并对象：let merged = $.extend({}, obj1, obj2);
插件扩展
通过 $.fn 扩展自定义方法：
$.fn.highlight = function() {
this.css("background", "yellow");
return this; // 保持链式调用
};
$("p").highlight();性能优化建议
- 缓存选择器结果：
var $element = $("#element")。 - 使用事件委托：
$("#parent").on("click", ".child", handler)。 - 最小化 DOM 操作，合并多次修改。
兼容性与版本
- jQuery 1.x 支持 IE6/7/8，2.x 及以上放弃旧版 IE。
- 最新版本（如 3.6.0）优化了性能并修复了漏洞。
替代方案
现代开发中，原生 JavaScript（如 querySelector、fetch）或框架（React/Vue）可能更适合复杂应用，但 jQuery 仍适用于快速原型或遗留项目维护。
