《锋利的jQuery》第4-6章

Posted 2020-06-10

第四章 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请求成功时执行的函数