首页  思维笔记  详情

JavaScript相关

2021-05-24 11:06:42   18  举报





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>内容</a> --> 内容

2、 text()：获取/设置元素的标签体纯文本内容 <a>内容</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、默认显示和隐藏方式

1、 show([speed,[easing],[fn]])

2、 hide([speed,[easing],[fn]])

3、 toggle([speed,[easing],[fn]])

2、滑动显示和隐藏方式

1、 slideDown([speed,[easing],[fn]])

2、 slideUp([speed,[easing],[fn]])

3、 slideToggle([speed,[easing],[fn]])

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

1、 fadeIn([speed,[easing],[fn]])

2、 fadeOut([speed,[easing],[fn]])

3、 fadeToggle([speed,[easing],[fn]])

参数：

speed：动画的速度。三个预定义的值("slow","normal","fast")或表示动画时长的毫秒数值（如：1000）

easing：用来指定切换效果，默认是"swing",可用参数"linear"
swing:动画执行时效果是先慢，中间快，最后又慢
linear:动画执行时速度是匀速的

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

2、遍历

js遍历方式

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

JQuery遍历方式

1、 jq对象.each(callback)

2、 $.each(object,[callback])

3、 for..of

注意

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

3、事件绑定

jquery标准的绑定方式

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

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

on绑定事件/off解除绑定

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

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

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

事件切换：toggle

jq对象.toggle(fn1,fn2...)

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

4、案例

广告的显示和隐藏

抽奖

5、插件：增强JQuery的功能

实现方式

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

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

AJAX

1、概念

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

2、实现方式

原生的js实现方式

JQuery实现方式

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

2、 $.get()
语法：$get(rul,[data],[callback],[type])

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

3、 $.post()

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

JSON

1、概念

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的相关方法进行转换

转换方法：

readValue(json字符数据,class)

2、 Java对象转换JSON

使用步骤：

1、导入jackson的相关jar包

2、创建jackson核心对象ObjectMapper

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

转换方法：

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：和对象格式一致

4、案例

校验用户名是否存在

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

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

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