（一）浏览器跨域问题

什么时候才会涉及跨域问题？
前提:浏览器端发起请求，是异步（ajax）请求才能出现跨域问题。而同步请求，不涉及跨域问题。

下面这样都是同步请求:
1. location.href
2.

为什么会存在跨域问题
浏览器有安全机制,它认为你异步请求,如果请求的域名和当前项目不一致,它就认为是跨域问题,它会不允许直接访问,

什么算跨域呢？
1. 你请求的协议
2. 服务器请求ip地址
3. 端口号

只要上面三种任意一个不同，就涉及跨域问题。

例子:
协议不同
http://192.168.25.135:9107/
https://192.168.25.135:9107/
ip地址不同
http://192.168.25.136:9107/
http://192.168.25.135:9107/
端口号不同:
http://192.168.25.135:9108/
http://192.168.25.135:9107/

跨域解决方案

https://www.toutiao.com/i6625057200446374403/



jsonp跨域
jsonp 的原理很简单，利用了【前端请求静态资源的时候不存在跨域问题】这个思路。
但是 只支持 get。
注意一点，既然这个方法叫 jsonp，后端数据一定要使用 json 数据，不能随便的搞个字符串什么的，不然你会觉得结果莫名其妙的。

dataType: “jsonp”。除了这个，其他配置和普通的请求是一样的


1.jQuery 提供了跨域解决方案 jsonp(对象) 这里不演示


2.w3c CORS跨域资源共享
SpringMVC对cors进行了封装,你要是使用它解决跨域问题很简单

在SpringMVC 4.2版本以上提供了一个注解可以

controller层

如果是所有请求都允许就在 origins那里加个
但是设计到cookie的操作不能写 ,因为cookie是为某一个请求地址来记录请求信息的,


还是注意上面举例那里不能写 *

这段代码作用是我要发起请求的时候同意发送cookie数据(将cookie数据携带过去.),如果不加是无法发送cookie数据的.

解决跨域请求原理

1．在F12控制台打印前端页面响应过来的结果

console.log(response);


findAll:function (){
axios.get(“user/findAll”).then(function (response){
console.log(response);
}).catch(function (error){
console.log(error);
});
}
效果

Ajax

（一）ajax使用(jQuery)

1. 需要导入jQuery的类库(因为是jQuery的ajax,依赖jQuery)
   
   常用的三个方法
   $.get(url,data,function(d){},dataType);
   $.post(url,data,function(d){},dataType);
   jQuery.ajax(url,[settings]) —可以发送同步请求,然后就是有更多的配置,偏向于底层,配置更多,更灵活
   get方法和post方法用法基本完全一样,不同的仅仅是方法名称和请求方式一个get一个post
   
   参数
   url:服务器servlet的路径
   data:要给服务器传递的数据
   2种写法： 键值对写法 data=”username=zhangsan&password=123”
   json格式写法 data={“username”:”zhangsan”,”password”:123}
   
   function(d){} 回调函数 只在响应完成并且响应成功才执行
   d：就是服务器返回的数据内容
   
   dataType：数据类型 可以将服务器返回的内容转换成指定的类型
   text:不写 默认就是字符串
   json
   headers: 设置请求头
   
   

   1．ajax给全局变量赋值问题

   需要满足几个条件:
   1. ajax不能使用异步,只能使用同步,不然在ajax的作用范围外无法取值 设置同步方法: async: false,
   2.需要在页面加载事件里面书写,让页面一启动就运行ajax去查询数据库
   
   var gradeEntityMap ;
   
   //严重等级回显(gradeEntityMap)

$.ajax({

**async**: **false**,

**type**: **'post'**,

**url**: **'/api/sys/sysdict/getGradeEntityMap'**,

success: **function **(data) {

    **_gradeEntityMap _**= data.gradeMap;<br />

}<br />})

2．ajax传递多个参数到后台

//审核通过 (任务所属的事件 状态改成处理中)

/参数调度任务主键，对应的事件的主键/

function approved(id,eventsId){

**if**(confirm(**"确实要审核通过该任务吗？"**)){

    //开始删除操作

    **$**.ajax({

        **type**:**'put'**,

        **url**:**'/api/emergency/emergencymission/processing'**,

data: JSON.stringify({id:id, status: 1,eventsId:eventsId}),

        **headers**: {

            **"X-Auth-Token"**: **"open-sesame"**,

            **"Content-Type"**: **"application/json"<br />**<br />            },

        **contentType**:**'text/html;charset=UTF-8'**,

        success: **function **(data){

            **if **(data.code == **'200'**) {

                alert(**"审批成功！"**);

                //刷新页面

                _searchFrom_();

            } **else **{

                alert(**"审批失败"**);

            }<br />            }<br />        })

}

}

3．get请求传递单个参数问题

rest请求的风格
ajax参数 需要注意get请求参数是拼接在url后面的 注意 ? 号,还有就是格式: ?id=”+id,

