一、jQuery动画
0x1 显示和隐藏元素
1、带特效的显示隐藏
- show(duration[, easing][, callback])
- hide(duration[, easing][, callback])
- toggle(duration[, easing][, callback])
duration 过渡时间，fast(200ms)、normal(400)、slow(600)
easing 切换效果speed、linear、swing
callback 回调函数
2、通过透明度显示和隐藏
- fadeIn(duration[, easing][, callback])
- fadeOut(duration[, easing][, callback])
- fadeToggle(duration[, easing][, callback])
- fadeTo(duration, opacity[, easing][, callback])
opacity透明度，0-1，最终的透明度
3、上下折叠显示隐藏
- slideDown(duration[, easing][, callback])
- slideUp(duration[, easing][, callback])
- slideToggle(duration[, easing][, callback])
4、停止动画
- stop([stopAll [, goToEnd]])
stopAll 布尔值，规定是否停止被选元素的所有加入队列的动画。默认是 false。
goToEnd 布尔值，规定是否立即完成当前的动画。默认是 false。
- finish([queue])
- jQuery.fx.off 全局动画开关
Finish (）：所有的堆栈动画直接结束
stop (true, true）：阻止当前的动画
5、自定义动画
- jQuery Easing 插件
https://github.com/gdsmith/jquery.easing - animate(properties[[, duration][, easing]][, callback])
properties 最终的CSS样式
二、jQuery常用工具
0x1 和其他库一起使用
jQuery.noConflict(jqueryPropertyToo)
- noConflict() 方法会释放会
标识符的控制，这样其他脚本就可以使用它了−可以创建自己的简写varjq=
标
识
符
的
控
制
，
这
样
其
他
脚
本
就
可
以
使
用
它
了
−
可
以
创
建
自
己
的
简
写
v
a
r
j
q
=
.noConflict(true);
0x2 处理JS对象和集合
1、判断浏览器兼容性
- $.support 返回支持的功能
- https://modernizr.com/ 第三方库专门做的事情
2、移除字符串两侧的空白字符
- $.trim(value) 返回新值，不改变字符串本身
var str = ' hello world '
var newStr = $.trim(str)3、遍历属性和集合
- $.each(collection, callback)
$.each(arr, function (index, value) {
if (index === 1) {
return true; //类似于continue
}
})4、过滤数组
- $.grep(array, callback[, invert])
callback不能是正则表达式，可以在函数中声明
var arr = [1, 3, 6, 13, 38, 9, 8, 24, 15];
var arr2 = $.grep(arr, function (value, index) { //这里传参是值、索引
return value > 10;
})5、转换数组
- $.map(collection, callback)
var arr = [1, 2, 3, 4, 5];
var arr2 = $.map(arr, function (value, index) {
return value + 1;
//return null; 返回null空数组
// return ''; 返回空格数组
})6、更多数组操作方法
- $.inArray(value, array) 返回值在数组中的下标
console.log($.inArray(2, [1, 2, 3, 4, 5]));- $.makeArray(object) 将类数组对象转换为数组
var arrayLikeObject = {
0: 'a',
1: 'b',
2: 'c',
length: 3
}
console.log($.makeArray(arrayLikeObject));- $.merge(array1, array2) 合并数组，将数组2合并至1
var arr1 = [0, 1, 2]
var arr2 = [3, 4, 5]
$.merge(arr1, arr2);7、对象操作
- 扩展对象 $.extend([deep,] target, [source1, source2, … sourceN])
var target = { a: 1, b: 2, c: 3 };
var source1 = { c: 4, d: 5, e: 6 };
var source2 = { c: 7, e: 8, f: 9 };
$.extend(target, source1, source2) //将1、2合并到target
var mergedObj = $.extend({}, source1, source2) //将1、2合并为新对象
var target = { a: 1, b: 2 };
var source1 = { b: { b1: 2.1, b2: 2.2 }, c: 3 };
var source2 = { b: { b3: 2.3, b4: 2.4 }, d: 4 };
console.log($.extend(target, source1, source2)); //b: { b1: 2.1, b2: 2.2 }被覆盖
console.log($.extend(true, target, source1, source2)); //deep设置为true 合并b- 获取对象类型 $.type(param)
7、其他工具方法
- $.noop() 函数是一个空函数，此方法不接受任何参数
- $.contains(container, contained) 判断节点是否包含关系
- $.error(string) 抛出错误详细相关信息
ajax与json">三、Ajax与Json
ajax">0x1 Ajax
1、AJAX 带来了什么
- 无刷新获取数据，用户体验有保障
- 数据不包装，方便快捷，节省流量
- CORS 方案带来更加强大的跨域能力
2、AJAX 本质
- XMLHTTPRequest 对象
- 由宿主环境提供
- 是一种更便捷的获取数据方式
3、创建一个 AJAX 请求
第一步 创建 XMLHTTPRequest 对象
第二步 绑定 onreadystatechange 事件
- XHR 对象的 readyState 有 5 种状态
- 1) 未发送 0
- 2) 使用了 open 方法 1
- 3) 使用了 send 方法且响应头已经接收 2
- 4) 下载数据 3
- 5) 操作完成或失败 4
- 根据 XHR.readyState === 4 判定是否请求成功
第三步 通过回调处理业务逻辑
- 可通过 HTTP 状态码判定服务端是否成功响应数据
- 1) 响应正常 200
- 2) 请求错误 4XX
- 3) 服务器错误 5XX
- 4) 重定向 301
- 5) HTTP 缓存命中 304
Demo
<body>
<button id="btn">获取数据</button>
<pre id="store"></pre>
<script>
var btn = document.getElementById('btn'),
store = document.getElementById('store')
btn.addEventListener('click', ajax)
function ajax () {
var src = './data.json'
var xhr = new XMLHttpRequest() //第一步 创建对象
xhr.open('GET', src) //发送请求
xhr.onreadystatechange = loadData //绑定 onreadystatechange 事件
xhr.responseType = 'json'
xhr.send()
function loadData () {
if (xhr.readyState === 4 && xhr.status === 200) { //结合状态码判定是否请求成功
store.innerHTML = JSON.stringify(xhr.response, null, 2)
}
}
}
</script>
</body>4、XHR对象方法
open 方法
指定请求的 Method 和 URL
第三个参数设置为 false 可实现同步数据请求send 方法
调用 send 方法后才会发起请求
POST 的数据需要通过 send 方法发送
除字符串之外还可以发送复杂类型数据abort 方法
舍弃一个请求
readyState 会被置 0 但不触发 readystatechange 事件
请求还是会送到服务器，仅仅是客户端“视而不见”setRequestHeader 方法
设置请求头，同字段多次设置时，值会合并到一个字段中
必须在 open 与 send 方法执行顺序中间调用
默认的 Accept 字段值为 “/”getResponseHeader 方法
获取响应头内容，参数接受响应头字段名，返回字段值
字段名忽略大小写
多个同名字段存在时，多个值以逗号+空格连成一个timeout 属性
设置超时时间，毫秒为单位
超时后会触发 timeout 事件
IE 中，超时必须在 open 方法后，send 方法前设置status 属性
初始 status 为 0，接收响应头后为标准的 HTTP 状态码
如果响应头中没有设置状态码，则默认为 200
XHR 出错时，status 也为 0upload 属性
返回一个 XMLHTTPRequestUpload 对象
可通过绑定事件侦听上传过程responseType 属性
设置响应内容的格式类型，默认字符串
可设置多种格式：json、blob、arraybuffer 等
设置后会影响 response 的值response 属性
响应的正文内容
默认为字符串，但会被 responseType 影响
CORS 跨域方案
XMLHTTPRequest Level 2 中加入
需要服务器配合设置响应头
可选择是否带上 cookie简单请求与复杂请求
复杂请求会先发送一次 OPTIONS 方法的预检请求
简单请求需要同时满足的条件：- 请求 Method 必须为 HEAD、GET、POST 之一
- 请求头中的字段不超过 Accept，Accept-Language
- Content-Language，Last-Event-ID，Content-Type
- Content-Type 只限于三个值 application/x-www-formurlencoded、multipart/form-data、text/plain
6、服务端响应头字段设置
Access-Control-Allow-Origin
- 表示允许访问的域名
- 必须在响应头中设置该字段
- 可使用 * 表示允许任意域名
Access-Control-Allow-Credentials
- 值设置为 true 表示允许向服务器发送 cookie
- 客户端需要设置 XHR 对象的 withCredentials 为 true
- Access-Control-Allow-Origin 必须设置为指定域名
Access-Control-Expose-Headers
- 表示允许客户端通过 getResponseHeader 方法获取的字段
- CORS 方式下该方法默认只能获取 6 个基础字段
- Cache-Control
- Content-Language
- Content-Type
- Expires
- Last-Modified
- Pragma
Access-Control-Allow-Methods
- 表示服务端接受的跨域请求方法
- 多个方法用逗号分隔
- 必须在预检响应头中设置该字段
Access-Control-Allow-Headers
- 表示服务端接受的跨域请求的字段
- 多个字段名用逗号分隔
- 请求头含 Access-Control-Request-Headers 时为必须
Access-Control-Max-Age
- 服务端响应头字段设置
- 表示缓存预检结果
- 以秒为单位
- 在此期间不再发送预检请求
ajax方法">0x2 jQuery中的ajax方法
1、全局配置
$.ajaxSetup 方法可以设置全局配置
2、全局回调
json">0x3 JSON
1、数据格式
- JSON 全称 JavaScript Object Notation
- 通过键值对存储数据
- JSON 不是 Javascript 的子集
- JSON 可以包含 U+2028 和 U+2029，JS 字符串不能
2、数据格式的优势
- 数据结构更加简化，不需要成对标记
- 对象查找方式比 DOM 结构化查找快速
- 更丰富的数据类型
3、数据格式限制
- 以 { 起始，} 结束
- 双引号包裹键名
- JSON 字符串中不可添加注释
4、JS 中如何使用 JSON 数据
- JSON 数据本质上是一个字符串
- 可以通过 eval、JSON.parse 等方式转化为对象
- 注意使用 try catch
5、其他语言中如何使用 JSON 数据
- 很多语言都内置了 JSON 的包、模块或函数
- 从数据库/缓存等数据源中取出 JSON 数据格式
- 转化为可用的对象或直接使用
json对象">0x4 JSON对象
1、Json对象
- parse 方法和 stringify 方法调用时注意 try catch
- 除了低版本 IE（6、7），兼容性很好
- 可以将对象与 JSON 数据格式互相转化
2、JSON.parse 方法
- 将 JSON 数据格式转化为对象
- 第二个参数接受一个过滤函数
- 注意去除数据中的尾逗号
- 不能获取变量
3、JSON.stringify 方法
- 将对象转化为 JSON 数据格式
- 第二个参数接受一个过滤函数
- 第三个参数接受一个缩进格式
