jQuery 技术内幕

第1章 总体架构 1

1.1 设计理念 1

1.2 总体架构 1

1.3 自调用匿名函数 4

1.4 总结 6

第2章 ...

第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