jQuery深入——动画、常用工具、JSON、Ajax

一、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() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了
- 可以创建自己的简写
var jq = $.noConflict(true);

0x2 处理JS对象和集合

1、判断浏览器兼容性

$.support 返回支持的功能
https://modernizr.com/ 第三方库专门做的事情

2、移除字符串两侧的空白字符

$.trim(value) 返回新值，不改变字符串本身

var str = '   hello world   '
var newStr = $.trim(str)

var str = ' hello world '

var newStr = $.trim(str)

3、遍历属性和集合
- $.each(collection, callback)

 $.each(arr, function (index, value) {
            if (index === 1) {
                return true;  //类似于continue
            }
        })

$.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;
})

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 ''; 返回空格数组
})

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]));

1 2	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));

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);

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

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

0x1 Ajax

1、AJAX 带来了什么

无刷新获取数据，用户体验有保障
数据不包装，方便快捷，节省流量
CORS 方案带来更加强大的跨域能力

2、AJAX 本质

XMLHTTPRequest 对象
由宿主环境提供
是一种更便捷的获取数据方式

3、创建一个 AJAX 请求

第一步创建 XMLHTTPRequest 对象

创建一个 XMLHTTPRequest（XHR）对象
使用 XHR 对象的方法向服务器发送请求
注意不同浏览器的兼容性

第二步绑定 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>

<body>

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 也为 0
- upload 属性
  返回一个 XMLHTTPRequestUpload 对象
  可通过绑定事件侦听上传过程
- responseType 属性
  设置响应内容的格式类型，默认字符串
  可设置多种格式：json、blob、arraybuffer 等
  设置后会影响 response 的值
- response 属性
  响应的正文内容
  默认为字符串，但会被 responseType 影响

5、XHR2.0的CORS跨域方案

跨域是什么
不同域名
不同端口
不同协议
跨域情况下，AJAX 请求会报错
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
- 服务端响应头字段设置
- 表示缓存预检结果
- 以秒为单位
- 在此期间不再发送预检请求

0x2 jQuery中的ajax方法

1、全局配置
$.ajaxSetup 方法可以设置全局配置

全局配置会作为下次 ajax 方法的默认参数
全局配置可以被 ajax 方法的配置覆盖
全局配置适用于所有基于 ajax 方法的衍生方法

2、全局回调

所有 ajax 方法默认执行全局回调
可通过配置参数关闭单个 ajax 方法不执行全局回调
全局回调无法被 ajax 方法中的配置项覆盖

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 数据格式
转化为可用的对象或直接使用

0x4 JSON对象

1、Json对象

parse 方法和 stringify 方法调用时注意 try catch
除了低版本 IE（6、7），兼容性很好
可以将对象与 JSON 数据格式互相转化

2、JSON.parse 方法

将 JSON 数据格式转化为对象
第二个参数接受一个过滤函数
注意去除数据中的尾逗号
不能获取变量

3、JSON.stringify 方法

将对象转化为 JSON 数据格式
第二个参数接受一个过滤函数
第三个参数接受一个缩进格式