《jQuery权威指南》读书笔记

注：本文是读书笔记，所以，并不会包含《jQuery权威指南》中覆盖的全部内容甚至全部你想看的内容。并且会加上一些个人色彩的笔记。若想了解详细内容强烈建议买本原书阅读，更也不是一本API。

1. 选择器

1.1 层次选择器

选择器	功能
Ancestor descendant	根据祖先元素匹配所有的后代元素
Parent > child	根据父元素匹配所有子元素
Prev + next	匹配所有紧接在prev元素后面的相邻元素
Prev ~ siblings	匹配prev元素之后的所有兄弟元素

 

 

说明：Ancestor descendant和Parent > child所选择的元素集合是不同的，前者的层次关系是祖先和后代，而后者是父子关系；另外，Prev + next可以使用.next()代替，而Prev ~ siblings可以使用nextAll()代替。

1.2 简单过滤选择器

选择器	功能	返回值
first()或:first	获取第一个元素	单个元素
last()或:last	获取最后一个元素	单个元素
:not(selector)	获取除了给定选择器外的所有元素	元素集合
:even	获取所有索引值为偶数的元素，索引号从0开始	元素集合
:odd	获取所有索引值为奇数的元素，索引号从0开始	元素集合
:eq(index)	获取指定索引值的元素，索引号从0开始	单个元素
:gt(index)	获取所有大于给定索引值的元素，索引号从0开始	元素集合
:lt(index)	获取所有小于给定索引值的元素，索引号从0开始	元素集合
:header	获取所有标题类型的元素，如h1,h2……	元素集合
:animated	获取正在执行动画效果的元素	元素集合

 

1.3 内容过滤选择器

选择器	功能	返回值
:contains(text)	获取包含给定文本的元素	元素集合
:empty	获取所有不包含子元素或者文本的空元素	元素集合
:has(selector)	获取含有选择器所匹配的元素和元素	元素集合
:parent	获取含有子元素或者文本的元素	元素集合

 

1.4 可见性过滤器

选择器	功能	返回值
:hidden	获取所有不可见元素，或者type为hidden的元素	元素集合
:visible	获取所有的可见元素	元素集合

 

1.5 属性过滤筛选器

选择器	功能
[attribute]	获取包含给定属性的元素
[attribute=value]	获取等于给定的属性是某个特定值的元素
[attribute!=value]	获取不等于给定的属性是某个特定值的元素
[attribute^=value]	获取给定的属性是以某些值开始的元素
[attribute$=value]	获取给定的属性是以某些值结尾的元素
[attribute*=value]	获取给定的属性是以包含某些值的元素
[selector][selector2][selectorN]	获取满足多个条件的符合属性点元素

 

1.6 子元素过滤选择器语法

选择器	功能
:nth-child(eq|even|odd|index)	获取每个父元素下特定位置元素，索引号从1开始
:first-child	获取每个父元素的第一个子元素
:last-child	获取每个父元素下的最后一个子元素
:only-child	获取每个父元素的仅有一个子元素（若父元素有其他子元素则不会被匹配）

 

jQuery(':nth-child(index/even/odd/equation)') index

每个相匹配子元素的所引值，从1开始，也可以是字符串 even 或 odd，或一个方程式( 例如 :nth-child(even), :nth-child(4n) )。

选择其父元素下的第N个子或奇偶元素。

 

例1：隔行换色

