博客园_张子秋的博客

DOM Ready 详解

2011-06-27T14:36:00Z

插播广告: 百度商务搜索部, 招聘前端测试工程师! 待遇优厚! 要求JS, Linux基础. 有意向的同学请直接联系我!

DOM Ready 概述

熟悉jQuery的人, 都知道DomReady事件. window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加载前触发. 另外我们需要在DOM准备完毕后, 再修改DOM结构, 比如添加DOM元素等. 否则有可能出现“Internet Explorer无法打开站点”的问题. 要模拟此错误, 可以在页面上添加下面的代码, 并用IE6打开:

     <div>

    <script type="text/javascript">

    var div = document.createElement('div');

    div.innerHTML = "test";

    document.body.appendChild(div);

    </script>

    </div>

有关DOM Ready事件的实现,包括jQuery中的DomReady实现, 在国内和国外网站上已经早有人分享了经验, 并提出了许多方法.

为了避免人云亦云, 抱着怀疑的态度, 我去研究了这些DOM Ready方法. 只会使用Google搜索或者jQuery等类库, 不会帮助前端开发人员进步.所以弄懂其中的原理才是关键.

对于FF, Chrome, Safari, IE9等浏览器:

DOMContentLoaded 事件在许多Webkit浏览器以及IE9上都可以使用, 此事件会在DOM文档准备好以后触发, 包含在HTML5标准中. 对于支持此事件的浏览器, 直接使用DOMContentLoaded事件是最简单最好的选择.

对于IE6,7,8:

不幸的是, IE6,7,8都不支持DOMContentLoaded事件.所以目前所有的hack方法都是为了让IE6,7,8支持DOM Ready事件.

鉴于下面的统计结果(2011年5月统计的数据), 我们必须支持IE6,7,8, 一个都不能少!

中国某音乐站:

CNZZ:

另外鉴于"360浏览器"的占有率, 还要支持"360+IE6"这种无敌组合.

DOM Ready 实现方法

首先总结一下目前IE下的DOM Ready方法:

(1)setTimeout : 在setTimeout中触发的函数, 一定会在DOM准备完毕后触发.

示例代码:


       1: //setTimeout Dom Ready

       2: var setTimeoutReady = function(){

       3:     document.getElementById("divMsg").innerHTML += "<br/> setTimeout , readyState:" + document.readyState;

       4: };

       5: var setTimeoutBindReady = function(){

       6:     /in/.test(document.readyState)?setTimeout(arguments.callee, 1):setTimeoutReady();

       7: };

       8: setTimeoutBindReady();

(2)readyState: 判断readyState的状态是否为Complete, interactive等触发

示例代码:


       1: //onreadystatechange event

       2: document.onreadystatechange = function(e){

       3:     document.getElementById("divMsg").innerHTML += "<br/> onreadystatechange, readyState:" + document.readyState;

       4:  

       5: };

(3)外部script: 通过设置了script块的defer属性实现.

参见: http://dean.edwards.name/weblog/2005/09/busted/

示例代码:


       1: <script type="text/javascript" src="ext-1.js" defer></script>

(4)内部script: 外部script的改进版本. 外部script需要页面引用额外的js文件. 内部script方法可以避免此问题.

参见: http://dean.edwards.name/weblog/2006/06/again/

示例代码:


       1: //script defer    Dom Ready    

       2: document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");

       3: var script = document.getElementById("__ie_onload");

       4: script.onreadystatechange = function() {

       5:     if (this.readyState == "complete") {                

       6:         document.getElementById("divMsg").innerHTML += "<br/>internal script defer, readyState:" + document.readyState;

       7:     }

       8: };

(5)doScroll : 微软的文档只出doScroll必须在DOM主文档准备完毕时才可以正常触发. 所以通过doScroll判断DOM是否准备完毕.

参见: http://javascript.nwbox.com/IEContentLoaded/

示例代码:


    //doScroll

    var doScrollMoniterId = null;

    var doScrollMoniter = function(){

    try{

    document.documentElement.doScroll("left");

    document.getElementById("divMsg").innerHTML += "<br/>doScroll, readyState:" + document.readyState;

    if(doScrollMoniterId){

    clearInterval(doScrollMoniterId);

    }

    }

    catch(ex){

    }

    }

    doScrollMoniterId = setInterval(doScrollMoniter, 1);

DOM Ready 调研结论

测试结果见下面. 在这里先给出结论.

setTimeout设置的函数, 会在readyState为complete时触发, 但是触发时间点是在图片资源加载完毕后.

readyState为interactive时, DOM结构并没有稳定, 此时依然会有脚本修改DOM元素.

readyState为complete时, 图片已经加载完毕, 实验中对图片加载设置了延时.所以complete虽然在window.onload前执行, 但是还是太晚.

外部script:如果将此script放在页面上方, 则无法稳定触发. 并且触发时DOM结构依然可能发生变化.

内部script:与外部script同样的问题, 触发的时间过早.

doScroll: doScroll通过时readyState可能为interactive, 也可能为complete. 但是一定会在DOM结构稳定后, 图片加载完毕前执行.

所以可以看出, 目前的setTimeout方法, 外部script和内部script方法, 都是存在错误的.应该说这些方法不能安全可靠的实现DomReady事件.

而单纯使用readyState属性是无法判断出Dom Ready事件的. interactive状态过早(DOM没有稳定), complete状态过晚(图片加载完毕).

jQuery实现中使用的doScroll方法是目前唯一可用的方法.

在本文的最后, 提供了使用本原理实现的ready函数. 其实和jQuery中的Dom Ready原理几乎一样. 但是其中加入了延时, 可以指定win对象(即支持iframe)等功能.

360+IE6:


    add DOM onload, readyState:interactive

    internal script defer, readyState:interactive

    [延时2秒加载js脚本]

    add DOM in delay script, readyState:interactive

    jQuery ready, readyState:interactive

    doScroll, readyState:interactive

    [延时8秒加载图片]

    onreadystatechange, readyState:complete

    window.onload, readyState:complete

    setTimeout , readyState:complete

添加了defer的的外部js都没有执行.

对360这种没有技术, 没有任何优点, 单纯的在IE上面加个外壳, 添加自己的产品和广告的浏览器, 应该予以鄙视! 虽然凭借"安全卫士推荐用浏览器"占有了很多的国内市场, 从运维和产品层面看是成功的, 但是却是不道德的. 所谓的"安全"只是一个幌子而已! 真正了解互联网的用户不应该使用360浏览器. 360安全卫士是一款不错的产品, 最初的定位很好. 只是目前越做越大, 手伸的越来越深. 挟用户威胁厂商的盈利模式.不许别人出广告, 只能自己产品出广告.当一款好的产品在一个没有道德底线的人手里时, 用户变得很难取舍.

IE6:


    add DOM onload, readyState:interactive

    [external script defer(1), readyState:interactive--经常无此项]

    internal script defer, readyState:interactive

    [延时2秒加载js脚本]

    add DOM in delay script, readyState:interactive

    external script defer (2), readyState:interactive

    jQuery ready, readyState:interactive

    doScroll, readyState:interactive

    [延时8秒加载图片]

    onreadystatechange, readyState:complete

    window.onload, readyState:complete

    setTimeout , readyState:complete

