专栏首页极客慕白的成长之路jQuery深入——动画、常用工具、JSON、Ajax

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)
 

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

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

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 数据格式
  • 第二个参数接受一个过滤函数
  • 第三个参数接受一个缩进格式

除特别注明外,本站所有文章均为慕白博客原创,转载请注明出处来自https://geekmubai.com/programming/741.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SQL复杂查询语句

     进行多表连接查询,掌握多表连接查询的连接条件或连接谓词,理解内连接、左连接和右连接的含义并熟练操作。

    慕白
  • JS实用技巧手记之六

    除特别注明外,本站所有文章均为慕白博客原创,转载请注明出处来自https://geekmubai.com/programming/166.html

    慕白
  • 迅雷资源助手(TSearch) – 种子搜索神器

    迅雷资源助手迅雷资源助手 是一款搜索下载资源的 p2p 种子搜索器,绿色软件,可以进行磁力搜索,电驴搜索,种子搜索,网盘搜索,搜索质量远高于 p2psearch...

    慕白
  • [Java IO]06_JSON操作

    6.1 JSON 知识背景 6.1.1 JSON 简介 JSON: JavaScript Object Notation(JavaScript 对象表示法) J...

    静默虚空
  • MySQL5.7 JSON实现简介

    本文主要介绍在MySQL 5.7.7开始引入的非结构化数据类型JSON的特性以及具体的实现方式(包括存储方式)。首先介绍为什么要引入JSON的原生数据类型的支持...

    ivansqwu
  • SQL Server 2016 JSON原生支持实例说明

    背景 Microsoft SQL Server 对于数据平台的开发者来说越来越友好。比如已经原生支持XML很多年了,在这个趋势下,如今也能在SQLServer2...

    用户1217611
  • [周末课程]什么是“页面业务流程”分析思维导图?如何编写页面假JSON数据? &下一个前端组件“日历”

    大家好,时间飞快一晃又到了周末了,今天要跟大家一起学习的有以下这些内容: -- 什么是“页面业务流程”分析思维导图?如何编写页面假JSON数据? -- 进入下一...

    web前端教室
  • 推荐 9 个 爱不释手的 JSON 工具!

    链接:developer.51cto.com/art/201910/604745.htm

    Java技术栈
  • Javascript[0x04] -- JSON必知必会

    通常在写简历的时候,对于某项技术而言,我们可以用“精通”,“熟悉”和”了解“三种词汇来描述你对它的掌握情况,在写这篇文章的时候,是笔者阅读完《JSON必知必会...

    丰臣正一
  • PHP json_encode 的使用方法

    今天在进行接口加签的时候,发现一个问题,数据一直加签失败; 再查找一番原因后发现原来 json_encode 对反斜杠进行了转义,导致数据一直加签失败 解决办法...

    hedeqiang

扫码关注云+社区

领取腾讯云代金券