jquery教程入门
jQuery 入门教程
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是 jQuery 的入门指南。
引入 jQuery
在 HTML 文件中通过 CDN 引入 jQuery。推荐使用官方或 Google 的 CDN：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>基本语法
jQuery 的核心是通过选择器选取元素并执行操作。语法结构为 $(selector).action()：
$(document).ready(function() {
// 当 DOM 加载完成后执行
$("button").click(function() {
$("p").hide(); // 点击按钮时隐藏所有段落
});
});常用选择器
jQuery 使用 CSS 选择器语法选取元素：
$("#id") // 通过 ID 选择
$(".class") // 通过类名选择
$("tag") // 通过标签名选择
$("parent > child") // 子元素选择事件处理
jQuery 简化了事件绑定：
$("#btn").click(function() {
alert("按钮被点击");
});
$("input").keypress(function(event) {
console.log("按键码: " + event.which);
});DOM 操作
常见的 DOM 操作方法：
$("#div").html("<b>新内容</b>"); // 设置 HTML
$("#div").text("纯文本内容"); // 设置文本
$("#input").val("新值"); // 设置表单值
$("#div").append("<p>追加内容</p>"); // 末尾添加
$("#div").prepend("<p>头部添加</p>"); // 开头添加动画效果
jQuery 提供内置动画方法：
$("#box").hide(1000); // 1 秒内隐藏
$("#box").show("slow"); // 慢速显示
$("#box").toggle(500); // 切换显示状态
$("#box").fadeIn(); // 淡入
$("#box").slideUp(); // 滑动收起Ajax 请求
简化 Ajax 请求的示例：
$.get("url", function(data) {
console.log("GET 响应:", data);
});
$.post("url", {key: "value"}, function(data) {
console.log("POST 响应:", data);
});链式调用
jQuery 支持链式调用：
$("#div")
.css("color", "red")
.slideUp(200)
.slideDown(200);实用工具方法
jQuery 提供工具函数：
$.trim(" 字符串 "); // 去除空格
$.isArray(obj); // 检查是否为数组
$.each(array, function(index, value) {
console.log(index, value);
});插件扩展
jQuery 支持通过插件扩展功能：
$.fn.myPlugin = function() {
this.css("color", "blue");
};
$("#text").myPlugin(); // 调用自定义插件注意事项
- 使用
$(document).ready()确保 DOM 加载完成后再操作。 - 选择器尽量具体化以提高性能。
- 新项目建议考虑现代框架（如 React、Vue），但 jQuery 仍适用于维护旧项目。
通过以上内容可快速上手 jQuery 基础操作。更多功能可查阅官方文档 jQuery API。