第一个添加了defer的外部js, 时有时无. 大部分时间没有.

IE7:


    add DOM onload, readyState:interactive

    [external script defer(1), readyState:interactive--经常无此项]

    internal script defer, readyState:interactive

    add DOM in delay script, readyState:interactive

    external script defer (2), readyState:interactive

    onreadystatechange, readyState:complete

    jQuery ready, readyState:complete

    window.onload, readyState:complete

    setTimeout , readyState:complete

第一个添加了defer的外部js, 时有时无. 大部分时间没有.

IE8:


    add DOM onload, readyState:interactive

    external script defer (1), readyState:interactive

    internal script defer, readyState:interactive

    external script defer (2), readyState:interactive

    add DOM in delay script, readyState:interactive

    onreadystatechange, readyState:complete

    jQuery ready, readyState:complete

    window.onload, readyState:complete

    setTimeout , readyState:complete

IE9:


    add DOM onload, readyState:interactive

    external script defer (1), readyState:interactive

    internal script defer, readyState:interactive

    external script defer (2), readyState:interactive

    add DOM in delay script, readyState:interactive

    jQuery ready, readyState:interactive

    onreadystatechange, readyState:complete

    window.onload, readyState:complete

    setTimeout , readyState:complete

DOM Ready实现代码

下面是实现DOM Ready事件的函数代码, 与jQuery的相比, 除了"__proxy函数"(在后面会讲解), 其他的依赖函数都在ready的定义中, 易于理解和维护. 并且自己实现更加具有灵活性, 加入了时间延时已经传递window对象的能力:


    /**

            Dom Ready Event

            */

    ready : function( callback , delay, win){

    win = win || this.win || window;

    var doc = win.document;

    delay = delay || 0;

    this.domReadyMonitorRunTimes = 0;

    //将时间函数放入数组, 在DomReady时一起执行.

    this.readyFuncArray = this.readyFuncArray || [];

    this.readyFuncArray.push({func:callback, delay:delay, done:false});

    //domReadyMonitor为监控进程的事件处理函数

    var domReadyMonitor = (function(){

    var isReady = false;

    this.domReadyMonitorRunTimes++;

    //对于非iframe嵌套的ie6,7,8浏览器, 使用doScroll判断Dom Ready.

    if(this.browser.ie && this.browser.ie<9 && !win.frameElement){

    try {

    doc.documentElement.doScroll("left");

    isReady = true;

    } 

    catch(e) {

    }

    }

    //非ie浏览器

    //如果window.onload和DOMContentLoaded事件都绑定失败, 则使用定时器函数判断readyState.                

    else if(doc.readyState==="complete" || this.domContentLoaded ){

    isReady = true;

    }

    //对于某些特殊页面, 如果readyState永远不能为complete, 设置了一个最大运行时间5分钟. 超过了最大运行时间则销毁定时器.

    //定时器销毁不影响window.onload和DOMContentLoaded事件的触发.

    else{

    if(this.domReadyMonitorRunTimes > 300000){

    if(this.domReadyMonitorId){

    win.clearInterval(this.domReadyMonitorId);

    this.domReadyMonitorId = null;

    }

    return;

    }

    }        

    //执行ready集合中的所有函数

    if(isReady){

    try{

    if(this.readyFuncArray && this.readyFuncArray.length){

    for(var i=0, count=this.readyFuncArray.length; i<count; i++){

    var item = this.readyFuncArray[i];

    if(!item || !item.func || item.done){

    continue;

    }                                    

    if(!item.delay){    

    item.done = true;

    item.func();

    }

    else{

    item.done = true;

    win.setTimeout(item.func, item.delay);

    }

    }

    }

    }

    catch(ex){

    throw ex;

    }

    finally{

    if(this.domReadyMonitorId){

    win.clearInterval(this.domReadyMonitorId);

    this.domReadyMonitorId = null;

    }

    }

    }

    }).__proxy(this);    

    /**

                domContentLoadedHandler直接执行所有ready函数.

                没使用传参的形式是因为ff中的定时器函数会传递一个时间参数.

                */

    var domContentLoadedHandler = (function(){

    this.domContentLoaded = true;

    domReadyMonitor();

    }).__proxy(this);

    //启动DomReady监控进程

    if(!this.domReadyMonitorStarted){

    this.domReadyMonitorStarted = true;    

    this.domReadyMonitorId = win.setInterval( domReadyMonitor, 50);

    // Mozilla, Opera and webkit nightlies currently support this event

    if ( doc.addEventListener ) {

    // Use the handy event callback

    doc.addEventListener( "DOMContentLoaded", domContentLoadedHandler, false );

    // A fallback to window.onload, that will always work

    win.addEventListener( "load", domContentLoadedHandler, false );                

    }

    else if(doc.attachEvent){

    // A fallback to window.onload, that will always work

    win.attachEvent( "onload", domContentLoadedHandler, false );    

    }

    }                    

    }

上面的ready函数, 使用了一个Function对象的__proxy方法. 这是因为ready函数定义在一个使用JSON格式创建的对象中:


    var MyClass = {

    ready : function(){}

    }

“__proxy”函数用于修改实现函数的this上下文, 与jQuery中的proxy函数类似, 但是为了使用更加优雅的语法, 所以注入到了Function原型中. 如果不需要修改this可以自行ready函数中对"___proxy"函数的依赖.

"__proxy"函数代码如下:


    //扩展function函数原型。为所有的function对象添加proxy函数，用于修改函数的上下文。

    Function.prototype.__proxy = function(context){

    var method = this;

    return function () {

    return method.apply(context || {}, arguments);

    };

    };

使用举例:


       1:  

       2: //正常使用

       3: this.U.ready( this.windowOnLoadHandler );

       4: //延时2秒加载

       5: this.U.ready(this.windowOnLoadDelayHandler, 2000);

结尾

如果大家发现上面的实现有Bug, 请在回复中反馈. 谢谢大家!

因为近期忙碌, 一直没有来得及推广我的"jQuery风暴"一书. 看到上一次出版前的推广帖子, 有人反馈了一些问题, 个人凭良心说, 书说不上技术讨论的有多深, 但是一定是阅读和学习起来最容易的. 里面的错别字问题的确蛋疼, 各位就多多包涵吧 T_T

本文链接

原码, 反码, 补码详解

2011-03-30T13:56:00Z

本篇文章讲解了计算机的原码, 反码和补码. 并且进行了深入探求了为何要使用反码和补码, 以及更进一步的论证了为何可以用反码, 补码的加法计算原码的减法. 论证部分如有不对的地方请各位牛人帮忙指正! 希望本文对大家学习计算机基础有所帮助!

一. 机器数和真值

在学习原码, 反码和补码之前, 需要先了解机器数和真值的概念.

1、机器数

一个数在计算机中的二进制表示形式, 叫做这个数的机器数。机器数是带符号的，在计算机用一个数的最高位存放符号, 正数为0, 负数为1.

