第四章 jQuery中的事件和动画
1、jQuery中的事件
1）加载DOM
|
window.onload |
$(document).ready() |
|
|
执行时机 |
必须等待网页中所有的内容加载完毕后（包括图片）才能执行 |
网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完 |
|
编写多个 |
不能同时编写多个 |
能同时编写多个 |
|
简化写法 |
无 |
$(document).ready(function(){ }); 简写成$(function(){ }); 或$().ready(function(){ }); |
2）事件绑定：bind(type, data, fn); 第一个参数是事件类型；第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象；第三个参数则是用来绑定的处理函数。
3）合成事件：
hover()方法：hover(enter, leave);用于模拟光标悬停事件，当光标移动到元素上时，会触发指定的第一个函数（enter），当光标移出这个元素时，会触发指定的第二个函数（leave）。
toggle()方法：toggle(fn1, fn2, ... fnN);用于模拟鼠标连续单击事件，第一次单击时触发第一个函数（fn1），第二次单击时触发第二个函数（fn2）,如果有更多函数时，则依次触发，直到最后一个；也可用于切换元素的课件状态，如果元素是可见的，单击切换后则为隐藏，如果元素是隐藏的，单击切换后则为可见。
4）事件冒泡
事件对象：$(“element”).bind(“click”, function(event){ });
停止事件冒泡：stopPropagation()方法，也可以使用 renturn false;
$(“element”).bind(“click”,function(event){ event.stopPropagation();});
$(“element”).bind(“click”,function(event){ renturn false;});
阻止默认行为：preventDefault()方法，也可以使用 renturn false;
$(“element”).bind(“click”,function(event){ event.preventDefault();});
$(“element”).bind(“click”,function(event){ renturn false;});
5）事件捕获：jQuery不支持事件捕获
6）事件对象的属性
event.type：获取事件的类型
event.stopPropagation()方法：阻止事件冒泡
event.preventDefault()方法：阻止事件的默认行为
event.target：获取触发事件的元素
event.relatedTarget：获取触发事件的相关元素
event.pageX和event.pageY：获取光标相对于页面的x坐标和y坐标
event.which：在鼠标单击事件中获取到鼠标的左中右键（which分别为1、2、3）；在键盘事件中获取键盘的按键
event.metaKey：在键盘事件中获取<ctrl>按键
7）移除事件
unbind(type, data);第一个参数是事件类型，第二个参数是将要移除的函数；
one(type, data, fn);为事件绑定处理函数，当处理函数触发一次后立即被删除。
8）模拟操作
常用模拟：trigger()方法用于模拟操作，也可用于触发自定义事件；
传递数据：trigger(type, data)方法第一个参数是事件类型，第二个参数是要传递给事件处理函数的附加数据，以数组形式传递；
执行默认操作：trigger()方法触发事件后会执行浏览器的默认操作。
9）其他用法：绑定多个事件类型；添加事件命名空间，便于管理；相同事件名称，不同命名空间执行方法。
2、jQuery中的动画
1）show()方法和hide()方法：显示和隐藏匹配的元素，指定一个速度参数——normal（400毫秒）、slow（600毫秒）、fast（200毫秒）或者是指定一个数字（单位为毫秒）
2）fadeIn()方法和fadeOut()方法：改变匹配元素的透明度，让匹配的元素淡入或淡出
3）slideUp()方法和slideDown()方法：改变匹配元素的高度，让匹配的元素由下到上缩短隐藏或由上到下延伸显示
4）自定义动画animate()方法：animate(params, speed, callback);第一个参数包含样式属性及值的映射，第二个参数可选表示速度，第三个参数可选表示在动画完成时执行的函数。
5）动画回调函数
6）停止动画：stop(clearQueue, gotoEnd)方法，第一个参数表示是否要清空未执行完的动画队伍，第二个参数表示是否将正在执行的动画跳转到末状态，两个参数都是可选的Boolean值（true或false）
7）判断元素是否处于动画状态：is(“:animated”)方法
8）延迟动画：delay()方法
9）其他动画方法
toggle()方法用于切换匹配元素的可见状态
slideToggle()方法通过高度变化来切换匹配元素的可见性
fadeTo()方法通过设置元素的不透明度以渐进方式调整到指定的值
fadeToggle()方法通过不透明度变化切换匹配元素的可见性
第五章 jQuery对表单、表格的操作及更多应用
1、表单应用
1）单行文本框应用
2）多行文本框应用
3）复选框应用
4）下拉框应用
5）表单验证
2、表格应用
1）表格变色
2）表格展开关闭
3）表格内容筛选
3、其他应用
1）网页字体大小
2）网页选项卡
3）网页换肤
第六章 jQuery与Ajax的应用
1、Ajax的优势：
1）不需要插件支持
2）优秀的用户体验：能在不刷新整个页面的前提下更新数据
3）提高Web程序的性能：只需通过XMLHttpRequest对象向服务器端提交希望提交的数据，即按需发送
4）减轻服务器和带宽的负担：在客户端创建Ajax引擎，在传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源来处理
2、Ajax的不足
1）浏览器对XMLHttpRequest对象的支持度不足
2）破坏浏览器“前进”、“后退”按钮的正常功能
3）对搜索引擎的支持的不足
4）开发和调试工具的缺乏
3、Ajax的XMLHttpRequest对象：发送异步请求、接收响应及执行回调
4、安装Web环境——AppServ
5、编写第一个Ajax例子
1）定义一个函数，通过该函数来异步获取信息
function Ajax(){
//...
}
2）声明一个空对象用来装入XMLHttpRequest对象
var xmlHttpReq = null;
3）给XMLHttpRequest对象赋值
If (window.ActiveObject){
xmlHttpReq = new Active XObject(“Microsoft.XMLHTTP”);
}else If (window.XMLHttpRequest){
xmlHttpReq = new XMLHttpRequest();
}
4）初始化XMLHttpRequest对象
xmlHttpReq.open(“GET”, “test.php”, true);
5）注册回调事件处理器
xmlHttpReq.onreadystatechange = RequestCallBack;
function RequestCallBack(){
if (xmlHttpReq.readyState == 4){ //请求完成加载
if (xmlHttpReq.readyState == 200){ //响应成功
//...
}
}
}
6）发送请求
xmlHttpReq.send(null);
6、jQuery中的Ajax：最底层方法$.ajax()，第二层方法load()、$.get()、$.post()，第三层方法$.getScript()、$.getJSON()
1）load()方法：load(url, data, callback)第一个参数表示请求HTML页面的URL地址，第二个参数可选表示发送至服务器的key/value数据，第三个参数可选表示请求完成时的回调函数；如果没有参数data传递则采用GET方式传递，反之则会自动转换为POST方式；回调函数有三个参数，分别表示请求返回的内容、请求状态（success、error、notmodified、timeout）和XMLHttpRequest对象；在load()方法中，无论Ajax请求是否成功，只要当请求完成后，回调函数就被触发。
2）$.get()方法：$.get(url, data, callback, type)第一个参数表示请求HTML页面的URL地址，第二个参数可选表示发送至服务器的key/value数据，第三个参数可选表示载入成功时的回调函数，第四个参数表示服务器端返回内容的格式（xml、html、script、json、text和_default）;回调函数有两个参数，分别表示请求返回的内容、请求状态（success、error、notmodified、timeout）；在$.get()方法中，只有当数据成功返回请后，回调函数才会被触发。
3）$.post()方法：与$.get()方法的结构和使用方式都相同
|
$.get()方法 |
$.post()方法 |
|
|
请求的参数 |
跟在URL后进行传递 |
作为HTTP信息的实体内容发送给Web服务器 |
|
传输的数据大小 |
不大于2KB |
理论上不受限制 |
|
安全性 |
请求的数据会被浏览器缓存起来，不安全 |
相对安全 |
|
传递的数据在服务器端的获取方式 |
$_GET[]或者$_REQUEST[] |
$_POST[]或者$_REQUEST[] |
4）$.getScript()方法：用于加载.js文件；$.getScript()方法会在JavaScript文件成功载入后运行回调函数。
5）$.getJSON()方法：用于加载JSON文件；$.getJSON()方法会在JSON文件成功载入后运行回调函数。
6）$.ajax(options)方法
7、序列化元素
1）serialize()方法作用于一个jQuery对象，将DOM元素内容序列化为字符串，用于Ajax请求
2）serializeArray()方法作用于一个jQuery对象，将DOM元素内容序列化为字符串JSON格式的数据
3）$.param()方法用于对一个数组或对象按照key/value进行序列化
8、jQuery中的Ajax全局事件
|
方法名称 |
说明 |
|
ajaxStart(callback) |
Ajax请求开始时执行的函数 |
|
ajaxStop(callback) |
Ajax请求结束后执行的函数 |
|
ajaxComplete(callback) |
Ajax请求完成时执行的函数 |
|
ajaxError(callback) |
Ajax请求发生错误时执行的函数，捕捉到的错误可以作为最后一个参数传递 |
|
ajaxSend(callback) |
Ajax请求发送前执行的函数 |
|
ajaxSuccess(callback) |
Ajax请求成功时执行的函数 |