function downloadCZBG (id){

/*定义map集合*/

**$**.ajax({

   **url**:**"/api/emergency/emergencyrelatedreport/downloadCZBG?id="**+id,

   **type**:**"get"**,

   success:**function**(data){<br />

   }<br />    });<br />后台接收值:<br />@GetMapping(**"downloadCZBG"**)

@ApiOperation(“根据id生成处置报告的word文档”)

public R downloadCZBG( String id) {

System.out.println(“id = “ + id);

return R.ok();

}

4．ajax设置同步

async:false,

5．传递json格式数据

<script src=”js/formData.js”></script>




$(function(){

//新增公司官网大概信息

_$_(**"#submit111"**).click(**function**(){

    **var **formData= _$_(**"#fileForm"**).serializeFormJSON();

    **_console_**.log(formData);

    _$_.ajax({

        **url**:**'../api/OfficialwebsiteInfo/addOfficialWebsiteSummary'**,

        **type**:**"post"**,

        **data**:**_JSON_**.stringify(formData),

        **headers**: {

            **"X-Auth-Token"**: **"open-sesame"**,

            **"Content-Type"**: **"application/json"<br />**<br />            },

        **contentType**: **'text/html;charset=UTF-8'**,

        success:**function**(data){

            _alert_(data);<br />            }<br />        })<br />    })<br />})<br /> <br /> <br /> <br /> <br /> <br /> 

6．中文乱码问题

        <br />ajax对于中文乱码的处理：之前怎么解决的 在ajax里面同样怎么解决

7．ajax取值

此时msg信息




console.log(msg.data.list[0].motto) 能正常打印值

8．请求路径总结

ajax的url有两种，一种是绝对路径，另一种是相对路径。

一、绝对路径：包括协议名称、主机地址、端口、web项目名称等的完整请求路径。
例如：
$.ajax({
url:”http://localhost:8080/webname/test“
});

好处：比如在webA项目中的ajax需要请求webB项目中的服务，则必须使用绝对路径。
坏处：使用绝对路径要求古地理更web项目的名称，如果webB项目重命名了，则对应的ajax请求都需要修改。

二、相对路径：不需要协议名、主机地址、端口、web项目名称，只需要请求的路径。
假设：
项目路径：http://localhost:8080/webname
页面路径：/webname/index.html（A页面），/webname/test/test.html（B页面）
请求路径：/request/ajaxtest，request/ajaxtest

1、如果请求路径以根路径开头，则无论什么ajax在什么页面，该请求都是相对于服务器的根路径，最后的请求路径都是：http://localhost:8080/request/ajaxtest
例如：
$.ajax({
url :”/request/ajaxtest”
});
原因：以”/“开头，是表示该请求基于从服务器的根路径，即不是相对于html的路径。

2、如果请求不以根路径开头（常见），则该请求路径是相对于html所在的路径的。
a、假如请求在A页面，最终的请求路径是：http://localhost:8080/webname/request/ajaxtest。
// /webname/index.html页面
$.ajax({
url:”request/ajaxtest”
});
原因：index.html页面对应的路径是”/webname/“，所以将url跟在这个路径下就是最终的请求路径。

b、假如请求在B页面，最终的请求路径是：http://localhost:8080/webname/test/request/ajaxtest。
// /webname/test/test.html页面
$.ajax({
url:”request/ajaxtest”
});
原因：test.html页面对应的路径是“/webname/test/”，所以将url要跟在test这一级下面。

9．AJAX中出现两次请求，OPTIONS请求和GET请求

参考:
https://blog.csdn.net/cc1314_/article/details/78272329

（二）概念

1．基本概念

局部刷新技术,异步请求技术
Ajax：Asynchronous JavaScript And XML，异步的JavaScript和XML。Ajax技术是基于JavaScript的。xml在现在的Ajax应用中已经逐步废弃，改用json代替.
作用： 页面无刷新的和服务器进行数据交互 —-异步交互
使用ajax的好处就是用户的体验感官更好,需要注意的是js的ajax没用,企业不会用, 企业都用jQuery的ajax

2．普通函数和回调函数

普通函数:定义完成之后如果想要用它,我们必须手动写调用代码
回调函数:我们创建一个函数对象,把函数对象传给某一个方法,之后的调用不需要我们管,不需要我们手写调用的方法,jQuery框架会自动的调用这个函数,这样的函数叫回调函数
回调函数就相当于我们在js里面写的

这些东西,如果我们把一些内容写在回调函数的function的大括号里面,就相当于写在

这个红色的框框里面了
!!!注意,回调函数在SpringMVC需要@ResponseBody 注解

JQuery

（一）基本概念

什么是jQuery
是一个javascript框架,优点:兼容CSS3,兼容各种浏览器,中文文档特全面jQuery核心理念是 写得更少,做得更多
基本使用
建议使用jQuery-1.8.js,只要在需要的HTML中使用标签引入jQuery-1.8.js文件即可,
jQuery用1.8的比较好 jquery-1.8.3.js是测试版 jquery-1.8.3.min.js 是压缩版的,把空格都压缩了, 项目上线(服务器发布)的时候用 jquery-1.8.3.min.js,其他时候用jquery-1.8.3.js.
注意jQuery2.0版本不支持IE浏览器

js通过数组封装成jQuery对象 ,jQuery底层就是数组
jQuery得到数组长度可以调用 length 也可以有 size 函数,看看到底封装了多少的js对象
jQuery是把函数放在括号里面来赋值的
jQuery支持批量绑定事件, 比如说 获取的标签是多个,然后绑定事件的时候,多个标签都可以同时被绑定事件

（二）事件以及绑定事件的方法

1．常见事件和事件切换(JQuery)

失去焦点 blur
获取焦点 focus
单击事件 click
双击事件 dblclick
鼠标移入 mouseover
鼠标移出 mouseout
下拉框值改变 change
表单提交 submit

鼠标移入移出事件 hover(函数1,函数2);
$对象.hover(func1,func2)===>$对象.mouseover(func1);$对象.mouseout(fun2);
鼠标多次点击事件:
$对象.toggle(func1,func2,func3);
第1次点击调用func1函数
第2次点击调用func2函数
第2次点击调用func3函数
回轮执行:如果绑定了n个函数,第n+1次点击时,会重新从第1个开始调用
JQuery对象绑定事件技巧总结(重点)
js:
js对象.onmouseover = 函数;
jQuery:
$对象.mouseover(函数);
规律:
js:对象.事件名 = 函数;
jQuery:$对象.去掉on的事件名(函数);

2．页面加载事件

$(function(){ 代码 }) //!!! 开发中推荐使用这种方式,简单

下面的了解,基本不用:
$(document).ready(function(){}) //jQuery把页面加载事件封装到document里面了
$().ready(function(){})
jQuery加载事件优点
js的页面加载事件只考虑最后一次绑定的函数(前面的都会被覆盖)
jQuery的页面加载事件可以绑定多个函数,而且每个都会执行

对比起来:这样的好处就是 页面加载事件函数jQuery可以写多个函数在里面,而js就需要多个多个函数内容都写在一个页面加载里面(如果写多个后者会覆盖)
jQuery页面标签加载完了之后 ready 就会执行,,所以 jQuery页面加载事件比js的更快点

（三）基本使用(任何操作都需要先导入依赖)

1．使用前需要导入类库

下面这个可以拿过去放入项目中就可以直接使用

2．JS和JQuery互转

基本使用
js对象 转成 jQuery对象: $(js对象)
jQuery对象 转成 js对象: $对象[0] $对象[1]…
介绍
比如: document.getElementById(“id值”),平常获取的对象都是js对象(Dom对象)
js对象是不能够使用jQuery封装好的函数 ,js对象必须转成jQuery对象才能使用,否则使用不了jQuery.
Query底层实际上是一个数组
命名规范
jQuery对象命名必须用$开头
这样好处就是别人能通过你命名来看出来你是JS对象还是jQuery对象

3．获取标签属性

jQuery对象
$对象.val(); //获取value属性值
$对象.text(); //获取文本内容 不标签,只有文字
$对象.html(); //获取标签内容 带标签

js对象
js对象.value;//使用js的方式获取文本输入框中的value值
$(js对象).val();//使用jQuery方式获取文本输入框的value值

js对象.innerHTML;//使用js的方式获取标签的内容
$(js对象).html();//使用jQuery的方式获取标签的内容

js对象.innerText;//使用js方式获取标签的文本内容
$(js对象).text();//使用jQuery方式获取标签的文本内容

4．内部插入元素(重点)

$(“#ulist”).prepend(“

5．获取设置value,class ‘checked’ 状态等进行操作

获取和设置value值
js对象: 对象.value;
$对象: $对象.val(…);//如果有参数就是赋值,如果没有参数就是取值
获取和设置文本内容
js对象: 对象.innerText;
$对象: $对象.text(…);//如果有参数就是赋值,如果没有参数就是取值
获取和设置html内容
js对象: 对象.innetHTML;
$对象: $对象.html(…);//如果有参数就是赋值,如果没有参数就是取值
添加和删除类名
$对象.addClass(“类名”);
$对象.removeClass(“类名”);
$对象.toggleClass(“类名”);
添加和删除属性
$(“#editModalBoxuserSexMan”).prop(‘checked’, ‘true’);

$对象.prop(“属性名”,”属性值”); //给指定的属性名设置指定的属性值,也可以设置单选的选中状态
$对象.prop(“属性名”); //获取该属性名的属性值

$对象.removeProp(“属性名”); //删除指定属性名

6．each循环遍历函数(JQuery)

!!!!!!!!!!jQuery遍历后取到的是js对象(因为jQuery是把数组拆开后,里面是js对象)

特别注意: 遍历时候取出this时候是一个js对象,转成jQuery时候不要被双引号包裹起来.
取出被遍历的信息: 下面是一个案例
爱好:爱好1

爱好2

爱好3

//取出input标签name属性为userHobby的所有标签的value信息 index是索引 ele是每次的标签,需要用.val()函数来取出里面的value属性
$.each($(“input[name=’userHobby’]”), function (index, ele) {

_alert_(**$**(ele).val())

});

$(“li”).each(function() {
alert($(this).html()) //正确
/ alert($(“this”).html())/ //错误 this 不能加双引号
})
开发中最常用的:
$checkboxEs是被遍历的jQuery对象
i: 代表索引
this: 代表遍历出来js对象
你也可以$(this) 把这个JS转成jQuery对象

var $checkboxEs = $(“input[name=ids]:checked”);

$checkboxEs.each(function (i) {

_alert_(_$_(**this**).val())

})

遍历方式2:
$.each($Eles,function(index,ele){
index: 代表元素索引
ele: 元素值(js对象)
this: 就是ele
});

7．ajax提交整个form表单

就是给form表单设置一个id ,#articleForm是form表单的id,然后用 .serialize() 方法

$.ajax({
url: url,
type: “POST”,
data: $(“#articleForm”).serialize(),//核心代码，form表单序列化
dataType: “JSON”,
success: function(data) {

}
});

8．选择器

jQuery选择器: 底层封装了css的选择器,
可以获取js的东西并且自动转换成jQuery对象,接收的值如果是多值可以自动接收(因为jQuery底层是数组).
可以调用size() 函数获取里面封装的多少JS对象

基本选择器(重点)

标签选择器(元素选择器)
$(“div”) 选择所有的div标签元素，返回div元素数组

class选择器
$(“.myClass”) 选择使用class = “myClass”类的css的所有元素,也叫class选择器

id选择器
$(“#myELement”) 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement 所以得到的是唯一的元素
联合选择???
$(“*”) 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$(“#myELement,div,.myclass”)

并列选择器???
$(‘p, div’) 获取p元素和div 元素

得到jQuery对象后,可以调用size() 也可以用length()函数,获取到底封装了多少个js对象

层级选择器(后代选择器)

1. alert($(“div h1”).size())
   选择所有的div 元素中所有的h1元素 包括孙子
   2. alert($(“div > h1”).size()) 选中A标签中所有的直接子标签B ,亲儿子选择器,不包括孙子
   
   3. alert($(“span + h1”).size())
   选中A标签的下一个同级标签B 同级:就是A 和B是兄弟 (只选一个,选A标签下面的同级标签B)
   
   4.alert($(“span ~ h1”).size())
   
   选中A标签的所有的同级标签B 同级:就是A 和B是兄弟 (选A标签下面的所 有的同级标签B) 注意是所有的,和上面的有区别的
   
   ——————————
   parent > child（直系子元素）
   $(document).ready(function () {
   // 选取div下的第一代span元素，将字体颜色设为红色
   $(‘div > span’).css(‘color’, ‘#FF0000’);
   });
   下面的代码，只有第一个span会变色，第二个span不属于div的一代子元素，颜色保持不变。
   
   
   123
   

   
   456
   

   
   
   
   ————————-
   $(“label + input”) （下一个兄弟元素，等同于next()方法）??? 选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
   
   $(“#prev ~ div”) （prev元素的所有兄弟元素，等同于nextAll()方法） 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

   基本过滤选择器

   基本概念:是在其他选择器选完之后再从中过滤掉
   可以取出第一个,最后一个,下标为偶数或者奇数的或者下标大于X的小于X的
   
   $(“tr:first”) 选择所有tr元素的第一个
   $(“tr:last”) 选择所有tr元素的最后一个
   
   $(“input:not(:checked) + span”) 过滤掉：checked的选择器的所有的input元素(也可以说取出checked之外 的元素)
   $(“tr:even”) 选择所有的tr元素的第0，2，4… …个元素（注意：因为所选择的多个元素时为数组， 所以序号是从0开始//取出下标为偶数的元素
   $(“tr:odd”) 选择所有的tr元素的第1，3，5… …个元素 //取出下标为奇数的元素
   $(“td:eq(2)”) 选择所有的td元素中序号为2的那个td元素 :odd:eq(index);//取出指定下标的元素
   $(“td:gt(4)”) 选择td元素中序号大于4的所有td元素 // 取出下标大于index的元素
   
   $(“td:lt(4)”) 选择td元素中序号小于4的所有的td元素 //取出下标小于index的元素
   $(“:header”) 选择h1、h2、h3之类的
   
   $(“div:animated”) 选择正在执行动画效果的元素

   属性选择器

   下面六个前三个重要
   1. [属性名]选择具有该属性名的元素
   alert($(“li[name]”).size()) 选择li标签中带有name属性的,没有name属性的不要
   2. [属性名=’属性值’] 选中具有该属性名,且等于该属性值的元素
   alert($(“li[name=’aaa’]”).size()) 选择li标签name属性值等于 aaa的,.
   3. [属性名!=’属性值’] 选中不等于该属性值的元素(需要注意,没有也算不等于属性值)
   alert($(“li[name!=’aaa’]”).size()) 选择li标签name属性值不等于 aaa的,没有name属性也算
   
   4. [属性名 ^=’属性值’] 选中属性值中以XXX为开头(模糊查询)
   alert($(“li[name^=’a’]”).size())
   5. [属性名 $=’属性值’] 选中属性值中以XXX为结尾(模糊查询)
   alert($(“li[name$=’a’]”).size())
   6. [属性名 = ‘属性值’] 选中属性值中包含XXX的(模糊查询)
   alert($(“li[name =’a’]”).size())
   

   属性过滤选择器

   
   $(“div[id]”) 选择所有含有id属性的div元素 选中具有该属性名的元素
   $(“input[name=’newsletter’]”) 选择所有的name属性等于’newsletter’的input元素
   [属性名] :[属性名=’属性值’] : 选中具有该属性名,且等于该属性值的元素
   $(“input[name!=’newsletter’]”) 选择所有的name属性不等于’newsletter’的input元素
   
   [属性名!=’属性值’] : 选中不等于该属性值的元素
   $(“input[name^=’news’]”) 选择所有的name属性以’news’开头的input元素
   
   $(“input[name$=’news’]”) 选择所有的name属性以’news’结尾的input元素
   
   $(“input[name*=’man’]”) 选择所有的name属性包含’news’的input元素
   
   $(“input[id][name$=’man’]”) 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
   

   表单属性选择器

   只对表单控件有效,表单外面没有效果,可以获取是否选中,是否可用的表单元素
   表单元素: input button textarea select option 这几个
   
   
   $(“:enabled”) 选中可用的表单中的元素
   $(“:disabled”) 选中不可用的表单中的元素
   1. 密码: 让密码框不可用
   
   
   $(“input:checked”) 选中被勾选的元素(radio,checkbox,select,不包含option)
   经过验证:包含option的(实际为主)
   
   $(“:selected”) 选中被勾选的option
   
   $(“input:checked[name=’checkboxSingle’]”) 获取input标签name属性为’checkboxSingle’ 的被选中的元素(CheckBox),使用场景比如是批量删除
   
   $(“select option:selected”) 选择所有的select 的子元素中被selected的元素
   
   $(“:input”) 选择所有的表单输入元素，包括input, textarea, select 和 button
   
   $(“:text”) 选择所有的text input元素
   
   $(“:password”) 选择所有的password input元素
   
   $(“:radio”) 选择所有的radio input元素
   
   $(“:checkbox”) 选择所有的checkbox input元素
   
   $(“:submit”) 选择所有的submit input元素
   
   $(“:image”) 选择所有的image input元素
   
   $(“:reset”) 选择所有的reset input元素
   
   $(“:button”) 选择所有的button input元素
   
   $(“:file”) 选择所有的file input元素
   
   $(“:hidden”) 选择所有类型为hidden的input元素或表单的隐藏域
   ——————————————-下面的有没有用就不知道了.

   内容过滤选择器：

   
   $(“div:contains(‘John’)”) 选择所有div中含有John文本的元素
   
   $(“td:empty”) 选择所有的为空（也不包括文本节点）的td元素的数组
   
   $(“div:has(p)”) 选择所有含有p标签的div元素
   
   $(“td:parent”) 选择所有的以td为父节点的元素数组
   

   可视化过滤选择器：

   
   $(“div:hidden”) 选择所有的被hidden的div元素
   
   $(“div:visible”) 选择所有的可视化的div元素
   
   

   子元素过滤选择器：

   
   $(“ul li:nth-child(2)”),$(“ul li:nth-child(odd)”),$(“ul li:nth-child(3n + 1)”)
   
   $(“div span:first-child”) 返回所有的div元素的第一个子节点的数组
   
   $(“div span:last-child”) 返回所有的div元素的最后一个节点的数组
   
   $(“div button:only-child”) 返回所有的div中只有唯一一个子节点的所有子节点的数组
   
   

   表单元素过滤选择器：

   
   选取一个 name 为”S03_22″的input text框的上一个td的text值
   
   $(”input[@ name =S_03_22]“).parent().prev().text()
   
   
   名字以”S”开始，并且不是以”R”结尾的
   
   $(”input[@ name ^=’S‘]“).not(”[@ name $=’_R’]“)
   
   一个名为 radio_01的radio所选的值
   
   $(”input[@ name =radio_01][@checked]“).val();
   
   
   $(“A B”) 查找A元素下面的所有子节点，包括非直接子节点
   
   $(“A>B”) 查找A元素下面的直接子节点
   
   $(“A+B”) 查找A元素后面的兄弟节点，包括非直接子节点
   
   $(“A~B”) 查找A元素后面的兄弟节点，不包括非直接子节点
   
   1. $(“A B”) 查找A元素下面的所有子节点，包括非直接子节点

   通过input标签的name获取值设置值

   $(“input[id][name$=’keleyi’]”) 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以keleyi结尾的元素
   根据name取值：
   
   $(“input[name=’mobile’]”).val()
   
   根据id取值:
   
   $(“#mobile_reg_form”).html()
   根据name取值了遍历：
   
   $(“input[name=’mobile’]”).each(
   
   function(){
   
   alert($(this).val());
   
   }
   
   )
   
   取出form中的input：
   
   得到值（多个的情况）：
   
   $(“input[name=’mobile’]”)[0].value
   
   $(“input[name=’mobile’]”).get(1).value
   
   ——-jquery添加删除样式————
   给一个标签添加样式:
   $(“#id”).addClass(“style”);
   删除一个标签的样式:
   $(“#id”).removeClass(“style”);
   注:”#id” id是对应标签的id,style是对应css样式的名称
   获取单选标签选中获得的值
   $(“input[name=’xxxx’]:checked”).val();

   获取指定name属性的select下的option的数量

   指定了name属性为hobby2 ,然后就是
   alert($(“select[name=hobby2] option”).size()) //1
   
   
   
   -请选择- 处理中 已处理
   -请选择-
   
   
   
   
   
   

   9．jQuery动画效果(了解)

   基本动画
   show(speed,func);//显示元素
   hide(speed,func);//隐藏元素
   toggle(speed,func);//切换,显示的隐藏,隐藏的显示(基本就能代替 show和hide动画(执行动画是修 改长宽来达到效果的))
   speed:指的是动画执行完毕的时间(单位毫秒),固定字符串slow, normal,fast
   func:指的是动画执行完毕之后调用的函数(回调函数)
   滑动动画
   通过修改height属性来达到效果.
   slideUp(speed,func);//向上滑动,最后隐藏
   slideDown(speed,func);//向下滑动,最后整个显示
   slideToggle(speed,func);//如果是隐藏的,那么调用slideDown,如果是显示的调用slideUp
   淡入淡出动画
   淡入淡出动画: 慢慢的清晰是淡入 (显示动画),慢慢的透明是淡出动画(隐藏动画)
   fadeIn(speed,func);//淡入动画,显示
   fadeOut(speed,func);//淡出动画,隐藏
   fadeToggle(speed,func);//切换动画,如果显示调用fadeOut,如果隐藏调用fadeIn
   fadeTo(speed,透明度,func) ;//动画需要淡到哪种透明度
   透明度的取值: [0,1] 1表示完全不透明 0表示完全透明
   

   10．案例2:重写隔行换色

   1.添加和删除类名(class)(重点)
   addClass(“类名”); //添加类名
   removeClass(“类名”);//删除类名
   
   toggleClass(“类名”);//如果该类名存在那么删除,不存在那么添加
   2.案例实现(重点)

   （四）花式操作

1．批量删除&更新用户状态(对checkBox进行操作)

jsp页面:
/*这种方法可以用于很多种操作

比如批量修改状态,批量删除什么的*/

function openStatus() {

//获取被选中的CheckBox

**var **$checkboxEs = _$_(**"input[name=ids]:checked"**);

//先判断,如果没有构造就进行提示

**if **($checkboxEs.**length **== 0) {

    _confirm_(**"请勾选至少一个完成操作"**)

}<br />    //给出提示,如果用户选中确确认操作, 那么 flag就是true

**var **flag;

**if **($checkboxEs.**length **> 0) {

    flag = _confirm_(**"确定要开启么"**)

}

**if **(flag) {

    //创建一个数组用于装 每一个被选中的id,用于传递到后台进行操作

    **var **array = **new _Array_**();

    //遍历勾选的复选框

    $checkboxEs.each(**function **(i) {

        //把被勾选的复选框添加到预先创建好的数据中

        array[i] = _$_(**this**).val()

    })<br />        //用这种方式把数组传递给后台Servlet, 后台用 String[] ids 来接收这个数组数据

    **_location_**.href = **"${**pageContext.request.contextPath**}/product/openStatus.do?ids=" **+ array;

}<br />}<br />java代码就不写了,就是获取数组在dao层进行foreach遍历调用删除或者修改状态等等等方法进行操作

JavaScript

（一）js基本概念

基本概念
JavaScript是一门嵌入式的编程语言(一般来说嵌入到HTML),作用是为HTML提供与用户的交互,主要是用于开发交互式web页面,轻量级脚本语言,解释性语言,不需要编译,由浏览器直接运行
js不是纯面向对象,是基于对象的语言(意思是对象别人已经搞出来了,你不能自己new,直接拿出来调用方法就可以了),主要目的是把对象拿出来,调用就行了
js函数中没有重载,只有覆盖

js的组成:
ECMAScript(核心语法) 这是JS基础
DOM模型(文档对象模型) 模型里面有一堆对象
BOM模型(浏览器模型) 模型里面有一堆对象

（二）事件以及事件绑定

1．动态绑定与静态绑定

静态绑定:只要是在html里面写的都是静态绑定,静态绑定必须加括号.
动态绑定:先获取id再进行绑定函数 ,事件和函数写在js代码里面的就是动态绑定.动态绑定弊端:不能传递参数
总结:开发中一般都用动态绑定的多(因为页面一般是美工写好, 我们尽量不要改动他, 最多需要加个id. 动静态绑定基本都能互相功能实现 )

静态绑定事件

需要注意,如果传递的值是字符串必须加单引号,否则无法传递,如果是传递的是数字类型的可以不加单引号.

2．常见的js事件

事件是js已经定义好的,你不能去修改它,增加它

3．onsubmit事件的一个坑

4．事件拼接字符串

!!!传递参数字符串和数字拼接方式不一样

传递参数是字符串的拼接

$('#planList>tbody').html('');<br />                  for(var i=0;i<data.page.list.length;i++){<br />                     $('#planList>tbody').append('<tr><td>'+ data.page.list[i].name<br />                     +'</td><td>'+ data.page.list[i].explain<br />                     +'</td><td>'+ kindEntityMap[data.page.list[i].kindId] +'</td><td>'+ gradeEntityMap[data.page.list[i].gradeId] +'</td><td>'<br />                     +StringTransitionDate( data.page.list[i].entryTime)<br />                     +'</td><td><button onclick="planListDetail(\''+ data.page.list[i].id +'\')"class="layui-btn layui-btn-sm">查看</button> <button class="layui-btn layui-btn-danger layui-btn-sm" style="margin-left: 14px;">删除</button></td></tr>');<br /> <br />                  }<br />重点看onclick事件的这个地方<br />结果:<br />在别的页面 console.log(id); 输出内容就是字符串了.<br />![](https://cdn.nlark.com/yuque/0/2020/jpeg/350923/1592468058935-58c6e3cc-c7d2-4b82-9862-7fa76c61362a.jpeg#height=127&width=176)<br /> 

传递两个参数的拼接方法

ht += ‘<button onclick=”approved(\’’ + data.page.list[i].id + ‘\’,\’’ + data.page.list[i].eventsId + ‘\’)” >通过’;

函数就可以在形参那里定义两个变量就可以接收者两个参数了
function approved(id,eventsId){

（三）基本使用

1．在HTML中引入js代码

JavaScript的核心语法之数据类型
a.js是弱类型语言&js中变量的定义
var 变量名;
js是弱类型语言,定义变量时不需要给定类型,
统一使用var声明变量,该变量的类型取决你给它赋的值

2．基本类型引用类型运算符其他类型

基本类型(原始类型):
Undefined——->undifined 未定义类型
Null ——> null 空类型
Boolean——> true/false
Number ——> 所有的数字都是这个类型
String ——> 所有双引号引起来的都是该类型
引用类型
也是一种叫做类(class)的东西
但是我们一般不会自己去new对象,
而是直接使用js的DOM和BOM模型中定义好的对象
js中的运算符
算术运算符(与Java一模一样)
赋值运算符(与Java一模一样)
比较运算符有一点与java不同
==:值等
===:全等(值等和类型等)
逻辑运算符(与Java一模一样)
js中其他类型转换成boolean类型(有空练习)

js中一些奇怪的等性运算[了解]
如果是数字转成boolean,那么0和NaN转成false 其他转成true
如果是boolean转成数字,那么false转成0,true转成1

3．function函数定义的两种方式

             第一种: function 函数名(参数列表){....}<br />                                                函数名(实际参数);<br />                                  第二种:var func = function (参数列表){.....}<br />                                                func(实际参数);<br /> 

4．json字符串转JS数据 JSON.parse()

JSON 通常用于与服务端交换数据。
在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

5．js的几种弹出框

第一种 alert 就不说了

第二种:confirm
返回值是boolean, 点击确定返回true, 点击取消返回false
if ($checkboxes.length ==0){

_confirm_(**"请勾选至少一项进行删除"**)

}

第三种 prompt()
var text = prompt(“提示内容”);//输入提示框
如果点击确定,返回输入的内容,点击取消返回null

var a = prompt(“请输入”)

    _alert_(a)  //上面输入的111 ,这里a的值就是111<br /> <br /> <br /> 

6．BOM模型(浏览器对象模型)了解

          window:全局对象,函数可以直接调用不需要对象名<br />              函数: setInterval,setTimeout,alert()<br /> <br />             <br />              Location:表示当前网页的url地址<br />              属性: href 该属性就是当前url地址<br />                 只要修改href的值,就能够达到自动跳转的功能<br />              History:表示网页的浏览历史<br />                 back();//返回上次的浏览的HTML网页<br />                 forward();//返回到下一个HTML页面<br />                 go(1/-1);//go(1) == forward()  go(-1)====back();    

7．修改标签的内容

                 标签对象.innerHTML;//获取该标签开始和结束之间的内容<br /> <br />          标签对象.innerHTML = "新内容";//修改标签的内容.会解析内容的HTML语言<br />          标签对象.innerText = "新内容";//修改标签的内容,会把所有内容都当做普通文本<br />       扩展:在JS的绑定函数中也可以使用this <br />          标签的事件绑定了函数,那么函数中的this就代表该标签<br />          注意:以上结论只能在动态绑定时有效<br /> <br />function dmji(){<br />  var divele= document.getElementById("div1");<br />  divele.innerHTML = " <a href='https://www.baidu.com/'>dmjiwo</a>";<br />}<br />             

8．修改复选框的选中状态

          复选框对象.checked = true;//选中<br />              复选框对象.checked = false;//不选中

9．动态添加元素

      document.createElement("标签名");//创建一个标签<br />          document.createTextNode("文本内容");//创建一个文本结点对象<br />          标签对象.setAttribute(属性名,属性值);//给标签设置属性<br />          父标签.appendChild(子标签);//向父标签中添加子标签<br />       事件:下拉框的onchange事件,当下拉框选中内容发生改变时触发<br />      

10．DOM模型

backgroundColor 属性设置元素的背景颜色

文档对象模型,实际上就是一颗倒立的DOM树(和XML没有区别)
2.document对象中的函数
获取函数:
document.getElementById(“id值”);//获取指定id值的标签(一般就只有一个)
document.getElementsByClassName(“类名”);//获取指定class属性值的标签
document.getElementsByName(“name属性值”);//获取指定name属性值的标签
document.getElementsByTagName(“标签名”);//获取指定名字的标签
创建函数:
document.createElement(“标签名”);//创建指定的空标签
document.createTextNode(“文本内容”);//创建指定内容的文件结点
document.createAttribute(“属性名”,”属性值”);//创建属性对象
常见的属性:
childNodes:获取所有的子结点
nodeName:获取标签对象的名字
nodeType:获取结点的类型(Element,Attribute,Text)
nodeValue:获取结点的值(只有文本结点有该属性)
4.元素对象的方法
父元素.appendChild(子元素) ;//向父元素的最后添加子元素
父元素.insertBefore(子元素A,兄弟元素B);
向父元素中插入A元素,在元素B 之前的位置
父元素.insertAfter(子元素A,兄弟元素B);
向父元素中插入A元素,在元素B之后的位置
元素.setAttribute(属性名,属性值);//给元素设置属性
5.全局函数总结
setInterval(code,毫秒值);
setTimeout(code,毫秒值);
alert(“提示信息”);//提示框
confirm(“提示信息”);//确认取消框
prompt(“提示信息”);//输入确认取消框
转换:
window.parseInt(“30”);
window.parseFloat(“3.14”);
执行js脚本:
eval(“js代码”);//接收用户写的js代码,并执行

11．页面跳转都后台服务器location.href

location.href = “${pageContext.request.contextPath}/order/findAllPage.do?pageSize=”+why.value;


/下载处置报告 ,(调用freemarker 接口)/

function downloadCZBG(id) {

//获取主机名

**var **hostname = **location**.**hostname**;

//获取端口号

**var **port = **location**.**port**;

**console**.log(hostname)

**console**.log(port)

**var **url = **'http://'**+hostname+**':'**+port+**"/api/emergency/emergencyrelatedreport/downloadCZBG?id="**+ id;

**window**.**location**.**href**=url;

}

12．指定时间跳转到指定的页面

13．将response信息打印在控制台上

console.log(response);



/
查询一级分类, 要基于父id为o的数据来查询以及分类
/
$scope.selectItemCat1List=function(){
itemCatService.findByParentId(0).success(
//response接收响应成功后的数据 [{“id”:1,”name”:”手机”},{id:2,name:电脑},{}]
function**(response){ //回调
//console.log(response);
$scope.itemCat1List=response;//赋值
}
);
}

14．javascript:后面直接跟js代码

一种是javascript后面直接跟JS函数,函数括号里面是传给函数的参数.

下一页
javascript后面可以直接跟函数名字,






点击

效果

15．js获取map集合的key和value

              for(var key in kindEntityMap){<br />                   console.log("属性：" + key + ",值：" + kindEntityMap[key]);<br />                  }<br />![](https://cdn.nlark.com/yuque/0/2020/jpeg/350923/1592468059898-f5943d6c-1e91-4e36-b0e1-671e0397a3bd.jpeg#height=63&width=145)<br /> <br />还有一种方法:<br />直接map集合.key也可以取值<br />data.districtLevelCountMap.xian  <br /> <br /> 

16．js获取map集合的长度

kindEntityMap是map集合,其他的代码都是固定的东西

var length = Object.keys(kindEntityMap).length ;
alert(length)

17．js里面this的指向

this的指向是在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象,

秘籍:
谁最终调用函数,this就指向谁..
this指向的,永远只可能是对象.
this指向谁,永远不取决于this写在哪!而是取决于函数在哪里调用.
this指向的对象,我们称之为函数的上下文context,也叫函数的调用者

① 通过函数名()直接调用：this指向window

function func(){
console.log(this);
}
//① 通过函数名()直接调用：this指向window
func(); // this—->window
② 通过对象.函数名()调用的：this指向这个对象

function func(){
console.log(this);
}

//② 通过对象.函数名()调用的：this指向这个对象
// 狭义对象
var obj = {
name:”obj”,
func1 :func
};
obj.func1(); // this—->obj

// 广义对象
document.getElementById(“div”).onclick = function(){
this.style.backgroundColor = “red”;
}; // this—->div
③ 函数作为数组的一个元素，通过数组下标调用的：this指向这个数组

function func(){
console.log(this);
}

//③ 函数作为数组的一个元素，通过数组下标调用的：this指向这个数组
var arr = [func,1,2,3];
arr0; // this—->arr
④ 函数作为window内置函数的回调函数调用：this指向window（ setInterval setTimeout 等）

function func(){
console.log(this);
}


//④ 函数作为window内置函数的回调函数调用：this指向window
setTimeout(func,1000);// this—->window
//setInterval(func,1000);
⑤ 函数作为构造函数，用new关键字调用时：this指向新new出的对象
function func(){
console.log(this);
}

//⑤ 函数作为构造函数，用new关键字调用时：this指向新new出的对象
var obj = new func(); //this—->new出的新obj




例子1
var v调用的this就是v


你点击按钮触发的, this就是button按钮



下面的组合实例:
function a(){
var user = “追梦子”;
console.log(this.user); //undefined
console.log(this); //Window}
a();
按照我们上面说的this最终指向的是调用它的对象，这里的函数a实际是被Window对象所点出来的，下面的代码就可以证明。
function a(){
var user = “追梦子”;
console.log(this.user); //undefined
console.log(this); //Window
}
window.a();
例子

var o = {
user:”追梦子”,
fn:function(){
console.log(this.user); //追梦子 }
}
o.fn();

这里的this指向的是对象o，因为你调用这个fn是通过o.fn()执行的，那自然指向就是对象o，这里再次强调一点，this的指向在函数创建的时候是决定不了的，在调用的时候才能决定，谁调用的就指向谁，一定要搞清楚这个。

var o = {
user:”追梦子”,
fn:function(){
console.log(this.user); //追梦子 }
}
window.o.fn();

这段代码和上面的那段代码几乎是一样的，但是这里的this为什么不是指向window，如果按照上面的理论，最终this指向的是调用它的对象，这里先说个而外话，window是js中的全局对象，我们创建的变量实际上是给window添加属性，所以这里可以用window点o对象。
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //12 }
}
}
o.b.fn();

　这里同样也是对象o点出来的，但是同样this并没有执行它，那你肯定会说我一开始说的那些不就都是错误的吗？其实也不是，只是一开始说的不准确，接下来我将补充一句话，我相信你就可以彻底的理解this的指向的问题。
　　情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，但是我们这里不探讨严格版的问题，你想了解可以自行上网查找。
　　情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。
　　情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象，例子3可以证明，如果不相信，那么接下来我们继续看几个例子。
var o = {
a:10,
b:{
// a:12,
fn:function(){
console.log(this.a); //undefined }
}
}
o.b.fn();
尽管对象b中没有属性a，这个this指向的也是对象b，因为this只会指向它的上一级对象，不管这个对象中有没有this要的东西。
还有一种比较特殊的情况，例子4：
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //undefined
console.log(this); //window }
}
}var j = o.b.fn;
j();
这里this指向的是window，是不是有些蒙了？其实是因为你没有理解一句话，这句话同样至关重要。
　　this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的，例子4中虽然函数fn是被对象b所引用，但是在将fn赋值给变量j的时候并没有执行所以最终指向的是window，这和例子3是不一样的，例子3是直接执行了fn。
　　this讲来讲去其实就是那么一回事，只不过在不同的情况下指向的会有些不同，上面的总结每个地方都有些小错误，也不能说是错误，而是在不同环境下情况就会有不同，所以我也没有办法一次解释清楚，只能你慢慢地的去体会。

构造函数版this：
function Fn(){
this.user = “追梦子”;
}var a = new Fn();
console.log(a.user); //追梦子
　　这里之所以对象a可以点出函数Fn里面的user是因为new关键字可以改变this的指向，将这个this指向对象a，为什么我说a是对象，因为用了new关键字就是创建一个对象实例，理解这句话可以想想我们的例子3，我们这里用变量a创建了一个Fn的实例（相当于复制了一份Fn到对象a里面），此时仅仅只是创建，并没有执行，而调用这个函数Fn的是对象a，那么this指向的自然是对象a，那么为什么对象a中会有user，因为你已经复制了一份Fn函数到对象a中，用了new关键字就等同于复制了一份。
　　除了上面的这些以外，我们还可以自行改变this的指向，关于自行改变this的指向请看JavaScript中call,apply,bind方法的总结这篇文章，详细的说明了我们如何手动更改this的指向。

更新一个小问题当this碰到return时
;)
function fn()
{
this.user = ‘追梦子’;
return {};
}var a = new fn;
console.log(a.user); //undefined
;)
再看一个
;)
function fn()
{
this.user = ‘追梦子’;
return function(){};
}var a = new fn;
console.log(a.user); //undefined
;)
再来
;)
function fn()
{
this.user = ‘追梦子’;
return 1;
}var a = new fn;
console.log(a.user); //追梦子
;)
;)
function fn()
{
this.user = ‘追梦子’;
return undefined;
}var a = new fn;
console.log(a.user); //追梦子
;)
什么意思呢？
　　如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。
function fn()
{
this.user = ‘追梦子’;
return undefined;
}var a = new fn;
console.log(a); //fn {user: “追梦子”}
　　还有一点就是虽然null也是对象，但是在这里this还是指向那个函数的实例，因为null比较特殊。
function fn()
{
this.user = ‘追梦子’;
return null;
}var a = new fn;
console.log(a.user); //追梦子
知识点补充：
　　1.在严格版中的默认的this不再是window，而是undefined。
　　2.new操作符会改变函数this的指向问题，虽然我们上面讲解过了，但是并没有深入的讨论这个问题，网上也很少说，所以在这里有必要说一下。
function fn(){
this.num = 1;
}var a = new fn();
console.log(a.num); //1
　　为什么this会指向a？首先new关键字会创建一个空的对象，然后会自动调用一个函数apply方法，将this指向这个空对象，这样的话函数内部的this就会被这个空的对象替代。
2017-09-15 11:49:14
　　注意: 当你new一个空对象的时候,js内部的实现并不一定是用的apply方法来改变this指向的,这里我只是打个比方而已.
　　if (this === 动态的\可改变的) return true;

（四）JS日期时间类

1．后台传过来new Date() 进行回显操作

var time = “2018-11-15T12:35:26.000+0000”;
var d = new Date(time);
var times=d.getFullYear() + ‘-‘ + (d.getMonth() + 1) + ‘-‘ + d.getDate() + ‘ ‘ + d.getHours() + ‘:’ + d.getMinutes() + ‘:’ + d.getSeconds();
alert(times);//输出 2018-11-15 20:35:26

2．new Date() 字符串转日期工具类

//参数是 后台传过来的, 后台数据就是 new Date() 生成的数据
var time = “2018-11-15T12:35:26.000+0000”;
//调用js方法
alert(StringTransitionDate(time))


//日期转换JS (返回2018年11月15日格式的)
function StringTransitionDate(time){

**var  **d =  **new  **Date(time);

**var **times=d.getFullYear() + **'年' **+ (d.getMonth() + 1) + **'月' **+ d.getDate() + **'日' **;<br />    **return **times  <br />}<br /> <br /> <br /> <br />如果日期是Oracle数据库默认的就转成空串<br />**function **_StringTransitionDate_(time){

**var  **d =  **new  **Date(time);

**var **times=d.getFullYear() + **'年' **+ (d.getMonth() + 1) + **'月' **+ d.getDate() + **'日' **;

        /*如果是没设置就变为空字符串 , Oracle数据库的系统默认日期就是1970年1月1日,

        * 如果你不输入日期默认就是 1970年1月1日*/

    **if**(times == **"1970年1月1日"**){

        times = **""**;

    }<br />    **return **times

}

3．日期字符串转指定的日期字符串格式

这个日期字符串是后台传过来的,后台的数据是 Date类型的

思路: 日期字符串先转成Date类型的 ,再根据Date类型的转成你需要的字符串格式
/获取的是日期字符串/

var time = data.page.list[i].emergencyRelatedReportEntity.generateTime;

/日期字符串转成你需要的日期字符串/

var timestr = new Date(time).format(‘yyyy年MM月dd日’)
输出结果: 2018年11月18日

//* 案例二
function StringTransitionDate(time){

**var  **d =  **new  **Date(time);

**var **times=d.getFullYear() + **'-' **+ (d.getMonth() + 1) + **'-' **+ d.getDate()  ;

**return **times

}

调用上面方法
$(“#specifyEndTime”).val(StringTransitionDate(data.emergencyMission.specifyEndTime));

效果

4．其它未归类

是否好用需要证实一下
Js获取当前日期时间及其它操作
var myDate = new Date();//格式: Fri Jun 29 2018 10:04:26 GMT+0800(中国标准时间)
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期var mytime=myDate.toLocaleTimeString(); //获取当前时间 格式:上午10:03:29
myDate.toLocaleString( ); //获取日期与时间
日期时间脚本库方法列表
Date.prototype.isLeapYear 判断闰年Date.prototype.Format 日期格式化Date.prototype.DateAdd 日期计算Date.prototype.DateDiff 比较日期差Date.prototype.toString 日期转字符串Date.prototype.toArray 日期分割为数组Date.prototype.DatePart 取日期的部分信息Date.prototype.MaxDayOfDate 取日期所在月的最大天数Date.prototype.WeekNumOfYear 判断日期所在年的第几周StringToDate 字符串转日期型IsValidDate 验证日期有效性CheckDateTime 完整日期时间检查daysBetween 日期天数差
js代码：
//—————————————————————————-
// 判断闰年
//—————————————————————————-
Date.prototype.isLeapYear = function()
{
return (0==this.getYear()%4&&((this.getYear()%100!=0)||(this.getYear()%400==0)));
}

//—————————————————————————-
// 日期格式化
// 格式 YYYY/yyyy/YY/yy 表示年份
// MM/M 月份
// W/w 星期
// dd/DD/d/D 日期
// hh/HH/h/H 时间
// mm/m 分钟
// ss/SS/s/S 秒
//—————————————————————————-
Date.prototype.Format = function(formatStr)
{
var str = formatStr;
var Week = [‘日’,’一’,’二’,’三’,’四’,’五’,’六’];

str=str.replace(/yyyy|YYYY/,this.getFullYear());
str=str.replace(/yy|YY/,(this.getYear() % 100)>9?(this.getYear() % 100).toString():’0’ + (this.getYear() % 100));

str=str.replace(/MM/,this.getMonth()>9?this.getMonth().toString():’0’ + this.getMonth());
str=str.replace(/M/g,this.getMonth());

str=str.replace(/w|W/g,Week[this.getDay()]);

str=str.replace(/dd|DD/,this.getDate()>9?this.getDate().toString():’0’ + this.getDate());
str=str.replace(/d|D/g,this.getDate());

str=str.replace(/hh|HH/,this.getHours()>9?this.getHours().toString():’0’ + this.getHours());
str=str.replace(/h|H/g,this.getHours());
str=str.replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():’0’ + this.getMinutes());
str=str.replace(/m/g,this.getMinutes());

str=str.replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():’0’ + this.getSeconds());
str=str.replace(/s|S/g,this.getSeconds());

return str;
}

//+—————————————————————————-
//| 求两个时间的天数差 日期格式为 YYYY-MM-dd
//+—————————————————————————-
function daysBetween(DateOne,DateTwo)
{
var OneMonth = DateOne.substring(5,DateOne.lastIndexOf (‘-‘));
var OneDay = DateOne.substring(DateOne.length,DateOne.lastIndexOf (‘-‘)+1);
var OneYear = DateOne.substring(0,DateOne.indexOf (‘-‘));

var TwoMonth = DateTwo.substring(5,DateTwo.lastIndexOf (‘-‘));
var TwoDay = DateTwo.substring(DateTwo.length,DateTwo.lastIndexOf (‘-‘)+1);
var TwoYear = DateTwo.substring(0,DateTwo.indexOf (‘-‘));

var cha=((Date.parse(OneMonth+’/‘+OneDay+’/‘+OneYear)- Date.parse(TwoMonth+’/‘+TwoDay+’/‘+TwoYear))/86400000);
return Math.abs(cha);
}


//+—————————————————————————-
//| 日期计算
//+—————————————————————————-
Date.prototype.DateAdd = function(strInterval, Number) {
var dtTmp = this;
switch (strInterval) {
case ‘s’ :return new Date(Date.parse(dtTmp) + (1000 Number));
case ‘n’ :return new Date(Date.parse(dtTmp) + (60000 Number));
case ‘h’ :return new Date(Date.parse(dtTmp) + (3600000 Number));
case ‘d’ :return new Date(Date.parse(dtTmp) + (86400000 Number));
case ‘w’ :return new Date(Date.parse(dtTmp) + ((86400000 7) Number));
case ‘q’ :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number3, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
case ‘m’ :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
case ‘y’ :return new Date((dtTmp.getFullYear() + Number), dtTmp.getMonth(), dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
}
}

//+—————————————————————————-
//| 比较日期差 dtEnd 格式为日期型或者有效日期格式字符串
//+—————————————————————————-
Date.prototype.DateDiff = function(strInterval, dtEnd) {
var dtStart = this;
if (typeof dtEnd == ‘string’ )//如果是字符串转换为日期型
{
dtEnd = StringToDate(dtEnd);
}
switch (strInterval) {
case ‘s’ :return parseInt((dtEnd - dtStart) / 1000);
case ‘n’ :return parseInt((dtEnd - dtStart) / 60000);
case ‘h’ :return parseInt((dtEnd - dtStart) / 3600000);
case ‘d’ :return parseInt((dtEnd - dtStart) / 86400000);
case ‘w’ :return parseInt((dtEnd - dtStart) / (86400000 7));
case ‘m’ :return (dtEnd.getMonth()+1)+((dtEnd.getFullYear()-dtStart.getFullYear())*12) - (dtStart.getMonth()+1);
case ‘y’ :return dtEnd.getFullYear() - dtStart.getFullYear();
}
}

//+—————————————————————————-
//| 日期输出字符串，重载了系统的toString方法
//+—————————————————————————-
Date.prototype.toString = function(showWeek)
{
var myDate= this;
var str = myDate.toLocaleDateString();
if (showWeek)
{
var Week = [‘日’,’一’,’二’,’三’,’四’,’五’,’六’];
str += ‘ 星期’ + Week[myDate.getDay()];
}
return str;
}

//+—————————————————————————-
//| 日期合法性验证
//| 格式为：YYYY-MM-DD或YYYY/MM/DD
//+—————————————————————————-
function IsValidDate(DateStr)
{
var sDate=DateStr.replace(/(^\s+|\s+$)/g,’’); //去两边空格;
if(sDate==’’) return true;
//如果格式满足YYYY-(/)MM-(/)DD或YYYY-(/)M-(/)DD或YYYY-(/)M-(/)D或YYYY-(/)MM-(/)D就替换为’’
//数据库中，合法日期可以是:YYYY-MM/DD(2003-3/21),数据库会自动转换为YYYY-MM-DD格式
var s = sDate.replace(/[\d]{ 4,4 }[-/]{ 1 }[\d]{ 1,2 }[-/]{ 1 }[\d]{ 1,2 }/g,’’);
if (s==’’) //说明格式满足YYYY-MM-DD或YYYY-M-DD或YYYY-M-D或YYYY-MM-D
{
var t=new Date(sDate.replace(/-/g,’/‘));
var ar = sDate.split(/[-/:]/);
if(ar[0] != t.getYear() || ar[1] != t.getMonth()+1 || ar[2] != t.getDate())
{
//alert(‘错误的日期格式！格式为：YYYY-MM-DD或YYYY/MM/DD。注意闰年。’);
return false;
}
}
else
{
//alert(‘错误的日期格式！格式为：YYYY-MM-DD或YYYY/MM/DD。注意闰年。’);
return false;
}
return true;
}

//+—————————————————————————-
//| 日期时间检查
//| 格式为：YYYY-MM-DD HH:MM:SS
//+—————————————————————————-
function CheckDateTime(str)
{
var reg = /^(\d+)-(\d{ 1,2 })-(\d{ 1,2 }) (\d{ 1,2 }):(\d{ 1,2 }):(\d{ 1,2 })$/;
var r = str.match(reg);
if(r==null)return false;
r[2]=r[2]-1;
var d= new Date(r[1],r[2],r[3],r[4],r[5],r[6]);
if(d.getFullYear()!=r[1])return false;
if(d.getMonth()!=r[2])return false;
if(d.getDate()!=r[3])return false;
if(d.getHours()!=r[4])return false;
if(d.getMinutes()!=r[5])return false;
if(d.getSeconds()!=r[6])return false;
return true;
}

//+—————————————————————————-
//| 把日期分割成数组
//+—————————————————————————-
Date.prototype.toArray = function()
{
var myDate = this;
var myArray = Array();
myArray[0] = myDate.getFullYear();
myArray[1] = myDate.getMonth();
myArray[2] = myDate.getDate();
myArray[3] = myDate.getHours();
myArray[4] = myDate.getMinutes();
myArray[5] = myDate.getSeconds();
return myArray;
}

//+—————————————————————————-
//| 取得日期数据信息
//| 参数 interval 表示数据类型
//| y 年 m月 d日 w星期 ww周 h时 n分 s秒
//+—————————————————————————-
Date.prototype.DatePart = function(interval)
{
var myDate = this;
var partStr=’’;
var Week = [‘日’,’一’,’二’,’三’,’四’,’五’,’六’];
switch (interval)
{
case ‘y’ :partStr = myDate.getFullYear();break;
case ‘m’ :partStr = myDate.getMonth()+1;break;
case ‘d’ :partStr = myDate.getDate();break;
case ‘w’ :partStr = Week[myDate.getDay()];break;
case ‘ww’ :partStr = myDate.WeekNumOfYear();break;
case ‘h’ :partStr = myDate.getHours();break;
case ‘n’ :partStr = myDate.getMinutes();break;
case ‘s’ :partStr = myDate.getSeconds();break;
}
return partStr;
}

//+—————————————————————————-
//| 取得当前日期所在月的最大天数
//+—————————————————————————-
Date.prototype.MaxDayOfDate = function()
{
var myDate = this;
var ary = myDate.toArray();
var date1 = (new Date(ary[0],ary[1]+1,1));
var date2 = date1.dateAdd(1,’m’,1);
var result = dateDiff(date1.Format(‘yyyy-MM-dd’),date2.Format(‘yyyy-MM-dd’));
return result;
}

//+—————————————————————————-
//| 取得当前日期所在周是一年中的第几周
//+—————————————————————————-
Date.prototype.WeekNumOfYear = function()
{
var myDate = this;
var ary = myDate.toArray();
var year = ary[0];
var month = ary[1]+1;
var day = ary[2];
document.write(‘< script language=VBScript> \n’);
document.write(‘myDate = Datue(‘’+month+’-‘+day+’-‘+year+’’) \n’);
document.write(‘result = DatePart(‘ww’, myDate) \n’);
document.write(‘ \n’);
return result;
}

//+—————————————————————————-
//| 字符串转成日期类型
//| 格式 MM/dd/YYYY MM-dd-YYYY YYYY/MM/dd YYYY-MM-dd
//+—————————————————————————-
function StringToDate(DateStr)
{

var converted = Date.parse(DateStr);
var myDate = new Date(converted);
if (isNaN(myDate))
{
//var delimCahar = DateStr.indexOf(‘/‘)!=-1?’/‘:’-‘;
var arys= DateStr.split(‘-‘);
myDate = new Date(arys[0],—arys[1],arys[2]);
}
return myDate;
}

若要显示:当前日期加时间(如:2009-06-12 12:00)
function CurentTime()
{
var now = new Date();

var year = now.getFullYear(); //年 var month = now.getMonth() + 1; //月 var day = now.getDate(); //日
var hh = now.getHours(); //时 var mm = now.getMinutes(); //分
var clock = year + “-“;

if(month < 10)
clock += “0”;

clock += month + “-“;

if(day < 10)
clock += “0”;

clock += day + “ “;

if(hh < 10)
clock += “0”;

clock += hh + “:”;
if (mm < 10) clock += ‘0’;
clock += mm;
return(clock);
}

（五）页面跳转路径相关

1．获取获取带”/“的项目名(js文件可用)

比如部署的项目名是 JarSSMLmxi 下面一段方法获取的就是 /JarSSMLmxi ,解决的问题是js文件无法使用EL表达式
var projectName = window.document.location.pathname.substring(0, window.document.location.pathname.substr(1).indexOf(‘/‘) + 1);

2．页面跳转到Servlet地址(这个Servlet是SpringMVC的地址)

var projectName = window.document.location.pathname.substring(0, window.document.location.pathname.substr(1).indexOf(‘/‘) + 1);
这个projectName 就是上面的的带斜杠的项目名(动态获取)
location.href = projectName + “/user/list.action”

（六）对数组的操作(JavaScript)

1．js数组转json

var ids=new Array()
ids[0]=id;
data: JSON.stringify(ids),

如果是对象转json需要先转成数组再调用JSON.stringify 函数转成json

2．判断变量是不是数组

var obj = [];
(1)instanceof方法
obj instanceof Array ; //true
(2)Array.isArray()方法
Array.isArray(obj); //true

3．添加和删除数组

添加操作
.push(值)：向数组中添加元素
var arr = [10,20,30];arr.push(400);console.log(arr); //[10, 20, 30, 400]
unshift():向数组的第一个元素前面插入一个新的元素，返回值是插入后的长度
var arr =[10,20,30];var r = arr.unshift();console.log(r); //4console.log(arr); //[100, 10, 20, 30]
删除操作
.shift():删除的都是数组的第一个值
var arr =[10,20,30,40];var r = arr.shift();console.log(r); //返回的是删除的那个值console.log(arr); //[20, 30, 40]


数组的splice方法：从数组的指定位置移除指定个数的元素 ，参数1为位置 ，参数2位移除的个数

4．数组的拼接

.concat(数组，数组，数组)；将多个数组拼接起来,组合一个新的数组
var arr = [10,20,30];var arr1 = [40,50,60];var arr2 = [70,80,90];var array = arr.concat(arr1,arr2);console.log(array); //[10, 20, 30, 40, 50, 60, 70, 80, 90]
.every():该函数返回的是布尔值，函数作为参数使用，函数中有三个参数，第一个参数是元素的值，第二个参数是索引值，第三个参数是原来数组
如果这个数组中的每个元素都符合条件，最后才返回的是true
举个例子：
例子1：var arr = [100,200,300];var flag = arr.every(function(a,b){ return a > 200; //数组中的每个元素都要大于200才返回true})console.log(flag); //false,因为并不是每个元素都大于200
例子2：var arr = [“小白白”,”小明明”,”小花花”,”小周周”];var flag = arr.every(function(ele,index){ return ele.length>2; //判断数组的每个元素是不是长度都大于2})console.log(flag); //true
.filter(函数)：返回的是数组中每一个元素都符合条件的元素，组成了一个新的数组
var arr = [10,0,20,0,30,0,40,0,50];//数组里面的每个元素都会执行一遍下面的函数var newArr = arr.filter(function (ele){ return ele!=0; //返回的是不等于0的数组});console.log(newArr); //[10, 20, 30, 40, 50]
.pop():弹出数组的最后一个元素
该函数有返回值，返回值就是删除掉的那个值
var arr =[10,20,30,40];arr.pop();console.log(arr); //[10, 20, 30]
forEach(函数)：遍历数组
var arr = [10,20,30,40];arr.forEach(function (ele,index){ console.log(ele+”,”+index);});结果：10，0 20，1 30，2 40，3
.indexOf(值)：返回的是索引，跟String里面的用法一样
.join(符号或者值):返回的是字符串（加进去值的字符串）
var arr= [“小白”,”小明”,”小红”,”小爱”,”小花”];var str = arr.join(“|”); //在这些值之间加“|”console.log(str); //小白|小明|小红|小爱|小花
.map(函数)：数组中的每个元素都要执行这个函数，把执行后的结果重新组成一个数组
var num = [1,4,9];var roots = num.map(Math.sqrt); console.log(roots); //[1, 2, 3]
.reverse():实现数组的反转
var arr = [10,20,30,40,50];arr.reverse();console.log(arr); // [50, 40, 30, 20, 10]
.sort():实现排序
注意：这个函数不稳定，有时候可以排序，有时候不行，要给里面传一个函数，才能使这个排序稳定
var arr = [1,3,23,65,2,3];arr.sort();console.log(arr); //[1, 2, 23, 3, 3, 65]此时就不稳定，所以并没有排序成功，需要给sort里面传一个参数，看以下代码
var arr = [1,3,23,65,2,3];arr.sort(function(a,b){//此时的a就相当于arr[i],b相当于arr[i+1],两者进行比较 if(a>b){ return 1; }else if(a==b){ return 0; }else{ return -1; }});console.log(arr); //[1, 2, 3, 3, 23, 65]此时就排序好了，sort函数里面的代码是固定的
.slice(a,b):截取一段字符串，从a开始到b结束，包含a不包含b
splice(开始的位置,要删除的个数,替换的元素的值):用于删除数组中的元素或者是替换元素，或者是插入元素
var arr = [“programmer”,”english”,”important”,”logic”];arr.splice(2,0,”very”); //就是在下标为2的后面插入一个“very”的单词console.log(arr); // [“programmer”, “english”, “very”, “important”, “logic”]
var arr = [“programmer”,”english”,”important”,”logic”];arr.splice(1,1,”very”); //下标为1的后面删除一个之后，插入指定的单词console.log(arr); //[“programmer”, “very”, “important”, “logic”]
var arr = [“programmer”,”english”,”important”,”logic”];arr.splice(2,1); //从第二个开始，删除一个console.log(arr); //[“programmer”, “english”, “logic”]

5．简介

      new Array();//空数组<br />          new Array(10);//含有10个元素的数组,元素默认值是undefined<br />          new Array(元素1,元素2....);//创建数组同时给元素赋值<br />          js中数组和java数组的不同点:<br />          a.js中数组每一个元素都可以是不同类型<br />          b.js的数组长度是可变,类似于java的list集合 <br /> <br /> 

validation表单校验插件

具体看新班资料 day27天

1．基本使用和介绍

一个基于jQuery的表单验证框架(插件),使用上需要导入三个js文件
validation库导入(三个必须导入):





a.jQuery-1.8.3.js (必须有,因为该框架基于jQuery,可以是别的jQuery类库)
b.jquery.validate.js (框架的核心文件,必须有)
c.messages_zh.js (中文提示文件,如果不引入默认是英文)

2．基本格式

$表单对象.validate({
rules:{}, //表示校验规则
messages:{} //表示校验失败后的提示信息
})

3．校验规则rules语法

      rules:{<br />              name属性值:{<br />                 校验器:校验器值,<br />                 校验器:校验器值<br />              },<br />              name属性值:{<br />                 校验器:校验器值,<br />                 校验器:校验器值<br />              }  <br />          }

4．校验信息messages语法

messsage:{
name属性值:{
校验器:提示信息,
校验器:提示信息
},
name属性值:{
校验器:提示信息,
校验器:提示信息
}
}

5．校验类型属性

6．修改提示信息位置

我们通过查看提示信息出现的位置以及代码


亲,用户名必须填写幽~~

我们发现validation工具是直接在对应的输入框后面直接添加一个标签实现的
标签如下,其中class 必须为error for必须被提示的标签的name值

我们可以主动移动标签的位置,达到修改标签出现位置的目的

7．自定义校验器的高级扩展

   1.自定义校验器的语法<br />       $.validator.addMethod(name , method , message);<br />参数1：name，校验规则的名称。例如：required<br />参数2：method，执行校验时使用的处理函数。返回true表示校验通过，返回false表示校验未通过。<br />    function(value , element , params ){} ,处理函数被调用时，可以获得3个参数。<br />       参数value：表单项的value值。例如：<input value=""><br />       参数element：被校验的表单项对象。<br />       参数params：使用当前校验规则传递的值。例如：rules : { 参数1Method : 参数params }<br />参数3：message，校验未通过时的提示信息。<br /> <br />          $.validator.addMethod(校验器名字,校验处理函数,默认的提示信息);<br />          其中校验处理函数:<br />              function(value,ele,params){<br />                 //返回true,代表校验通过<br />                 //返回false,代表校验失败,自动显示提示信息<br />              }<br />              函数中的参数:<br />              value: 用户输入的值<br />              ele  :被校验的元素本身<br />              params: 校验器的值<br /> <br /> <br />demo<br /> <br />/*自定义校验规则 */

jQuery.validator.addMethod(“jiaoyan”,function(value,element,params){

    **if**(value==**" "**){ /*如果用户输入的是 空串 就返回false*/

        **return false**;

    }**else**{   /*否则就是true 也就是通过*/

        **return true **;

    }<br />},**"错误提示信息报告"**);<br /> <br />demo<br /> <br />可以在<**script type="text/javascript"**></**script**>代码块儿任意地方编写此js文件() <br /> <br /> <br />/*自定义jQuery表单校验,手机号校验*/<br />**jQuery**.validator.addMethod(**"isMobile"**, **function**(value, element) {

**var **length = value.length;

**var **mobile = /^1[34578]\d{9}$/;/*/^1(3|4|5|7|8)\d{9}$/*/

**return this**.optional(element) || (length == 11 && mobile.test(value));

}, “请正确填写您的手机号码”);
自定义表单校验的使用
在你需要添加此校验的地方添加内容

//新增预案

function addParent() {

**$**().ready(**function**() {

    //表单校验

    **$**(**"#addYAForm"**).validate({

        **rules**: {<br />

            **description**: {

                **isMobile**: **true<br />**<br />                },

   <br />               **districtLevel**: {

                **number**:**true<br />**<br />                },

},
messages: {

            **description**: {

                **isMobile**: **"请输入合法的手机号"<br />**<br />                },

   <br />                **districtLevel**: {

                **number**: **"请选择所属级别"<br />**<br />                },

      <br />            },<br />效果<br />![](https://cdn.nlark.com/yuque/0/2020/jpeg/350923/1592468061415-491cf2b8-bc02-44b8-aaed-72d7d6ec81d4.jpeg#height=371&width=301)