比如，十进制中的数 +3 ，计算机字长为8位，转换成二进制就是00000011。如果是 -3 ，就是 10000011 。

那么，这里的 00000011 和 10000011 就是机器数。

2、真值

因为第一位是符号位，所以机器数的形式值就不等于真正的数值。例如上面的有符号数 10000011，其最高位1代表负，其真正数值是 -3 而不是形式值131（10000011转换成十进制等于131）。所以，为区别起见，将带符号位的机器数对应的真正数值称为机器数的真值。

例：0000 0001的真值 = +000 0001 = +1，1000 0001的真值 = –000 0001 = –1

二. 原码, 反码, 补码的基础概念和计算方法.

在探求为何机器要使用补码之前, 让我们先了解原码, 反码和补码的概念.对于一个数, 计算机要使用一定的编码方式进行存储. 原码, 反码, 补码是机器存储一个具体数字的编码方式.

1. 原码

原码就是符号位加上真值的绝对值, 即用第一位表示符号, 其余位表示值. 比如如果是8位二进制:

[+1]_原 = 0000 0001

[-1]_原 = 1000 0001

第一位是符号位. 因为第一位是符号位, 所以8位二进制数的取值范围就是:

[1111 1111 , 0111 1111]

即

[-127 , 127]

原码是人脑最容易理解和计算的表示方式.

2. 反码

反码的表示方法是:

正数的反码是其本身

负数的反码是在其原码的基础上, 符号位不变，其余各个位取反.

[+1] = [00000001]_原 = [00000001]_反

[-1] = [10000001]_原 = [11111110]_反

可见如果一个反码表示的是负数, 人脑无法直观的看出来它的数值. 通常要将其转换成原码再计算.

3. 补码

补码的表示方法是:

正数的补码就是其本身

负数的补码是在其原码的基础上, 符号位不变, 其余各位取反, 最后+1. (即在反码的基础上+1)

[+1] = [00000001]_原 = [00000001]_反 = [00000001]_补

[-1] = [10000001]_原 = [11111110]_反 = [11111111]_补

对于负数, 补码表示方式也是人脑无法直观看出其数值的. 通常也需要转换成原码在计算其数值.

三. 为何要使用原码, 反码和补码

在开始深入学习前, 我的学习建议是先"死记硬背"上面的原码, 反码和补码的表示方式以及计算方法.

现在我们知道了计算机可以有三种编码方式表示一个数. 对于正数因为三种编码方式的结果都相同:

[+1] = [00000001]_原 = [00000001]_反 = [00000001]_补

所以不需要过多解释. 但是对于负数:

[-1] = [10000001]_原 = [11111110]_反 = [11111111]_补

可见原码, 反码和补码是完全不同的. 既然原码才是被人脑直接识别并用于计算表示方式, 为何还会有反码和补码呢?

首先, 因为人脑可以知道第一位是符号位, 在计算的时候我们会根据符号位, 选择对真值区域的加减. (真值的概念在本文最开头). 但是对于计算机, 加减乘数已经是最基础的运算, 要设计的尽量简单. 计算机辨别"符号位"显然会让计算机的基础电路设计变得十分复杂! 于是人们想出了将符号位也参与运算的方法. 我们知道, 根据运算法则减去一个正数等于加上一个负数, 即: 1-1 = 1 + (-1) = 0 , 所以机器可以只有加法而没有减法, 这样计算机运算的设计就更简单了.

于是人们开始探索将符号位参与运算, 并且只保留加法的方法. 首先来看原码:

计算十进制的表达式: 1-1=0

1 - 1 = 1 + (-1) = [00000001]_原 + [10000001]_原 = [10000010]_原 = -2

如果用原码表示, 让符号位也参与计算, 显然对于减法来说, 结果是不正确的.这也就是为何计算机内部不使用原码表示一个数.

为了解决原码做减法的问题, 出现了反码:

计算十进制的表达式: 1-1=0

1 - 1 = 1 + (-1) = [0000 0001]_原 + [1000 0001]_原= [0000 0001]_反 + [1111 1110]_反 = [1111 1111]_反 = [1000 0000]_原 = -0

发现用反码计算减法, 结果的真值部分是正确的. 而唯一的问题其实就出现在"0"这个特殊的数值上. 虽然人们理解上+0和-0是一样的, 但是0带符号是没有任何意义的. 而且会有[0000 0000]_原和[1000 0000]_原两个编码表示0.

于是补码的出现, 解决了0的符号以及两个编码的问题:

1-1 = 1 + (-1) = [0000 0001]_原 + [1000 0001]_原 = [0000 0001]_补 + [1111 1111]_补 = [0000 0000]_补=[0000 0000]_原

这样0用[0000 0000]表示, 而以前出现问题的-0则不存在了.而且可以用[1000 0000]表示-128:

(-1) + (-127) = [1000 0001]_原 + [1111 1111]_原 = [1111 1111]_补 + [1000 0001]_补 = [1000 0000]_补

-1-127的结果应该是-128, 在用补码运算的结果中, [1000 0000]_补就是-128. 但是注意因为实际上是使用以前的-0的补码来表示-128, 所以-128并没有原码和反码表示.(对-128的补码表示[1000 0000]补算出来的原码是[0000 0000]_原, 这是不正确的)

使用补码, 不仅仅修复了0的符号以及存在两个编码的问题, 而且还能够多表示一个最低数. 这就是为什么8位二进制, 使用原码或反码表示的范围为[-127, +127], 而使用补码表示的范围为[-128, 127].

因为机器使用补码, 所以对于编程中常用到的32位int类型, 可以表示范围是: [-2³¹, 2³¹-1] 因为第一位表示的是符号位.而使用补码表示时又可以多保存一个最小值.

四原码, 反码, 补码再深入

计算机巧妙地把符号位参与运算, 并且将减法变成了加法, 背后蕴含了怎样的数学原理呢?

将钟表想象成是一个1位的12进制数. 如果当前时间是6点, 我希望将时间设置成4点, 需要怎么做呢?我们可以:

1. 往回拨2个小时: 6 - 2 = 4

2. 往前拨10个小时: (6 + 10) mod 12 = 4

3. 往前拨10+12=22个小时: (6+22) mod 12 =4

2,3方法中的mod是指取模操作, 16 mod 12 =4 即用16除以12后的余数是4.

所以钟表往回拨(减法)的结果可以用往前拨(加法)替代!

现在的焦点就落在了如何用一个正数, 来替代一个负数. 上面的例子我们能感觉出来一些端倪, 发现一些规律. 但是数学是严谨的. 不能靠感觉.

首先介绍一个数学中相关的概念: 同余

同余的概念

两个整数a，b，若它们除以整数m所得的余数相等，则称a，b对于模m同余

记作 a ≡ b (mod m)

读作 a 与 b 关于模 m 同余。

举例说明:

4 mod 12 = 4

16 mod 12 = 4

28 mod 12 = 4

所以4, 16, 28关于模 12 同余.

负数取模

正数进行mod运算是很简单的. 但是负数呢?

