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="path/to/jquery.min.js"></script>基本语法
jQuery 的核心是通过 $ 或 jQuery 函数选择元素并操作：
$(selector).action();例如，选择所有 <p> 元素并隐藏：
$("p").hide();选择器
jQuery 使用 CSS 选择器语法选取元素：
- 元素选择器：
$("p") - ID 选择器：
$("#id") - 类选择器：
$(".class") - 组合选择器：
$("p.class")
事件处理
绑定事件的方法：
$("button").click(function() {
alert("按钮被点击");
});常用事件：
click()：点击事件hover()：悬停事件keypress()：键盘按下事件
DOM 操作
修改元素内容：
$("#id").text("新文本"); // 设置文本
$("#id").html("<b>加粗文本</b>"); // 设置 HTML修改属性：
$("img").attr("src", "new-image.jpg"); // 修改 src 属性添加或移除类：
$("p").addClass("highlight"); // 添加类
$("p").removeClass("highlight"); // 移除类动画效果
显示和隐藏元素：
$("#id").hide(); // 隐藏
$("#id").show(); // 显示
$("#id").toggle(); // 切换显示/隐藏淡入淡出：
$("#id").fadeIn(); // 淡入
$("#id").fadeOut(); // 淡出滑动效果：
$("#id").slideUp(); // 上滑隐藏
$("#id").slideDown(); // 下滑显示Ajax 请求
发送 GET 请求：
$.get("url", function(data) {
console.log(data);
});发送 POST 请求：
$.post("url", { key: "value" }, function(data) {
console.log(data);
});加载远程内容：
$("#result").load("ajax-content.html");链式调用
jQuery 支持链式调用，多个操作可以连续执行：
$("p").css("color", "red").slideUp(2000).slideDown(2000);实用工具方法
遍历数组：
$.each(array, function(index, value) {
console.log(index + ": " + value);
});扩展对象：
var obj = { name: "John" };
$.extend(obj, { age: 30 });
console.log(obj); // { name: "John", age: 30 }注意事项
-
确保 DOM 加载完成后再执行 jQuery 代码：
$(document).ready(function() { // jQuery 代码 }); -
简写形式：
$(function() { // jQuery 代码 });
通过以上方法，可以快速掌握 jQuery 的基本用法并开始开发动态网页。