$(''#tbstu tr:nth-child(even)").addClass("trOdd");

 

1.7 表单属性过滤器

选择器	功能
:enabled	获取表单中所有属性为可用的元素
:disabled	获取表单中所有属性为不可用的元素
:checked	获取表单中所有被选中的元素
:selected	获取表单中所有被选中的option元素

 

表单选择器

选择器	功能
:input	获取所有input、textarea、select
:text	互殴妻所有单行本框
:password	获取所有密码框
:radio	获取所有单选按钮
:checkbox	获取所有复选按钮
:submit	获取所有提交按钮
:image	获取图像域
:reset	获取所有重置按钮
:button	获取所有按钮
:file	获取所有文件域

 

2. 操作DOM

2.1 val(val)

获取或设置元素值，普通情况下用来设置text比较多。

注：在val(val)方法中，如果有参数，其参数还可以是数组的形式，即val(array)，作用是设置元素被选中。因此$(":radio").val(["radio2", "radio3"])此句代码的意思为：ID号为radio2和radio3的单选框被选中。

 

2.2 创建元素节点

函数$(html)用于动态创建页面元素

var $div =  $('<div></div>')

 

2.3 插入节点

2.3.1. 内部插入节点的方法

语法格式	参数说明	功能描述
append(content)	content标识追加到目标中的内容，加到元素的末尾	向所选择的元素内部插入内容
append(function(index, html))	通过function函数返回追加到目标中的内容	向所选择的元素内部结尾插入function函数返回的内容（Receives the index position of the element in the set and the old HTML value of the element as arguments.）
appendTo(content)	content标识被追加的内容的目标	把调用者追加到content元素内
prepend(content)	content标识追加到目标中的内容的前置	向所选择的元素内部插入内容，加到元素的第一。
prepend(function(index, html))	通过function函数返回追加到目标中的内容	向所选择的元素内部开始插入function函数返回的内容（Receives the index position of the element in the set and the old HTML value of the element as arguments.）
prependTo(content)	Content表示被追加的内容的目标，调用者添加到content的开始。

2.3.2. 外部插入节点

语法格式	参数说明	功能描述
After(content)	Content表示插入目标元素外部后面的内容	向所选择的元素外部后面插入内容
before(content)	Content表示插入目标元素外部前面的内容	向所选择的元素外部前面插入内容
insertAfter(content)	与after对象相反，content为被插入的对象
insertBefore	与before对象相反，content为被插入的对象

2.4 复制节点

clone()

复制元素本身，不具备任何元素行为。

clone(true)

完全复制元素，包括元素的行为。

 

2.5 替换节点

replaceWith(content)

该方法功能是将所有选择的元素替换成指定HTML或DOM，其中content为所选择元素替换的内容。

replaceAll(selector)

该方法的功能是将所有选择的元素换成指定selector的元素，其中参数selector为需要被替换的元素。

 

replaceWith和replaceAll目标和源相反而已。

 

注意：替换后事件将消失。

 

2.6 包裹元素节点

语法格式	参数说明	功能描述
wrap(html/elem)	Html/elem参数为字符串代码，用于生成元素并包裹所选元素。	把所有选择的元素用其他字符串代码包裹起来。指定元素的外部包裹。
unwrap	无参数	移除所选的元素的父元素或包裹标记。
wrapInner(html/elem)	Html/elem参数为字符串代码，用于生成元素并包裹所选元素。	把所有选择的元素的子内容（包括文本节点）。指定元素的内部包裹。

2.7 删除元素

remove([expr])

其中参数expr为可选项，如果接受参数，则该参数为筛选元素的jQuery表达式，通过该表达式获取指定的元素，并进行删除。

empty()方法的语法格式如下：

empty()

其功能为清空所选择的页面元素或所有的后台元素。

3. 事件与应用

3.1 ready

jQuery的ready事件和传统的JavaScript中onload方法功能接近，但前者优于onload。因为传统的onload方法必须等页面中的图片加载完才执行，而ready当在页面DOM加载完毕后就执行了，比较精确。

Ready方法的几种相同写法

写法一：

$(document).ready(function(){

//代码部分

});

写法二：

$(function(){

//代码部分

});

 

写法三：

jQuery(document).ready(function(){

//代码部分

});

 

写法四：

jQuery(function(){

//代码部分

});

 

3.2 事件绑定

bind(type, [data], fn)

 

bind可以支持同时绑定多个事件，在填写type的时候把多个目标事件用空格分开，例如：

$('#btnBind').bind("click mouseout", function(){

//代码

});

也支持用映射的方式绑定不同的事件

$(".txt").bind({

focus:function(){

//代码

},

change:function(){

//代码

}

});

 

第二个参数data可选项的事例：

var message = "执行的是focus事件";

$(".txt").bind("focus",{msg:message},function(){

alert(event.data.msg);//这里可以看到传入的message 了

})

 

事实上一般情况下都用不上，上面的例子，完全可以直接使用message，而不用传入参数再调用那么多此一举。

3.3 切换事件

3.3.1. hover()方法

调用jQuery中的hover()方法可以使元素在鼠标悬停与鼠标移出的事件中进修切换，该方法在实际运用中，也可以通过jQuery中的事件mouseenter与mouseleave进行替换。下面代码是等价的。

代码一：

$("a").hover(function(){

//执行over

},function(){

//执行out

});

代码二：

$("a").mouseenter(function(){

//执行over

});

$("a").mouseleave(function(){

//执行out

});

3.3.2. toggle()方法

在toggle()方法中，可以一次调用N个指定的函数，直到最后一个函数，然后重复对这些函数轮番调用。

语法格式如下：

toggle(fn, fn2, [fn3, fn4, ...]);

 

3.4 移除事件

unbind()的功能是移除元素绑定的事件，其调用语法格式如下：

unbind([type], [fn])

其中，参数type为移除的事件类型，fn为需要移除的事件处理函数；如果该方法没有参数，则移除所有绑定的事件；如果带有参数type，则移除该参数所指定的事件类型；如果带有参数fn，则只移除绑定时指定的函数fn

3.5 其他事件

3.5.1. 方法one()

one()方法功能是为所选的元素绑定一个仅触发一次的处理函数，其调用的语法格式为：

one(type,[data],fn)

用法跟bind基本一致吗，区别在于one仅触发一次。

3.5.2. 方法trigger()

在前端页面开发中，有时希望页面在DOM加载完毕后，自动执行一些很人性化的操作，如：文本框中的内容处于全部被选中状态，某个按钮处于焦点中。利用传统的javascript语言需要便携复杂的代码才可以实现上述功能：而在jQuery中，仅需要调用一个trigger()方法就可以轻松实现。

trigger()方法的功能是在所选的元素上触发指定类型的事件。其调用的语法格式为

trigger(type, [data])

示例：

加载完DOM后，文本框的字自动被全选。

var oText = $(":text");

oText .trigger("select");//自动选中文本框

oText.bind("btn_click",function(){//编写文本框自定义事件。

//事件代码

});

oText.trigger("btn_click");//自动触发自定义事件

 

4. Ajax在jQuery中的应用

4.1 load()方法

load()方法可以轻松实现获取异步数据的功能，其调用的语法格式为：

load(url, [data], callback)

 

其中参数url为被加载的页面地址，可选项[data]参数表示发送到服务器的数据，其格式为key/value、另一个可选项[callback]参数标识加载成功后，返回至加载页的回调函数。

例如：

$("#div").load("b.html");

4.2 getJSON()方法

$.getJSON(url, [data], [callback])

用get请求异步加载数据，并约定返回数据类型为JSON。

data为key/value

4.3 getScript()方法

$.getScript(ur, [callback])

参数url为等待加载的JS文件地址，可选项[callback]参数标识加载成功时执行的回调函数。

不仅可以轻松地注入脚本，而且所注入的脚本自动执行，大大提高了页面的执行效率。

4.4 post()方法

$.post(url, [data], [callback], [type])

type为response类型。

4.5 serialize()序列化表单

在使用全局函数$.get()和$.post()向服务器传递参数时，其中的参数是通过名称属性组个搜索输入字段的方式进行传输的，如果表单的输入字段过多，这种方式就比较麻烦，而且不利于拓展。为解决这个问题，jQuery引入serialize()方法，该方法可以简化参数传值的方式。

该方法的功能是将所选择的DOM元素转换成能随AJAX传递的字符串，即序列化所选择的DOM元素。

例如：

$.post(url, $("#frmUserInfo").serialize(), function(data){

//do something

});

4.6 $.ajax方法

4.6.1. $.ajax()的基本概念

$.ajax()是最底层的方法，也是功能最强的方法，其调用格式为：

$.ajax([options])

其中可选参数[options]为$.ajax()方法中的请求设置，为格式为key/value,既包含发送请求的参数，也含有服务器响应后回调的数据，其全部名称如下：

参数名	类型	描述
url	String	发送请求的地址（默认为当前页面）
type	String	数据的请求方式（post或get），默认为get。
data	String或Object	发送到服务器的数据。如果不是字符串则自动转成字符串格式，如果是get请求方式，那么，该字符串附在url的后面。
dataType	String	服务器返回的数据类型，如果没指定，jQuery将自动根据HTTP包MIME信息自动判断，服务器返回的数据根据自动判断的结果进行解析，传递给回调函数，其可类型为： html:返回纯文本的HTML信息，包含的script标记会在插入页面时被执行。 script:返回纯文本的javascript代码。 text:返回纯文本字符串。 xml:返回可被jQuery处理的XML文档。 json:返回JSON格式的数据。
beforeSend	Function	该函数用于发送请求签修改XMLHttpRequet对象，其中的参数就是XMLHttpRequet对象，由于该函数本身就是jQuery事件，因此，如果函数返回false，则表示取消本次事件。
complete	Function	请求完成后调用的回调函数，该函数无论数据发送成功或失败都会调用，其中有两个参数，一个是XMLHttpRequest对象，另外一个是strStatus，用于描述成功请求类型的字符串。
success	Function	请求成功后调用的回调函数，该函数有两个参数，一个是根据参数dataType处理后服务器返回的数据，另外一个是strStatus，用于描述状态的字符串。
error	Function	请求失败后调用的回调函数，该函数有三个参数，第一个是XMLHttpRequest对象，第二个是出错信息strError，第三个是捕捉到的错误对象strObject。
timeout	Number	请求超时的事件（毫秒），该设置将覆盖$.ajaxSetup()方法中的同样设置
global	Boolean	是否相应全局事件，默认为true，表示相应，如果设置成false，表示不响应，那么全局事件$.ajaxStart等将不响应。
async	Boolean	是否异步请求，默认为true，表示异步，如果设置成false，表示同步请求。
cache	Boolean	是否进修页面缓存，true表示进行缓存，false表示不进修页面缓存。

 

4.6.2. $.ajaxSetup设置全局Ajax

在使用$.ajax()方法时，有时需要调用多个$.ajax()方法，如果每个方法都设置其中的请求细节，将是意见十分麻烦的事。为了简化这种工作，在jQuery中，可以使用$.ajaxSetup()方法设置全局性的Ajax默认选项，一次设置，全局有效。这样大大简化了$.ajax()方法中的细节的编写，该方法的调用格式为：

$.ajaxSetuo([option])

其中可选参数[options]是一个对象，通过该对象可以设置$.ajax()方法中的参数。

例如：

$.ajaxSetup({//设置全局性的ajax选项

type: "get",

url : "UserInfo.xml",

dataType:"xml"

});

$("#button1").click(function(){

$.ajax({

success:function(data){

//do something

}

});

})

 

4.7 Ajax全局事件的基本概念

jQuery中的6个全局性Ajax事件的详细说明：

事件名称	参数	功能描述
ajaxComplete(callback)	Callback	Ajax请求完成时执行函数
ajaxError(callback)	Callback	ajax请求发生错误时执行函数，其中捕捉到的错误可以作为最后一个参数进行传递。
ajaxSend(callback)	callback	Ajax请求发送前执行函数
ajaxStart(callback)	callback	Ajax请求开始时执行的函数
ajaxStop(callback)	callback	ajaxStop结束时执行的函数
ajaxSuccess(callback)	Callback	Ajax请求成功时执行的函数

 

其中ajaxStart和ajaxStop事件觉得尤其有用，可以用来添加ajax请求提交等待效果。

例如：

$("#divMsg").ajaxStart(function(){//元素绑定全局ajaxStart事件

$(this).show();

});

$("#divMsg").ajaxStop(function(){//元素绑定全局ajaxStop事件

$(this).html("已成功获取数据。").hide();

});

5. jQuery常用插件

5.1 验证表单validate

下载地址：

http://plugins.jquery.com/project/validate

5.2 表单插件form

下载地址：

http://plugins.jquery.com/project/form

5.3 Cookie插件cookies

下载地址：

http://code.google.com/p/cookies/ 

注：比jQuery plugins中的cookie好用，支持JSON格式数据的读写。

 

5.4 搜索插件AutoComplete

下载地址：

http://jquery.bassistance.de/autocomplete/jquery.autocomplete.zip

5.5 图片灯箱插件notesforlightbox

下载地址：

http://www.notesfor.net/file.axd?file=NFLightBox.zip

5.6 右键菜单插件contextmenu

下载地址：

http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js

5.7 图片放大镜插件jqzoom

下载地址：

http://www.mind-projects.it/projects/jqzoom/

5.8 自定义jQuery插件

5.8.1. 插件的种类

1) 封装方法插件
封装方法插件在本质上来说，是一个对象级别的插件，该类插件首先通过jQuery选择器获取对象，并为对象添加方法，然后，将方法进修打包，就封装成一个插件，这种类型的插件编写简单，极易调用，也很方便地使用jQuery中功能强大的选择器，因此成为开发插件的首选。

