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

喜欢ヅ旅行 2022-05-19 06:19 195阅读 0赞

## 一、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][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/][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\])

*  获取对象类型 $.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>

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 字符串中不可添加注释