蓝旭前端自学自讲——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 操作函数
版本间的区别
- 1.5 Ajax模块完全进行了重写。新增一个jXHR对象,为不同浏览器内置的XMLHttpRequest提供了一致的超集。对于XMLHttpRequest之外的传输机制,比如JSONP请求,jXHR对象也可以进行处理。(详情可以参见:jQuery.ajax文档)
- jQuery的各种版本比较及使用简介