2) 封闭函数插件
封闭函数插件是一个类级别的插件，该类插件最大的特点，就是可以直接给jQuery添加静态方法，并且可以将函数置于jQuery命名空间中，如最为常见的就是$.ajax()、$.trim()全局性函数，都是以内部插件的形式植入jQuery内核中。

5.8.2. 插件开发要点

1) 插件的文件命名必须严格遵循jQuery.[插件名],js的规则，以便于与其他js文件的区分，如新插件文件jquery.newplugin.js.

2) 如果是对象级别的插件，所有的方法都应依附于jquery.fn主体对象；如果是类级别插件，所有的方法都应依附于jquery对象。

3) 无论是对象级别还是类级别插件，结尾都必须以分号结束，否则，在文件被压缩时，会出现错误提示信息。

4) 在插件内部的代码中，如果要访问每个元素，可以使用this.each方法来遍历全部元素。

5) 需要说明的是，在插件的内部，this所代表的是通过jQuery选择器所获取的对象，而非传统意义上的对象的引用。

6) 由于jQuery代码在调用方法时，可以采用链写的方法同事调用多个方法，因此，为了保证这个功能的实现，插件本身必须返回一个jQuery对象。

7) 虽然“$”美元符，可以与“jQuery”字符相代替但在便携插件的代码中，尽量不要使用“$”符号，以避免与别的代码冲突。

