大家好，我是小黄。
在前端开发的世界里，jQuery以其简洁的语法和强大的功能，一直是许多开发者手中的利器。它不仅简化了HTML文档遍历和操作、事件处理、动画以及Ajax交互，还极大地提高了开发效率。本文将带你走进jQuery的世界，通过前1/3的内容，让你快速掌握jQuery的基础知识，为后续的进阶学习打下坚实基础。
一、jQuery简介与环境搭建
1.1 什么是jQuery？
jQuery是一个快速、小巧、功能丰富的JavaScript库。它使得HTML文档遍历和操作、事件处理、动画和Ajax变得更加简单。jQuery的核心特性包括DOM操作、事件处理、效果和Ajax交互，这些特性通过其独特的链式语法和插件机制，让开发者能够以更少的代码实现更复杂的功能。
1.2 搭建jQuery开发环境
要开始使用jQuery，你首先需要下载jQuery库文件，或者通过CDN（内容分发网络）引用。以下是两种常见的方法：
-
下载jQuery：访问jQuery官网（https://jquery.com/download/），选择适合你项目的版本下载，并在HTML文件中通过`<script>`标签引入。
-
使用CDN：在HTML文件的
<head>或<body>标签内添加以下代码，通过CDN引入jQuery库：
注意：版本号（如<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>3.6.0）可能会随着新版本发布而变化，建议使用最新稳定版。
二、jQuery选择器
jQuery选择器基于CSS选择器，但功能更为强大，能够更灵活地选择DOM元素。
2.1 基本选择器
- 元素选择器：
$("p")选择所有<p>元素。 - ID选择器：
$("#myId")选择ID为myId的元素。 - 类选择器：
$(".myClass")选择所有类名为myClass的元素。
2.2 层次选择器
- 后代选择器：
$("div p")选择所有<div>内的<p>元素。 - 子选择器：
$("div > p")选择所有<div>的直接子元素<p>。 - 相邻兄弟选择器：
$("h2 + p")选择紧接在<h2>元素后的第一个<p>元素。 - 一般兄弟选择器：
$("h2 ~ p")选择<h2>元素之后的所有<p>元素。
2.3 属性选择器
[attribute]：选择具有指定属性的元素。[attribute=value]：选择属性等于指定值的元素。[attribute!=value]：选择属性不等于指定值的元素。[attribute^=value]：选择属性值以指定值开头的元素。[attribute$=value]：选择属性值以指定值结尾的元素。[attribute*=value]：选择属性值包含指定值的元素。
三、jQuery DOM操作
3.1 修改内容
- html()：获取或设置匹配元素的HTML内容。
- text()：获取或设置匹配元素的文本内容。
- val()：获取或设置表单字段的值。
示例：
// 获取<p>元素的HTML内容
var htmlContent = $("p").html();
// 设置<p>元素的文本内容为"Hello jQuery!"
$("p").text("Hello jQuery!");
// 获取输入框的值
var inputValue = $("input").val();
// 设置输入框的值为"New Value"
$("input").val("New Value");3.2 修改属性
- attr()：获取或设置匹配元素的属性值。
- removeAttr()：移除匹配元素的指定属性。
示例：
// 获取链接的href属性
var hrefValue = $("a").attr("href");
// 设置链接的title属性为"Click Me"
$("a").attr("title", "Click Me");
// 移除链接的href属性
$("a").removeAttr("href");3.3 添加/移除CSS类
- addClass()：为匹配元素添加一个或多个类。
- removeClass()：从匹配元素中移除一个或多个类。
- toggleClass()：切换匹配元素的类（如果元素有该类则移除，如果没有则添加）。
示例：
// 为所有<p>元素添加类名"highlight"
$("p").addClass("highlight");
// 从所有<p>元素中移除类名"highlight"
$("p").removeClass("highlight");
// 切换<p>元素的类名"highlight"
$("p").toggleClass("highlight");四、jQuery事件处理
4.1 绑定事件
jQuery提供了简洁的事件绑定方法，如click(), mouseover(), mouseout(), keydown(), keyup()等。
示例：
// 当按钮被点击时，执行函数
$("#myButton").click(function() {
alert("Button clicked!");
});
// 当鼠标悬停在链接上时，改变其文本颜色
$("a").mouseover(function() {
$(this).css("color", "red");
});
// 当鼠标移出链接时，恢复其文本颜色
$("a").mouseout(function() {
$(this).css("color", "");
});4.2 移除事件
使用off()方法可以移除之前绑定的事件处理器。
示例：
// 移除按钮的click事件
$("#myButton").off("click");4.3 触发事件
使用trigger()方法可以手动触发指定元素上的事件。
示例：
// 手动触发按钮的click事件
$("#myButton").trigger("click");通过本文的学习，你已经掌握了jQuery的基本概念、环境搭建、选择器、DOM操作以及事件处理的基础知识。
各位小伙伴还在BOSS直聘hr已读不回？！试试这个宝藏小程序！大家快看这里。
创作不易，各位帅气漂亮的小伙伴点个关注再走呗！！
