jQuery 技术内幕

内容概要

高云，阿里巴巴资深前端开发工程师（花名墨智），拥有丰富的前端开发经验，擅长 HTML5、CSS、JavaScript 等 Web 开发技术和 Java 技术，对JavaScript相关技术的应用和实现原理有深入研究和独到见解，曾担任项目经理、前端架构师等职。个人博客 http://nuysoft.com，开源作品有 http://mockjs.com。

书籍目录

第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

作者简介

本书首先通过“总体架构”梳理了各个模块的分类、功能和依赖关系，让大家对jQuery的工作原理有大致的印象；进而通过“构造 jQuery 对象”章节分析了构造函数 jQuery() 的各种用法和内部构造过程；接着详细分析了底层支持模块的源码实现，包括：选择器 Sizzle、异步队列 Deferred、数据缓存 Data、队列 Queue、浏览器功能测试 Support；最后详细分析了功能模块的源码实现，包括：属性操作 Attributes、事件系统 Events、DOM 遍历 Traversing、DOM 操作 Manipulation、样式操作 CSS、异步请求 Ajax、动画 Effects。

本书在分析每个模块时均采用由浅入深的方式，先概述功能、用法、结构和实现原理，然后介绍关键步骤和和分析源码实现。让读者不仅知其然，而且知其所以然。事实上，本书的根本价值在于传达一种通过阅读源码快速成长的方式。无论是前端新人，还是经验丰富的老手，只要是对 JavaScript 感兴趣的开发人员，都会从本书中受益。

 jQuery 技术内幕下载 精选章节试读 更多精彩书评