下面是关于mod运算的数学定义:

上面是截图, "取下界"符号找不到如何输入(word中粘贴过来后乱码). 下面是使用"L"和"J"替换上图的"取下界"符号:

x mod y = x - y L x / y J

上面公式的意思是:

x mod y等于 x 减去 y 乘上 x与y的商的下界.

以 -3 mod 2 举例:

-3 mod 2

= -3 - 2xL -3/2 J

= -3 - 2xL-1.5J

= -3 - 2x(-2)

= -3 + 4 = 1

所以:

(-2) mod 12 = 12-2=10

(-4) mod 12 = 12-4 = 8

(-5) mod 12 = 12 - 5 = 7

开始证明

再回到时钟的问题上:

回拨2小时 = 前拨10小时

回拨4小时 = 前拨8小时

回拨5小时= 前拨7小时

注意, 这里发现的规律!

结合上面学到的同余的概念.实际上:

(-2) mod 12 = 10

10 mod 12 = 10

-2与10是同余的.

(-4) mod 12 = 8

8 mod 12 = 8

-4与8是同余的.

距离成功越来越近了. 要实现用正数替代负数, 只需要运用同余数的两个定理:

反身性:

a ≡ a (mod m)

这个定理是很显而易见的.

线性运算定理:

如果a ≡ b (mod m)，c ≡ d (mod m) 那么:

(1)a ± c ≡ b ± d (mod m)

(2)a * c ≡ b * d (mod m)

如果想看这个定理的证明, 请看:http://baike.baidu.com/view/79282.htm

所以:

7 ≡ 7 (mod 12)

(-2) ≡ 10 (mod 12)

7 -2 ≡ 7 + 10 (mod 12)

现在我们为一个负数, 找到了它的正数同余数. 但是并不是7-2 = 7+10, 而是 7 -2 ≡ 7 + 10 (mod 12) , 即计算结果的余数相等.

接下来回到二进制的问题上, 看一下: 2-1=1的问题.

2-1=2+(-1) = [0000 0010]_原 + [1000 0001]_原= [0000 0010]_反 + [1111 1110]_反

先到这一步, -1的反码表示是1111 1110. 如果这里将[1111 1110]认为是原码, 则[1111 1110]原 = -126, 这里将符号位除去, 即认为是126.

发现有如下规律:

(-1) mod 127 = 126

126 mod 127 = 126

即:

(-1) ≡ 126 (mod 127)

2-1 ≡ 2+126 (mod 127)

2-1 与 2+126的余数结果是相同的! 而这个余数, 正式我们的期望的计算结果: 2-1=1

所以说一个数的反码, 实际上是这个数对于一个膜的同余数. 而这个膜并不是我们的二进制, 而是所能表示的最大值! 这就和钟表一样, 转了一圈后总能找到在可表示范围内的一个正确的数值!

而2+126很显然相当于钟表转过了一轮, 而因为符号位是参与计算的, 正好和溢出的最高位形成正确的运算结果.

既然反码可以将减法变成加法, 那么现在计算机使用的补码呢? 为什么在反码的基础上加1, 还能得到正确的结果?

2-1=2+(-1) = [0000 0010]_原 + [1000 0001]_原 = [0000 0010]_补 + [1111 1111]_补

如果把[1111 1111]当成原码, 去除符号位, 则:

[0111 1111]_原 = 127

其实, 在反码的基础上+1, 只是相当于增加了膜的值:

(-1) mod 128 = 127

127 mod 128 = 127

2-1 ≡ 2+127 (mod 128)

此时, 表盘相当于每128个刻度转一轮. 所以用补码表示的运算结果最小值和最大值应该是[-128, 128].

但是由于0的特殊情况, 没有办法表示128, 所以补码的取值范围是[-128, 127]

本人一直不善于数学, 所以如果文中有不对的地方请大家多多包含, 多多指点!

本文链接

“jQuery风暴” 推荐及配套代码下载

2011-03-23T16:28:00Z

近一年没有更新博客. 这一年我进行了我的第一次跳槽和转型. 从架构到一名前端开发, 这个转型是纠结的.现在我是百度的一名前端开发工程师.

“从零学习jQuery”系列教程收到了很多人喜欢, 这一年在经历转型的同时, 也完成了一本介绍jQuery的书: “jQuery风暴”

在这里向大家郑重推荐这本书. 写书的时候jQuery还是1.3.2, 随后更新了到了1.4, 但是在已经交稿后, jQuery又推出了1.5版本. 所以虽然本书在2011年3月底四月初就可以购买到, 但是依然是基于1.4版本的jQuery进行讲解. 针对1.5的新特性, 我将随后通过博文进行讲解和说明.

“jQuery风暴”在编写的过程中, 我脑子里只有一个想法:要让这本书易于学习. 本人生性愚钝又健忘, 随意希望写出来的东西是能够让愚钝的自己在忘记的时候, 能够舒舒服服的看懂. 所以也许这本书没有深入剖析jQuery的所有代码, 但是一定会让读者能够建立完整的知识体系.现在都讲究用户体验, 也许我追求的就是提供一种更好的“阅读体验”.不过因为本人使用拼音,也许书中会有些错别字,如果编辑和校对人员也没有帮忙修改的话, 还请大家多多见谅.

本书的内容, 要比“从零学习jQuery”好上几个层次.因为写这本书花了一年多的时间, 投入了很多心血.而其实写作的稿费还不够一个月的工资. 可以说这不是一份很有性价比的事情. 写书和写博客不同, 写博客可以洋洋洒洒十分随意, 而写书一定要严谨细致.下面会提供本书的第一章的PDF文件, 这是出版社允许发布的.另外还有本人私自公开的未经过校验修改的第二章内容:

jQuery风暴目录[见本文最后]

jQuery风暴第一章 jQuery入门(pdf格式, 出版社提供)

[下载地址1-从我的服务器] [下载地址2-博客园]

jQuery风暴第二章必须知道的javascript知识(word格式, 未经过校验, 非最后出版版本)

[下载地址1-从我的服务器(doc格式未压缩)] [下载地址2-博客园(rar压缩文件)]

jQuery风暴配套代码下载(代码已经全部更新到jQuery 1.5.1版本)

[下载地址1-从我的服务器] [下载地址2-博客园]

出版公司网址:http://www.dozan.cn/

本书相关内容:http://www.dozan.cn/archives/196.html

另外从这一时刻起, 也意味着我将回归博客园. 十分感谢那些关注我的博客的童鞋们. 希望大家多多支持这本书. 以后我也会在博客园发布更多前端开发的作品!

最后, 发现出版社给的宣传资料中, 把我的感谢CCTV感谢MTV的致词都删除了, 在这里补充上, 多谢我们家的领导, 我的精神支柱, 王雪同学!迫于压力, 大家懂得!

本书封面, 作者介绍及宣传资料

前言

jQuery无疑是现在最流行的脚本类库之一。jQuery可以帮助用户轻松地将动态功能应用到网页，而且能最小化代码量。jQuery有着丰富而绚丽的应用，包括访问部分网页、快速修改网页内容、添加动画、jQuery UI控件的应用、应用AJAX技术、打造自己的脚本框架、开发热门的LBS（Location Based Service）应用、jQuery Mobile开发移动互联网服务等。

