jQuery与AJAX应用（十五）
1、idea打不开,双击没反应的解决方案
idea打不开,双击没反应的解决方案
找到脚本
jetbra-1126574a2f82debceb72e7f948eb7d4f616ffddf文件 —— jetbra文件——scripts文件——install-current-user.vbs
2、java: 错误: 不支持发行版本 19
设置—— Settings ——Build, Execution, Deployment——Java Compiler
步骤：
一、安装
二、创建 JavaWeb项目
1、新建项目
File菜单——New——Project
2、添加WEB支持
设置——Project Structure（项目结构） —— Modules（模块）—— 选中项目 —— + —— web
3、配置Tomcat Web服务器
1)添加Tomcat： Select Run/Debug Configurations —— Tomcat Server —— Local —— Server —— Configurations —— Tomcat Home
2)添加 Tomcat 依赖 设置——Project Structure（项目结构） —— Modules（模块）—— 选中项目 —— Dependencies —— + ——Choose Libraries —— 选中Tomcat
4、编写代码
1)web：编写前端代码
2)src : 编写后端Java代码 编写 Util、Servlet程序
5、添加第三方的 jar 文件
1)web —— WEB INF —— 创建lib目录 —— 粘贴jar文件
2)设置——Project Structure（项目结构） —— Modules（模块）—— 选中项目 —— Dependencies —— + —— JARs or Directories ——选中jar文件
3)设置——Project Structure（项目结构）—— Artifacts —— + —— Web Application：Exploded ——From Modules（创建Artifact）——选中项目——Output Layout —— lib —— 如果Tomcat中没有jar文件，双击或右击，把jar文件发布到Tomcat中
6、把 Artifact 部署到 Tomcat中
Select Run/Debug Configurations —— Edit Configurations —— Deployment —— + —— Artifact 注意：部署成功后，一般需要修改项目的上下文路径
三、IDEA的设置
1、显示工具条
View —— Toolbar
2、解决Tomcat日志乱码
三个方法 1）寻找Tomcat所在的位置，在Tomcat目录下找到conf logging.properties —— 检查确保都是UTF-8编码
2）IDEA中JVM的虚拟机的编码方式设置为UTF-8 Help —— Edit Custom VM Options —— 添加 -Dfile.encoding=UTF-8
3）Tomcat配置 Select Run/Debug Configurations —— 选中Tomcat——Server—— VM options——添加-Dfile.encoding=UTF-8
3、过滤文件 设置—— Settings —— Editor —— File Types—— ignored Files and Folders —— + —— 添加 *.iml
前端开发三大基础知识
1、HTML：结构化页面 + 添加相关的网页内容（文字、图片、表格、表单）
语法一:双标记
<开始标记 属性1="值" ... 属性N="值"> 内容 </结束标记>
<font size="7" color="red" align="center">
好好学习，天天向上
</font>
语法二：单标记
<开始标记 属性1="值" ... 属性N="值"/>
..
说明： 1）标记也叫标签 2）不同的标记都会有默认的样式 3）不同的标记都会有相应的属性，用于丰富标记的样式 4）编写网页，就是定义各个标记，并保存为一个以html为后缀的文件 5）各个标记存在以下几个关系 兄弟关系（并列关系） 父子关系（嵌套关系） 6）最后，学习并熟悉各个标记以及其属性
2、CSS ：修饰网页内容，让网页更加漂亮、专业、人性化、增强可操作性
在CSS中，提供了非常丰富的属性，便于开发者修改网页内容 每个属性可以理解某种颜色。
语法： 选择器 { 属性1:属性值 ; ... 属性N:属性值 ; }
注意：在CSS中，同时也提供了非常丰富的选择器，便于选中页面的内容
使用方式
1）内联式
作用范围：作用于当前的标记 优势：优先级最高 !important -> 提高优先级
<开始标记 style="属性1:值;...;属性N：值"> 内容 </结束标记>
2）嵌入式
作用范围：作用于当前的网页
<style>
选择器 {
属性1:属性值 ;
...
属性N:属性值 ;
}
</style>
3）外部式
作用范围：作用于当前整个网站（一个网站下包含多个网页） 一次定义，多处的使用 实现css和html的分离，提高代码的维护性
操作步骤：
第一：创建一个以css为后缀的文件
第二：在css文件中，定义相关的样式
选择器 { 属性1:属性值 ; ... 属性N:属性值 ; }
第三：在页面中引入css文件
<link href="路径/xxx.css" type="text/css" rel="stylesheet"/>
路径：相对路径（常用）、绝对路径
导入式
作用：合并多个样式（样式文件）
最后，学习并熟悉各个CSS属性
3、JavaScript
实现页面的动态效果，增强人机的交互性，让用户的体验更加的好 实现表单数据合法性的验证
最后，学习并熟悉具体的JS语法
用法
1）内联式
2）嵌入式
<script>
// js代码，只作用于当前页面
</script>
3）外部式
作用范围：作用于整个网站 好处：实现js和html的分离，提高代码的维护性
第一：创建一个以js为后缀的文件
第二：编写js代码
根据需求编写代码
第三：在页面中，引入js文件
<script src="路径/xxx.js" type="text/javascript"></script>
注意：在引入js的script标签中，不要编写js代码
4、在三剑客中，一般我们的开发步骤为
第一：使用HTML结构化页面
第二：使用CSS美化页面
第三：使用JS实现页面的动态效果
5、DOM操作
1）DOM（Document Object Model） - 文档对象模式 - 操作文档的相关对象集合
程序使用 DOM 可以对网页中的内容进行操作（增、删、改、查）
在DOM中，HTML页面中所有的内容都称之为节点，主要有以下几种： 元素节点（1）：font 属性节点（2）:color、size 文本节点（3）:好好学习
好好学习
2）操作步骤
第一：选择要操作的节点（内容）
document.getElementById()： 根据ID属性获取页面中唯一的节点
document.getElementsByName()： 根据 name 属性获取页面中的节点集合（数组）
document.getElementsByTagName()： 根据标签名称获取页面中的节点集合（数组）
document.getElementsByClassName()： 根据 class 属性获取页面中的节点集合（数组）
注意：节点与节点之间存在以下关系 父子关系（嵌套关系） 兄弟关系（并列关系）
有时候，我们选择节点时， 需要通过这些关系来间接的选择某些节点
通过关系获取节点的API有以下几个：
1）父节点
parentNode：获取当前节点的父节点（唯一） parentElement：获取当前节点的父元素节点（唯一）
2）子节点
childNodes：获取当前节点的子节点（0个或多个）
firstChild：获取当前节点的第一个子节点 lastChild：获取当前节点的最后一个子节点
firstElementChild：获取当前节点的第一个元素子节点 lastElementChild：获取当前节点的最后一个元素子节点
大坑：在HTML代码中，回车换行也是一个文本节点
3）兄弟节点
previousSibling：获取当前节点的上一个节点（哥哥） nextSibling：获取当前节点的下一个节点（弟弟）
previousElementSibling：获取当前节点的上一个元素节点（哥哥） nextElementSibling：获取当前节点的下一个元素节点（弟弟）
4）属性节点
attributes：获取当前节点的属性节点集合
第二：使用节点相关的属性和方法进行相关的操作
注：节点是一个对象
3）DOM操作的相关方法 -- 实现页面内容的“动态”更新 - ajax
元素节点对象.setAttribute("属性名称","属性值")： 给某个元素节点，动态的添加属性和属性值
元素节点对象.removeAttribute("属性名称")： 移除某个元素节点的指定属性
var 变量 = 元素节点对象.getAttribute("属性名称")： 获取某个元素节点的指定属性的属性值
document.createElement("标签名称")：创建元素节点
document.createTextNode("文本内容")：创建文本节点
元素节点对象.createAttribute("属性名称")：创建属性节点
父元素节点对象.appendChild(节点对象):添加子节点（父子） 父元素节点对象.insertBefore(新节点,目标节点)：添加新节点在目标节点之前（兄弟）
var 克隆的节点对象 = 元素节点对象.cloneNode(bool)：克隆节点（复制节点）
removeChild(childName)：移除节点 replaceChild(newChild,oldChild)：替换节点，把 oldChild替换为newChild
最后，自学一下emmet语法：提高 编写 HTML 和 CSS 效率。 https://docs.emmet.io/abbreviations/syntax/ https://www.jianshu.com/p/5416e3315f6e
JQuery
一、概述
JQ是对原生 JavaScript 代码封装的JavaScript库 ;
特点：快速、小巧、功能丰富 ;
口号：写更少的代码，做得更多的功能 ;
归根到底，JQ 还是 JavaScript!
二、使用
1、下载
● 未压缩：jquery-1.12.4.js，容量大，加载速度相对比较慢，一般用于学习或需要查看源码 ● 压缩：jquery-1.12.4.min.js ，容量小，加载速度快，一般应用在生产环境下
2、各版本的JQ
● 1.x版本：兼容ie678，使用最为广泛的，官方只做bug维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 ● 2.x版本：不兼容ie678，很少人使用，官方只做bug维护，功能不再新增。如果不考虑兼容版本低的浏览器可以使用2.x，最终版本：2.2.4 ● 3.x版本：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。目前最新版本：3.5.1
3、操作步骤
第一：在 HTML 页面中，引入 js 文件
第二：使用 JQ
说明： JQ是对原生 JavaScript 代码的封装 ； 它提供非常丰富的API给程序员使用，使编写代码时更加的简单、高效 ；
注意： 后面我们要学习的是 JQ 提供的各种 API（对象及相关的方法）
三、窗体加载 VS 文档加载
1、语法不同
window.onload = function() {
}
$(document).ready(function(){
}) ;
2、执行时机不同
前者必须等待网页中所有的内容加载完毕后（包括图片）才能执行；
后者是在网页所有DOM元素载入就绪时就执行（可能DOM元素关闭的东西并没有加载完，如图片）。
3、编写个数不同
前者不能同时编写多个，否则后面的会替换前面的；
后者可以编写多个，会执行多个。
4、简化写法
前者没有简写；
后者可简写
$(function(){
}) ;
$(document).ready(function(){ }) ;
四、原生JS对象和JQ对象
1、原生 DOM 对象
通过JavaScript中的DOM API操作获得的元素对象，如document.getElementById...
2、JQquery对象
通过JQuery包装Dom对象后产生的对象，$(dom对象)、$(选择器)
注意： DOM对象和JQuery对象只能各自访问自己的方法； JQ对象一般比原生对象更加强大或操作方便，它经过了JQ的二次封装
3、DOM对象与JQuery对象的相互转换
1）Jquery对象 转换为 DOM对象 方法一： var 原生DOM对象 = JQ对象[下标] ;
方法二： var 原生DOM对象 = JQ对象.get(下标) ;
2）DOM对象 转换为 Jquery对象
var JQ对象 = $(原生DOM对象)
五、基本选择器
1、选择器
选择页面中要操作的节点对象； 在JQ中，和CSS一样，也提供了非常多的选择器，便于选择要操作的节点对象
2、分类
1）ID选择器
语法：$("#ID名称") 特点：返回唯一的一个节点对象
2）类选择器
语法：$(".Class名称") 特点：可能返回多个节点对象，使用数组存储并返回
3）标记选择器
语法：$("标签名称") 特点：可能返回多个节点对象，使用数组存储并返回
4）组合选择器
语法：$("S,S,...,S")，其中S表示其它选择器 特点：可能返回多个节点对象，使用数组存储并返回
5）通配选择器
语法：$("*") 特点：可能返回多个节点对象，使用数组存储并返回
六、包装集管理
1、概念
包装集就是一个存储多个JQ对象的数组
2、常用API方法 -- 增强选择
1.获取包装集的容量大小
包装集对象.length 包装集对象.size()
2.返回包装集某个子元素的下标索引
var index = 包装集对象.index(子对象);
3.把匹配的内容，添加到包装集中
包装集对象.add(JQ对象或包装集)
4.排除
包装集对象.not(JQ对象或包装集)
5.过滤
包装集对象.filter(JQ对象或包装集｜回调函数) ;
包装集对象.filter(function(index){
return 条件 ;
}) ;
6.slice(start[,end])：返回下标索引从 start 开始，到 end 结束的元素集合
原则： 下标索引从0开始 包头不包尾
将匹配元素集合缩减为指定范围的子集。
JQuery DOM操作
一、DOM概念
DOM，文档对象模式。它是一些API对象或方法的集合， 程序员使用这些API对象或方法可以很方便的对网页中的内容进行 增、删、改、查的操作。
二、分类
原生JavaScript的DOM操作 JQuery的DOM操作 - 更加方便、简单、高效
三、具体操作 - 就是学习JQ提供的对象（方法或属性）
1、节点操作
1）创建节点
语法：$(html)
$(html)方法会根据传入的html标记字符串，创建一个DOM对象， 并将此DOM对象包装成JQuery对象后返回。
2）插入节点
2.1）以父子关系的方式添加
以最后一个子元素的方式添加 父节点.append(子节点) 子节点.appendTo(父节点)
以第一个子元素的方式添加 父节点.prepend(子节点) 子节点.prependTo(父节点)
2.2）以兄弟关系的方式添加
哥哥节点.after(弟弟节点) 弟弟节点.insertAfter(哥哥节点) before() insertBefore()
3）删除节点
● remove()：还支持选择性删除，如$("ul li").remove("li[title!=one]") ; ● detach()：与 remove() 相同，但删除节点的事件，附加数据等会保留下来。 ● empty()：清空节点，包括此节点的所有后代节点
4）复制节点
clone(true | false)：复制节点，可传boolen值，若为真，则该节点的事件也被复制
5）替换节点
replaceWith()
replaceAll()
6）包裹节点：将某个节点用其他标记包裹起来。
wrap()：将各个匹配的元素使用某个元素来包裹
wrapAll()：将所有匹配的元素用一个元素来包裹
wrapInner()：子元素被包裹
2、属性操作
prop() / removeProp() - 一般用于操作原生属性 attr() / removeAttr() - 一般用于操作扩展属性
<font color="red" size="7" face="隶书" xxx="yyy"></font> 其中,font标签的原生属性有：color、size、face 扩展属性有：xxx
1）设置属性
元素节点.prop("属性名称","属性值"); 元素节点.attr("属性名称","属性值");
2）获取属性值
var 属性值 = 元素节点.prop("属性名称"); var 属性值 = 元素节点.attr("属性名称");
3）删除属性
元素节点.removeProp("属性名称"); 元素节点.removeAttr("属性名称");
3、样式操作
1）设置样式
prop() / attr() css()
2）追加样式
addClass(类名)
3）移除样式
removeClass(类名)
4）切换样式
toggleClass(类名)
5）判断是否含有某个样式
hasClass("类名")
4、内容操作
1）设置内容
元素节点.text("内容") ; // 是纯文本内容，innerText 元素节点.html("内容") ; // 可以包含HTML，innerHTML
2）获取内容
var 变量 = 元素节点.text() ; var 变量 = 元素节点.html() ;
5、表单操作
1）设置 value 属性值
元素节点.val(值) ;
2）获取 value 属性值
元素节点.val() ;
6、遍历节点
1）children()
获取匹配元素的子元素集合
2）next([selector])
获取匹配元素后面紧邻的同辈元素
对比：prev + next
3）nextAll([selector])
获取匹配元素之后所有的同辈元素
对比: prev ~ siblings
4）prev([selector])
获取匹配元素前面紧邻的同辈元素
5）prevAll([selector])
获取匹配元素之前所有的同辈元素
6）siblings([selector])
获取匹配元素前后氖的同辈元素
7）parent([selector])
获取匹配元素的上一级父元素
8）parents([selector])
获取匹配元素的父元素,包括所有的祖先元素
9）closest()
从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素
10）slice(start,[end])
获取匹配元素，下标索引从start到end的子集。
● slice(n):获取匹配元素下标索引从0到n的子集 ● slice(start,end)：获取匹配元素下标索引从start到end的子集 ● slice(-n): 获取匹配元素下标索引从末尾开始选择到n的子集
事件与动画
一、概念
浏览器在打开到关闭的这个过程中， 用户在浏览器所做的操作就是事件。
在 PC 端中，事件主要有以下三大类：
1.鼠标事件
单击（onclick） 双击(ondblclick) 经过(onmouseover) 离开(onmouseout) 移动(onmousemove) 滑轮（onwheel） ...
2.键盘事件
键盘按下（onkeydown） 键盘弹起（onkeyup） ...
3.窗体事件
加载事件（onload） ...
响应：每一个事件的背后都会有相应响应，一般我们使用函数来实现 也就是说：每个事件的背后都有一个函数
目标对象：事件所作用的对象
二、绑定事件
1、bind(type,[data],fn)
type：表示事件的类型，在原生事件属性中去除on，click data：表示数据 fn：事件背后的函数
元素节点.bind(事件类型,function(){
}) ;
2、on(events,[selector],[data],fn)
可以给动态创建的节点绑定事件
父元素节点.on(事件类型,动态生成的节点,function(){
})
3、one(type,[data],fn)
4、简写绑定事件
元素节点.事件方法(function(){
}) ;
三、解绑事件
1、unbind() -- bind
2、off() -- on
四、合成事件
在JQ中，提供了一些API方法，把多个事件合成在一起，便于用户使用
1.hover ：合成鼠标经过和离开
元素节点.hover(鼠标经过,鼠标离开) ;
2、toggle() : 合成显示和隐藏
3、trigger("事件类型") ：事件触发
五、事件对象
1、概念
事件对象（event）对所有事件的概括或描述 事件对象必须存在相关的属性和方法，可以对事件进行相关的操作
张三 李四 - 具体事件，如单击、双击 学生 - 事件对象
2、事件对象常用的属性和方法
目标对象：事件所作用的对象
目标对象：event.target 鼠标相对页面的坐标：event.pageX/eveng.pageY 鼠标的键类型：event.which 阻止事件冒泡:event.stopPropagation() 阻止默认行为：event.preventDefault()
课堂练习： 实现右键单击，弹出自定义菜单！
六、动画相关操作
1、动画基础相关的方法
width() / height()
offset() position() scrollTop()/scrollLeft()
2、常用动画
3、自定义动画
七、创建对象 - 文件标记法 - JSON格式的字符串 - 数据传输
var 对象名称 = {
属性名称1 : 值,
...
属性名称N : 值
} ;
其中，值可以是任意数据类型 数值型 - 整数、浮点数 布尔型 - true | false 字符串 - "字符串" | '字符串' undefined null 数组 - [值1,...,值N] 对象 - {}
函数 - function() {}
复习
1.JQuery基本操作 - ch01 - ch05
ch01 - 入门 - 原生JS对象，JQ对象，$()，包装集（数组）
ch02 - 选择器 - 选择要操作的“节点”
ch03 - DOM（文档对象模式） - API对象（方法、属性）
ch04 - 事件 - 浏览器 - 动画
ch05 - 常用工具 - 常用方法
2.Ajax实现异步操作 - ch06（重点）
3.前端框架-BootStrap（BS） - ch07
常用工具方法
注意：工具方法都是使用$（工厂对象）访问，语法：$.xxxx() ;
1、$.trim(数据) ：去除左右空格
2、$.isArray(数据) ：判断数据是否为数组
3、$.isFunction() : 判断数据是否为函数
4、[var 对象 = ]$.extend(对象1,对象2,...对象N) : 扩展对象
把第二个参数到最后一个参数的对象，扩展到第一个参数的对象中 另外，extend方法返回最终扩展的对象 但一般直接使用第一个参数的对象 说明：在JQ自定义插件中，需要使用到此方法
5、$.getScript("路径/xxx.js") : 动态加载脚本（JS）
注意：必须在WEB服务器（Tomcat）下运行 安装插件：live server
6、$.each - 遍历数组或对象
1）遍历数组
$.each(数组名称,function(下标,元素){ }) ;
2）遍历对象
$.each(对象名称,function(属性名称,属性值){ }) ;
课堂练习： 姓名 年龄 性别 班级 成绩 ... ... ...
要求： 1）把数据封装为对象 2）定义三条数据（三个对象），使用数组存储 3）加载数据按钮绑定单击事件 4）循环遍历数组，在表格中添加三行，并添加相应的数据
7、$.grep() - 过滤数组
$.grep(数组名称,function(数组元素,下标索引){
}) ; 区别： filter() - 过滤包装集（数组-JQ对象） $.each()
8、$.inArray() - 查找数组是否存在某个元素，并返回下标，不存在则返回-1
var 下标 = $.inArray("查找内容",数组)
常用操作（补充）
1、is - 匹配元素
根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合， 如果其中至少有一个元素符合这个给定的表达式就返回true, 否则返回false
2、map - 将一组元素转换成其他数组（不论是否是元素数组）
3、has - 判断是否拥有指定后代元素
4、end - 回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。
5、find（向下找） VS closest(向上找)
IDEA的基本使用
一、 安装
二、 创建Java项目
1、 新建项目
File菜单 New Project
2、 打开项目的方式
3、 编写代码
创建包、接口、类
4、 运行程序
右键 Run …
三、创建 JavaWeb项目
1、创建 Java 项目（同上）
2、添加WEB支持
选中项目 Project Structure（项目结构） Modules（模块）
3、编写代码
src : 编写后端Java代码（接口、类、Servlet） à 实现业务逻辑
web：编写前端代码（html、css、js、JQuery、LayUI、BootStrap、Vue、Vant、…）à 用户可操作的界面（漂亮、体验好、操作方便） à 等同于Eclipse中的WebApp
注意：此时不能编写Servlet代码（继续往下操作）
4、配置Tomcat Web服务器
1）编辑配置
2）添加Tomcat
3）配置 Tomcat 安装目录
4）添加 Tomcat 依赖
5）编写 Servlet程序
6）创建Artifact
7、把 Artifact 部署到 Tomcat中
注意：部署成功后，一般需要修改项目的上下文路径
四、IDEA的设置
1、显示工具条
1、使用纯的HTML+CSS实现以下效果
1）鼠标经过左图时，显示的效果如右图所示，鼠标离开还原
2）其中“粉色背景”有动画效果，缓缓的向上移动
3）小红点定位在右上角