8) 在编写对象级别的插件时，使用jQuery.fn.extend()方法进行功能扩展；而针对类级别的插件，则使用jQuery.extend()方法进行扩展。

 

示例 对象级别插件开发：

;(function($){

$.fn.extend({

"yourPluginName": function(pram_value){

//各种代码

this.each(function(){//这样遍历

//一些实现

});

return $(this);//完事后返回jQuery对象，保持链式操作

}

});

})(jQuery);

 

示例 类级别插件开发：

;(function($){

$.extend({

"yourPluginName": function(pram_value){

//插件实现的代码

}

});

})(jQuery);

6. jQuery UI插件

6.1 draggble拖曳插件

6.2 droppable放置插件

6.3 dialog对话框插件

这个实用性比较强些，比javascript内置的弹出框用户体验强不知道多少倍，并且支持IE6下覆盖select元素（当然实现就是靠iframe了）。

7. jQuery实用工具函数

7.1 浏览器检测

browser对象

属性名称	说明
webkit	如果是webkit相关浏览器，则为true，否则为false
mozilla	如果是mozilla相关浏览器，则为true，否则为false
safari	如果是safari浏览器，则为true，否则为false
opera	如果是opera浏览器，则为true，否则为false
msie	如果是IE浏览器，则为true，否则为false
version	获取浏览器的版本号