随着用户对网站体验的要求越来越高，在用户至上这一需求的推动下，作为开发者或者网站前台设计师而言，如果能在B/S的网站架构下真正用好jQuery来提高用户体验和满意度，那么他或许能够更加自信，在职场中也能把握更大的主动权。

这本书的特点有哪些?

如果没有透彻理解JavaScript的精髓，那么对于jQuery的深入应用将缺乏基石。因此本书特别安排了内容来讲解JavaScript，内容涉及命名规范、function、this指针、DOM、JSON等。有了这些基础之后，我们开始踏上jQuery之旅，内容涉及如何利用选择器把效果应用到段落和列表、事件处理和对不同表单元素执行验证的技术、应用视觉效果、导航、AJAX、jQuery UI和打造属于自己的jQuery脚本框架。

随着LBS（Location Based Service）的应用越来越广泛，本书还专门讲解了百度地图的开发。jQuery Mobile给移动互联网的应用开发提供了便利性，本书在第一时间研究jQuery Mobile，并把相关的心得呈现出来。

如果你对JavaScript、HTML、CSS和jQuery稍有了解，那么这本书正是为你而准备的。因为本书涵盖了利用jQuery展开工作时可能遇到的大多数问题，而且本书用通俗而浅显的文字、个性化的应用案例，给出了学习jQuery的范例，用来解释每一个新概念，并且每个范例都提供完整的代码。

本书对于知识的组织、整理、归类，以及如何让读者能够建立完整的jQuery知识体系进行了自己独特的探索。此外，jQuery的大版本已经更新到了1.4，这一版本的jQuery有了大量的更新，比如对于函数重新进行了分类，推出了全新的API文档，这相当于重新整理了jQuery的知识体系结构。所以，本书写作目的不仅仅是讲解jQuery中的技术知识，更侧重建立完整清晰的jQuery知识体系，让读者知道jQuery的骨架，以后也能够通过自己深入的学习让羽翼更加丰满。

这本书适合你吗？

听说过jQuery，明白jQuery在用户体验方面很“给力”，迫切想掌握该框架的您。
了解JavaScript、HTML、CSS，想让网站交互性更加完美的您。
接触过jQuery，但是理解不是那么深刻，特别对jQuery 1.4新特性很着迷的您。
天天接触jQuery，但是不晓得怎么来打造个性化jQuery脚本框架的您。
对LBS（Location Based Service）已经如雷贯耳了，希望开发适合自己应用的您。
刚刚听说jQuery Mobile推出了，正在琢磨着如何改善移动互联网体验的您。

能学到什么？

使用jQuery的API文档的技巧。
把效果应用到段落和列表。
灵活设置页面布局和页面导航。
丰富的事件处理机制和动画效果。
jQuery UI完美应用。
自定义和封装自己的jQuery框架。
jQuery与百度地图构建LBS（Location Based Service）热门应用。
jQuery Mobile，开发基于移动互联网平台的应用。

本书涉及哪些jQuery的新特性？

1. 完美的JS智能提示支持

2. 功能强大的选择器（支持CSS1-3选择器及各种功能强大的选择器）

3. 性能最佳的选择器

4. 支持多种浏览器

IE 6.0+、 FF 2+、Safari 3.0+、Opera 9.0+、Chrome。

5. 优雅的链式语法

$(".myClass").css("color", "red").show();

6. AJAX操作

$("#divResult").load("../data/AjaxGetCityInfo.aspx"， { "resultType": "html" });

7. Datepicker日历控件

8. Dialog对话框控件

9. Tab控件

10. Accordion手风琴菜单控件

11. Progressbar进度条控件

12. Slider滑动条控件

13. Button按钮控件

14. Autocomplete自动提示控件

15. 易于扩展（基于jQuery开发的日历框）

16. jQuery Mobile（开发基于移动互联网平台的炫丽应用）

致谢

写作的过程漫长而且艰辛，历时一年多，甚至跨越了jQuery版本（在刚开始写作时还是1.3.2版本）。

在写作本书的时候，我脑子里总是不停地思考，如何把知识讲解得简单，如何让读者更容易读懂，阅读起来更加流畅。因为我自己就常常遇到看书时，发现书中的知识过于跳跃或者语言晦涩很难理解的情况。但是为了易于读者理解本书的内容，本书也牺牲了一些展示复杂代码和技术的机会。如果在你一口气看完全书后，有跃跃欲试的感觉，甚至感觉还不过瘾的话，那么说明你上道了，这总比看了一半郁闷地扔掉本书要好多了。

本书代码与支持

为了低碳生活，本书没有配光盘，而是采用网上下载代码的方式。本书的源代码下载，以及有疑问想询问作者，可以访问作者的博客：http://www.cnblogs.com/zhangziqiu。更多的资料也可以从http://www.dozan.cn网站上获取。

jQuery风暴--目录

第 1 章 jQuery 入门 ........................................................................................................ 1
1.1 认识jQuery ................................................................................................................. 2
1.1.1 认识jQuery ..................................................................................................... 2
1.1.2 jQuery 之美 ..................................................................................................... 3
1.1.3 jQuery 与其他脚本类库的比较 ...................................................................... 5
1.2 上手jQuery ................................................................................................................. 6
1.2.1 jQuery 版本介绍 ............................................................................................. 6
1.2.2 在Visual Studio 中使用jQuery ...................................................................... 7
1.2.3 在Aptana 中使用jQuery ................................................................................ 8
1.3 Hello jQuery 实例 ...................................................................................................... 10
1.3.1 添加脚本引用 ................................................................................................ 10
1.3.2 添加DOM 元素 ............................................................................................. 11
1.3.3 创建页面脚本对象 ......................................................................................... 11
1.4 小结 ............................................................................................................................ 12

第2 章必须知道的JavaScript 知识 .............................................................................. 13
2.1 JavaScript 基础 ........................................................................................................... 14
2.1.1 JavaScript 与ECMAScript ............................................................................. 14
2.1.2 JavaScript 中的值类型和引用类型 ............................................................... 14
2.1.3 JavaScript 中的原始类型 ............................................................................... 15
2.1.4 undefined、null 和typeof 运算符 ................................................................. 15
2.1.5 变量声明 ........................................................................................................ 17
2.1.6 JavaScript 命名规范 ....................................................................................... 17
2.1.7 变量的作用域与闭包 ..................................................................................... 18
2.2 悟透JavaScript 中的function ................................................................................... 20
2.2.1 使用function 声明方法和类型 ..................................................................... 20
2.2.2 function 的本质 .............................................................................................. 21
2.2.3 new 运算符 .................................................................................................... 21
2.2.4 function 的arguments 参数对象 .................................................................... 22
2.2.5 理解this 指针 ................................................................................................. 22
2.3 JavaScript 中的原型 ................................................................................................... 24
2.3.1 使用原型实现JavaScript 的面向对象 .......................................................... 24
2.3.2 使用原型链实现继承 ..................................................................................... 25
2.4 DOM ........................................................................................................................... 26
2.4.1 什么是DOM .................................................................................................. 26
2.4.2 操作HTML DOM 对象 ................................................................................. 26
2.4.3 DOM 元素与HTML 元素 ............................................................................. 28
2.5 其他JavaScript 秘籍 .................................................................................................. 29
2.5.1 数据通信格式JSON ...................................................................................... 29
2.5.2 动态语言——eval .......................................................................................... 31
2.5.3 JavaScript 中的逻辑运算符 ........................................................................... 32
2.6 小结 ............................................................................................................................ 35

