jQuery 技术内幕

第1章 总体架构 1
1.1 设计理念 1
1.2 总体架构 1
1.3 自调用匿名函数 4
1.4 总结 6
第2章 构造 jQuery 对象 6
2.1 构造函数 jQuery() 7
2.1.1 jQuery( selector [, context] ) 7
2.1.2 jQuery( html [, ownerDocument] )、jQuery( html, props ) 8
2.1.3 jQuery( element )、jQuery( elementArray ) 9
2.1.4 jQuery( object ) 9
2.1.5 jQuery( callback ) 10
2.1.6 jQuery( jQuery object ) 10
2.1.7 jQuery() 10
2.2 总体结构 10
2.3 jQuery.fn.init( selector, context, rootjQuery ) 13
2.3.1 12个分支 13
2.3.2 源码分析 14
2.3.3 小结 24
2.4 jQuery.buildFragment( args, nodes, scripts ) 24
2.4.1 实现原理 24
2.4.2 源码分析 25
2.4.3 小结 30
2.5 jQuery.clean( elems, context, fragment, scripts ) 31
2.5.1 实现原理 31
2.5.2 源码分析 32
2.5.3 小结 48
2.6 jQuery.extend()、jQuery.fn.extend() 48
2.6.1 如何使用 48
2.6.2 源码分析 49
2.7 原型属性和方法 53
2.7.1 .selector、.jquery、.length、.size() 54
2.7.2 .toArray()、.get( [index] ) 55
2.7.3 .each( function(index, Element) )、jQuery.each( collection, callback(indexInArray, valueOfElement) ) 56
2.7.4 .map( callback(index, domElement) )、jQuery.map( arrayOrObject, callback( value, indexOrKey ) ) 59
2.7.5 .pushStack( elements, name, arguments ) 62
2.7.6 .end() 64
2.7.7 .eq( index )、.first()、.last()、.slice( start [, end] ) 64
2.7.8 .push( valur, ... )、.sort( [orderfunc] )、.splice( start,deleteCount, value, ... ) 65
2.7.9 小结 66
2.8 静态属性和方法 67
2.8.1 jQuery.noConflict( [removeAll] ) 69
2.8.2 类型检测：jQuery.isFunction( obj )、jQuery.isArray( obj )、jQuery.isWindow( obj )、jQuery.isNumeric( value )、jQuery.type( obj )、jQuery.isPlainObject( object )、jQuery.isEmptyObject( object ) 70
2.8.3 解析 JSON 和 XML：jQuery.parseJSON( data)、jQuery.parseXML( data ) 75
2.8.4 jQuery.globalEval( code ) 81
2.8.5 jQuery.camelCase ( string ) 82
2.8.6 jQuery.nodeName ( elem, name ) 83
2.8.7 jQuery.trim( str ) 84
2.8.8 数组操作方法：jQuery.makeArray( obj )、jQuery.inArray( value, array [, fromIndex] )、jQuery.merge( first, second )、jQuery.grep( array, function(elementOfArray, indexInArray) [, invert] ) 85
2.8.9 jQuery.guid、jQuery.proxy( function, context ) 91
2.8.10 jQuery.access( elems, key, value, exec, fn( elem, key, value ), pass ) 94
2.8.11 jQuery.error( message )、jQuery.noop()、jQuery.now() 96
2.8.12 浏览器嗅探：jQuery.uaMatch( ua )、jQuery.browser 96
2.8.13 小结 98
2.9 总结 100
第3章 选择器 Sizzle 100
3.1 总体结构 101
3.2 选择器表达式 104
3.3 设计思路 105
3.4 Sizzle( selector, context, results, seed ) 107
3.5 正则 chunker 119
3.6 Sizzle.find( expr, context, isXML ) 121
3.7 Sizzle.filter( expr, set, inplace, not ) 124
3.8 Sizzle.selectors.relative 129
3.8.1 "+" 130
3.8.2 ">" 132
3.8.3 "" 133
3.8.4 "~" 134
3.8.5 dirCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) 135
3.8.6 dirNodeCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) 136
3.9 Sizzle.selectors 138
3.9.1 Sizzle.selectors.order 138
3.9.2 Sizzle.selectors.match/leftMatch 139
3.9.3 Sizzle.selectors.find 151
3.9.4 Sizzle.selectors.preFilter 154
3.9.5 Sizzle.selectors.filters 162
3.9.6 Sizzle.selectors.setFilters 165
3.9.7 Sizzle.selectors.filter 166
3.10 工具方法 176
3.10.1 Sizzle.uniqueSort( results ) 176
3.10.2 sortOrder(a, b) 177
3.10.3 Sizzle.contains( a, b ) 182
3.10.4 Sizzle.error( msg ) 182
3.10.5 Sizzle.getText( elem ) 183
3.11 便捷方法 184
3.11.1 Sizzle.matches( expr, set ) 184
3.11.2 Sizzle.matchesSelector( node, expr ) 184
3.12 jQuery 扩展 186
3.12.1 暴露 Sizzle 给 jQuery 186
3.12.2 .find( selector ) 186
3.12.3 .has( target ) 188
3.12.4 .not( selector )、.filter( selecotr ) 189
3.12.5 .is( selector ) 191
3.12.6 .closest( selectors, context ) 193
3.12.7 .index( elem ) 195
3.12.8 .add( selector, context ) 196
3.12.9 jQuery.filter( expr, elems, not ) 197
3.12.10 :animated 198
3.12.11 :hidden、:visible 199
3.13 总结 200
第4章 异步队列 Deferred Object 201
4.1 jQuery.Callbacks( flags ) 202
4.1.1 实现原理和总体结构 204
4.1.2 源码分析 205
4.1.3 小结 219
4.2 jQuery.Deferred( func ) 220
4.2.1 实现原理和总体结构 223
4.2.2 源码分析 224
4.2.3 小结 232
4.3 jQuery.when( deferreds ) 232
4.3.1 实现原理 234
4.3.2 源码分析 234
4.4 异步队列在 jQuery 中的应用 237
4.5 总结 238
第5章 数据缓存 Data 238
5.1 实现原理 239
5.1.1 为 DOM 元素附加数据 239
5.1.2 为 JavaScript 对象附加数据 241
5.2 总体结构 242
5.3 jQuery.acceptData( elem ) 244
5.4 jQuery.data( elem, name, data, pvt )、jQuery._data( elem, name, data, pvt ) 245
5.4.1 如何使用 245
5.4.2 源码分析 246
5.4.3 jQuery._data( elem, name, data ) 253
5.4.4 小结 254
5.5 .data( key, value ) 256
5.5.1 如何使用 256
5.5.2 源码分析 256
5.5.3 小结 261
5.6 jQuery.removeData( elem, name, pvt )、.removeData( key ) 262
5.6.1 如何使用 262
5.6.2 源码分析 263
5.6.4 小结 269
5.7 .removeData( key ) 270
5.8 jQuery.cleanData( elems ) 271
5.8.1 应用场景 271
5.8.2 源码分析 273
5.8.3 小结 276
5.9 jQuery.hasData( elem ) 277
5.10 总结 278
第6章 队列 Queue 279
6.1 如何使用 280
AJAX 队列 280
动画队列 + AJAX 队列 281
基于 JavaScript 对象 281
6.2 实现原理 282
6.3 总体结构 282
6.4 jQuery.queue( elem, type, data ) 284
6.5 jQuery.dequeue( elem, type ) 286
6.6 .queue( type, data ) 288
6.7 .dequeue( type ) 290
6.8 .delay( time, type ) 291
6.9 .clearQueue( type ) 292
6.10 jQuery._mark( elem, type )、jQuery._unmark( force, elem, type ) 293
6.11 .promise( type, object ) 295
6.11.1 如何使用 295
6.11.2 实现原理 296
6.11.3 源码分析 297
6.11.4 handleQueueMarkDefer( elem, type, src ) 299
6.12 总结 301
第7章 浏览器功能测试 Support 302
7.1 总体结构 302
7.2 DOM 测试（15 项） 305
7.2.1 leadingWhitespace 305
7.2.2 tbody 307
7.2.3 htmlSerialize 309
7.2.4 hrefNormalized 311
7.2.5 checkOn 313
7.2.6 noCloneChecked 315
7.2.7 optSelected 318
7.2.8 optDisabled 320
7.2.9 getSetAttribute 322
7.2.10 deleteExpando 326
7.2.11 enctype 328
7.2.12 html5Clone 330
7.2.13 radioValue 332
7.2.14 checkClone 334
7.2.15 appendChecked 337
7.3 样式测试（3 项） 339
7.3.1 style 339
7.3.2 opacity 342
7.3.3 cssFloat 346
7.4 盒模型测试（10 项） 349
7.4.1 reliableMarginRight 349
7.4.2 reliableHiddenOffsets 352
7.4.3 boxModel 355
7.4.4 inlineBlockNeedsLayout 358
7.4.5 shrinkWrapBlocks 361
7.4.6 doesNotAddBorder、doesAddBorderForTableAndCells 365
7.4.7 fixedPosition 369
7.4.8 subtractsBorderForOverflowNotVisible 372
7.4.9 doesNotIncludeMarginInBodyOffset 375
7.5 事件测试（4 项） 378
7.5.1 noCloneEvent 378
7.5.2 submitBubbles、changeBubbles、focusinBubbles 381
7.6 Ajax 测试（2 项） 383
7.6.1 ajax 383
7.6.2 cors 386
7.7 总结 387
第8章 属性操作 Attributes 392
8.1 总体结构 394
8.2 jQuery.attr( elem, name, value, pass ) 395
8.2.1 源码分析 396
8.2.2 boolHook 400
8.2.3 nodeHook 403
8.2.4 jQuery.attrHooks 404
8.2.5 小结 411
8.3 .attr( name, value ) 412
8.4 jQuery.removeAttr( elem, value ) 413
8.4.1 源码分析 414
8.4.2 小结 416
8.5 .removeAttr( name ) 416
8.6 jQuery.prop( elem, name, value ) 417
8.6.1 源码分析 417
8.6.2 jQuery.propHooks 420
8.6.3 小结 421
8.7 .prop( name, value ) 422
8.8 .removeProp( name ) 423
8.9 .addClass( className ) 424
8.9.1 源码分析 425
8.9.2 小结 427
8.10 .removeClass( [className] ) 428
8.10.1 源码分析 429
8.10.2 小结 431
8.11 .toggleClass( [className] [, switch] ) 432
8.11.1 源码分析 432
8.11.2 小结 435
8.12 .hasClass( selector ) 436
8.12.1 源码分析 436
8.12.2 小结 437
8.13 .val( [value] ) 437
8.13.1 源码分析 438
8.13.2 jQuery.valHooks 441
8.13.3 小结 445
8.14 总结 446
第9章 事件系统 Events 448
9.1 总体结构 450
9.2 实现原理 455
9.3 jQuery 事件对象 457
9.3.1 构造函数 jQuery.Event( src, props ) 459
9.3.2 原型对象 jQuery.Event.prototype 462
9.3.3 事件属性修正方法 jQuery.event.fix( event ) 466
9.4 绑定事件 475
9.4.1 .on( events [, selector] [, data] , handler(eventObject) ) 475
9.4.2 jQuery.event.add( elem, types, handler, data, selector ) 479
9.5 移除事件 491
9.5.1 .off( events [, selector] [, handler(eventObject)] ) 491
9.5.2 jQuery.event.remove( elem, types, handler, selector, mappedTypes ) 495
9.6 事件响应 504
9.6.1 主监听函数 504
9.6.2 jQuery.event.dispatch( event ) 505
9.7 手动触发事件 514
9.7.1 .trigger( eventType [, extraParameters] )、.triggerHandler( eventType [, extraParameters] ) 514
9.7.2 jQuery.event.trigger( event, data, elem, onlyHandlers ) 515
9.8 事件修正和模拟 jQuery.event.special 528
9.8.1 ready 529
9.8.2 load 530
9.8.3 focus、blur 530
9.8.4 beforeunload 531
9.8.5 mouseenter、mouseleave 532
9.8.6 submit 534
9.8.7 change 537
9.8.8 focusin、focusout 540
9.8.9 jQuery.event.simulate( type, elem, event, bubble ) 541
9.9 事件便捷方法 543
9.10 组合方法 545
9.10.1 .toggle( handler(eventObject), handler(eventObject) [, handler(eventObject)] ) 545
9.10.2 .hover(handlerIn(eventObject) [, handlerOut(eventObject)] ) 546
9.11 ready 事件 547
9.11.1 总体结构 547
9.11.2 .ready( handler ) 551
9.11.3 jQuery.bindReady() 551
9.11.4 jQuery.holdReady( hold ) 556
9.11.5 jQuery.ready( wait ) 557
9.12 总结 559
第10章 DOM 遍历 Traversing 562
10.1 总体结构 564
10.2 遍历函数 566
10.3 工具函数 569
10.3.1 jQuery.dir( elem, dir, until ) 569
10.3.2 jQuery.nth( cur, result, dir, elem ) 571
10.3.3 jQuery.sibling( n, elem ) 572
10.4 模板函数 574
10.5 总结 576
第11章 DOM 操作 Manipulation 577
11.1 总体结构 577
11.2 插入元素 579
11.2.1 核心方法 .domManip( args, table, callback ) 579
11.2.2 .append( content [, content] ) 587
11.2.3 .prepend( content [, content] ) 587
11.2.4 .before( content [, content] ) 588
11.2.5 .after( content [, content] ) 588
11.2.6 .appendTo( target )、.prependTo( target )、.insertBefore( target )、.insertAfter( target ) 589
11.2.7 .html( [value] ) 590
11.2.8 .text( [text] ) 595
11.3 删除元素 598
11.3.1 .remove( selector, keepData ) 598
11.3.2 .empty() 599
11.3.3 .detach( selector ) 599
11.4 复制元素 600
11.4.1 .clone( dataAndEvents, deepDataAndEvents ) 600
11.4.2 jQuery.clone( elem, dataAndEvents, deepDataAndEvents ) 601
11.4.3 cloneFixAttributes( src, dest ) 606
11.5 替换元素 609
11.5.1 .replaceWith( value ) 609
11.5.2 .replaceAll( target ) 612
11.6 包裹元素 612
11.6.1 .wrapAll( html ) 612
11.6.2 .wrapInner( html ) 613
11.6.3 .wrap( html ) 614
11.6.4 .unwrap() 615
11.7 总结 615
第12章 样式操作 CSS 618
12.1 内联样式、计算样式 619
12.1.1 总体结构 619
12.1.2 .css( name, value ) 621
12.1.3 jQuery.style( elem, name, value, extra ) 622
12.1.4 jQuery.css( elem, name, extra ) 628
12.1.5 curCSS( elem, name )、getComputedStyle( elem, name )、currentStyle( elem, name ) 631
12.1.6 jQuery.cssHooks 634
12.2 坐标 Offset 643
12.2.1 总体结构 643
12.2.2 .offset( options ) 644
12.2.3 jQuery.offset.setOffset( elem, options, i ) 650
12.2.4 jQuery.offset.bodyOffset( body ) 654
12.2.5 .position() 655
12.2.6 .offsetParent() 656
12.2.7 .scrollLeft( val )、.scrollTop( val ) 657
12.3 尺寸 Dimensions 659
12.3.1 总体结构 659
12.3.2 getWH( elem, name, extra ) 660
12.3.3 .innerHeight()、.innerWidth() 664
12.3.4 .outerHeight( margin )、.outerWidth( margin ) 665
12.3.5 .height( size )、.width( size ) 666
12.3.6 小结 670
12.4 总结 671
第13章 异步请求 Ajax 673
13.1 总体结构 674
13.2 jQuery.ajax( url, options ) 677
13.3 前置过滤器、请求发送器的初始化和执行 705
13.3.1 初始化 706
13.3.2 执行 709
13.4 前置过滤器 713
13.4.1 json、jsonp 713
13.4.2 script 716
13.4.3 小结 717
13.5 请求发送器 718
13.5.1 script 718
13.5.2 XMLHttpRequest 722
13.5.3 小结 733
13.6 数据转换器 733
13.6.1 初始化 734
13.6.2 执行 736
13.6.3 小结 741
13.7 Ajax 事件 742
13.8 便捷方法 744
13.8.1 jQuery.get( url, data, callback, type )、jQuery.post( url, data, callback, type ) 744
13.8.2 jQuery.getJSON( url, data, callback )、jQuery.getScript( url, callback ) 745
13.8.3 .load( url, params, callback ) 745
13.9 工具方法 750
13.9.1 .serialize() 750
13.9.2 jQuery.param( a, traditional ) 751
13.9.3 .serializeArray() 756
13.10 总结 757
第14章 动画 Effects 761
14.1 总体结构 762
14.2 动画入口 766
14.2.1 .animate( prop, speed, easing, callback ) 766
14.2.2 jQuery.speed( speed, easing, fn ) 769
14.2.3 doAnimation() 772
14.2.4 jQuery.fx( elem, options, prop ) 778
14.2.5 jQuery.fx.prototype.show() 779
14.2.6 jQuery.fx.prototype.hide() 780
14.2.7 小结 780
14.3 动画执行 781
14.3.1 jQuery.fx.prototype.custom( from, to, unit ) 781
14.3.2 jQuery.fx.tick() 784
14.3.3 jQuery.fx.prototype.step( gotoEnd ) 785
14.3.4 jQuery.easing 790
14.3.5 jQuery.fx.prototype.update() 791
14.3.6 jQuery.fx.step 791
14.4 停止动画 .stop( type, clearQueue, gotoEnd ) 793
14.5 便捷方法 797
14.5.1 生成动画样式集 genFx( type, num ) 797
14.5.2 显示隐藏 .show/hide/toggle() 798
14.5.3 渐显渐隐 .fadeIn/fadeOut/fadeTo/fadeToggle() 802
14.5.4 滑入滑出 .slideDwon/slidUp/slideToggle() 803
14.6 总结 804