jquery编程
jQuery 编程基础
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互的操作。以下是 jQuery 的核心功能和使用方法。
引入 jQuery
在 HTML 文件中通过 <script> 标签引入 jQuery 库。可以从 CDN 加载最新版本：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>选择器
jQuery 使用 CSS 选择器语法选取 DOM 元素：
$("#id") // 通过 ID 选择
$(".class") // 通过类名选择
$("div") // 通过标签名选择
$("div.class") // 组合选择DOM 操作
常见的 DOM 操作方法：
$("#element").text("新文本"); // 设置文本内容
$("#element").html("<b>加粗</b>"); // 设置 HTML 内容
$("#element").attr("href", "url"); // 修改属性
$("#element").addClass("active"); // 添加类
$("#element").removeClass("active"); // 移除类事件处理
绑定事件监听器：
$("#button").click(function() {
alert("按钮被点击");
});
$("#input").keypress(function(event) {
if (event.which == 13) {
alert("按下了回车键");
}
});Ajax 请求
发送异步请求：
$.ajax({
url: "api/data",
method: "GET",
dataType: "json",
success: function(response) {
console.log(response);
},
error: function(xhr, status, error) {
console.error(error);
}
});动画效果
内置动画方法：
$("#box").hide(1000); // 淡出
$("#box").show(1000); // 淡入
$("#box").fadeIn(500); // 渐显
$("#box").fadeOut(500); // 渐隐
$("#box").slideUp(300); // 向上滑动隐藏
$("#box").slideDown(300); // 向下滑动显示
$("#box").animate({left: "250px"}, 1000); // 自定义动画jQuery 插件开发
扩展 jQuery 功能：
(function($) {
$.fn.greenify = function() {
this.css("color", "green");
return this;
};
})(jQuery);
// 使用插件
$("p").greenify();链式调用
jQuery 支持链式调用：
$("#element")
.css("color", "red")
.slideUp(200)
.slideDown(200);性能优化
提升 jQuery 代码效率：
- 缓存选择器结果：
var $element = $("#element"); - 使用 ID 选择器优先
- 避免频繁的 DOM 操作
- 使用事件委托：
$("#parent").on("click", ".child", handler);
现代替代方案
随着现代 JavaScript 的发展，原生 DOM API 和框架（如 React、Vue）逐渐取代了 jQuery 的部分功能，但在遗留项目和维护中 jQuery 仍有广泛应用。
注意：jQuery 3.x 版本移除了对 IE8 及以下的支持，如需兼容需使用 jQuery 1.x 版本。