第3 章 jQuery 核心基础 ................................................................................................ 36
3.1 jQuery 对象 ................................................................................................................ 37
3.1.1 什么是jQuery 对象 ....................................................................................... 37
3.1.2 jQuery 对象深入解析 .................................................................................... 37
3.1.3 jQuery 对象转换为DOM 对象 ..................................................................... 38
3.1.4 DOM 对象转化为jQuery 对象 ..................................................................... 39
3.1.5 jQuery 对象的链式操作 ................................................................................ 39
3.1.6 “$”变量的使用 ........................................................................................... 40
3.1.7 解决多类库冲突——“$”变量冲突问题 ................................................... 41
3.2 jQuery 文档处理程序 ................................................................................................ 42
3.2.1 jQuery 文档处理程序介绍............................................................................. 42
3.2.2 文档处理程序的优势 ..................................................................................... 43
3.2.3 jQuery 文档处理程序深入解析 ..................................................................... 44
3.2.4 jQuery 文档处理程序注意事项 ..................................................................... 46
3.3 jQuery 帮助文档 ........................................................................................................ 49
3.3.1 jQuery API 在线帮助文档 ............................................................................. 49
3.3.2 jQuery API 在线帮助文档分类 ..................................................................... 50
3.3.3 jQuery API 中文帮助文档 ............................................................................. 51
3.4 小结 ............................................................................................................................ 52

第4 章万能的jQuery 选择器 ........................................................................................ 53
4.1 jQuery 选择器基础 .................................................................................................... 54
4.1.1 什么是jQuery 选择器 ................................................................................... 54
4.1.2 jQuery 选择器核心函数 ................................................................................ 54
4.1.3 jQuery 选择器分类 ........................................................................................ 55
4.1.4 使用jQuery 选择器实验室............................................................................ 55
4.1.5 选择器使用技巧............................................................................................. 57
4.2 基础选择器 ................................................................................................................ 59
4.2.1 基础选择器列表............................................................................................. 59
4.2.2 基础选择器使用要点 ..................................................................................... 59
4.3 层次选择器 ................................................................................................................ 59
4.3.1 层次选择器列表............................................................................................. 60
4.3.2 层次选择器使用要点 ..................................................................................... 60
4.4 基本过滤器 ................................................................................................................ 61
4.4.1 基本过滤器列表............................................................................................. 61
4.4.2 基本过滤器使用要点 ..................................................................................... 62
4.5 内容过滤器 ................................................................................................................ 63
4.5.1 内容过滤器列表............................................................................................. 63
4.5.2 内容过滤器使用要点 ..................................................................................... 63
4.6 可见性过滤器 ............................................................................................................ 63
4.6.1 可见性过滤器列表 ......................................................................................... 63
4.6.2 可见性过滤器使用要点 ................................................................................. 64
4.7 属性过滤器 ................................................................................................................ 64
4.7.1 属性过滤器列表............................................................................................. 64
4.7.2 属性过滤器使用要点 ..................................................................................... 65
4.8 子元素过滤器 ............................................................................................................ 65
4.8.1 子元素过滤器列表 ......................................................................................... 65
4.8.2 子元素过滤器使用要点 ................................................................................. 66
4.9 表单类别过滤器 ........................................................................................................ 66
4.9.1 表单类别过滤器列表 ..................................................................................... 66
4.9.2 表单类别过滤器使用要点 ............................................................................. 67
4.10 表单属性过滤器 ...................................................................................................... 68
4.10.1 表单属性过滤器列表 ................................................................................... 68
4.10.2 表单属性过滤器使用要点 ........................................................................... 68
4.11 小结 .......................................................................................................................... 69

第5 章管理 jQuery 对象集合 ........................................................................................ 70
5.1 动态创建元素 ............................................................................................................ 71
5.1.1 使用JavaScript 创建对象 .............................................................................. 71
5.1.2 使用jQuery 创建对象 ................................................................................... 72
5.1.3 创建对象常见错误 ......................................................................................... 73
5.2 过滤函数——筛选对象集合 .................................................................................... 74
5.2.1 过滤函数列表 ................................................................................................ 74
5.2.2 过滤函数要点 ................................................................................................ 74
5.3 查找函数——找到目标对象 .................................................................................... 76
5.3.1 查找函数列表 ................................................................................................ 77
5.3.2 查找函数要点 ................................................................................................ 78
5.4 串联函数——操作对象链 ........................................................................................ 80
5.4.1 串联函数列表 ................................................................................................ 80
5.4.2 串联函数要点 ................................................................................................ 80
5.5 小结 ............................................................................................................................ 82

第6 章使用 jQuery 操作元素 ........................................................................................ 83
6.1 DOM 属性与HTML 元素属性 ................................................................................. 84
6.1.1 区分DOM 属性与HTML 元素属性 ............................................................ 84
6.1.2 使用JavaScript 操作DOM 属性 ................................................................... 85
6.1.3 使用JavaScript 操作HTML 元素属性 ......................................................... 86
6.2 使用jQuery 操作DOM ............................................................................................. 87
6.2.1 使用jQuery 操作元素属性............................................................................ 88
6.2.2 使用jQuery 操作元素CSS ........................................................................... 92
6.2.3 偏移量offset 分类函数 .................................................................................. 96
6.2.4 用于测量的Dimensions 分类函数 ................................................................ 98
6.2.5 使用jQuery 改变元素内容.......................................................................... 100
6.3 小结 .......................................................................................................................... 102

第 7 章事件与事件对象 ............................................................................................... 103
7.1 DOM 事件模型 ........................................................................................................ 104
7.1.1 DOM 事件流 ................................................................................................ 104
7.1.2 事件处理函数 .............................................................................................. 106
7.1.3 事件对象 ...................................................................................................... 107
7.2 jQuery 事件模型 ...................................................................................................... 108
7.2.1 jQuery 中的事件流 ...................................................................................... 108
7.2.2 jQuery 事件绑定函数 .................................................................................. 110
7.2.3 事件处理函数中的this 指针 ....................................................................... 115
7.2.4 jQuery 事件对象 .......................................................................................... 116
7.3 jQuery 特殊事件 ...................................................................................................... 122
7.3.1 对象监听函数live 和die ............................................................................. 122
7.3.2 改进的鼠标事件mouseenter、mouseleave 和hover ................................. 124
7.3.3 改进的焦点事件focusin 和focusout .......................................................... 126
7.4 小结 .......................................................................................................................... 127

