【前端Vue3】——JQuery知识点总结（超详细）
🎼个人主页：【Y小夜】
😎作者简介：一位双非学校的大二学生，编程爱好者，
专注于基础和实战分享，欢迎私信咨询！
🎆入门知识专栏：🎇【MySQL，Java基础，Rust】
🎈热门专栏：🎊【Python，Javaweb，Vue框架】
感谢您的点赞、关注、评论、收藏、是对我最大的认可和支持！❤️
学习推荐：
前些天发现了一个巨牛的人工智能学习网站：前言 – 人工智能教程通俗易懂，风趣幽默，忍不住分享一下给大家。
目录
🎯Jquery简介
🎯选择器
🎈选择器介绍
🎈选择器分类
🥏基本选择器
🥏层次选择器
🥏过滤选择器
🥏内容过滤选择器
🥏可见性过滤选择器
🥏属性过滤选择器
🥏表单选择器
🥏子元素选择器
🥏表单对象属性过滤选择器
🎈利用选择器改变css属性
🥏修改标签属性
🥏修改标签className
🥏直接修改CSS样式
🎯Dom树操作
🎈类选择器操作
🎈内容操作
🥏html()
🥏 text()
🥏 val()
🎈节点操作
🥏插入节点
✨内部插入
✨外部插入
🥏删除节点
🥏替换节点
🥏复制节点
🎯总结
🎯Jquery简介
jQuery是一个功能强大的JavaScript库，旨在简化HTML文档的遍历、事件处理、动画以及Ajax交互等操作。下面将从几个方面详细介绍jQuery：
选择器
- 基础语法：jQuery的基础语法是$(selector).action()，其中美元符号定义jQuery环境，选择器用于”查询”和”查找” HTML元素，action()则是对这些元素执行的操作。
- 类型：jQuery提供了多种类型的选择器，包括ID选择器、元素标签名选择器、类选择器、群组选择器、后代选择器等，这些选择器使得开发者能够灵活地选取页面上的一个或多个元素进行操作。
事件处理
- 基本概念：jQuery是为事件处理特别设计的，页面对不同访问者的响应称为事件，而事件处理程序则是指当HTML中发生某些事件时所调用的方法。
- 常见事件：jQuery支持多种DOM事件，如鼠标事件、键盘事件、表单事件等。例如，click()方法可以处理点击事件，dblclick()处理双击事件，mouseenter()和mouseleave()分别处理鼠标进入和离开事件等。
- 文档就绪事件：为了确保文档在完全加载之前不运行函数，jQuery提供了$(document).ready()方法，这可以防止因DOM未完全加载而导致的操作失败。
动画效果
- jQuery不仅能够轻松处理事件，还能创建各种动画效果，如隐藏、显示、淡入淡出等，这些动画效果可以增强用户的交互体验。
AJAX交互
- jQuery简化了Ajax的使用，使得与服务器端的异步交互变得更加简单和快捷，这对于构建动态和响应式的Web应用至关重要。
兼容性与性能
- jQuery的良好语义、优秀兼容性以及便于管理和扩展的特点，使其成为了最受欢迎的前端库之一。
扩展性
- 通过插件和扩展，jQuery的功能可以无限扩展，满足各种不同的开发需求。
总之，jQuery作为一个广泛使用的JavaScript库，它极大地简化了开发者的工作流程，允许以更少的代码完成更多的工作。通过提供丰富的选择器、便捷的事件处理方法、流畅的动画效果以及简化的Ajax交互等，jQuery帮助开发者高效地构建互动性强、兼容性好的网页应用。
🎯选择器
🎈选择器介绍
jQuery选择器，作为其核心功能之一，允许开发者以极为高效和灵活的方式选取HTML元素。这些选择器基于元素的id、类、类型、属性等，为网页的交互式设计提供了强大的支持。以下是对jQuery选择器的详细介绍：
- 基本选择器：这类选择器包括ID选择器、类选择器、元素选择器等，是日常开发中最常用的工具之一。例如，
$("#id")用于选取具有特定ID的元素，而$(".classname")则用于选取所有给定类名的元素。 - 层次选择器：这类选择器能够根据元素的DOM层次结构进行选择。例如，子元素选择器
$("#id > .classname"]用于选取指定ID元素下所有具有特定类名的直接子元素。 - 过滤选择器：过滤选择器提供了更精细的筛选能力，如
:first选取第一个匹配的元素，:last选取最后一个匹配的元素，:even和:odd分别选取索引为偶数或奇数的元素。 - 内容过滤选择器：内容过滤选择器如
:contains(text)允许根据元素包含的文本来选取元素。这在需要根据页面内容动态变化时特别有用。 - 可见性过滤选择器：可见性过滤选择器如
:hidden和:visible可以用来选取隐藏或显示状态的元素，这对于根据用户的交互来改变页面布局非常有用。 - 属性过滤选择器：属性过滤选择器如
[href]可以选取所有含有特定属性（如href）的元素。这为基于元素属性的操作提供了极大的便利。 - 表单选择器：表单选择器，如
:input、:text、:password等，专门用于处理表单元素，极大地简化了表单操作的复杂度。
除了上述选择器外，jQuery还提供了组合选择器、特殊选择器等多种高级选择器，以满足复杂的开发需求。通过这些选择器，开发者可以轻松地对页面上的元素进行精确的选取和操作，从而创建出响应灵敏、用户体验优秀的Web应用。
总的来说，jQuery的选择器是其强大功能的核心之一，它使得HTML元素的选取变得既简单又高效。无论是基础的元素选择，还是基于复杂条件的元素过滤，jQuery的选择器都能提供强大的支持，帮助开发者构建出性能卓越、用户友好的Web应用。
🎈选择器分类
🥏基本选择器
基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标记名来查找 DOM 元素
- 标签选择器：通过指定的标签名来选取元素。例如，
$("p")会选中文档中的所有标签元素。 - 类选择器：根据给定的class名称匹配元素。如果需要选择具有特定类名“myClass”的所有元素，可以使用
$(".myClass")。 - ID选择器：通过元素的ID来选取元素，这在文档中是唯一的。使用
$("#myID")可以选择具有特定ID“myID”的元素。 - 全局选择器：使用通配符
*可以选择页面上的所有元素，例如$("*")表示选取所有元素。 - 并集选择器：允许将多个选择器组合起来，选取符合任一选择器条件的元素。例如，
$("div, .myClass, #myID")会选择所有标签元素，以及class包含“myClass”和ID为“myID”的元素 
🥏层次选择器
jQuery的层次选择器提供了根据DOM元素之间的层次关系来选取特定元素的能力。
在网页开发中，元素之间的结构关系对于布局和功能实现至关重要。jQuery的层次选择器允许开发者精确地定位到这些具有特定关系的元素，从而对它们进行操作。以下是详细介绍：
- 后代选择器：后代选择器可以选择某元素的所有后代元素（直接子元素及其他层级的子元素）。语法是使用空格来分隔父元素和后代元素，例如
$("ancestor descendant")。 - 子代选择器：子代选择器则更为具体，只能选取父元素的直接子元素。语法是使用“>”符号来连接父元素和子元素，如
$("parent > child")。 - 相邻兄弟选择器：相邻兄弟选择器用于选取与指定元素相邻的另一个元素。语法是使用“+”符号，如
$("prev + next")。 - 一般兄弟选择器：一般兄弟选择器用来选取某一元素后的所有同级元素。语法是使用“~”符号，如
$("prev ~ siblings")
🥏过滤选择器
- :first 和 :last：这两个选择器分别用于选取集合中的第一个和最后一个元素。
- :not(selector)：这个选择器用于选取不符合给定选择器条件的所有元素。
- :even 和 :odd：它们分别用于选取索引为偶数和奇数的元素，索引编号从0开始。
- :eq(index)、：gt(index) 和 :lt(index)：这三个选择器分别用于选取集合中等于、大于或小于指定索引的元素。
- :header：此选择器用于选取所有的标题元素，如
等 
🥏内容过滤选择器
内容过滤选择器是一种根据元素所含内容或子元素来筛选DOM元素的jQuery选择器。
这类选择器的过滤规则主要体现在它所包含的子元素或文本内容上，使得开发者可以根据具体的内容需求来定位和操作特定的页面元素。以下是对几个关键内容过滤选择器的详细介绍：
- :contains(text) 选择器：这个选择器用于选取包含指定文本的元素。例如，
$("p:contains('hello')")能够选取所有包含“hello”文本的元素。这对于动态生成的内容或需要基于文本内容应用样式的场景非常有用。 - :empty 选择器：：empty选择器用来选取不包含任何子元素或文本的空元素。这在需要识别并处理文档中的空白位置时特别有用。例如，可以使用
$("div:empty").remove()来移除所有不包含内容的元素。 - :has(selector) 选择器：：has(selector)选择器用于选取至少包含一个与指定选择器匹配的子元素的元素。例如，
$("div:has(.highlight)")会选择所有包含至少一个带有“highlight”类的子元素的元素。 - :parent 选择器：：parent选择器选择那些至少包含一个子元素或文本的元素。与：empty选择器相对，它允许开发者针对有内容的元素执行操作，如
$("p:parent").addClass("has-content")会给所有包含文本或其他子元素的元素添加“has-content”类。 
🥏可见性过滤选择器
可见性过滤选择器在jQuery中用于根据元素的可见状态来筛选元素，包括：hidden和：visible两种选择器。以下是对这两种选择器的详细介绍：
- :hidden 选择器：这个选择器能够匹配所有不可见的元素，包括由于CSS样式设置为display:none、或者input元素的type属性为hidden的元素。这在进行表单验证或动态显示隐藏元素时非常有用。
- :visible 选择器：与：hidden相对，：visible选择器用于选取所有可见的元素。即那些在页面上可见并占据物理空间的元素。需要注意的是，即使元素通过CSS设置了visibility: hidden或opacity: 0，只要它们在DOM树中占据空间，就仍然会被视作可见元素。
- 应用场景：这些过滤器广泛应用于需要根据用户交互或特定条件显示或隐藏元素的场景。例如，在实现动态表单、幻灯片放映或菜单的显示与隐藏时，这些选择器能大大简化代码逻辑。
- 性能考虑：尽管使用方便，但在处理大量元素时，应注意合理使用这些过滤器以避免不必要的性能开销。特别是在频繁操作DOM时，可能需要更加精细地控制元素的可见性。
- 兼容性问题：虽然jQuery的选择器解决了大部分浏览器兼容性问题，但在实际开发中还是需要测试确保选择器的表现符合预期，尤其是在旧版浏览器中。
🥏属性过滤选择器
jQuery的属性过滤选择器是一类功能强大的选择器，它们允许开发者根据元素的属性及其值来筛选元素。
属性过滤选择器的核心在于能够通过特定的属性和属性值来定位元素，这在处理表单元素、链接、图片等具有特定属性的标签时显得尤为重要。以下是对这类选择器的系统概述：
- 基本属性选择器：
[attribute]选择器可以用来选取拥有指定属性的所有元素，无论属性值是什么。例如，$("div[id]")会选取所有带有id属性的div元素。 - 属性值匹配选择器：
[attribute=value]选择器用于选取属性值完全符合指定值的元素。比如，使用$("input[name='newsletter']")可以选择所有name属性为”newsletter”的input元素。 - 属性值不匹配选择器：
[attribute!=value]选择器用于选取属性值不等于特定值的元素。例如，$("input[name!='newsletter']")将选取所有name属性值不是”newsletter”的input元素。 - 属性值包含选择器：
[attribute*=value]选择器用来选取属性值中包含特定子字符串的元素。如$("input[name*='man']")会选择所有name属性中包含”man”的input元素。 - 属性值前缀选择器：
[attribute^=value]选择器选取属性值以特定值开始的元素。例如，$("input[name^='news']")会选取所有name属性值以”news”开头的input元素。 - 属性值后缀选择器：
[attribute$=value]选择器则用来选取属性值以特定值结尾的元素，如$("input[name$='letter']")选取所有name属性以”letter”结尾的input元素。 - 属性值列表选择器：
[attribute~=value]选择器选取属性值（必须是空格分隔的列表）中包含特定值的元素。例如，$("input[name~='man']")会选择所有name属性中包含单词”man”的input元素。 - 性能考虑：虽然属性过滤选择器提供了强大的选择能力，但在处理大量元素时可能会影响性能。因此，合理地使用这些过滤器，并尽可能减少DOM操作是非常关键的。
- 复合属性选择器：可以通过组合多个属性选择器来进行更精确的元素筛选，如
$("input[id][name$='man']")选取既有id属性且name属性以”man”结尾的所有input元素。 - 兼容性问题：尽管jQuery在很大程度上解决了浏览器间的兼容性问题，但在实际开发中还是需要测试以确保选择器的表现符合预期，尤其是在旧版浏览器中。
🥏表单选择器
JQuery的表单选择器是专为处理HTML表单元素而设计的一系列选择器，它们能够方便地选取表单中的各种输入控件，如输入框、选择框、单选按钮和复选框等。
这些选择器通过利用DOM元素的type属性值来定位特定的表单元素，提供了一种高效且直观的方式来操作表单数据。以下是对jQuery中常见的几种表单选择器的详细介绍：
- :input 选择器：这个选择器用于选取所有类型的表单输入元素，包括
、