jquery教程
jQuery 简介
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。它兼容多种浏览器，广泛应用于前端开发。
jQuery 安装
通过 CDN 引入是最常用的方式，在 HTML 文件中添加以下代码：
<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()$是 jQuery 的别名。selector用于查找 HTML 元素。action()是对元素执行的操作。
示例：隐藏所有段落
$("p").hide();常用选择器
- 元素选择器：
$("p")选取所有<p>元素。 - ID 选择器：
$("#demo")选取 ID 为demo的元素。 - 类选择器：
$(".test")选取所有 class 为test的元素。 - 组合选择器：
$("p.intro")选取 class 为intro的<p>元素。
事件处理
jQuery 提供简洁的事件绑定方法：
$("button").click(function() {
alert("按钮被点击");
});常见事件包括 click、dblclick、mouseenter、keypress 等。
DOM 操作
- 获取内容：
$("#demo").text(); // 获取文本 $("#demo").html(); // 获取 HTML 内容 - 设置内容：
$("#demo").text("新文本"); $("#demo").html("<b>新HTML</b>"); - 修改属性：
$("img").attr("src", "new-image.jpg");
动画效果
- 隐藏/显示：
$("p").hide(1000); // 1秒内隐藏 $("p").show("slow"); // 慢速显示 - 淡入淡出：
$("div").fadeIn(); $("div").fadeOut(); - 滑动效果：
$("div").slideUp(); $("div").slideDown();
Ajax 请求
jQuery 简化了 Ajax 调用：
$.get("url", function(data) {
alert("数据加载成功: " + data);
});支持 $.get()、$.post() 和 $.ajax() 等方法。
链式调用
jQuery 允许将多个操作链接在一起：
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);插件扩展
jQuery 支持通过插件扩展功能，例如表单验证插件 jQuery Validation：
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>学习资源
- 官方文档：jQuery API Documentation
- 在线教程：w3schools jQuery
- 书籍推荐：《jQuery in Action》《Learning jQuery》
通过以上内容，可以快速掌握 jQuery 的核心功能并应用于实际项目。