第 8 章使用 AJAX 增加用户体验 ................................................................................ 128
8.1 原始AJAX 与jQuery 中的AJAX .......................................................................... 129
8.1.1 原始AJAX 应用举例 .................................................................................. 129
8.1.2 jQuery 中的AJAX 快餐 .............................................................................. 130
8.2 使用jQuery 的AJAX 函数进行页面交互 ............................................................. 130
8.2.1 AJAX 快捷函数 ........................................................................................... 131
8.2.2 底层函数ajax()和ajaxSetup() ..................................................................... 136
8.2.3 AJAX 帮助函数 ........................................................................................... 141
8.2.4 AJAX 全局事件 ........................................................................................... 145
8.3 跨域的AJAX-JSONP .............................................................................................. 146
8.3.1 什么是JSONP .............................................................................................. 146
8.3.2 JSONP 实现原理 .......................................................................................... 148
8.3.3 JSONP 在jQuery 中的应用 ......................................................................... 148
8.4 小结 .......................................................................................................................... 149

第 9 章 jQuery 动画——让页面动起来......................................................................... 150
9.1 jQuery 动画基础 ...................................................................................................... 151
9.1.1 动画入门实例 .............................................................................................. 151
9.1.2 jQuery 动画分类 .......................................................................................... 152
9.1.3 jQuery 动画实验室 ...................................................................................... 152
9.1.4 jQuery 动画时间参数 .................................................................................. 152
9.1.5 jQuery 动画回调函数 .................................................................................. 153
9.2 基础动画函数 .......................................................................................................... 153
9.2.1 基础动画实例 .............................................................................................. 154
9.2.2 基础动画详解 .............................................................................................. 154
9.3 渐变动画函数 .......................................................................................................... 155
9.3.1 渐变动画实例 .............................................................................................. 156
9.3.2 渐变动画详解 .............................................................................................. 156
9.4 滑动动画函数 .......................................................................................................... 157
9.4.1 滑动动画实例 .............................................................................................. 158
9.4.2 滑动动画详解 .............................................................................................. 158
9.5 自定义动画函数 ...................................................................................................... 158
9.5.1 jQuery 队列 .................................................................................................. 159
9.5.2 动画全局开关 .............................................................................................. 161
9.5.3 停止元素动画 .............................................................................................. 162
9.5.4 自定义动画效果........................................................................................... 164
9.6 小结 .......................................................................................................................... 168

第 10 章 jQuery 工具函数 ............................................................................................ 169
10.1 jQuery 工具函数基础 ............................................................................................ 170
10.1.1 工具函数说明............................................................................................. 170
10.1.2 jQuery 工具函数概览 ................................................................................ 170
10.2 浏览器特性检测 .................................................................................................... 171
10.2.1 浏览器特性检测的演变 ............................................................................. 171
10.2.2 检测浏览器类型和版本 ............................................................................. 172
10.2.3 浏览器特性检测 ......................................................................................... 174
10.3 数组和对象操作 .................................................................................................... 176
10.3.1 遍历数组和对象 ......................................................................................... 178
10.3.2 过滤数组 .................................................................................................... 178
10.3.3 数组和对象合并 ......................................................................................... 179
10.3.4 数组和对象转换 ......................................................................................... 181
10.3.5 排序和过滤DOM 元素集合 ..................................................................... 182
10.3.6 转换JSON 字符串 ..................................................................................... 183
10.4 其他工具函数 ........................................................................................................ 184
10.4.1 字符串trim 操作 ........................................................................................ 184
10.4.2 判断函数 .................................................................................................... 184
10.4.3 jQuery 中的全局eval 函数 ........................................................................ 185
10.4.4 制造一个空函数 ......................................................................................... 185
10.4.5 检查结点包含关系 ..................................................................................... 186
10.4.6 修改函数上下文 ......................................................................................... 186
10.4.7 jQuery 中的队列函数 ................................................................................ 187
10.5 扩展jQuery 工具函数 ........................................................................................... 187
10.5.1 使用JavaScript 扩展工具函数 .................................................................. 187
10.5.2 使用jQuery.extend()函数扩展工具函数 ................................................... 188
10.6 小结 ........................................................................................................................ 188

第11 章拿来主义——jQuery 插件 .............................................................................. 189
11.1 jQuery 插件基础 .................................................................................................... 190
11.1.1 jQuery 插件介绍 ......................................................................................... 190
11.1.2 区别jQuery 插件与工具函数 .................................................................... 190
11.1.3 寻找合适的jQuery 插件 ............................................................................ 191
11.1.4 合理使用jQuery 插件 ................................................................................ 191
11.2 jQuery 插件开发 .................................................................................................... 191
11.2.1 为插件起一个名字 ..................................................................................... 192
11.2.2 编写结构代码 ............................................................................................. 192
11.2.3 设计插件参数 ............................................................................................. 192
11.2.4 使用插件 ..................................................................................................... 193
11.2.5 插件开发要点 ............................................................................................. 193
11.3 实战表单验证插件 ................................................................................................ 193
11.3.1 应用实例 ..................................................................................................... 194
11.3.2 验证方法 ..................................................................................................... 196
11.3.3 验证消息 ..................................................................................................... 196
11.3.4 验证规则 ..................................................................................................... 197
11.3.5 表单提交 ..................................................................................................... 198
11.3.6 DEBUG 模式 .............................................................................................. 198
11.3.7 多表单验证 ................................................................................................. 198
11.4 实战自动完成插件 ................................................................................................ 198
11.4.1 应用实例 ..................................................................................................... 199
11.4.2 准备数据源 ................................................................................................. 201
11.4.3 设置关键函数 ............................................................................................. 201
11.4.4 为控件添加Result 事件函数 ..................................................................... 202
11.4.5 匹配中文 ..................................................................................................... 203
11.4.6 其他注意事项 ............................................................................................. 203
11.5 小结 ........................................................................................................................ 203

第12 章页面的华丽外衣——jQuery UI ...................................................................... 204
12.1 jQuery UI 基础 ....................................................................................................... 205
12.1.1 jQuery UI 简介 ........................................................................................... 205
12.1.2 jQuery UI 分类 ........................................................................................... 206
12.2 Datepicker 日历控件 .............................................................................................. 207
12.2.1 应用实例 .................................................................................................... 207
12.2.2 日历框参数 ................................................................................................ 211
12.2.3 日历框事件 ................................................................................................ 214
12.2.4 日历框方法 ................................................................................................ 215
12.3 Dialog 对话框控件 ................................................................................................ 216
12.3.1 对话框应用场景 ......................................................................................... 216
12.3.2 应用实例 .................................................................................................... 217
12.3.3 计算对话框位置 ......................................................................................... 221
12.3.4 取消冒泡和浏览器默认行为 ..................................................................... 221
12.3.5 设置动画效果与取消动画 ......................................................................... 221
12.3.6 动态提示类对话框的数据传递 ................................................................. 222
12.3.7 更换主题 .................................................................................................... 222
12.4 TAB 标签控件 ........................................................................................................ 222
12.4.1 应用实例 .................................................................................................... 222
12.4.2 注意HTML 结构 ....................................................................................... 224
12.4.3 活用事件 .................................................................................................... 225
12.5 Accordion 手风琴菜单控件................................................................................... 226
12.5.1 应用实例 .................................................................................................... 226
12.5.2 关键点讲解 ................................................................................................ 229
12.6 Progressbar 进度条控件 ........................................................................................ 230
12.6.1 应用实例 .................................................................................................... 230
12.6.2 实例讲解 .................................................................................................... 231
12.7 Slider 滑动条控件 .................................................................................................. 232
12.7.1 应用实例 .................................................................................................... 232
12.7.2 实例讲解 .................................................................................................... 234
12.8 button 按钮控件 ..................................................................................................... 234
12.8.1 应用实例 .................................................................................................... 234
12.8.2 实例讲解 .................................................................................................... 237
12.9 autocomplete 自动提示控件 .................................................................................. 238
12.9.1 应用实例 .................................................................................................... 238
12.9.2 实例讲解 .................................................................................................... 239
12.10 小结 ...................................................................................................................... 241

