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 p") // 后代选择器DOM操作
常见的DOM操作方法：
$("#element").html() // 获取HTML内容
$("#element").html("新内容") // 设置HTML内容
$("#element").text() // 获取文本内容
$("#element").attr("href") // 获取属性值
$("#element").css("color") // 获取样式属性事件处理
绑定和触发事件：
$("#button").click(function() {
alert("按钮被点击");
});
$("#input").keypress(function(event) {
if (event.which == 13) {
alert("按下了回车键");
}
});动画效果
基础动画方法：
$("#box").hide() // 隐藏元素
$("#box").show() // 显示元素
$("#box").toggle() // 切换显示/隐藏
$("#box").fadeIn() // 淡入
$("#box").fadeOut() // 淡出
$("#box").slideUp() // 向上滑动隐藏Ajax请求
发送异步请求：
$.get("url", function(data) {
console.log(data);
});
$.post("url", {name: "value"}, function(data) {
console.log(data);
});
$.ajax({
url: "url",
type: "GET",
success: function(data) {
console.log(data);
}
});链式调用
jQuery支持链式调用：
$("#element")
.css("color", "red")
.slideUp()
.slideDown();实用工具方法
常用工具函数：
$.trim(" 字符串 ") // 去除空格
$.each(array, function(index, value) {}) // 遍历数组
$.extend({}, obj1, obj2) // 合并对象插件扩展
自定义jQuery插件：
$.fn.myPlugin = function() {
this.css("color", "blue");
return this;
};
$("#element").myPlugin();最佳实践
- 使用
$(document).ready()确保DOM加载完成 - 缓存jQuery选择器结果避免重复查询
- 使用事件委托处理动态元素
- 优先使用原生JavaScript处理简单任务
学习资源
掌握这些基础知识后，可以进一步学习高级主题如动画队列、Promise接口和自定义动画效果。
