jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使 HTML 文档遍历和操作、事件处理、动画和 Ajax 等事情变得更加简单，具有易于使用的 API，可在多种浏览器中工作。随着 jQuery 的结合，开发人员普及了像编程一样编写 JavaScript 的思想。
jQuery 的核心理念是"写得少，做得多"。它封装了 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。
使用原生 JavaScript 操作 DOM 需要编写大量代码：
<script>
document.getElementById("demo").innerHTML = "<p>Hello World!</p>";
</script>
而使用 jQuery 只需要一行代码：
<script>
$("#demo").html("<p>Hello World!</p>");
</script>
jQuery 提供了类似 CSS 的选择器语法，能够快速定位页面元素。支持 CSS1-CSS3 的所有选择器，以及 jQuery 特有的选择器。
<script>
// 选择所有 class 为 test 的元素
$(".test").doSomething();
// 选择第一个 p 元素
$("p:first").doSomething();
// 选择所有带有 href 属性的元素
$("[href]").doSomething();
</script>
jQuery 解决了不同浏览器之间的兼容性问题，让开发者无需考虑 IE、Firefox、Chrome 等浏览器的差异，代码可以在所有主流浏览器中正常运行。
jQuery 拥有庞大的插件生态系统，涵盖了表单验证、轮播图、日历、图表等各种功能，开发者可以直接使用或基于此进行二次开发。
jQuery 支持链式调用，可以在一行代码中完成多个操作，代码更加简洁优雅：
<script>
$("#myDiv").addClass("active").fadeIn("slow").slideUp("fast");
</script>
以实现"点击按钮隐藏元素"为例：
原生 JavaScript：
<script>
var myElement = document.querySelector("button");
myElement.addEventListener("click", function() {
document.querySelector("p").style.display = "none";
});
</script>
jQuery：
<script>
$("button").click(function(){
$("p").hide();
});
</script>
| 功能 | 原生 JavaScript | jQuery |
|---|---|---|
| DOM 选择 | document.querySelector() | $() |
| 事件绑定 | addEventListener() | on() / click() |
| 类名操作 | classList.add() | addClass() |
| 样式设置 | style.cssText | css() |
| 动画效果 | 需要自己实现或使用 CSS | fadeIn() / slideUp() 等 |
jQuery 支持所有主流浏览器，包括：
下面是一个完整的 jQuery 示例，展示了 jQuery 的基本用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 基础示例</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #3498db;
margin: 20px;
padding: 20px;
color: white;
text-align: center;
line-height: 200px;
font-size: 18px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.box:hover {
background-color: #2980b9;
transform: scale(1.05);
}
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
button {
padding: 10px 20px;
margin: 10px 5px;
background-color: #2ecc71;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}
button:hover {
background-color: #27ae60;
}
input {
padding: 8px 12px;
margin: 10px 5px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
#result {
margin-top: 20px;
padding: 15px;
background-color: #f8f9fa;
border-radius: 5px;
min-height: 50px;
}
</style>
</head>
<body>
<h2>jQuery 基础入门示例</h2>
<div class="container">
<div class="box">点击我</div>
<div class="box">点击我</div>
<div class="box">点击我</div>
</div>
<div>
<button id="hideBtn">隐藏元素</button>
<button id="showBtn">显示元素</button>
<button id="toggleBtn">切换显示</button>
</div>
<div>
<input type="text" id="nameInput" placeholder="输入你的名字">
<button id="greetBtn">问候</button>
</div>
<div id="result"></div>
<script>
$(document).ready(function(){
// 点击盒子改变颜色
$(".box").click(function(){
$(this).css("background-color", "#e74c3c");
$(this).fadeOut("fast");
$(this).fadeIn("fast");
});
// 隐藏所有盒子
$("#hideBtn").click(function(){
$(".box").hide();
});
// 显示所有盒子
$("#showBtn").click(function(){
$(".box").show();
});
// 切换显示状态
$("#toggleBtn").click(function(){
$(".box").toggle();
});
// 问候功能
$("#greetBtn").click(function(){
var name = $("#nameInput").val();
if(name){
$("#result").html("<h3>你好，" + name + "！欢迎使用 jQuery！</h3>");
$("#result").css("color", "#2ecc71");
} else {
$("#result").html("<h3>请输入你的名字</h3>");
$("#result").css("color", "#e74c3c");
}
});
// 输入框回车事件
$("#nameInput").keypress(function(e){
if(e.which == 13){
$("#greetBtn").click();
}
});
});
</script>
</body>
</html>
$(document).ready()：确保文档加载完成后执行代码$(".box")：选择所有 class 为 box 的元素.click()：绑定点击事件$(this)：指代当前被点击的元素.css()：设置 CSS 样式.hide() / .show()：隐藏/显示元素.toggle()：切换元素的显示状态.val()：获取表单元素的值.html()：设置元素的 HTML 内容jQuery 作为一款成熟的 JavaScript 库，以其简洁的语法、强大的功能和优秀的兼容性，成为了前端开发的重要工具。通过学习 jQuery，开发者可以更高效地完成 DOM 操作、事件处理、动画效果和 Ajax 交互等任务，大大提升开发效率。
在实际项目中，根据项目需求选择合适的 jQuery 版本，并遵循最佳实践，能够充分发挥 jQuery 的优势，构建出优秀的 Web 应用。