一、jQuery 简介
jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画效果和 AJAX 交互等操作。通过使用 jQuery，开发者可以用更少的代码实现更多的功能，提高开发效率。
优点
- 简洁的语法：提供了简洁的选择器和链式调用，使代码更易读和维护。
- 跨浏览器兼容性：解决了不同浏览器之间的兼容性问题，开发者无需担心在不同浏览器中代码的表现差异。
- 丰富的插件：拥有大量的插件，可以快速实现各种功能，如表单验证、图片轮播等。
二、jQuery 的引入
本地引入
- 从 jQuery 官方网站 下载 jQuery 文件，有压缩版（用于生产环境）和未压缩版（用于开发环境）可供选择。
- 将下载的文件放在项目的合适目录下，然后在 HTML 文件中通过
<script>标签引入：
收起
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入 jQuery</title>
<!-- 引入本地 jQuery 文件 -->
<script src="path/to/jquery.min.js"></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
CDN 引入
CDN（内容分发网络）可以提供更快的加载速度，并且用户可能已经在其他网站上缓存了该文件。可以使用以下方式引入 jQuery：
收起
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入 jQuery</title>
<!-- 引入 CDN 上的 jQuery 文件 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
三、jQuery 基本语法
选择器
jQuery 选择器用于选取 HTML 元素，其语法与 CSS 选择器类似。
元素选择器
选取所有的 <p> 元素：
收起
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 选取所有的 <p> 元素并改变其文本颜色
$("p").css("color", "red");
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
ID 选择器
选取 ID 为 myId 的元素：
收起
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID 选择器</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 选取 ID 为 myId 的元素并改变其背景颜色
$("#myId").css("background-color", "yellow");
});
</script>
</head>
<body>
<div id="myId">这是一个带有 ID 的 div 元素。</div>
</body>
</html>
类选择器
选取所有类名为 myClass 的元素：
收起
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 选取所有类名为 myClass 的元素并改变其字体大小
$(".myClass").css("font-size", "20px");
});
</script>
</head>
<body>
<p class="myClass">这是一个带有类名的段落。</p>
<div class="myClass">这是一个带有类名的 div 元素。</div>
</body>
</html>
事件处理
jQuery 提供了丰富的事件处理方法，用于处理各种用户交互事件。
click 事件
当按钮被点击时，执行相应的操作：
收起
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>click 事件</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 为按钮添加 click 事件处理程序
$("button").click(function() {
alert("按钮被点击了！");
});
});
</script>
</head>
<body>
<button>点击我</button>
</body>
</html>
hover 事件
当鼠标悬停在元素上时，执行相应的操作：
收起
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hover 事件</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 为 div 元素添加 hover 事件处理程序
$("div").hover(
function() {
$(this).css("background-color", "lightblue");
},
function() {
$(this).css("background-color", "white");
}
);
});
</script>
</head>
<body>
<div>鼠标悬停在我上面试试。</div>
</body>
</html>
链式调用
jQuery 支持链式调用，即可以在一个选择器上连续调用多个方法：
收起
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链式调用</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 链式调用多个方法
$("p")
.css("color", "red")
.hide()
.show(1000);
});
</script>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
四、jQuery 动画效果
show () 和 hide ()
显示或隐藏元素：
收起
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>show() 和 hide() 方法</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 点击按钮隐藏段落
$("button:first").click(function() {
$("p").hide();
});
// 点击按钮显示段落
$("button:last").click(function() {
$("p").show();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>隐藏</button>
<button>显示</button>
</body>
</html>
fadeIn () 和 fadeOut ()
淡入或淡出元素：
收起
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fadeIn() 和 fadeOut() 方法</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 点击按钮淡出段落
$("button:first").click(function() {
$("p").fadeOut();
});
// 点击按钮淡入段落
$("button:last").click(function() {
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>淡出</button>
<button>淡入</button>
</body>
</html>
slideDown () 和 slideUp ()
向下滑动或向上滑动元素：
收起
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slideDown() 和 slideUp() 方法</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 点击按钮向上滑动段落
$("button:first").click(function() {
$("p").slideUp();
});
// 点击按钮向下滑动段落
$("button:last").click(function() {
$("p").slideDown();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>向上滑动</button>
<button>向下滑动</button>
</body>
</html>
五、jQuery AJAX
AJAX（Asynchronous JavaScript and XML）允许在不刷新整个页面的情况下与服务器进行异步通信。
$.ajax () 方法
收起
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery AJAX</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$.ajax({
url: "example.txt",
method: "GET",
success: function(response) {
$("p").text(response);
},
error: function() {
alert("请求出错！");
}
});
});
});
</script>
</head>
<body>
<button>获取数据</button>
<p></p>
</body>
</html>
以上就是 jQuery 的基本教程，通过学习这些内容，你可以开始使用 jQuery 来简化你的 JavaScript 开发。
