文章目录
学习资源
视频教程:Java基础+进阶_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili
jQuery
1、概念
概念:JavaScript框架,简化JS开发
- jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨 是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
- JavaScript框架:本质上就是一些js文件,封装了js的原生代码而已
2、快速入门
步骤
-
下载JQuery
-
导入JQuery的js文件:导入min.js文件
-
使用
var div1 = $("#div1");
注:这个jQuery文件就是一个立即执行函数,函数名为$
3、jQuery对象和js对象的区别和转化
JQuery对象和js对象方法不通用的.
- 两者相互转换
- jq – > js : jq对象[索引] 或者 jq对象.get(索引)
- 因为jq对象是一个伪数组,所以可以通过索引来获取
- js – > jq : $(js对象)
- jq – > js : jq对象[索引] 或者 jq对象.get(索引)
4、选择器
基本操作学习
-
事件绑定
//1.获取b1按钮 $("#b1").click(function(){ alert("abc"); });
-
入口函数
//jQuery入口函数(dom文档加载完成之后执行该函数的代码) $(function () { });
window.onload 和 $(function) 区别
- window.onload 只能定义一次,如果定义多次,后边的会将前边的覆盖掉。而$(function)可以定义多次的。
- 执行时机不同:jQuery入口函数要快于window.onload
- jQuery入口函数要等待页面上dom树加载完后执行
- window.onload要等待页面上所有的资源(外部css/js链接,图片等资源)都加载完毕后执行
-
样式控制:css方法
// $("#div1").css("background-color","red"); $("#div1").css("backgroundColor","pink"); $("#div1").css({ "width": "300px", "height": "200px", "backgroundColor": "red" })
分类
-
基本选择器
- 标签选择器(元素选择器)
- 语法: $(“html标签名”) 获得所有匹配标签名称的元素
- id选择器
- 语法: $("#id的属性值") 获得与指定id属性值匹配的元素
- 类选择器
- 语法: $(".class的属性值") 获得与指定的class属性值匹配的元素
- 并集选择器
- 语法: $(“选择器1,选择器2…”) 获取多个选择器选中的所有元素
- 标签选择器(元素选择器)
-
层级选择器
- 后代选择器
- 语法: $("A B ") 选择A元素内部的所有B元素
- 子选择器
- 语法: $(“A > B”) 选择A元素内部的所有B子元素
- 后代选择器
-
属性选择器
- 属性名称选择器
- 语法: $(“A[属性名]”) 包含指定属性的选择器
- 属性选择器
- 语法: $(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器
- 复合属性选择器
- 语法: $(“A[属性名=‘值’]…”) 包含多个属性条件的选择器
- 属性名称选择器
-
过滤选择器
- 首元素选择器
- 语法: :first 获得选择的元素中的第一个元素
- 尾元素选择器
- 语法: :last 获得选择的元素中的最后一个元素
- 非元素选择器
- 语法: :not(selector) 不包括指定内容的元素
- 偶数选择器
- 语法: :even 偶数,从 0 开始计数
- 奇数选择器
- 语法: :odd 奇数,从 0 开始计数
- 等于索引选择器
- 语法: :eq(index) 指定索引元素
- 大于索引选择器
- 语法: :gt(index) 大于指定索引元素
- 小于索引选择器
- 语法: :lt(index) 小于指定索引元素
- 标题选择器
- 语法: :header 获得标题(h1~h6)元素,固定写法
- 首元素选择器
-
表单过滤选择器
- 可用元素选择器
- 语法: :enabled 获得可用元素
- 不可用元素选择器
- 语法: :disabled 获得不可用元素
- 选中选择器
- 语法: :checked 获得单选/复选框选中的元素
- 选中选择器
- 语法: :selected 获得下拉框选中的元素
- 可用元素选择器
5、DOM操作
-
内容操作
- html():获取/设置元素的标签体内容 <a><font>内容</font></a> --> <font>内容</font>
- text(): 获取/设置元素的标签体纯文本内容 <a><font>内容</font></a> --> 内容
- val(): 获取/设置元素的value属性值
-
属性操作
-
通用属性操作
- attr(): 获取/设置元素的属性
- removeAttr():删除属性
- prop():获取/设置元素的属性
- removeProp():删除属性
- attr和prop区别?
- 如果操作的是元素的固有属性,则建议使用prop
- 如果操作的是元素自定义的属性,则建议使用attr
- attr和prop区别?
-
对class属性操作
-
addClass():添加class属性值
-
removeClass():删除class属性值
-
toggleClass():切换class属性
- toggleClass(“one”):
* 判断如果元素对象上存在class=“one”,则将属性值one删除掉。 如果元素对象上不存在class=“one”,则添加
- toggleClass(“one”):
-
css():
-
-
CRUD操作
-
append():父元素将子元素追加到末尾
- 对象1.append(对象2): 将对象2添加到对象1元素内部,并且在末尾
-
prepend():父元素将子元素追加到开头
- 对象1.prepend(对象2):将对象2添加到对象1元素内部,并且在开头
-
appendTo():
- 对象1.appendTo(对象2):将对象1添加到对象2内部,并且在末尾
-
prependTo():
- 对象1.prependTo(对象2):将对象1添加到对象2内部,并且在开头
-
after():添加元素到元素后边
- 对象1.after(对象2): 将对象2添加到对象1后边。对象1和对象2是兄弟关系
-
before():添加元素到元素前边
- 对象1.before(对象2): 将对象2添加到对象1前边。对象1和对象2是兄弟关系
-
insertAfter()
- 对象1.insertAfter(对象2):将对象1添加到对象2后边。对象1和对象2是兄弟关系
-
insertBefore()
- 对象1.insertBefore(对象2): 将对象1添加到对象2前边。对象1和对象2是兄弟关系
-
remove():移除元素
- 对象.remove():将对象删除掉
-
empty():清空元素的所有后代元素。
- 对象.empty():将对象的后代元素全部清空,但是保留当前对象以及其属性节点
-
*注:获取data.*属性:对象.data(“属性名”);
获取父元素节点,子元素节点及兄弟元素节点的方法
父元素
- parent()、parents()、closest()
- parent:上一级父元素
- closest与parents的区别
- closest从当前元素开始匹配寻找、parents从父元素开始匹配寻找
- closest逐级向上查找、直到发现匹配的元素后 就停止了、parents一直向上查找直到根元素、然后把这些元素放进一个临时集合中、再用给定的选择器表达式去过滤
- closest返回0或1个元素、parents可能包含0 个、1个、或者多个元素
子节点
- find(),:first(),children()
兄弟节点
兄弟节点可以通过子父级之间的关系获取,也可使用函数 siblings() 获取
查找每个 p 元素的所有类名为 “selected” 的所有同胞元素:
$("p").siblings(".selected")
6、动画
- 三种方式显示和隐藏元素
-
默认显示和隐藏方式
- show([speed,[easing],[fn]])
- 参数:
- speed:动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如:1000)
- easing:用来指定切换效果,默认是"swing",可用参数"linear"
- swing:动画执行时效果是 先慢,中间快,最后又慢
- linear:动画执行时速度是匀速的
- fn:在动画完成时执行的函数,每个元素执行一次。
- 参数:
- show([speed,[easing],[fn]])
-
hide([speed,[easing],[fn]])
-
toggle([speed],[easing],[fn])
-
滑动显示和隐藏方式
- slideDown([speed],[easing],[fn])
- slideUp([speed,[easing],[fn]])
- slideToggle([speed],[easing],[fn])
-
淡入淡出显示和隐藏方式
- fadeIn([speed],[easing],[fn])
- fadeOut([speed],[easing],[fn])
- fadeToggle([speed,[easing],[fn]])
-
7、遍历
- jq对象.each(callback)
- 语法:
jquery对象.each(function(index,element){});- index:就是元素在集合中的索引
- element:就是集合中的每一个元素对象
- index:就是元素在集合中的索引
- this:集合中的每一个元素对象
2. 回调函数返回值:
* true:如果当前function返回为false,则结束循环(break)。
* false:如果当前function返回为true,则结束本次循环,继续下次循环(continue)
- 语法:
- $.each(object, [callback])
- for…of: jquery 3.0 版本之后提供的方式
for(元素对象 of 容器对象)
8、事件绑定
- jquery标准的绑定方式
- jq对象.事件方法(回调函数);
- 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。
- 表单对象.submit();//让表单提交
- on绑定事件/off解除绑定
- jq对象.on(“事件名称”,回调函数)
- jq对象.off(“事件名称”)
- 如果off方法不传递任何参数,则将组件上的所有事件全部解绑
- 事件切换:toggle
-
jq对象.toggle(fn1,fn2…)
- 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2…
-
注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。
事件委托
原生委托实现
document.getElementById("dateText").addEventListener("click",function (e) {
console.log(e.target.dataset.name);
})
jQuery委托实现
$("#dateText").delegate("span", "click", function () { console.log(this);})
9、插件
插件:增强jQuery的功能
实现方式
- $.fn.extend(object)
- 增强通过Jquery获取的对象的功能 $("#id").fun()
- $.extend(object)
- 增强jQuery对象自身的功能 $.fun()
eg:
//使用jquery插件 给jq对象添加2个方法 check()选中所有复选框,uncheck()取消选中所有复选框//1.定义jqeury的对象插件$.fn.extend({ //定义了一个check()方法。所有的jq对象都可以调用该方法 check: function () { //让复选框选中 //this:调用该方法的jq对象 this.prop("checked", true); }, uncheck: function () { //让复选框不选中 this.prop("checked", false); }});$(function () { // 获取按钮 //$("#btn-check").check(); //复选框对象.check(); $("#btn-check").click(function () { //获取复选框对象 $("input[type='checkbox']").check(); }); $("#btn-uncheck").click(function () { //获取复选框对象 $("input[type='checkbox']").uncheck(); });});
eg:
//对全局方法扩展2个方法,扩展min方法:求2个值的最小值;扩展max方法:求2个值最大值$.extend({ max: function (a, b) { //返回两数中的较大值 return a >= b ? a : b; }, min: function (a, b) { //返回两数中的较小值 return a <= b ? a : b; }});//调用全局方法var max = $.max(4, 3);var min = $.min(1, 2);
Ajax
1、概念
Ajax:Asynchronous JavaScript And XML 异步的JavaScript和XML
- 异步和同步:客户端和服务器端相互通信的基础上
- 同步:客户端必须等待服务器端的响应,在等待的期间客户端不能做其他操作
- 异步:客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。
- Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
2、实现方式
-
原生的js实现方式
-
jQuery实现方式
-
$.ajax()
- 语法:$.ajax({键值对});
$.ajax({ url: "ajaxServlet", //请求路径 type:"POST", //请求方式 // data:"username=tom&age=23", //请求参数(前台向后台发送的数据) data:{ "username":"tom", "age":23 }, contentType: "application/json;charset=UTF-8", success:function (data) { //data是后台向前台返回的数据,data可以任意命名 alert(data) }, //响应成功后的回调函数 error:function (data) { alert(data) }, //响应失败后的回调函数});
url: ajaxServlet:相对路径 /ajaxServlet:从localhost:8080开始,data:(不使用form表单,获取任意一个元素的数据值)
data: {
“username”😒("#username").val()
}, //请求参数2. $.get():发送get请求 - 语法:$.get(url,[data],[callback],[type]) - 参数 - url:请求路径 - data:请求参数
$(this).serialize() //将请求参数序列化为字符串 ~~~ - callback:回调函数 - type:响应结果的类型
- $.post():发送post请求
-
注:jQuery实现方法中,如果需要在出错时执行函数,需要使用$.ajax
Ajax整体实现过程
regist.html
//form表单 <form> <input type="text" id="username" name="username" placeholder="请输入用户名"> <span id="s_username"></span> <br> <input type="password" name="password" placeholder="请输入密码"><br> <input type="submit" value="注册"><br> </form> //jQuery实现ajax <script> //jQuery入口函数 $(function () { //给username绑定blur事件 --> 失去焦点事件 $("#username").blur(function () { //获取username文本输入框的值 var username = $(this).val(); //发送ajax请求 //期望服务器响应回的数据格式:{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"} // {"userExsit":false,"msg":"用户名可用"} $.get("findUserServlet",{username:username},function (data) { //判断userExsit键的值是否是true let span = $("#s_username"); if(data.userExsit){ //用户名存在 span.css("color","red"); span.html(data.msg); }else{ //用户名不存在 span.css("color","green"); span.html(data.msg); } }); }); }); </script>
FindUserServlet.java
//1.获取用户名String username = request.getParameter("username");//2.调用service层判断用户名是否存在//期望服务器响应回的数据格式:{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}// {"userExsit":false,"msg":"用户名可用"}//设置响应的数据格式为jsonresponse.setContentType("application/json;charset=utf-8");Map<String, Object> map = new HashMap<>();if ("tom".equals(username)) { //存在 map.put("userExsit", true); map.put("msg", "此用户名太受欢迎,请更换一个");} else { //不存在 map.put("userExsit", false); map.put("msg", "用户名可用");}//将map转为json,并且传递给客户端//将map转为jsonObjectMapper mapper = new ObjectMapper();//并且传递给客户端mapper.writeValue(response.getWriter(), map);
一般使用异步提交表单,是为了获取服务器响应的数据。因为前台使用的是html作为视图层,不能够直接从servlet相关的域对象获取值,只能通过ajax获取相应数据。
跨域
什么是跨域?
跨域,即非同源策略请求。指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。
所谓同源是指,域名,协议,端口均相同,不明白没关系,举个栗子:
- http://www.123.com/index.html 调用 http://www.123.com/server.php (非跨域)
- http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)
- http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)
- http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)
- http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)
请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。
浏览器执行javascript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。
- 跨域只存在于浏览器端,不存在于安卓/ios/Node.js/python/ java等其它环境
- 跨域请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。
- 浏览器出于安全的考虑,使用 XMLHttpRequest对象发起 HTTP请求时必须遵守同源策略,否则就是跨域的HTTP请求,默认情况下是被禁止的。换句话说,浏览器安全的基石是同源策略。
什么是CORS?
CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing),允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。它通过服务器增加一个特殊的Header[Access-Control-Allow-Origin]来告诉客户端跨域的限制,如果浏览器支持CORS、并且判断Origin通过的话,就会允许XMLHttpRequest发起跨域请求。
CORS Header
Access-Control-Allow-Origin: http://www.xxx.com
Access-Control-Max-Age:86400
Access-Control-Allow-Methods:GET, POST, OPTIONS, PUT, DELETE
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Credentials: true
含义解释:
1、Access-Control-Allow-Origin 允许http://www.xxx.com域(自行设置,这里只做示例)发起跨域请求
2、Access-Control-Max-Age 设置在86400秒不需要再发送预校验请求
3、Access-Control-Allow-Methods 设置允许跨域请求的方法
4、Access-Control-Allow-Headers 允许跨域请求包含content-type
5、Access-Control-Allow-Credentials 设置允许Cookie
跨域会阻止什么操作?
浏览器是从两个方面去做这个同源策略的,一是针对接口的请求,二是针对Dom的查询
-
阻止接口请求比较好理解,比如用ajax从http://192.168.100.150:8020/实验/jsonp.html页面向http://192.168.100.150:8081/zhxZone/webmana/dict/jsonp发起请求,由于两个url端口不同,所以属于跨域,在console打印台会报No ‘Access-Control-Allow-Origin’ header is present on the requested resource
- 值得说的是虽然浏览器禁止用户对请求返回数据的显示和操作,但浏览器确实是去请求了,如果服务器没有做限制的话会返回数据的,在调试模式的network中可以看到返回状态为200,且可看到返回数据
-
阻止dom获取和操作
比如a页面中嵌入了iframe,src为不同源的b页面,则在a中无法操作b中的dom,也没有办法改变b中dom中的css样式。
浏览器的这个限制虽然不能保证完全安全,但是会增加攻击的困难性
虽然安全机制挺好,可以抵御坏人入侵,但有时我们自己需要跨域请求接口数据或者操作自己的dom,也被浏览器阻止了,所以就需要跨域
跨域的前提肯定是你和服务器是一伙的,你可以控制服务器返回的数据,否则跨域是无法完成的
怎么解决跨域问题?
1、前端方法使用jsonp
JSONP需要服务器端支持JSONP请求
原理就是html中 的link,href,src属性都是不受跨域影响的,link可以调用远程的css文件,href可以链接到随便的url上,图片的src可以随意引用图片,script的src属性可以随意引入不同源的js文件
- script
- img
- link
- iframe
- …
这些标签不存在跨域请求限制
eg:
$.ajax({ url: 'http://1.119.169.72:10001/lidarData/lidarData/selectViewData?time=2020-07-05&lidarType=dep&wavelength=355', method: 'get', dataType: 'jsonp', //=>执行的是JSONP请求 success: res => { console.log(res); }});
serverJsonp.js
let express = require('express'), app = express();app.listen(10001, _ => { console.log('ok');});app.get('/selectViewData', (req, res) => { let { callback = Function.prototype } = req.query(); let data = { code: 0, message: 'ddd' }; res.send('${callback}(${JSON.stringify(data)})');});
问题:JSONP只能处理get请求
2、后台配置解决跨域
后台通过配置解决跨域问题
首先在pom.xml中引入依赖
<!--跨域依赖--><dependency> <groupId>com.thetransactioncompany</groupId> <artifactId>cors-filter</artifactId> <version>1.7.1</version></dependency><dependency> <groupId>com.thetransactioncompany</groupId> <artifactId>java-property-utils</artifactId> <version>1.9</version></dependency><dependency>
然后在web.xml配置过滤器
<!--为了允许跨域访问--><filter> <filter-name>CorsFilter</filter-name> <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class></filter><filter-mapping> <filter-name>CorsFilter</filter-name> <url-pattern>/*</url-pattern></filter-mapping>
这样前端就可以尽情跨域请求数据了,是不是很方便?
注意如果项目中配置了检测是否登录过滤器,可能会起冲突,因为没有登录的话每次都会跳转到登录接口。。。
SpringBoot注入重写方法的WebMvcConfigurer解决跨域问题
CORSConfig.java
/** * @Description 跨域配置 * @Author chenlinghong * @Date 2019/1/27 13:31 **/@Configurationpublic class CORSConfig { @Bean public WebMvcConfigurer corsConfigurer(){ return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedHeaders("*") .allowedMethods("*") .allowedOrigins("*"); } }; }}
3、基于iframe的跨域解决方案(window.name/document.domain/location.hash)
4、通过HTML5中新引进的window.postMessage方法来跨域传送数据
5、通过CORS解决跨域
CORS也需要服务器端的支持
CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方,从而决定请求或响应成功与否.
首先自己写一个过滤器CORSFilter
/** * Created by 12143 on 2018/12/7. */@Componentpublic class CORSFilter extends OncePerRequestFilter { @Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException { response.addHeader("Access-Control-Allow-Origin", "http://192.168.100.150:8020"); //response.addHeader("Access-Control-Allow-Origin", "*"); response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE"); response.addHeader("Access-Control-Allow-Headers", "Content-Type"); response.addHeader("Access-Control-Max-Age", "1800");//30 min filterChain.doFilter(request, response); }}
注意:Access-Control-Allow-Origin为*则允许所有url访问,如果为“http://192.168.100.150:8020”则只有此url才能访问,注意有端口的要把端口也写上
比如配置了http://192.168.56.130:8081,那么只有http://192.168.56.130:8081 能拿到数据,否则全部报403异常
然后在web.xml中添加此过滤器
<filter> <filter-name>CorsFilter</filter-name> <filter-class>com.xxx.common.filter.CORSFilter</filter-class></filter><filter-mapping> <filter-name>CorsFilter</filter-name> <url-pattern>/*</url-pattern></filter-mapping>
6、通过Nginx反向代理