锋利的jQuery读书笔记 第6章、第9章 第10章

标签：

第六章

    Ajax 全称为：“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），它并不是 JavaScript 的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形成的结合体。使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。

一、Ajax的优势和不足

（1）优势主要以下几点：

1.不需要插件支持（一般浏览器且默认开启 JavaScript 即可）

2.用户体验极佳（不刷新页面即可获取可更新的数据）

3.提升 Web 程序的性能（在传递数据方面做到按需放松，不必整体提交）

4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端)

（2）Ajax 的不足由以下几点：

1.不同版本的浏览器度 XMLHttpRequest 对象支持度不足(比如 IE5 之前)

2.前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会几率前后页面）

3.搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容）

4.开发调试工具缺乏（相对于其他语言的工具集来说，JS 或 Ajax 调试开发少的可怜）

二、异步和同步

    使用 Ajax 最关键的地方，就是实现异步请求、接受响应及执行回调。那么异步与同步有什么区别呢？我们普通的 Web 程序开发基本都是同步的，意为执行一段程序才能执行下一段，类似电话中的通话，一个电话接完才能接听下个电话；而异步可以同时执行多条任务，感觉有多条线路，类似于短信，不会因为看一条短信而停止接受另一条短信。Ajax 也可以使用同步模式执行，但同步的模式属于阻塞模式，这样会导致多条线路执行时又必须一条一条执行，会让 Web 页面出现假死状态，所以，一般 Ajax 大部分采用异步模式。

二、jQuery中的Ajax

jQuery对Ajax操作方法进行了封装

第1层：$.ajax()

第2层：$load()、$.get()和$.post()

第三层：$getScript()和$.getJSON()

1、$load() 方法

(1)作用：从web务器上获取静态的数据文件

(2)结构：load( url [,data] [.callback])

url(必须， 请求 html 文件的 url 地址，参数类型为 String)、

data(可选，发送的 key/value 数据，参数类型为 Object)

callback(可选，成功或失败的回调函数，参数类型为函数 Function)。

2、$get()方法和$post()方法

（1）用途：.load()方法是局部方法，因为他需要一个包含元素的 jQuery 对象，$.post()是全局方法，无须指定某个元素。对于用途而言，.load()适合做而对于需要传递参数到服务器页面的，$.get()和$.post()更加合适。

（2）结构：$.get(url [,data] [,callback] [,type])

url: 表示请求HTML页面的URL地址

data: 发送至服务器的key/value数据

callback: 可选表示载入成功时的回调函数

type: 服务器端返回内容的格式（xml、html、script、json、text和_default）;回调函数有两个参数，分别表示请求返回的内容、请求状态（success、error、notmodified、timeout）；在$.get()方法中，只有当数据成功返回请后，回调函数才会被触发。

（3）两种方法的区别

$.post()方法的使用和$.get()基本上一致，他们之间的区别也比较隐晦，基本都是背后的

不同，在用户使用上体现不出。具体区别如下：

1.GET 请求是通过 URL 提交的，而 POST 请求则是 HTTP 消息实体提交的；

2.GET 提交有大小限制（2KB） ，而 POST 方式不受限制；

3.GET 方式会被缓存下来，可能有安全性问题，而 POST 没有这个问题；

4.GET 方式通过$_GET[]获取，POST 方式通过$_POST[]获取。

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

    jQuery 提供了一组用于特定异步加载的方法：$.getScript()，用于加载特定的 JS 文件；

$.getJSON()，用于专门加载 JSON 文件。

（1）有时我们希望能够特定的情况再加载 JS 文件，而不是一开始把所有 JS 文件都加载了，这时课时使用$.getScript()方法。

//点击按钮后再加载 JS 文件

$(‘input‘).click(function () {

    $.getScript(‘test.js‘)

});

（2）$.getJSON()方法是专门用于加载 JSON 文件的，使用方法和之前的类似。

$(‘input‘).click(function () {

    $.getJSON(‘test.json‘, function (response, status, xhr) {

       alert(response[0].url);

    });

});

4、ajax()方法

    $.ajax()是所有 ajax 方法中最底层的方法，所有其他方法都这个方法只有一个参数，传递一个各个功能键值对的对象。

5、序列化元素

（1）serialize()方法作用于一个jQuery对象，将DOM元素内容序列化为字符串，用于Ajax请求

