jquery基础知识
jQuery 基础知识
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是 jQuery 的核心知识点：
引入 jQuery
在 HTML 文件中通过 CDN 引入 jQuery：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>选择器
jQuery 使用 CSS 选择器语法选取 DOM 元素：
$("#id") // ID 选择器
$(".class") // 类选择器
$("div") // 标签选择器
$("div.class") // 组合选择器DOM 操作
常见 DOM 操作方法：
$("p").text("新内容") // 设置文本
$("p").html("<b>加粗</b>") // 设置 HTML
$("input").val("值") // 设置表单值
$("div").append("<p>新段落</p>") // 追加内容
$("div").remove() // 删除元素事件处理
绑定事件的方法：
$("button").click(function() {
alert("按钮被点击");
});
$("input").keyup(function(event) {
console.log(event.key);
});
// 事件委托
$("ul").on("click", "li", function() {
$(this).toggleClass("active");
});动画效果
基础动画方法：
$("div").hide(1000) // 隐藏元素
$("div").show("slow") // 显示元素
$("div").toggle(500) // 切换显示状态
$("div").fadeIn() // 淡入
$("div").fadeOut() // 淡出
$("div").animate({left: "250px"}, 1000) // 自定义动画Ajax 请求
发送 Ajax 请求的基本方式：
$.ajax({
url: "test.html",
method: "GET",
dataType: "html",
success: function(data) {
$("#result").html(data);
},
error: function(xhr, status, error) {
console.error(error);
}
});
// 简写方法
$.get("test.php", {name: "John"}, function(data) {
console.log(data);
});
$.post("test.php", {name: "John"}, function(data) {
console.log(data);
});实用工具方法
常用工具函数：
$.trim(" hello ") // 去除空格
$.each(array, function(index, value) {}) // 遍历数组/对象
$.extend({}, obj1, obj2) // 合并对象
$.isArray(obj) // 检查是否为数组
$.isFunction(obj) // 检查是否为函数链式调用
jQuery 支持链式调用：
$("div")
.addClass("highlight")
.css("color", "red")
.fadeOut(1000)
.fadeIn(1000);插件扩展
创建 jQuery 插件的基本模式：
(function($) {
$.fn.myPlugin = function(options) {
// 插件逻辑
return this.each(function() {
$(this).html("插件内容");
});
};
})(jQuery);
// 使用插件
$("div").myPlugin();性能优化
使用 jQuery 时的性能建议：
- 缓存选择器结果：
var $divs = $("div"); - 使用 ID 选择器最快
- 尽量缩小选择器范围：
$("div.container")优于$(".container") - 事件委托优于直接绑定
- 合理使用链式调用减少 DOM 查询
以上是 jQuery 的核心基础知识，掌握这些内容可以完成大多数前端交互开发任务。
