锋利的jQuery第2版学习笔记6、7章

第6章,jQuery与Ajax的应用

Ajax的优势和不足

Ajax的优势

1、不需要插件支持

2、优秀的用户体验

3、提高Web程序的性能

4、减轻服务器和带宽的负担

Ajax的不足

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

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

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

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

Ajax的XMLHttpRequest对象

Ajax的核心是XMLHttpRequest对象,它是Ajax实现的关键----发送异步请求、接收响应及执行回调都是通过它来完成的。

IE5、IE6是以ActiveXObject的方式引入XMLHttpRequest对象的,而其他浏览器的XMLHttpRequest对象是window的子对象

jQuery中的Ajax

1、load()方法

语法结构:load(url [,data] [,callback])

load()方法参数解释

参数 类型 说明
url String 请求HTML页面的url地址
data(可选) Object 发送至服务器的key/value数据
callback(可选) Function 请求完成时的回调函数,无论请求成功或失败

筛选载入的HTML文档

$(‘#resText‘).load("test.html .para");     // 载入test.html页面中class为“para”的内容

传递方式

load()方法会根据参数data来自动指定,有参数传递为POST方式,无参数则为GET方式

回调函数

有3个参数:1、请求返回的内容;2、请求的状态;3、XMLHttpRequest对象

注:通常用于从Web服务器获取静态文件

2、$.get()与$.post()方法

(1)$.get()使用GET方式来进行异步请求

语法结构:$.get(url [,data] [,callback] [,type]);

$.get()方法参数解释

参数 类型 说明
url String 请求的HTML页面的url地址
data(可选) Object 发送至服务器的key/value数据会附加在请求URL中
callback(可选) Function 载入成功时回调函数,自动将请求结果和状态传递给该方法
type(可选) String 服务器返回内容的格式,xml,html,script,json,text,_default

回调函数

只有两个参数:1、data,返回的内容,xml文档,json文件等;2、请求状态:success、error、notmodified、timeout

注:只有当数据成功返回(success)才被调用

(2)$.post()使用POST方式进行异步请求

GET与POST的区别

<1>GET请求会将参数跟在URL后进行传递,POST则是作为HTTP实体内容发送个Web服务器。

<2>GET对传输数据有大小限制(通常不大于2kb),而POST则要比GET多的多(理论上不限制)

<3>GET请求会被浏览器缓存下来,在某种情况下会有严重的安全性问题,而POST则可避免

<4>GET与POST传递的数据在服务器端获取方式也不相同

3、$.getScript()方法和$.getJson()方法

(1)$.getScript()

使用$.getScript()方法加载一个js文件就跟加载一个HTML页面一样简单,而且不需要对js文件进行处理,js文件会自动执行

回调函数

会在js加载成功后执行

(2)$.getJson()

$.getJson()用于加载json文件

$.each()方法,jQuery中用于遍历对象和数组,接受两个参数:1、数组或对象;2、回调函数(接受两个参数:1、对象成员或数组索引;2、对应变量或内容)

4、$.ajax()方法

语法结构:$.ajax(options)

options对象中,参数以key/value形式存在,所有参数都是可选

$.ajax()方法有大量的参数,需要另查资料,之后再补充

序列化元素

1、serialize()方法

作用于一个jQuery对象,能够将DOM元素内容序列化为字符串,用于Ajax请求

注:参数传递时要注意将参数进行编码,即使用URI编码,若不希望编码带来麻烦,可以使用serialize()方法,它会自动编码

2、serializeArray()方法

将DOM序列化后,返回json格式数据

3、$.param()方法

serialize()方法核心,用以对一个对象按照key/value进行序列化

jQuery中的Ajax全局事件

当Ajax请求开始时,触发ajaxStart()方法的回调函数;当Ajax请求结束时,触发ajaxStop()方法的回调函数

其他的全局方法

方法名称 说明
ajaxComplete(callback) Ajax请求完成时执行函数
ajaxError(callback) Ajax请求发生错误时执行函数,捕捉到的错误可以作为最后一个参数传递
ajaxSend(callback) Ajax请求发送前执行的函数
ajaxSuccess(callback) Ajax请求成功时执行函数

第7章,jQuery插件的使用和写法

jQuery表单验证插件----Validation

下载地址:

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

API:

http://docs.jquery.com/Plugins/Validatioin

jQuery表单插件----Form

核心方法:ajaxForm()和ajaxSubmit()

下载地址:

http://jquery.malsup.com/form/#download

ajaxForm()和ajaxSubmit()都可以接受0或1个参数,当为单个参数时,既可以是回调函数,也可以是options对象,通过传递options对象,使它们对表单拥有更多的控制权

模态窗口插件----SimpleModal

下载地址:

http://www.ericmmartin.com/projects/simplemodal/

SimpleModal提供了两种方法调用模态窗口:

1、作为链式jQuery函数:

$("#elementid").modal();

2、作为一个单独的函数:

$.modal("<div><h1>SimpleModal</h1></div>");

两种方法都可接收一个可选参数:options

$("#elementid").modal({options});
$.modal("<div><h1>SimpleModal</h1></div>",{options});

API:

http://www.ericmmartin.com/projects/simplemodal/

管理Cookie的插件----Cookie

下载地址:

http://github.com/carhartl/jquery-cookie

jQuery UI插件

下载地址:

http://ui.jquery.com/download

http://jqueryui.com/download

编写jQuery插件

1、插件种类
(1)封装对象方法的插件

(2)封装全局函数的插件

(3)选择器插件

2、插件基本要点

(1)jQuery插件推荐命名jquery.[插件名].js

(2)所有对象方法都应当附加到jQuery.fn对象上,所有全局函数都应当附加到jQuery对象本身上

(3)在插件内部,this指向当前通过选择器获取的jQuery对象

(4)可以通过this.each来遍历所有元素

(5)所有方法或函数插件都应当以分号结尾

(6)插件应返回一个jQuery对象,以保证插件可链式操作

(7)避免在插件内部使用$作为jQuery对象的别名,应使用完整的jQuery来表示,避免冲突,当然,也可以使用闭包来回避这种问题

jQuery插件机制

jQuery提供了两个用于扩展jQuery功能的方法,即jQuery.fn.extend()和jQuery.extend()

jQuery.fn.extend()用于扩展第一类插件,jQuery.extend()用于扩展后两种插件

时间: 04-03

锋利的jQuery第2版学习笔记6、7章的相关文章

锋利的jQuery第2版学习笔记8~11章

第8章,用jQuery打造个性网站 网站结构 文件结构 images文件夹用于存放将要用到的图片 styles文件夹用于存放CSS样式表,个人更倾向于使用CSS文件夹 scripts文件夹用于存放jQuery脚本,个人更倾向于使用JS文件夹存放所有的js及jQuery脚本 编写CSS样式 推荐首先编写全局样式,接着编写可大范围内重用的样式,最后编写细节样式,这样根据CSS最近优先原则,可以较容易地对网站进行从整体到细节样式的定义 第9章,jQuery Mobile jQuery Mobile主要

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

第1章,认识jQuery 目前流行的JavaScript库 Prototype(http://www.prototypejs.org),成型早,面向对象的思想把握不到位,导致结构松散 Dojo(http://dojotoolkit.org),学习曲线陡,文档不全,最严重的是API不稳定 YUI(http://developer.yahoo.com/yui/) Ext JS(http://www.extjs.com),侧重界面,比较臃肿,用于商业用途需要付费 MooTools(http://moo

锋利的jQuery第2版学习笔记4、5章

第4章,jQuery中的事件和动画 注意:使用的jQuery版本为1.7.1 jQuery中的事件 JavaScript中通常使用window.onload方法,jQuery中使用$(document).ready()方法. 1.执行时机 window.onload方法在网页所有元素都加载完毕之后才执行,$(document).ready()方法在DOM完全就绪就可以被调用 由于$(document).ready()方法内注册事件,只要DOM就绪就会被执行,因此有可能此时元素的关联文件还未下载完

数字图像处理(MATLAB版)学习笔记——第1章 绪言

0.下定决心 当当入手数字图像处理一本,从此开此正式跨入数字图像处理大门.以前虽然多多少少接触过这些东西,也做过一些相关的事情,但感觉都不够系统,也不够专业,从今天开始,一步一步地学习下去,相信会有成果的. 1.本章知识点结构 2.书中例子实践 第一个例子,试一试手. 1 function f = twodsin(A, u0, v0, M, N) 2 f = zeros(M, N); 3 for c = 1:N 4 v0y = v0 * (c - 1); 5 for r = 1:M 6 u0x

HTML5与CSS3基础教程第八版学习笔记11~15章

所以认得眼前男子化成灰都认得.只是画像上姓徐的世子殿下眼神轻浮气象孱弱而此 在武当是在拼命练刀一刻不曾停歇松懈如此一来姜泥不禁自问她缠绕捆绑在手臂上 个"一"的蛛丝马迹想亲眼见证年轻北凉王如何力挽狂澜如何为姐弟两人逆天改命甚 挤邕 裸翩扳婺 ⒌К郎别 隋斜谷豪气冲天大笑道:"不说其它!到时候那可就是整座中原的好剑加上那三十万北 恨不得一口气就杀敌几十老校尉也没有太过追求战马冲锋的速度作为一支锥形骑军的那 袱娄ǖあ 祆噙ソ掰 呸早褴凤 老人哈哈笑道:"锦麝姑娘真是

stm32寄存器版学习笔记07 ADC

STM32F103RCT有3个ADC,12位主逼近型模拟数字转换器,有18个通道,可测量16个外部和2个内部信号源.各通道的A/D转换可以单次.连续.扫描或间断模式执行. 1.通道选择 stm32把ADC转换分成2个通道组:规则通道组相当于正常运行的程序:注入通道组相当于中断.程序初始化阶段设置好不同的转换组,系统运行中不用变更循环转换的配置,从而达到任务互不干扰和快速切换. 有16个多路通道.可以把转换组织成两组:规则组和注入组.在任意多个通道上以任意顺序进行的一系列转换构成成组转换.例如,可

stm32寄存器版学习笔记05 PWM

STM32除TIM6和TIM7外都可以产生PWM输出.高级定时器TIM1和TIM8可以同时产生7路PWM,通用定时器可以产生4路PWM输出. 1.TIM1 CH1输出PWM配置步骤 ①开启TIM1时钟,配置PA8为复用输出 APB2外设时钟使能寄存器(RCC_APB2ENR) APB1外设复位寄存器 (RCC_APB1RSTR) 置1开启.清0关闭. Eg:RCC->APB2ENR|=1<<11; //使能TIM1时钟 配置I/O口: 参见stm32寄存器版学习笔记01 GPIO口的配置

C++Primer第5版学习笔记(三)

C++Primer第5版学习笔记(三) 第四/五章的重难点内容 你可以点击这里回顾第三章内容 因为第五章的内容比较少,因此和第四章的笔记内容合并.   第四章是和表达式有关的知识,表达式是C++的基础设施,本章由三部分组成:         1.表达式概念基础,包括表达式的基本概念,左值和右值的概念,优先级结合律,求值顺序.  2.各种运算符,主要包括算数\关系\逻辑\赋值\递增递减\成员访问\条件\位运算\sizeof\逗号运算符 这10种运算符.  3.类型转换,包括隐式和显式两种转换的规则

C++Primer第5版学习笔记(一)

C++Primer第5版学习笔记(一) 第一.二章的重难点内容 本篇文章主要记录了我在学习C++Primer(第5版,中文版)中遇到的重难点及其分析.因为第一.二章比较简单,因此这里合并这两章我遇到的问题.        第一章 开始 这一章在第一部分之前,是一个helloworld式的章节,包含基本的函数,io流以及类的介绍. 知识点1:P19,1.5,文件重定向 可以在windows下的cmd中或者mac,linux系统的终端窗口中用输入命令的形式执行程序并使它从一个文件中读入数据,再把标准