7.2 盒子模型

盒子模型分为二类，一类是W3C的盒子模型，另一类是IE盒子模型。两者最根本的区别在于，属性height与width这两个值是否包含padding与border。W3C盒子模型不包含padding和border，仅指内容的height和width，而IE盒子模型包含padding与border、

在jQuery中，可以通过jQuery.support.boxModel对象返回值，确定页面是否标准的W3C盒子模型。

调用方法如下：

$.support.boxModel

7.3 数组遍历

$.each(obj, fn(para1, para2))

常用的方法了，obj表示要遍历的数组或对象，fn是回调函数，其两个参数para1表示序号或属性名，para2表示数组的元素或对象的属性。

7.4 数据筛选

$.grep(array, function()elementOfArray, indexInArray, [invert])

参数array为要筛选的原数组，回调函数fn中可以设置两个参数，其中elementOfArray为数组中的元素，indexInArray为数组中的序号；另外可选项[invert]为布尔值，表示是否根据fn的规则取反向结果，默认为false。

 

例如：

var arrNum = [2, 8, 3, 7, 4, 9, 3, 10, 9, 7, 21];

var arrGet = $.grep(arrNum, function(ele, index){

return ele > 5 && index < 8;//筛选元素值大于5且序号小于8的元素

}) 

7.5 数据变更

虽然可以通过$.grep()函数筛选数组中的元素，但如果要按指定条件修改数组中的所选元素，还需调用另外一个工具函数$.map()

$.map(array, callback(elementOfArray, indexInArray))

基本上和$.grep()作用差不多，但map非单纯筛选元素然后返回，而是筛选后可变更其内容再返回。

var arrNum = [2, 8, 3, 7, 4, 9, 3, 10, 9, 7, 21];

var arrGet = $.map(arrNum, function(ele, index){

if (ele > 5 && index < 8){//筛选元素值大于5且序号小于8的元素

return ele++;//元素+1后返回

}

}) 

7.6 数据搜索

$.inArray(value, array)

在数据中搜索某个元素，并返回第一个匹配元素的位置，没有则返回-1。参数value为搜索的对象，array表示搜索对象的数组。

7.7 测试操作

jQuery中测试工具函数

