javascript jquery
jQuery 简介
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它兼容多种浏览器，并提供易于使用的 API。
jQuery 的基本用法
引入 jQuery 库后，可以通过 $ 或 jQuery 访问其功能。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 代码在 DOM 加载完成后执行
});
</script>选择器
jQuery 使用 CSS 选择器选取元素。
$("#id") // 通过 ID 选择
$(".class") // 通过类选择
$("div") // 通过标签名选择
$("div.class") // 组合选择 DOM 操作
jQuery 提供了丰富的 DOM 操作方法。
$("#element").html("新内容"); // 设置 HTML 内容
$("#element").text("新文本"); // 设置文本内容
$("#element").attr("href", "url"); // 修改属性
$("#element").addClass("active"); // 添加类
$("#element").removeClass("active"); // 移除类 事件处理
jQuery 简化了事件绑定。
$("#button").click(function() {
alert("按钮被点击");
});
$("#input").on("keyup", function() {
console.log($(this).val());
});动画效果
jQuery 内置了常见的动画效果。
$("#box").hide(); // 隐藏元素
$("#box").show(); // 显示元素
$("#box").fadeIn(); // 淡入
$("#box").fadeOut(); // 淡出
$("#box").slideUp(); // 向上滑动隐藏
$("#box").slideDown(); // 向下滑动显示 Ajax 请求
jQuery 简化了 Ajax 调用。
$.ajax({
url: "data.json",
method: "GET",
success: function(data) {
console.log(data);
},
error: function(error) {
console.error("请求失败", error);
}
});
// 简写形式
$.get("data.json", function(data) {
console.log(data);
});链式调用
jQuery 支持链式调用，提高代码简洁性。
$("#element")
.css("color", "red")
.addClass("highlight")
.fadeOut(1000);插件扩展
jQuery 支持通过插件扩展功能。
// 示例插件
$.fn.highlight = function() {
this.css("background", "yellow");
return this;
};
$("#text").highlight();注意事项
- jQuery 3.x 版本不再支持 IE 6-8。
- 现代 JavaScript（如 ES6+）和框架（如 React、Vue）逐渐取代 jQuery 的部分功能，但在遗留项目中仍广泛使用。
如需进一步学习，可参考 jQuery 官方文档。
