jQuery 是一个快速、小巧且功能强大的 JavaScript 库，它使得 HTML 文档的遍历和操作、事件处理、动画和 Ajax 交互变得简单。以下是 jQuery 的基本使用，包括常见的操作和示例。
1. 引入 jQuery
在使用 jQuery 之前，您需要将其引入到您的 HTML 文件中。可以通过 CDN 引入：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2. 基本语法
jQuery 的基本语法是使用 $() 函数。这个函数用于选择 HTML 元素，并且可以链式调用 jQuery 方法。
$(selector).action();
3. 常用操作示例
选择器
jQuery 提供了强大的选择器，可以选择单个或多个元素。
// 选择 ID 为 "myId" 的元素
$("#myId");// 选择类为 "myClass" 的所有元素
$(".myClass");// 选择所有的 <p> 元素
$("p");
修改内容
使用 .text() 或 .html() 方法修改元素的内容。
// 修改文本内容
$("#myId").text("新的文本");// 修改 HTML 内容
$(".myClass").html("<strong>新的HTML内容</strong>");
修改样式
使用 .css() 方法修改元素的 CSS 样式。
// 修改元素的颜色和字体大小
$("#myId").css({"color": "red","font-size": "20px"
});
添加和删除元素
使用 .append()、.prepend()、.remove() 等方法添加或删除元素。
// 在元素末尾添加内容
$("#myDiv").append("<p>新段落</p");// 在元素开头添加内容
$("#myDiv").prepend("<p>新段落</p");// 删除元素
$(".myClass").remove();
事件处理
使用 .on() 方法绑定事件。
// 点击事件
$("#myButton").on("click", function() {alert("按钮被点击了!");
});
Ajax 请求
使用 .ajax() 方法进行 Ajax 请求。
$.ajax({url: "https://api.example.com/data",type: "GET",success: function(data) {console.log(data);},error: function(xhr, status, error) {console.error("请求失败: " + error);}
});
4. 示例代码
以下是一个完整的 HTML 示例，展示了 jQuery 的基本使用：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery 基本使用</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>#myDiv {border: 1px solid #ccc;padding: 20px;margin: 10px 0;}</style>
</head>
<body><h1>jQuery 示例</h1><div id="myDiv">这是一个 div 元素。</div><button id="myButton">点击我</button><script>$(document).ready(function() {// 修改 div 内容$("#myDiv").text("内容已被修改！");// 点击按钮$("#myButton").on("click", function() {alert("按钮被点击了!");// 修改样式$("#myDiv").css("background-color", "lightblue");});});</script>
</body>
</html>