函数名称	说明
$.isArray(obj)	返回一个布尔值，检测参数obj是否是一个数组对象，如果为true，则表示是，否则，则表示不是。
$.isFunction(obj)	返回一个布尔值，检测参数obj是否是一个函数对象，如果为true，则表示是，否则，则表示不是。
$.isEmptyObject(obj)	返回一个布尔值，检测参数obj是否是一个空对象，如果为true，则表示是，否则，则表示不是。
$.isPlainObject(obj)	返回一个布尔值，检测参数obj是否是一个纯粹对象，如果为true，则表示是，否则，则表示不是。
$.contains(container, contained)	返回一个布尔值，检测一个DOM节点是否包含另外一个DOM节点，如果为true，则表示是，否则，则表示不是。

 

7.8 URL操作

$param(obj, [traditional])

通过该函数可以使数组或jQuery对象按照name/value的格式进修序列化，普通对象按照key/value的格式进修序列化。是serialize()方法的核心，因为它也是通过调用$.param()来实现的序列化的。

参数obj表示需要进修序列化的对象，该对象可以是数组，jQuery对象，普通对象；可选参数[traditional]，表示是否使用普通的方式浅层序列化，该函数返回一个序列号后的字符串。

注：其实可以简单看成是把URL的参数进行encodeURI传递。

7.9 指定对象作用于函数$.proxy()

$.proxy(fn, scope)

注：目前来看，使用场合并不多。

7.10 判断匹配元素is()

检查当前匹配的元素集合匹配一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true。

 

例子1：用来判断是否点击的li

$("ul:).click(function(event) {

  var $target = $(event.target);

  if ( $target.is("li") ) {

    $target.css("background-color", "red");

  }

});

 

例子2：

  $("div").one('click', function () {

    if ($(this).is(":first-child")) {

      $("p").text("It's the first div.");

    } else if ($(this).is(".blue,.red")) {

      $("p").text("It's a blue or red div.");

    } else if ($(this).is(":contains('Peter')")) {

      $("p").text("It's Peter!");

    } else {

      $("p").html("It's nothing <em>special</em>.");

    }

    $("p").hide().slideDown("slow");

    $(this).css({"border-style": "inset", cursor:"default"});

  });

 

例子3：

$('"#radio1").is(":checked")? "男":"女";

 

注：这不是工具函数utilities中的类，而是属于遍历traversing中的。找不到章节写，但个人觉得这个方法挺方便并且在jQuery1.6版本中强化了不少。

8. jQuery性能优化

8.1 优先使用ID与标记选择器

简单归纳为：ID > TAG > CLASS

即，如果ID能访问就用id，否则就尝试用tag访问，再不行才用class。

8.2 使用jQuery对象缓存

1) 多次调用$("#ID")获取某对象时，应该声明var $id = $("#ID")来提供多次使用，减少查询次数。

2) 可定义全局性变量。但注意变量名冲突。

3) 多使用链式操作。

8.3 选择器中含有空格符号

含有空格一般代表存在包含关系，而不含有空格则代表元素自身属性的筛选。

8.4 使用data()方法缓存数据

我们知道，缓存数据无论是在前端页面开发，还是在后台服务器脚本编写，都有十分重要的作用。同样，在jQuery中，也可以通过data()方法将数据缓存，虽然使用局部或全局的变量可以保存数据，但变量并不能进行数据的缓存，而且并不依附于某个元素自身；如果使用data()方法，可以针对元素定义数据，在元素中存取数据，从而避免数据被循环引用的风险。

1) 根据元素中名称定义或返回存储的数据，其调用格式为：
data([name])

2) 根据元素中名称在元素上存储或设置数据，其调用格式为：
data(name. value)

3) 除了定义和存储数据的名称，还可以移除元素中存放的数据，其调用格式为：
removeData(name)

 

支持存放JSON数据，比较方便

例如 

$("#p").data("_data");//初始化

$("#p").data("_data",{//赋值

name: "haha"

});

$("#p").data("_data").name;//获取JSON中的name值

 

注：虽然使用data()方法可以很方便地存取全局性数据，但存储的数据随着操作的变化，会越来越大，如果不及时进行清理，将会影响原有程序的执行，这一点需引起程序开发人员的注意。除此之外，建议在存储针对元素的数据时，使用data()方法进修保存，可以优化执行代码。

 

EOF

 

附注：错别字神马的请见谅，一天内忙碌的看完本书并且没多检查了，书中例子也比较多，蛮适合初学者的，虽然我大部分都略过了。Orz..

 

 

格式大部分丢失了，附件共享PDF版，若有兴趣可下载。

评论

1 楼 zljsrc 2012-07-10  

太精彩了。