jquery入门教程
jQuery入门教程
jQuery是一个快速、简洁的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互。以下是入门jQuery的核心内容：
引入jQuery库
在HTML文件中通过CDN引入jQuery：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>或下载本地文件引入：
<script src="jquery-3.6.0.min.js"></script>基础语法
jQuery通过$符号定义，基本语法为：
$(selector).action()selector：选择HTML元素（类CSS选择器）action()：对元素执行的操作
示例：隐藏所有<p>元素
$("p").hide();常用选择器
- 元素选择器：
$("p") - ID选择器：
$("#demo") - 类选择器：
$(".test") - 组合选择器：
$("div, p, .class")
DOM操作
修改元素内容：
$("#demo").text("新文本"); // 修改文本
$("#demo").html("<b>新HTML</b>"); // 修改HTML修改属性：
$("img").attr("src", "new-image.jpg"); // 修改src属性
$("input").val("新值"); // 修改表单值事件处理
常见事件方法：
$("button").click(function() {
alert("按钮被点击");
});
$("input").change(function() {
console.log("输入值变化");
});动画效果
隐藏/显示：
$("#box").hide(); // 隐藏
$("#box").show(); // 显示
$("#box").toggle(); // 切换状态淡入淡出：
$("#box").fadeIn(); // 淡入
$("#box").fadeOut(); // 淡出滑动效果：
$("#box").slideUp(); // 上滑隐藏
$("#box").slideDown(); // 下滑显示AJAX请求
GET请求示例：
$.get("test.php", function(data) {
$("#result").html(data);
});POST请求示例：
$.post("test.php", { name: "John" }, function(data) {
alert(data);
});链式调用
jQuery支持链式写法：
$("#box")
.css("color", "red")
.slideUp(1000)
.slideDown(1000);实用技巧
遍历元素：
$("li").each(function() {
console.log($(this).text());
});动态添加元素：
$("body").append("<div>新内容</div>");过滤元素：
$("div").filter(".important").css("background", "yellow");注意事项
-
确保DOM加载完成后执行jQuery代码：
$(document).ready(function() { // jQuery代码 });或简写为：
$(function() { // jQuery代码 }); -
避免选择器过于复杂，影响性能
-
新项目建议考虑现代框架（如Vue/React），但jQuery仍适合维护旧项目或快速原型开发