第13 章基于 jQuery 打造脚本框架 ............................................................................. 242
13.1 页面脚本管理 ........................................................................................................ 243
13.1.1 使用面向对象的方式管理页面脚本 ......................................................... 243
13.1.2 页面脚本事件............................................................................................. 245
13.1.3 切割脚本文件............................................................................................. 247
13.1.4 为脚本文件添加智能提示 ......................................................................... 248
13.1.5 合并及压缩脚本文件 ................................................................................. 249
13.2 公共脚本类库 ........................................................................................................ 250
13.2.1 template 模板方法 ...................................................................................... 250
13.2.2 修改函数上下文的方法 ............................................................................. 250
13.2.3 反序列化unparam()方法 ........................................................................... 251
13.2.4 操作Cookie 的方法 ................................................................................... 252
13.2.5 JSON 转换方法 .......................................................................................... 255
13.3 打造jQuery UI 控件库 .......................................................................................... 255
13.3.1 使用jQuery UI ........................................................................................... 255
13.3.2 自定义日历控件 ......................................................................................... 258
13.4 小结 ........................................................................................................................ 263

第14 章 jQuery 与百度地图实战 ................................................................................. 264
14.1 网站规划 ................................................................................................................ 265
14.1.1 网站主题 .................................................................................................... 265
14.1.2 用户人群 .................................................................................................... 265
14.1.3 盈利模式 .................................................................................................... 265
14.1.4 未来规划 .................................................................................................... 265
14.2 网站实现 ................................................................................................................ 266
14.2.1 定义页面结构............................................................................................. 266
14.2.2 实现样式 .................................................................................................... 267
14.2.3 实现页面功能............................................................................................. 268
14.2.4 页面重构 .................................................................................................... 268
14.3 脚本详解 ................................................................................................................ 269
14.3.1 百度地图API 介绍 .................................................................................... 269
14.3.2 使用百度地图API ..................................................................................... 270
14.3.3 使用页面脚本框架 ..................................................................................... 271
14.3.4 使用jQuery UI ........................................................................................... 272
14.3.5 本地搜索 .................................................................................................... 273
14.3.6 公交和驾车搜索 ......................................................................................... 275
14.4 小结 ........................................................................................................................ 277

第15 章移动脚本框架jQuery Mobile ......................................................................... 278
15.1 jQuery Mobile 介绍 ................................................................................................ 279
15.1.1 jQuery Mobile 的目的 ................................................................................ 279
15.1.2 jQuery Mobile 浏览器兼容性 .................................................................... 279
15.1.3 jQuery Mobile 特性 .................................................................................... 280
15.2 jQuery Mobile 入门 ................................................................................................ 280
15.2.1 Hello Mobile 实例 ...................................................................................... 281
15.2.2 API 分类 ..................................................................................................... 282
15.2.3 页面结构 .................................................................................................... 283
15.2.4 配置系统 .................................................................................................... 285
15.2.5 事件处理 .................................................................................................... 286
15.3 jQuery Mobile 与百度地图API 综合实例 ........................................................... 287
15.3.1 实例效果 .................................................................................................... 287
15.3.2 定制页脚 .................................................................................................... 288
15.3.3 组织页面脚本............................................................................................. 289
15.3.4 添加事件 .................................................................................................... 289
15.4 小结 ........................................................................................................................ 290

本文链接

Sandcastle 学习教程（1）基础入门

2009-12-18T03:53:00Z

目前可找到SandCastle学习资源十分有限。而据我所知能够生成帮助文档的工具目前只有SandCastle（NDoc早就已经停止更新了，参见“相关文档”中的第二篇。）有关XML注释，我曾经写过两篇文章，里面也简单介绍了如何使用SandCastle,本系列教程希望能够深入的研究SandCastle，比如SandCastle的各个组件，高级的使用技巧，如何与持续构造（FinalBuilder）继承等。本篇文档翻译自SandCastle的两篇官方文档。目前官方文档只能找到下面翻译的内容。

Cookies揭秘 [Asp.Net, Javascript]

2009-08-06T14:23:00Z

Cookies想必所有人都了解，但是未必所有人都精通。本文讲解了Cookies的各方面知识，并且提出来了最佳实践。这是笔者在日常工作中的积累和沉淀。

从零开始学习jQuery(剧场版) 你必须知道的javascript

2009-05-26T15:36:00Z

本文是jQuery系列教程的剧场版, 即和jQuery这条主线无关, 主要介绍大家平时会忽略的一些javascript细节. 适合希望巩固javascript理论知识和基础知识的开发人员阅读.

从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件

2009-05-22T03:35:00Z

本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.本文是介绍两个最常用的jQuery插件. 分别用于表单验证和自动完成提示(类似google suggest).

从零开始学习jQuery (十) jQueryUI常用功能实战

2009-05-19T13:42:00Z

本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.本文是实战篇. 使用jQueryUI完成制作网站的大部分常用功能.

在IIS上启用Gzip压缩(HTTP压缩)

2009-05-17T10:43:00Z

本文总结了如何为使用IIS托管的网站启用Gzip压缩, 从而减少网页网络传输大小, 提高用户显示页面的速度.

从零开始学习jQuery (九) jQuery工具函数

2009-05-14T05:14:00Z

本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.我们经常要使用脚本处理各种业务逻辑, 最常见的就是数组和对象的操作. jQuery工具函数为我们操作对象和数组提供了便利条件.

博客园_张子秋的博客

DOM Ready 详解

原码, 反码, 补码 详解

“jQuery风暴” 推荐及配套代码下载

Sandcastle 学习教程 （1） 基础入门

Cookies揭秘 [Asp.Net, Javascript]

从零开始学习jQuery(剧场版) 你必须知道的javascript

从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件

从零开始学习jQuery (十) jQueryUI常用功能实战

在IIS上启用Gzip压缩(HTTP压缩)

从零开始学习jQuery (九) jQuery工具函数

原码, 反码, 补码详解

Sandcastle 学习教程（1）基础入门