教程揭秘 | 动力节点内部Java零基础教学文档第五篇：jQuery
接上期后续
本期分享第五章节-jQuery
已经更完将近四分之一了，大家有什么收获吗？
有没有觉得自己对Java的认知更明确了呢？
但时间还久，后面要学还有很多~
大家需保持耐心慢慢来
争取你们学习的速度！
跟上我更新的速度哦~
今日新篇章
【jQuery】
【主要内容】
1. jQuery简介
2. jQuery安装
3. jQuery语法
4. jQuery选择器
5. jQuery事件处理
6. jQueryDOM操作
7. jQuery元素遍历
8. jQuery过滤
9. jQuery其它方法
【学习目标】
1. jQuery简介
1.1 jQuery简介
jQuery 库可以通过一行简单的标记被添加到网页中。
1.2 需要具备的基础知识
在开始学习 jQuery 之前，应该对以下知识有基本的了解：
HTML
CSS
JavaScript
1.3 什么是 jQuery
jQuery是一个JavaScript函数库。 安全性、效率性、简洁性
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
Ø HTML 元素选取
Ø HTML 元素操作
Ø CSS 操作
Ø HTML 事件函数
Ø JavaScript 特效和动画
Ø HTML DOM 遍历和修改
Ø AJAX
提示： 除此之外，jQuery还提供了大量的插件。
1.4 为什么使用 jQuery
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行基于dom操作的 JS 框架，而且提供了大量的扩展。
很多大公司都在使用 jQuery， 例如:
阿里
腾讯
百度
Microsoft
IBM
Netflix
2. jQuery安装
2.1 官网
https://jquery.com/
2.2 下载
有两个版本的 jQuery 可供下载：
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
以上两个版本都可以从www.jquery.com中下载。
https://jquery.com/download/
https://code.jquery.com/jquery-3.5.1.min.js
在本在创建一个jquery-3.5.1.min.js的文件
复制网页里面的代码到这个文件里就OK了
或者直接上github上面下载
https://github.com/jquery/jquery/tags
3. jQuery 简单语法
3.1 JQuery作用
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。
3.2 jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例:
3.3 文档就绪事件
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。
3.3.1 方法一
3.3.2 方法二
4. jQuery 选择器
4.1 什么是jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
4.2 相关重点选择器【重点掌握】
4.2.1 元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素:
$("p")/jQuery(“p”)
实例
用户点击按钮后，所有 <p> 元素都隐藏：
实例
4.2.2 #id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：
$("#test")
实例
当用户点击按钮后，有 id="test" 属性的元素将被隐藏：
实例
4.2.3 .class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下：
$(".test")
实例
用户点击按钮后所有带有 属性的元素都隐藏：
实例
4.3 其它选择器【熟悉】
$("*")选取所有元素
$(this) 选取当前的html元素
$("p.intro") 选择class为intro的p元素
$("p:first") 选取第一个p元素
$("p:last") 选取最后一个p元素
$("[href]") 选取带有href属性的元素
$("[href=]") 选取带有href并属性值等于某个值的元素
$("a[target=’_blank’]") 选取a标签中有target属性并且属性值为_blank的元素
$(":button") 选取页面所有的button
$(":checked") 选取页面所有的被选中
$("tr:even") 选取偶数位的tr
$("tr:odd")选取奇数位的tr
$(":selected")选取select中被选中的元素
5. jQuery 事件
5.1 什么是事件？
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
5.1.1 实例：
在元素上移动鼠标。
选取单选按钮
点击元素
在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。
5.1.2 常见 DOM 事件：
5.2 简单用法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：
$("p").click();
下一步是定义什么时间触发事件。可以通过一个事件函数实现：
$("p").click(function(){
// 动作触发后执行的代码!!
});
5.3 常用的 jQuery 事件方法
要想使用事件是必须使用文档就绪的方法的
$()
$() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 简单语法中已经提到过。
5.3.1 单击事件
事件 描述
click 鼠标点击某个对象
实例：给文档中的 id="box" 元素添加点击事件。
在jQuery的事件中，我们也可以主动的响应对应的事件。
$("#box").click();
5.3.2 双击事件
事件 描述
dblclick 鼠标双击某个对象
实例：给文档中的 id="btn" 元素添加点击事件。
5.3.3 焦点事件
事件 描述
focus 元素获得焦点时触发
blur 元素失去焦点时触发
实例：给文档中的<input>元素添加点击事件。
5.3.4 改变事件
事件 描述
change 域的内容被改变触发，用于input、select和textarea标签。
当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 input 或 textarea 时，该事件会在元素失去焦点时发生。
实例：给文档中的<select>和<input>元素添加改变事件。
5.3.5 鼠标事件
当鼠标指针穿过元素时，会发生 onmouseenter 事件。该事件大多数时候会与 onmouseleave 事件一起使用。onmouseover 事件和 onmouseout 事件一起使用。
与 onmouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 onmouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 onmouseover 事件。
实例：给文档中的id="box"元素添加鼠标事件。
5.3.6 hover事件
语法: hover([fnOver,] fnOut)
参数 描述
fnOver 鼠标移到元素上要触发的函数。
fnOut 鼠标移出元素要触发的函数。
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。
当鼠标移动到一个匹配的元素上面时(mouseenter)，会触发指定的第一个函数。当鼠标移出这个元素时(mouseleave)，会触发指定的第二个函数。
5.4 event事件对象
5.4.1 event属性
5.4.2 event方法
方法 描述 事件
stopPropagation() 阻止事件冒泡。 任意事件
preventDefault() 阻止事件的默认动作。 任意事件
事件冒泡：是因为事件会按照DOM的层次结构像水泡一样不多向上直至顶端。
实例：阻止文档中class="child" 的元素事件派发。
实例：阻止文档中 元素的默认行为。
6. jQuery DOM操作【重中之中】
6.1 jQuery 捕获
jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
DOM = Document Object Model（文档对象模型）
DOM 定义访问 HTML 和 XML 文档的标准：
"W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。
6.1.1 获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：
下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：
6.1.2 获取属性 - attr()
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值：
实例
6.1.3 获取属性 - prop()
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。快速，准确。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
注意：在select和radio和checkbox中我们取selected checked属性应使用prop
6.2 jQuery 设置
6.2.1 设置内容 - text()、html() 以及 val()【重点】
我们将使用前一章中的三个相同的方法来设置内容：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：
实例
6.2.2 text()、html() 以及 val() 的回调函数
上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 text() 和 html()：
【注意】：html(function(index, html)) index为元素在集合中的索引位置，html为原先的HTML值
6.2.3 设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变（设置）链接中 href 属性的值：
attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性：
实例
6.2.4 attr() 的回调函数
jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 attr() 方法：
6.2.5 设置属性 - prop()
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。快速，准确。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
注意：在select和radio和checkbox中我们取selected checked属性应使用prop
6.3 jQuery 添加元素
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：
append() - 在被选元素的内部结尾插入内容
prepend() - 在被选元素的内部开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
6.3.1 jQuery append() 方法
jQuery append() 方法在被选元素的内部结尾插入内容。
实例
$("p").append("追加文本");
6.3.2 jQuery prepend() 方法
jQuery prepend() 方法在被选元素的内部开头插入内容。
实例$("p").prepend("在开头追加文本");
通过 append() 和 prepend() 方法添加若干新元素
在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。
不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。
在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：
6.3.3 jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
实例
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");
通过 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：
6.4 jQuery 删除元素
通过 jQuery，可以很容易地删除已有的 HTML 元素。
删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
6.4.1 jQuery remove() 方法
jQuery remove() 方法删除被选元素及其子元素。
实例 $("#div1").remove();
6.4.2 jQuery empty() 方法
jQuery empty() 方法删除被选元素的子元素。
实例 $("#div1").empty();
3，过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 的所有 <p> 元素：
实例
$("p").remove(".italic");
6.5 jQuery CSS 类
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
实例样式表
下面的样式表将用于本页的所有例子：
6.5.1 jQuery addClass() 方法
下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：
实例
6.5.2 jQuery removeClass() 方法
下面的例子演示如何在不同的元素中删除指定的 class 属性：
6.5.3 jQuery toggleClass() 方法
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：
6.6 jQuery css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
6.6.1 返回 CSS 属性
如需返回指定的 CSS 属性的值，请使用如下语法：
css("propertyname");
下面的例子将返回首个匹配元素的 background-color 值：
实例
$("p").css("background-color");
6.6.2 设置 CSS 属性
如需设置指定的 CSS 属性，请使用如下语法：
css("propertyname","value");
下面的例子将为所有匹配元素设置 background-color 值：
实例
$("p").css("background-color","yellow");
6.6.3 设置多个 CSS 属性
如需设置多个 CSS 属性，请使用如下语法：
css({"propertyname":"value","propertyname":"value",...});
下面的例子将为所有匹配元素设置 background-color 和 font-size：
实例
$("p").css({"background-color":"yellow","font-size":"200%"});
7. jQuery和DOM对象互转【重点】
7.1 jQuery对象转成DOM对象
两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);
(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。
如：var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
如：var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
7.2 DOM对象转成jQuery对象
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)
如：var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
转换后，就可以任意使用jQuery的方法了。
通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。
8. 【掌握】表单处理
8.1 解决表单提交的冒泡问题
8.2 serializeArray()与serialize()的区别
serializeArray()返回一个JSON数组 ，里面是表单属性的name的属性值和value
serialize()返回的是一个 查询参数id=1&name=2&gender=3&sal=4
9. 【掌握】jQuery each()方法
9.1 语法
$(selector).each(function(index,element))
9.2 案例
9.3 循环JSON数组生成无刷新的table并能删除和添加
更多干货我们下期再说！
下期会分享
第六章节
Vue基础与Element UI
相关知识~
下期见！
