《锋利的jQuery》第4-6章

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了《锋利的jQuery》第4-6章相关的知识,希望对你有一定的参考价值。

第四章 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.pageXevent.pageY:获取光标相对于页面的x坐标和y坐标

event.which:在鼠标单击事件中获取到鼠标的左中右键(which分别为123);在键盘事件中获取键盘的按键

event.metaKey:在键盘事件中获取<ctrl>按键

7)移除事件

unbind(type, data);第一个参数是事件类型,第二个参数是将要移除的函数;

one(type, data, fn);为事件绑定处理函数,当处理函数触发一次后立即被删除。

8)模拟操作

常用模拟:trigger()方法用于模拟操作,也可用于触发自定义事件;

传递数据:trigger(type, data)方法第一个参数是事件类型,第二个参数是要传递给事件处理函数的附加数据,以数组形式传递;

执行默认操作:trigger()方法触发事件后会执行浏览器的默认操作。

9)其他用法:绑定多个事件类型;添加事件命名空间,便于管理;相同事件名称,不同命名空间执行方法。

2、jQuery中的动画

1)show()方法和hide()方法:显示和隐藏匹配的元素,指定一个速度参数——normal400毫秒)、slow600毫秒)、fast200毫秒)或者是指定一个数字(单位为毫秒)

2)fadeIn()方法和fadeOut()方法:改变匹配元素的透明度,让匹配的元素淡入或淡出

3)slideUp()方法和slideDown()方法:改变匹配元素的高度,让匹配的元素由下到上缩短隐藏或由上到下延伸显示

4)自定义动画animate()方法:animate(params, speed, callback);第一个参数包含样式属性及值的映射,第二个参数可选表示速度,第三个参数可选表示在动画完成时执行的函数。

5)动画回调函数

6)停止动画:stop(clearQueue, gotoEnd)方法,第一个参数表示是否要清空未执行完的动画队伍,第二个参数表示是否将正在执行的动画跳转到末状态,两个参数都是可选的Boolean值(truefalse

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)网页换肤

第六章 jQueryAjax的应用

1、Ajax的优势:

1)不需要插件支持

2)优秀的用户体验:能在不刷新整个页面的前提下更新数据

3)提高Web程序的性能:只需通过XMLHttpRequest对象向服务器端提交希望提交的数据,即按需发送

4)减轻服务器和带宽的负担:在客户端创建Ajax引擎,在传统方式下的一些服务器负担的工作转移到客户端,便于客户端资源来处理

2、Ajax的不足

1)浏览器对XMLHttpRequest对象的支持度不足

2)破坏浏览器“前进”、“后退”按钮的正常功能

3)对搜索引擎的支持的不足

4)开发和调试工具的缺乏

3、AjaxXMLHttpRequest对象:发送异步请求、接收响应及执行回调

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方式;回调函数有三个参数,分别表示请求返回的内容、请求状态(successerrornotmodifiedtimeout)和XMLHttpRequest对象;在load()方法中,无论Ajax请求是否成功,只要当请求完成后,回调函数就被触发。

2)$.get()方法:$.get(url, data, callback, type)第一个参数表示请求HTML页面的URL地址,第二个参数可选表示发送至服务器的key/value数据,第三个参数可选表示载入成功时的回调函数,第四个参数表示服务器端返回内容的格式(xmlhtmlscriptjsontext_default;回调函数有两个参数,分别表示请求返回的内容、请求状态(successerrornotmodifiedtimeout);在$.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进行序列化

8jQuery中的Ajax全局事件

方法名称

说明

ajaxStart(callback)

Ajax请求开始时执行的函数

ajaxStop(callback)

Ajax请求结束后执行的函数

ajaxComplete(callback)

Ajax请求完成时执行的函数

ajaxError(callback)

Ajax请求发生错误时执行的函数,捕捉到的错误可以作为最后一个参数传递

ajaxSend(callback)

Ajax请求发送前执行的函数

ajaxSuccess(callback)

Ajax请求成功时执行的函数

以上是关于《锋利的jQuery》第4-6章的主要内容,如果未能解决你的问题,请参考以下文章

锋利的jQuery第2版学习笔记45章

锋利的jQuery读书笔记 第3章第4章 第5章

锋利的jQuery读书笔记 第1章第2章

锋利的jQuery读书笔记 第11章

《锋利的jQuery》第5章

锋利的jQuery第2版学习笔记1~3章