（2）serializeArray()方法作用于一个jQuery对象，将DOM元素内容序列化为字符串JSON格式的数据

（3）$.param()方法用于对一个数组或对象按照key/value进行序列化

6、jQuery中的Ajax全局事件

第九章

一、jQuery Mobbile简介

    jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的，没有特别为移动应用程序设计。jQuery Mobile是一个新的项目用来添补在移动设备应用上的缺憾。它是基本jQuery框架并提供了一定范围的用户接口和特性，以便于开发人员在移动应用上使用。使用该框架可以节省大量的js代码开发时间，尽管目前的版本还是不是一个稳定的版本。但它的应用效果已经备受瞩目。

二、主要特性

（1）基于jQuery创建

（2）兼容绝大部分手机平台

（3）轻量级的库

（4）模块化结构

（5）HTML5标记驱动的配置

（6）渐进增强的原则

（7）响应式设计

（8）强大的Ajax导航系统

（9）易用性

（10）支持触摸和鼠标事件

（12）强大的主体化框架

三、jQuery Mobbile使用

1、data-role属性

data-role参数表：

page  页面容器，其内部的mobile元素将会继承这个容器上所设置的属性

header 页面标题容器，这个容器内部可以包含文字、返回按钮、功能按钮等元素

footer 页面页脚容器，这个容器内部也可以包含文字、返回按钮、功能按钮等元素

content 页面内容容器，这是一个很宽容的容器，内部可以包含标准的html元素和2、2、2、2、jQueryMobile元素

controlgroup     将几个元素设置成一组，一般是几个相同的元素类型

fieldcontain       区域包裹容器，用增加边距和分割线的方式将容器内的元素和容器外的元素明显分隔

navbar     功能导航容器，通俗的讲就是工具条

listview     列表展示容器，类似手机中联系人列表的展示方式

list-divider      列表展示容器的表头，用来展示一组列表的标题，内部不可包含链接

button      按钮，将链接和普通按钮的样式设置成为jQueryMobile的风格

none        阻止框架对元素进行渲染，使元素以html原生的状态显示，主要用于form元素。

3、data-icon

4、样式切换

dat-theme属性uuur

三、其他移动框架

jqMobi、Sencha Touch、PhoneGap

第十章

jQuery 的版本

从 2005 年 8 月开始，进入公共开发阶段，随之而来的新框架于 2006 年 1 月 14 日正

式以 jQuery 的名称发布。

2006 年 8 月发布了 jQuery1.0，第一个稳定版本，具有对 CSS 选择符、事件处理和

Ajax 交互的支持。

2007 年 1 月发布了 jQuery1.1，极大的简化 API。合并了许多较少使用的方法。

2007 年 7 月发布了 jQuery1.1.3，优化了 jQuery 选择符引擎执行的速度。

2007 年 9 月发布了 jQuery1.2，去掉了 XPath 选择器，新增了命名空间事件。

2008 年 5 月发布了 jQuery1.2.6，引入了 Dimensions 插件到核心库中。

2009 年 1 月发布了 jQuery1.3，使用了全新的选择符引擎 Sizzle，性能进一步提升。

2010 年 1 月发布了 jQuery1.4，进行了一次大规模更新，提供了 DOM 操作，增加了很

多新的方法或是增强了原有的方法。

2010 年 2 月发布了 jQuery1.4.2，添加了.delegate()和.undelegate()两个新方法，提升

了灵活性和浏览器一致性，对事件系统进行了升级。

2011 年 1 月发布了 jQuery1.5，重写了 AJAX 组件，增强了扩展性和性能。

2011 年 5 月发布了 jQuery1.6，重写了 Attribute 组件，引入了新对象和方法。

2011 年 11 月发布了 jQuery1.7，引入了.on()和.off()简介的 API 解决事件绑定及委托容

易混淆的问题。

2012 年 3 月发布了 jQuery1.7.2，进行一些优化和升级。

2012 年 7 月发布了 jQuery1.8，8 月发布了 1.8.1，9 月发布了 1.8.2，重写了选择符引

擎，修复了一些问题。

2013 年 1 月发布了 jQuery1.9，CSS 的多属性设置，增强了 CSS3。

2013 年 5 月发布了 jQuery1.10，增加了一些功能。

锋利的jQuery读书笔记 第6章、第9章 第10章

标签：

原文地址：http://www.cnblogs.com/nankeyimeng/p/5173897.html