JavaScript相关

JavaScript相关

JQuery基础

1、 概念

一个JavaScript框架。简化JS开发。jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。JavaScript框架：本质上就是一些js文件，封装了js文件，封装了js的原生代码而已。

2、 快速入门

下载JQuery

 导入JQuery的js文件

 使用

3、 JQuery对象和JS对象区别与转换

两者相互转换

jq --> js：jq对象[索引] 或者 jq对象.get(索引)

js --> jq：$(js对象)

注意：JQuery对象和js对象方法不通用

4、 选择器

基本操作学习

1、 事件绑定

2、 入口函数

dom文档加载完成之后执行该函数中的代码

window.onload 只能定义一次$(function)可以定义多次的。

3、 样式控制：css方法

分类

基本选择器

1、 标签选择器（元素选择器）

语法：$(\"html标签名\")  获得所有匹配标签名称的元素

2、 id选择器

语法：$(\"#id的属性值\")  获得与指定id属性匹配的元素

3、 类选择器

语法：$(\".class的属性值\")  获得与指定的class属性值匹配的元素

4、 并集选择器

语法：$(\"选择器1，选择器2....\")  获取多个选择器选中的所有元素

层级选择器

1、后代选择器

语法：$(\"A B\")  选择A元素内部的所有B元素

2、 子选择器

语法：$(\"A > B\")  选择A元素内部的所有B子元素

属性选择器

1、 属性名称选择器

语法：$(\"A[属性名]\")  包含指定属性的选择器

2、 属性选择器

语法：$(\"A[属性名='值']\")  包含指定属性等于指定值的选择器

3、 复合属性选择器

语法：$(\"A[属性名='值'][]....\")  包含多个属性条件的选择器

过滤选择器

1、 首元素选择器

语法： :first  获取选择的元素中的第一个元素

2、 尾元素选择器

语法： :last  获得选择的元素中的元素中的最后一个元素

3、 非元素选择器

语法： :not(selector)  不包括指定内容的元素

4、 偶数选择器

语法： :even  偶数，从0开始计数

5、 奇数选择器

语法： :odd  奇数，从0开始计数

6、 等于索引选择器

语法： :eq(index)  等于指定索引元素

7、 大于索引选择器

语法： :gt(index)  大于指定索引元素

8、 小于索引选择器

语法： :lt(index)  小于指定索引元素

9、 标题选择器

语法： :header  获得标题（h1~h6）元素，固定写法

表单过滤选择器

1、 可用元素选择器

语法： :enabled  获取可用元素

2、 不可用元素选择器

语法： :disabled  获得不可用元素

3、 选中选择器（单选/复选框）

语法： :checked  获得单选/复选框选中的元素

4、 选中选择器（下拉框）

语法： :selected  获得下拉框选中的元素

5、 DOM操作

内容操作

1、 html()：获取/设置元素的标签体内容  <a><font>内容</font></a>      -->    <font>内容</font>

2、 text()：获取/设置元素的标签体纯文本内容  <a><font>内容</font></a> --> 内容

3、 val()：获取/设置元素的value属性值

属性操作

通用属性操作

1、 attr()：获取/设置元素的属性

2、removeAttr()：删除属性

3、 prop()：获取/设置元素的属性

4、 removeProp()：删除属性

attr和prop区别比？

1、 如果操作的是元素的固有属性，则建议使用prop

2、 如果操作的是元素自定义的属性，则建议使用attr

对class属性操作

1、 addClass()：添加class属性值

2、 removeClass():删除class属性值

3、 toggleClass():切换class属性

4、 css();获取/设置css样式

CRUD操作

1、 append():父元素将子元素追加到末尾

对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾

2、 prepend():父元素将子元素追加到开头

对象1.prepend(对象2)：将对象2添加到对象1元素内部，并且在开头

3、 appendTo()

对象1.appendTo(对象2)：将对象1添加到对象2内部，并且在末尾

4、 prependTo()

对象1.prependTo(对象2)：将对象1添加到对象2元素内部，并且在开头

5、 after()：添加元素到元素后边

对象1.after(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系

6、 before():添加元素到元素前边

对象1.before(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系

7、 insertAfter()

对象1.insertAfter(对象2)：将对象1添加到对象2后边。对象1和对象2是兄弟关系

8、 insertBefore()

对象1.insertBefore(对象2)：将对象1添加到对象2前边。对象1和对象2是兄弟关系

9、 remove():移除元素

对象.remove():将对象删除掉

10、 empty():清空元素的所有后代元素

对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点

6、 案例

隔行换色

全选和全不选

qq表情选择

多选下列表的左右移动

7、 其他

JQuery版本

1.x

兼容ie678，使用最广泛的，官方只做BUG维护，功能不再增加。因此一般项目来说，使用1.x版本就可以了。最终版本：1.12.4（2016.5.20）

2.x

不兼容ie678，很少有人使用，官方只做BUG维护，功能不再增加。如果不考虑兼容低版本的浏览器可以使用2.x。最终版本：2.2.4（2016.5.20）

3.x

不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的JQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017.3.20）

jquery-xxx.js与jquery-xxx.min.js区别

jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些

jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快。

JQuery高级

1、动画

三种方式显示和隐藏元素

1、 默认显示和隐藏方式

2、 滑动显示和隐藏方式

3、 淡入淡出显示和隐藏方式

参数：

speed：动画的速度。三个预定义的值(\"slow\

easing：用来指定切换效果，默认是\"swing\

fn：在动画完成时执行的函数，每个元素执行一次

2、 遍历

js遍历方式

for(初始化值;循环结束条件;步长)

JQuery遍历方式

1、 jq对象.each(callback)

3、 for..of

注意

JQuery遍历      如果当前function返回为false，则结束循环（break）。      如果返回为true，则结束本次循环，继续下次循环（continue）

3、 事件绑定

jquery标准的绑定方式

jq对象.事件方法(回调函数);

注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。      表单对象.submit();    让表单提交

on绑定事件/off解除绑定

jq对象.on(\"事件名称\"，回调函数)

jq对象.off(\"事件名称\")

如果off方法不传递任何参数，则将组件上的所有事件全部解除

事件切换：toggle

当单击jq对象对应的组件后，会执行fn1，第二次点击会执行fn1.....

4、 案例

广告的显示和隐藏

抽奖

5、 插件：增强JQuery的功能

实现方式

1、 $.fn.extend(Object):增强通过JQuery获取的对象的功能

2、 $.extend(Object)：增强JQuery对象自身的功能

AJAX

ASynchronous JavaScript And XML：异步的JavaScript和XML异步和同步：客户端和服务器端相互通信的基础上       同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。       异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器尽心少量数据交互，Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。

2、 实现方式

原生的js实现方式

JQuery实现方式

1、 $.ajax()       语法：$.ajax({键值对});

参数：        url：请求路径        data：请求参数        callback：回调函数        type：响应结果的类型

3、 $.post()

JSON

JavaScript Object Notation：JavaScript对象表示法json现在多用于存储和交换文本信息的语法进行数据的传输JSON比XML  更小，更快，更易解析。

2、 语法

基本规则

数据在名称/值对中：json数据是由键值对构成的

键用引号（单双都行）引起来，也可以不使用引导

值的取值类型

1、 数字（整数或浮点数）

2、 字符串（在双引号中）

3、 逻辑值（true或false）

4、 数组（在方括号中）    {\"persons\

5、 对象（在花括号中）   {\"address\":{\"provice\":\"陕西\"...}}

6、 null

数据由逗号分割：多个键值对由逗号分割

花括号保存对象：使用{}定义json格式

方括号保存数组：[]

获取数据

1、 json对象.键名

2、 json对象[\"键名\"]

3、 数组对象[索引]

3、 JSON数据和Java对象的相互转换

JSON常见解析器：Jsonlib，Gson，fastjson，jackson

1、 JSON转为Java对象（使用少）

1、 导入jackson的相关jar包

2、 创建jackson核心对象ObjectMapper

3、 调用ObjectMapper的相关方法进行转换

转换方法：

2、 Java对象转换JSON

使用步骤：

writeValue(参数1，obj)：          参数1：                  file:将obj对象转换为JSON字符串，并保存到指定的文件中                  Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中                  OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中writerValueAsString(obj):将对象转换为json字符串

writeValue（参数，obj）：直接将传入的对象序列化为json，并且返回给客户端

注解：

1、 @JsonIgnore：排除属性

2、 @JsonFormat：属性值的格式化

复杂java对象转换

List：数组

Map：和对象格式一致

校验用户名是否存在

服务器响应的数据，在客户端使用时，要想当做json数据格式使用

1、 $.get(type):将最后一个参数type指定为\"json\"

2、 在服务器端设置MIME类型

response.setContextType(\"application/json;charset=utf-8\");

注意：MIME类型在tomcat的web.xml文件中查看