蓝旭前端自学自讲——jQuery 动画和jQuery AJXA

jQuery 效果

隐藏和显示

• 隐藏 hide()方法 $(selector).hide(speed,callback);
• 显示 show() 方法 $(selector).show(speed,callback);
• 切换 toggle()方法 $(selector).toggle(speed,callback);【例】
• 注：可选的 speed 参数规定隐藏/显示的速度，可取：“slow”、“fast” 或毫秒；可选的 callback 参数是隐藏或显示完成后所执行的函数名称，若不设置callback函数，在动画语句后加入也会在动画前运行【例】

淡入和淡出

• 淡入 fadeIn()方法 $(selector).fadeIn(speed,callback);
• 淡出 fadeOut()方法 $(selector).fadeIn(speed,callback);
• 切换 fadeToggle()方法 $(selector).fadeIn(speed,callback);【例】
• fadeTo()方法 $(selector).fadeTo(speed,opacity,callback);
• 注：speed callback参数与hide show方法中用法相同，opacity参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）

显示隐藏与淡入淡出的区别

• 显示隐藏是通过改变height,width,opacity来实现动画的显示与隐藏的
• 淡入淡出只通过opacity来实现动画的显示与隐藏的
• 它们两个在动画显示与隐藏完后都会设置disply:none或displya:block
  【例】

滑动

• 向下滑动 slideDown() 方法 $(selector).slideDown(speed,callback);
• 向上滑动 slideUp() 方法 $(selector).slideUp(speed,callback);
• 切换 slideToggle() 方法 $(selector).slideToggle(speed,callback);【例】
• 注：speed callback参数与hide show方法中用法相同

动画

• 创建自定义动画 animate() 方法 $(selector).animate({params},speed,callback);
• 可以使用队列功能 同时调用多个animate()方法的时候 按顺序逐一调用【例】
• 注：
  • 默认地，所有 HTML 元素都有一个静态位置，且无法移动，如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute
  • 必需的 params 参数定义形成动画的 CSS 属性【可同时使用多个属性，也可以定义相对值（该值相对于元素的当前值），只需在值的前面加上 += 或 -=】，甚至可以把属性的动画值设置为 “show”、“hide” 或 “toggle”
  • speed callback参数与hide show方法中用法相同

停止动画

• stop()方法 $(selector).stop(stopAll,goToEnd);
• 注：可选的 stopAll 参数规定是否应该清除动画队列默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行；可选的 goToEnd 参数规定是否立即完成当前动画，默认是 false；因此，默认地，stop() 会清除在被选元素上指定的当前动画【例】

jQuery 方法链接（Chaining）

用.把多条语句链接在同一元素上，浏览器可以不用多次查找元素，运行顺序为从左到右（书写时可加缩进）

版本间的区别

• 1.7切换动画更加直观;
• jQuery 3使用requestAnimationFrame() API来执行动画，使动画运行得更加顺畅、快速，新的API只用于支持它的浏览器，对于那些更老的浏览器（如IE9）jQuery使用先前的API来作为显示动画的后备方案

jQuery AJAX

lode()方法

从服务器加载数据，并把返回的数据放入被选元素中 $(selector).load(URL,data,callback);

• 必需的 URL 参数规定您希望加载的 URL(也可以把 jQuery 选择器添加到 URL 参数)
• 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
• 可选的 callback 参数是 load() 方法完成后所执行的函数名称，包含：
  • responseTxt - 包含调用成功时的结果内容
  • statusTXT - 包含调用的状态
  • xhr - 包含 XMLHttpRequest 对象

$.get()方法

从指定的资源请求数据 $.get(URL,callback);

$.post()方法

向指定的资源提交要处理的数据 $.post(URL,data,callback);

jQuery Ajax 操作函数

jQuery Ajax 操作函数

版本间的区别

• 1.5 Ajax模块完全进行了重写。新增一个jXHR对象，为不同浏览器内置的XMLHttpRequest提供了一致的超集。对于XMLHttpRequest之外的传输机制，比如JSONP请求，jXHR对象也可以进行处理。(详情可以参见:jQuery.ajax文档)
• jQuery的各种版本比较及使用简介