01-简介
jQuery 是一个功能丰富且广泛使用的 JavaScript 库，它简化了 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作。jQuery 通过其易用的 API，使复杂的 JavaScript 编程任务变得更加简单，并且兼容各种浏览器。
1、jQuery特点
- 简化 DOM 操作：jQuery 提供了简洁的选择器和方法，可以轻松地查找和操作 DOM 元素。
- 跨浏览器兼容性：jQuery 处理了许多不同浏览器之间的兼容性问题，使开发者可以编写一次代码，在多个浏览器中无缝运行。
- 事件处理：jQuery 提供了简单且强大的事件绑定和事件触发功能。
- 动画效果：jQuery 提供了多种内置动画效果，可以轻松实现复杂的动画。
- Ajax 支持：jQuery 使与服务器进行异步通信变得简单，方便实现无刷新页面更新。
- 插件系统：jQuery 拥有丰富的插件库，可以扩展其功能以满足各种需求。
2、为什么要选择用jQuery，而不用原生JavaScript开发
- 简化 DOM 操作：jQuery 提供了简洁、直观的选择器和方法，使 DOM 操作变得更加简单和直观。
- 跨浏览器兼容性：jQuery 处理了不同浏览器之间的兼容性问题，使得开发者可以编写一次代码，并在多个浏览器中无缝运行。
- 简化事件处理：jQuery 提供了简单且强大的事件绑定和事件委托方法，简化了事件处理的代码。
- 丰富的动画效果：jQuery 提供了多种内置动画效果，可以轻松实现复杂的动画。
- 强大的 Ajax 支持：jQuery 使与服务器进行异步通信变得简单，方便实现无刷新页面更新。
- 插件系统：jQuery 拥有丰富的插件库，可以扩展其功能以满足各种需求。
- 简洁的链式语法：jQuery 采用链式语法，可以在一次选择后连续调用多个方法，提高代码的可读性和简洁性。
总结：
尽管现代前端框架（如 React、Vue、Angular）的兴起，使得 jQuery 的使用有所减少，但在许多简单项目、快速开发、或需要跨浏览器兼容性的情况下，jQuery 仍然是一个非常有用的工具。它简化了许多常见的 JavaScript 任务，使得开发者可以更高效地编写功能强大且兼容性良好的 Web 应用程序。
02-jQuery基本使用
1、引入jQuery
可以通过 CDN 或下载本地文件来引入 jQuery。使用 CDN 是推荐的方式，因为它可以提高加载速度。
通过 CDN 引入 jQuery
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2、基本用法
2.1、 选择元素
使用 ‘$’ 函数和选择器来选择元素。
$(document).ready(function() {$("p").css("color", "blue"); // 将所有段落的文字颜色改为蓝色});
2.2、 修改内容
$(document).ready(function() {$("#myParagraph").text("Hello, jQuery!"); // 修改 id 为 myParagraph 的段落的文本});
2.3、 添加和删除元素
$(document).ready(function() {$("ul").append("<li>New item</li>"); // 向所有 ul 元素添加一个新列表项$("li:first").remove(); // 删除第一个列表项});
03-jQuery选择器
A. 基本选择器
1、元素选择器： 选择所有指定元素。
$("p").css("color", "blue"); // 选择所有段落元素
2、ID选择器： 选择具有特定 ID 的元素。
$("#myId").text("Hello, World!"); // 选择 id 为 myId 的元素
3、类选择器： 选择具有特定类的元素。
$(".myClass").hide(); // 选择 class 为 myClass 的元素
4、全部选择器： 选择所有元素。
$("*").css("border", "1px solid red"); // 选择所有元素
B. 层级选择器
1、后代选择器： 选择所有符合条件的后代元素。
$("ul li").css("color", "green"); // 选择所有 ul 元素的 li 后代元素
2、子选择器： 选择所有符合条件的子元素。
$("ul > li").css("color", "blue"); // 选择所有 ul 元素的直接子元素 li
3、同级选择器： 选择所有符合条件的同级元素。
$("h2 + p").css("color", "purple"); // 选择紧接在 h2 元素后的第一个 p 元素$("h2 ~ p").css("color", "orange"); // 选择 h2 元素之后的所有 p 元素
C. 属性选择器
1、具有指定属性的元素：
$("input[name]").css("border", "1px solid red"); // 选择所有具有 name 属性的 input 元素
2、具有指定属性值的元素：
$("input[name='username']").css("background-color", "yellow"); // 选择所有 name 属性值为 username 的 input 元素
3、属性值以特定值开头的元素：
$("input[name^='user']").css("background-color", "lightblue"); // 选择所有 name 属性值以 user 开头的 input 元素
4、属性值以特定值结尾的元素：
$("input[name$='name']").css("background-color", "lightgreen"); // 选择所有 name 属性值以 name 结尾的 input 元素
5、属性值包含特定值的元素：
$("input[name*='ser']").css("background-color", "lightcoral"); // 选择所有 name 属性值包含 ser 的 input 元素
D. 过滤选择器
1、：选择第一个元素。
$("p:first").css("color", "red"); // 选择第一个段落元素
2、：选择最后一个元素。
$("p:last").css("color", "blue"); // 选择最后一个段落元素
3、： 选择索引为偶数或奇数的元素（索引从 0 开始）。
$("tr:even").css("background-color", "lightgray"); // 选择索引为偶数的行$("tr:odd").css("background-color", "lightblue"); // 选择索引为奇数的行
4、（index）： 选择具有指定索引的元素。
$("li:eq(2)").css("color", "purple"); // 选择索引为 2 的列表项
5、（index）： 选择索引大于或小于指定值的元素。
$("li:gt(2)").css("color", "green"); // 选择索引大于 2 的列表项$("li:lt(2)").css("color", "red"); // 选择索引小于 2 的列表项
6、（selector）： 选择不匹配指定选择器的元素。
$("p:not(.intro)").css("color", "gray"); // 选择不具有 class 为 intro 的段落元素
7、（text）： 选择包含指定文本的元素。
$("p:contains('jQuery')").css("font-weight", "bold"); // 选择包含文本 "jQuery" 的段落元素
8、（selector）： 选择包含指定选择器的元素。
$("div:has(p)").css("border", "1px solid blue"); // 选择包含段落元素的所有 div 元素
9、 ：选择没有子元素的空元素。
$("p:empty").text("This was empty"); // 选择所有空的段落元素并添加文本
10、 ：选择至少包含一个子元素的元素。
$("p:parent").css("border", "1px solid green"); // 选择所有包含子元素的段落元素
11、 ：选择可见或隐藏的元素。
$("div:visible").css("border", "1px solid red"); // 选择所有可见的 div 元素$("div:hidden").show(); // 显示所有隐藏的 div 元素
E. 子元素过滤器
1、 ：选择父元素的第一个或最后一个子元素。
$("p:first-child").css("color", "red"); // 选择每个父元素的第一个子元素$("p:last-child").css("color", "blue"); // 选择每个父元素的最后一个子元素
2、（n） ：选择父元素的第 n 个子元素（从 1 开始）。
$("li:nth-child(2)").css("color", "green"); // 选择每个父元素的第二个子元素
3、 ：选择是唯一子元素的元素。
$("p:only-child").css("font-weight", "bold"); // 选择是唯一子元素的段落元素
F. 表单选择器
1、 ：选择所有表单元素。
$(":input").css("border", "1px solid blue"); // 选择所有表单元素
2、 ：选择特定类型的表单元素。
$(":text").val("New text value"); // 选择所有文本输入框并设置新值
3、 ：选择所有选中的复选框或单选按钮。
$(":checkbox:checked").css("border", "1px solid red"); // 选择所有选中的复选框
4、 ：选择所有选中的选项。
$("option:selected").css("background-color", "yellow"); // 选择所有选中的选项
5、 ：选择所有禁用或启用的表单元素。
$(":disabled").css("background-color", "lightgray"); // 选择所有禁用的表单元素
04-方法
jQuery 提供了大量的方法来简化 DOM 操作、事件处理、动画和 Ajax 操作。
A. DOM操作方法
1、‘text()’：获取或设置元素的文本内容。
$("#myElement").text("New text content");
2、‘html()’：获取或设置元素的 HTML 内容。
$("#myElement").html("<b>Bold text</b>");
3、‘val()’：获取或设置表单元素的值。
$("input[type='text']").val("New value");
4、‘attr()’：获取或设置属性值。
$("img").attr("src", "new-image.jpg");
5、‘css()’：获取或设置 CSS 样式。
$("#myElement").css("color", "red");
6、‘addClass()’：向元素添加一个或多个类。
$("#myElement").addClass("newClass");
7、‘ removeClass()’：从元素中删除一个或多个类。
$("#myElement").removeClass("oldClass");
8、‘ toggleClass()’：在元素中切换类。
$("#myElement").toggleClass("active");
9、‘ append() ’：在元素内部的末尾插入内容。
$("ul").append("<li>New item</li>");
10、‘ prepend() ’：在元素内部的开头插入内容。
$("ul").prepend("<li>First item</li>");
11、‘ after() ’：在元素之后插入内容。
$("#myElement").after("<p>New paragraph</p>");
12、‘ before() ’：在元素之前插入内容。
$("#myElement").before("<p>New paragraph</p>");
13、‘ remove() ’：移除元素。
$("#myElement").remove();
14、‘ empty() ’：清空元素的内容。
$("#myElement").empty();
B. 事件处理方法
1、‘ click() ’： 绑定点击事件处理程序。
$("#myButton").click(function() {alert("Button clicked!");});
2、‘ dblclick() ’： 绑定双击事件处理程序。
$("#myButton").dblclick(function() {alert("Button double-clicked!");});
3、‘ hover() ’： 绑定鼠标悬停和离开事件处理程序。
$("#myElement").hover(function() {$(this).css("background-color", "yellow");},function() {$(this).css("background-color", "white");});
4、‘ on() ’： 用于事件委托，绑定多个事件。
$("#parentElement").on("click", ".childElement", function() {$(this).css("color", "red");});
5、‘ off() ’： 移除事件处理程序。
$("#myButton").off("click");
C. 动画效果
1、‘ show() ’： 显示元素。
$("#myElement").show();
2、‘ hide() ’： 隐藏元素。
$("#myElement").hide();
3、‘ toggle() ’： 切换元素的显示状态。
$("#myElement").toggle();
4、‘ fadeIn() ’： 淡入显示元素。
$("#myElement").fadeIn();
5、‘ fadeOut() ’： 淡出隐藏元素。
$("#myElement").fadeOut();
6、‘ slideUp() ’： 向上滑动隐藏元素。
$("#myElement").slideUp();
7、‘ slideDown() ’： 向下滑动显示元素。
$("#myElement").slideDown();
8、‘ animate() ’： 自定义动画。
$("#myElement").animate({left: '250px',opacity: '0.5',height: 'toggle'});