-
Notifications
You must be signed in to change notification settings - Fork 0
/
jq-fundamentals.htm
executable file
·5611 lines (5575 loc) · 831 KB
/
jq-fundamentals.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<!-- saved from url=(0026)http://jqfundamentals.com/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">
<meta charset="utf-8">
<title>
jQuery Fundamentals
</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/shCore.css">
<link rel="stylesheet" type="text/css" href="css/shThemeRDark.css">
<link rel="stylesheet" type="text/css" href="css/baseline.base.css">
<link rel="stylesheet" type="text/css" href="css/baseline.type.css">
<link rel="stylesheet" type="text/css" media="print" href="css/print.css">
</head>
<body class="p180">
<div title="jQuery Fundamentals" class="book">
<div id="titlepage">
<div>
<div>
<h1 class="title document">
jQuery Fundamentals
</h1>
</div>
<div>
<div class="author">
<h4 class="author">
By <a href="http://www.rebeccamurphey.com/" class="ulink">Rebecca Murphey</a>
</h4>
</div>
</div>
<div>
<div class="othercredit">
<h4 class="othercredit">
<span class="orgname"><a href="http://github.com/rmurphey/jqfundamentals" class="ulink">http://github.com/rmurphey/jqfundamentals</a></span>
</h4>
</div>
</div>
<div>
<div class="othercredit">
<h4 class="othercredit">
<span class="orgname">With contributions by James Padolsey, Paul Irish, and others. See the GitHub repository for a complete history of contributions.</span>
</h4>
</div>
</div>
<div>
<p class="copyright">
Copyright © 2011
</p>
</div>
<div>
<div title="Legal Notice" class="legalnotice"><!-- maybe change this? -->
<p>
Licensed by Rebecca Murphey under the <a href="http://creativecommons.org/licenses/by-sa/3.0/us/" class="ulink">Creative Commons Attribution-Share Alike 3.0 United States license</a>. You are free to copy, distribute, transmit, and remix this work, provided you attribute the work to Rebecca Murphey as the original author and reference <a href="http://github.com/rmurphey/jqfundamentals" class="ulink">the GitHub repository for the work</a>. If you alter, transform, or build upon this work, you may distribute the resulting work only under the same, similar or a compatible license. Any of the above conditions can be waived if you get permission from the copyright holder. For any reuse or distribution, you must make clear to others the license terms of this work. The best way to do this is with <a href="http://creativecommons.org/licenses/by-sa/3.0/us/" class="ulink">a link to the license</a>.
</p>
</div>
</div>
</div>
<div class="note">
<h3>Reporting Issues</h3>
<p>Your feedback is essential to improving jQuery Fundamentals; if you see an
error or an opportunity for improvement, please <a href="https://github.com/jquery/web-learn-jquery-com/issues">open an
issue</a>.</p>
<h4>Suggesting Changes to Content</h4>
<p>If you’d like to suggest a change to the book, the <em>strong</em> preference is that
you submit a <a href="http://help.github.com/pull-requests/">pull request</a> rather than
describing your proposed change in an issue. Once a pull request is submitted,
it will be reviewed for inclusion.</p>
<h4>Suggesting Additions to Content</h4>
<p>If you’ve come across a blog post or other resource that would be great for
inclusion in jQuery Fundamentals, please <a href="https://github.com/jquery/web-learn-jquery-com/issues">open an
issue</a> with a link to the
resource, and indicate in the issue whether you’ve already discussed inclusion
of the resource with the author.</p>
<h4>Contributing Content</h4>
<p>Contributions to jQuery Fundamentals are always welcome. The best
way to submit your content for consideration is to submit a pull
request to <a href="https://github.com/jquery/web-learn-jquery-com">the jQuery learning repo</a>.</p>
</div>
</div> <!-- end titlepage -->
<div id="toc">
<h3>Contents</h3>
<ul class="pointless columns-2">
<!-- JS-generated TOC goes here --> <!-- really - is this js generated? -->
<li><a href="http://jqfundamentals.com/#chapter-1">1: Welcome</a></li>
<li><a href="http://jqfundamentals.com/#chapter-2">2: JavaScript Basics</a></li>
<li><a href="http://jqfundamentals.com/#chapter-3">3: jQuery Basics</a></li>
<li><a href="http://jqfundamentals.com/#chapter-4">4: jQuery Core</a></li>
<li><a href="http://jqfundamentals.com/#chapter-5">5: Events</a></li>
<li><a href="http://jqfundamentals.com/#chapter-6">6: Effects</a></li>
<li><a href="http://jqfundamentals.com/#chapter-7">7: Ajax</a></li>
<li><a href="http://jqfundamentals.com/#chapter-8">8: Plugins</a></li>
<li><a href="http://jqfundamentals.com/#chapter-9">9: Performance Best Practices</a></li>
<li><a href="http://jqfundamentals.com/#chapter-10">10: Code Organization</a></li>
<li><a href="http://jqfundamentals.com/#chapter-11">11: Custom Events</a></li>
</ul>
</div>
<div id="loe">
<h3>List of Examples</h3>
<ul class="pointless columns-2">
<!-- JS-generated list of examples goes here -->
<!-- really - are these js generated? -->
<li><a href="http://jqfundamentals.com/#example-1.1">1.1:
An of inline JavaScript
</a></li>
<li><a href="http://jqfundamentals.com/#example-1.2">1.2:
An of including external JavaScript
</a></li>
<li><a href="http://jqfundamentals.com/#example-1.3">1.3:
of an </a></li>
<li><a href="http://jqfundamentals.com/#example-2.1">2.1:
A simple variable declaration
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.2">2.2:
Whitespace has no meaning outside of quotation marks
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.3">2.3:
Parentheses indicate precedence
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.4">2.4:
Tabs enhance readability, but have no special meaning
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.5">2.5:
Concatenation
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.6">2.6:
Multiplication and division
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.7">2.7:
Incrementing and decrementing
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.8">2.8:
Addition vs. concatenation
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.9">2.9:
Forcing a string to act as a number
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.10">2.10:
Forcing a string to act as a number (using the unary-plus operator)
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.11">2.11:
Logical AND and OR operators
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.12">2.12:
Comparison operators
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.13">2.13:
Flow control
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.14">2.14:
Values that evaluate to true
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.15">2.15:
Values that evaluate to false
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.16">2.16:
The ternary operator
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.17">2.17:
A switch statement
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.18">2.18:
Loops
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.19">2.19:
A typical for loop
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.20">2.20:
A typical while loop
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.21">2.21:
A while loop with a combined conditional and incrementer
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.22">2.22:
A do-while loop
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.23">2.23:
Stopping a loop
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.24">2.24:
Skipping to the next iteration of a loop
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.25">2.25:
A simple array
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.26">2.26:
Accessing array items by index
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.27">2.27:
Testing the size of an array
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.28">2.28:
Changing the value of an array item
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.29">2.29:
Adding elements to an array
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.30">2.30:
Working with arrays
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.31">2.31:
Creating an "object literal"
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.32">2.32:
Function Declaration
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.33">2.33:
Named Function Expression
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.34">2.34:
A simple function
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.35">2.35:
A function that returns a value
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.36">2.36:
A function that returns another function
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.37">2.37:
A self-executing anonymous function
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.38">2.38:
Passing an anonymous function as an argument
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.39">2.39:
Passing
a named function as an argument
</a></li><li><a href="http://jqfundamentals.com/#example-2.40">2.40:
Testing the type of various variables
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.41">2.41:
A function invoked using Function.call
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.42">2.42:
A function created using Function.bind
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.43">2.43:
A function being attached to an object at runtime
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.44">2.44:
Functions have access to variables defined in the same scope
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.45">2.45:
Code outside the scope in which a variable was defined does not have access to the variable
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.46">2.46:
Variables with the same name can exist in different scopes with different values
</a></li
><li><a href="http://jqfundamentals.com/#example-2.47">2.47:
Functions can "see" changes in variable values after the function is defined
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.48">2.48:
Scope insanity
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.49">2.49:
How to lock in the value of i?
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.50">2.50:
Locking in the value of i with a closure
</a></li>
<li><a href="http://jqfundamentals.com/#example-2.51">2.51:
Using a closure to access inner and outer object instances simultaneously
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.1">3.1:
A $(document).ready() block
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.2">3.2:
Shorthand for $(document).ready()
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.3">3.3:
Passing a named function instead of an anonymous function
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.4">3.4:
Selecting elements by ID
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.5">3.5:
Selecting elements by class name
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.6">3.6:
Selecting elements by attribute
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.7">3.7:
Selecting elements by compound CSS selector
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.8">3.8:
Pseudo-selectors
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.9">3.9:
Testing whether a selection contains elements
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.10">3.10:
Storing selections in a variable
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.11">3.11:
Refining selections
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.12">3.12:
Using form-related pseduo-selectors
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.13">3.13:
Chaining
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.14">3.14:
Formatting chained code
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.15">3.15:
Restoring your original selection using $.fn.end
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.16">3.16:
The $.fn.html method used as a setter
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.17">3.17:
The html method used as a getter
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.18">3.18:
Getting CSS properties
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.19">3.19:
Setting CSS properties
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.20">3.20:
Working with classes
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.21">3.21:
Basic dimensions methods
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.22">3.22:
Setting attributes
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.23">3.23:
Getting attributes
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.24">3.24:
Moving around the DOM using traversal methods
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.25">3.25:
Iterating over a selection
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.26">3.26:
Changing the HTML of an element
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.27">3.27:
Moving elements using different approaches
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.28">3.28:
Making a copy of an element
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.29">3.29:
Creating new elements
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.30">3.30:
Creating a new element with an attribute object
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.31">3.31:
Getting a new element on to the page
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.32">3.32:
Creating and adding an element to the page at the same time
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.33">3.33:
Manipulating a single attribute
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.34">3.34:
Manipulating multiple attributes
</a></li>
<li><a href="http://jqfundamentals.com/#example-3.35">3.35:
Using a function to determine an attribute's new value
</a></li>
<li><a href="http://jqfundamentals.com/#example-4.1">4.1:
Checking the type of an arbitrary value
</a></li>
<li><a href="http://jqfundamentals.com/#example-4.2">4.2:
Storing and retrieving data related to an element
</a></li>
<li><a href="http://jqfundamentals.com/#example-4.3">4.3:
Storing a relationship between elements using $.fn.data
</a></li>
<li><a href="http://jqfundamentals.com/#example-4.4">4.4:
Putting jQuery into no-conflict mode
</a></li>
<li><a href="http://jqfundamentals.com/#example-4.5">4.5:
Using the $ inside a self-executing anonymous function
</a></li>
<li><a href="http://jqfundamentals.com/#example-5.1">5.1:
Event binding using a convenience method
</a></li>
<li><a href="http://jqfundamentals.com/#example-5.2">5.2:
Event biding using the $.fn.bind method
</a></li>
<li><a href="http://jqfundamentals.com/#example-5.3">5.3:
Event binding using the $.fn.bind method with data
</a></li>
<li><a href="http://jqfundamentals.com/#example-5.4">5.4:
Switching handlers using the $.fn.one method
</a></li><li><a href="http://jqfundamentals.com/#example-5.5">5.5:
Unbinding all click handlers on a selection
</a></li>
<li><a href="http://jqfundamentals.com/#example-5.6">5.6:
Unbinding a particular click handler
</a></li>
<li><a href="http://jqfundamentals.com/#example-5.7">5.7:
Namespacing events
</a></li>
<li><a href="http://jqfundamentals.com/#example-5.8">5.8:
Binding Multiple Events
</a></li>
<li><a href="http://jqfundamentals.com/#example-6.1">6.1:
A basic use of a built-in effect
</a></li>
<li><a href="http://jqfundamentals.com/#example-6.2">6.2:
Setting the duration of an effect
</a></li>
<li><a href="http://jqfundamentals.com/#example-6.3">6.3:
Augmenting jQuery.fx.speeds with custom speed definitions
</a></li>
<li><a href="http://jqfundamentals.com/#example-6.4">6.4:
Running code when an animation is complete
</a></li>
<li><a href="http://jqfundamentals.com/#example-6.5">6.5:
Run a callback even if there were no elements to animate
</a></li>
<li><a href="http://jqfundamentals.com/#example-6.6">6.6:
Custom effects with $.fn.animate
</a></li>
<li><a href="http://jqfundamentals.com/#example-6.7">6.7:
Per-property easing
</a></li>
<li><a href="http://jqfundamentals.com/#example-7.1">7.1:
Using the core $.ajax method
</a></li>
<li><a href="http://jqfundamentals.com/#example-7.2">7.2:
Using jQuery's Ajax convenience methods
</a></li>
<li><a href="http://jqfundamentals.com/#example-7.3">7.3:
Using $.fn.load to populate an element
</a></li>
<li><a href="http://jqfundamentals.com/#example-7.4">7.4:
Using $.fn.load to populate an element based on a selector
</a></li>
<li><a href="http://jqfundamentals.com/#example-7.5">7.5:
Turning form data into a query string
</a></li>
<li><a href="http://jqfundamentals.com/#example-7.6">7.6:
Creating an array of objects containing form data
</a></li>
<li><a href="http://jqfundamentals.com/#example-7.7">7.7:
Using YQL and JSONP
</a></li>
<li><a href="http://jqfundamentals.com/#example-7.8">7.8:
Setting up a loading indicator using Ajax Events
</a></li>
<li><a href="http://jqfundamentals.com/#example-8.1">8.1:
Creating a plugin to add and remove a class on hover
</a></li>
<li><a href="http://jqfundamentals.com/#example-8.2">8.2:
The Mike Alsup jQuery Plugin Development Pattern
</a></li>
<li><a href="http://jqfundamentals.com/#example-8.3">8.3:
A simple, stateful plugin using the jQuery UI widget factory
</a></li>
<li><a href="http://jqfundamentals.com/#example-8.4">8.4:
Passing options to a widget
</a></li>
<li><a href="http://jqfundamentals.com/#example-8.5">8.5:
Setting default options for a widget
</a></li>
<li><a href="http://jqfundamentals.com/#example-8.6">8.6:
Creating widget methods
</a></li>
<li><a href="http://jqfundamentals.com/#example-8.7">8.7:
Calling methods on a plugin instance
</a></li>
<li><a href="http://jqfundamentals.com/#example-8.8">8.8:
Responding when an option is set
</a></li>
<li><a href="http://jqfundamentals.com/#example-8.9">8.9:
Providing callbacks for user extension
</a></li>
<li><a href="http://jqfundamentals.com/#example-8.10">8.10:
Binding to widget events
</a></li>
<li><a href="http://jqfundamentals.com/#example-8.11">8.11:
Adding a destroy method to a widget
</a></li>
<li><a href="http://jqfundamentals.com/#example-10.1">10.1:
An object literal
</a></li>
<li><a href="http://jqfundamentals.com/#example-10.2">10.2:
Using an object literal for a jQuery feature
</a></li>
<li><a href="http://jqfundamentals.com/#example-10.3">10.3:
The module pattern
</a></li>
<li><a href="http://jqfundamentals.com/#example-10.4">10.4:
Using the module pattern for a jQuery feature
</a></li>
<li><a href="http://jqfundamentals.com/#example-10.5">10.5:
Using RequireJS: A simple </a></li>
<li><a href="http://jqfundamentals.com/#example-10.6">10.6:
A simple JavaScript file with dependencies
</a></li>
<li><a href="http://jqfundamentals.com/#example-10.7">10.7:
Defining a RequireJS module that has no dependencies
</a></li>
<li><a href="http://jqfundamentals.com/#example-10.8">10.8:
Defining a RequireJS module with dependencies
</a></li>
<li><a href="http://jqfundamentals.com/#example-10.9">10.9:
Defining a RequireJS module that returns a function
</a></li>
</ul>
</div>
<div title="Welcome" class="chapter" id="chapter-1"><p class="toc"><a title="Back to top" href="http://jqfundamentals.com/#toc">Back to top</a></p>
<div class="titlepage">
<div>
<div>
<h3 class="title">
Welcome
</h3>
</div>
</div>
</div>
<p>
jQuery is fast becoming a must-have skill for front-end developers. The purpose of this book is to provide an overview of the jQuery JavaScript library; when you're done with the book, you should be able to complete basic tasks using jQuery, and have a solid basis from which to continue your learning. This book was designed as material to be used in a classroom setting, but you may find it useful for individual study.
</p>
<p>
This is a hands-on class. We will spend a bit of time covering a concept, and then you’ll have the chance to work on an exercise related to the concept. Some of the exercises may seem trivial; others may be downright daunting. In either case, there is no grade; the goal is simply to get you comfortable working your way through problems you’ll commonly be called upon to solve using jQuery. Example solutions to all of the exercises are included in the sample code.
</p>
<div title="Getting the Code" class="section">
<h3 class="title">
Getting the Code
</h3>
<p>
The code we’ll be using in this book is hosted <a href="http://github.com/rmurphey/jqfundamentals" class="ulink">in a repository on Github</a>. You can download a .zip or .tar file of the code, then uncompress it to use it on your server. If you’re git-inclined, you’re welcome to clone or fork the repository.
</p>
</div>
<div title="Software" class="section">
<h3 class="title">
Software
</h3>
<p>
You'll want to have the following tools to make the most of the class:
</p>
<ul>
<li>
<p>
The Firefox browser
</p>
</li>
<li>
<p>
The Firebug extension for Firefox
</p>
</li>
<li>
<p>
A plain text editor
</p>
</li>
<li>
<p>
For the Ajax portions: A local server (such as MAMP or WAMP), or an FTP or SSH client to access a remote server.
</p>
</li>
</ul>
</div>
<div title="Adding JavaScript to Your Page" class="section">
<h3 class="title">
Adding JavaScript to Your Page
</h3>
<p>
JavaScript can be included inline or by including an external file via a script tag. The order in which you include JavaScript is important: dependencies must be included before the script that depends on them.
</p>
<p>
For the sake of page performance, JavaScript should be included as close to the end of your HTML as is practical. Multiple JavaScript files should be combined for production use.
</p>
<div class="example" id="example-1.1">
<p class="title">Example 1.1:
An example of inline JavaScript
</p>
<div class="example-contents">
<div id="highlighter_948315" class="syntaxhighlighter "><div class="bar"><div class="toolbar"><a href="http://jqfundamentals.com/#viewSource" title="view source" style="width: 16px; height: 16px; " class="item viewSource">view source</a><a href="http://jqfundamentals.com/#printSource" title="print" style="width: 16px; height: 16px; " class="item printSource">print</a><a href="http://jqfundamentals.com/#about" title="?" style="width: 16px; height: 16px; " class="item about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="plain"><script></code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="plain">console.log(</code><code class="string">'hello'</code><code class="plain">);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="plain"></script></code></td></tr></tbody></table></div></div></div>
</div>
</div>
<div class="example" id="example-1.2">
<p class="title">Example 1.2:
An example of including external JavaScript
</p>
<div class="example-contents">
<div id="highlighter_310120" class="syntaxhighlighter "><div class="bar"><div class="toolbar"><a href="http://jqfundamentals.com/#viewSource" title="view source" style="width: 16px; height: 16px; " class="item viewSource">view source</a><a href="http://jqfundamentals.com/#printSource" title="print" style="width: 16px; height: 16px; " class="item printSource">print</a><a href="http://jqfundamentals.com/#about" title="?" style="width: 16px; height: 16px; " class="item about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="plain"><script src=</code><code class="string">'/js/jquery.js'</code><code class="plain">></script></code></td></tr></tbody></table></div></div></div>
</div>
</div>
</div>
<div title="JavaScript Debugging" class="section">
<h3 class="title">
JavaScript Debugging
</h3>
<p>
A debugging tool is essential for JavaScript development. Firefox provides a debugger via the Firebug extension; Safari and Chrome provide built-in consoles.
</p>
<p>
Each console offers:
</p>
<ul>
<li>
<p>
single- and multi-line editors for experimenting with JavaScript
</p>
</li>
<li>
<p>
an inspector for looking at the generated source of your page
</p>
</li>
<li>
<p>
a Network or Resources view, to examine network requests
</p>
</li>
</ul>
<p>
When you are writing JavaScript code, you can use the following methods to send messages to the console:
</p>
<ul>
<li>
<code class="code">console.log()</code> for sending general log messages
</li>
<li>
<code class="code">console.dir()</code> for logging a browseable object
</li>
<li>
<code class="code">console.warn()</code> for logging warnings
</li>
<li>
<code class="code">console.error()</code> for logging error messages
</li>
</ul>
<p>
Other console methods are also available, though they may differ from one browser to another. The consoles also provide the ability to set break points and watch expressions in your code for debugging purposes.
</p>
</div>
<div title="Exercises" class="section">
<h3 class="title">
Exercises
</h3>
<p>
Most chapters in the book conclude with one or more exercises. For some exercises, you’ll be able to work directly in Firebug; for others, you will need to include other scripts after the jQuery script tag as directed in the individual exercises.
</p>
<p>
In some cases, you will need to consult the jQuery documentation in order to complete an exercise, as we won’t have covered all of the relevant information in the book. This is by design; the jQuery library is large, and learning to find answers in the documentation is an important part of the process.
</p>
<p>
Here are a few suggestions for tackling these problems:
</p>
<ul>
<li>
<p>
First, make sure you thoroughly understand the problem you're being asked to solve.
</p>
</li>
<li>
<p>
Next, figure out which elements you'll need to access in order to solve the problem, and determine how you'll get those elements. Use Firebug to verify that you're getting the elements you're after.
</p>
</li>
<li>
<p>
Finally, figure out what you need to do with the elements to solve the problem. It can be helpful to write comments explaining what you're going to do before you try to write the code to do it.
</p>
</li>
</ul>
<p>
Do not be afraid to make mistakes! Do not try to make your code perfect on the first try! Making mistakes and experimenting with solutions is part of learning the library, and you’ll be a better developer for it. Examples of solutions for these exercises are located in the <code class="filename">/solutions</code> directory in the sample code.
</p>
</div>
<h3 class="title">
Conventions used in this book
</h3>
<p>
Methods that can be called on jQuery objects will be referred to as <code class="code">$.fn.methodName</code>. Methods that exist in the jQuery namespace but that cannot be called on jQuery objects will be referred to as <code class="code">$.methodName</code>. If this doesn't mean much to you, don't worry — it should become clearer as you progress through the book.
</p>
<div class="example" id="example-1.3">
<p class="title">Example 1.3:
Example of an example
</p>
<div class="example-contents">
<div id="highlighter_481898" class="syntaxhighlighter "><div class="bar"><div class="toolbar"><a href="http://jqfundamentals.com/#viewSource" title="view source" style="width: 16px; height: 16px; " class="item viewSource">view source</a><a href="http://jqfundamentals.com/#printSource" title="print" style="width: 16px; height: 16px; " class="item printSource">print</a><a href="http://jqfundamentals.com/#about" title="?" style="width: 16px; height: 16px; " class="item about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="comments">// code examples will appear like this</code></td></tr></tbody></table></div></div></div>
</div>
</div>
<p class="remark">
<i><span class="remark">Remarks will appear like this.</span></i>
</p>
<div class="note">
<h4 class="title">
Note
</h4>
<p>
Notes about a topic will appear like this.
</p>
</div>
<div title="Reference Material" class="section">
<h3 class="title">
Reference Material
</h3>
<p>
There are any number of articles and blog posts out there that address some aspect of jQuery. Some are phenomenal; some are downright wrong. When you read an article about jQuery, be sure it's talking about the same version as you're using, and resist the urge to just copy and paste — take the time to understand the code in the article.
</p>
<p>
Here are some excellent resources to use during your jQuery learning. The most important of all is the jQuery source itself: it contains, in code form, complete documentation of the library. It is not a black box — your understanding of the library will grow exponentially if you spend some time visiting it now and again — and I highly recommend bookmarking it in your browser and referring to it often.
</p>
<ul>
<li>
<p>
<a href="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" class="ulink">The jQuery source</a>
</p>
</li>
<li>
<p>
<a href="http://api.jquery.com/" class="ulink">jQuery documentation</a>
</p>
</li>
<li>
<p>
<a href="http://forum.jquery.com/" class="ulink">jQuery forum</a>
</p>
</li>
<li>
<p>
<a href="http://delicious.com/rdmey/jquery-class" class="ulink">Delicious bookmarks</a>
</p>
</li>
<li>
<p>
<a href="http://docs.jquery.com/Discussion#Chat_.2F_IRC_Channel" class="ulink">#jquery IRC channel on Freenode</a>
</p>
</li>
</ul>
</div>
</div> <div title="Part I. JavaScript 101" class="part">
<div class="titlepage">
<div>
<div>
<h1 class="title">
Part I. JavaScript 101
</h1>
</div>
</div>
</div>
<div title="JavaScript Basics" class="chapter" id="chapter-2"><p class="toc"><a title="Back to top" href="http://jqfundamentals.com/#toc">Back to top</a></p>
<div class="titlepage">
<div>
<div>
<h3 class="title">
JavaScript Basics
</h3>
</div>
</div>
</div>
<div title="Overview" class="section">
<h3 class="title">
Overview
</h3>
<p>
jQuery is built on top of JavaScript, a rich and expressive language in its own right. This section covers the basic concepts of JavaScript, as well as some frequent pitfalls for people who have not used JavaScript before. While it will be of particular value to people with no programming experience, even people who have used other programming languages may benefit from learning about some of the peculiarities of JavaScript.
</p>
<p>
If you’re interested in learning more about the JavaScript language, I highly recommend <em class="citetitle">JavaScript: The Good Parts</em> by Douglas Crockford.
</p>
</div>
<div title="Syntax Basics" class="section">
<h3 class="title">
Syntax Basics
</h3>
<p>
Understanding statements, variable naming, whitespace, and other basic JavaScript syntax.
</p>
<div class="example" id="example-2.1">
<p class="title">Example 2.1:
A simple variable declaration
</p>
<div class="example-contents">
<div id="highlighter_675521" class="syntaxhighlighter "><div class="bar"><div class="toolbar"><a href="http://jqfundamentals.com/#viewSource" title="view source" style="width: 16px; height: 16px; " class="item viewSource">view source</a><a href="http://jqfundamentals.com/#printSource" title="print" style="width: 16px; height: 16px; " class="item printSource">print</a><a href="http://jqfundamentals.com/#about" title="?" style="width: 16px; height: 16px; " class="item about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">var</code> <code class="plain">foo = </code><code class="string">'hello world'</code><code class="plain">;</code></td></tr></tbody></table></div></div></div>
</div>
</div>
<div class="example" id="example-2.2">
<p class="title">Example 2.2:
Whitespace has no meaning outside of quotation marks
</p>
<div class="example-contents">
<div id="highlighter_817819" class="syntaxhighlighter "><div class="bar"><div class="toolbar"><a href="http://jqfundamentals.com/#viewSource" title="view source" style="width: 16px; height: 16px; " class="item viewSource">view source</a><a href="http://jqfundamentals.com/#printSource" title="print" style="width: 16px; height: 16px; " class="item printSource">print</a><a href="http://jqfundamentals.com/#about" title="?" style="width: 16px; height: 16px; " class="item about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">var</code> <code class="plain">foo = </code><code class="string">'hello world'</code><code class="plain">;</code></td></tr></tbody></table></div></div></div>
</div>
</div>
<div class="example" id="example-2.3">
<p class="title">Example 2.3:
Parentheses indicate precedence
</p>
<div class="example-contents">
<div id="highlighter_445074" class="syntaxhighlighter "><div class="bar"><div class="toolbar"><a href="http://jqfundamentals.com/#viewSource" title="view source" style="width: 16px; height: 16px; " class="item viewSource">view source</a><a href="http://jqfundamentals.com/#printSource" title="print" style="width: 16px; height: 16px; " class="item printSource">print</a><a href="http://jqfundamentals.com/#about" title="?" style="width: 16px; height: 16px; " class="item about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">2 * 3 + 5; </code><code class="comments">// returns 11; multiplication happens first</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="plain">2 * (3 + 5); </code><code class="comments">// returns 16; addition happens first</code></td></tr></tbody></table></div></div></div>
</div>
</div>
<div class="example" id="example-2.4">
<p class="title">Example 2.4:
Tabs enhance readability, but have no special meaning
</p>
<div class="example-contents">
<div id="highlighter_572764" class="syntaxhighlighter "><div class="bar"><div class="toolbar"><a href="http://jqfundamentals.com/#viewSource" title="view source" style="width: 16px; height: 16px; " class="item viewSource">view source</a><a href="http://jqfundamentals.com/#printSource" title="print" style="width: 16px; height: 16px; " class="item printSource">print</a><a href="http://jqfundamentals.com/#about" title="?" style="width: 16px; height: 16px; " class="item about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">var</code> <code class="plain">foo = </code><code class="keyword">function</code><code class="plain">() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces"> </code><code class="plain">console.log(</code><code class="string">'hello'</code><code class="plain">);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="plain">};</code></td></tr></tbody></table></div></div></div>
</div>
</div>
</div>
<div title="Operators" class="section">
<h3 class="title">
Operators
</h3>
<div title="Basic Operators" class="section">
<div class="titlepage">
<h4 class="title">
Basic Operators
</h4>
</div>
<p>
Basic operators allow you to manipulate values.
</p>
<div class="example" id="example-2.5">
<p class="title">Example 2.5:
Concatenation
</p>
<div class="example-contents">
<div id="highlighter_68335" class="syntaxhighlighter "><div class="bar"><div class="toolbar"><a href="http://jqfundamentals.com/#viewSource" title="view source" style="width: 16px; height: 16px; " class="item viewSource">view source</a><a href="http://jqfundamentals.com/#printSource" title="print" style="width: 16px; height: 16px; " class="item printSource">print</a><a href="http://jqfundamentals.com/#about" title="?" style="width: 16px; height: 16px; " class="item about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">var</code> <code class="plain">foo = </code><code class="string">'hello'</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="keyword">var</code> <code class="plain">bar = </code><code class="string">'world'</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"> </td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="plain">console.log(foo + </code><code class="string">' '</code> <code class="plain">+ bar); </code><code class="comments">// 'hello world'</code></td></tr></tbody></table></div></div></div>
</div>
</div>
<div class="example" id="example-2.6">
<p class="title">Example 2.6:
Multiplication and division
</p>
<div class="example-contents">
<div id="highlighter_757038" class="syntaxhighlighter "><div class="bar"><div class="toolbar"><a href="http://jqfundamentals.com/#viewSource" title="view source" style="width: 16px; height: 16px; " class="item viewSource">view source</a><a href="http://jqfundamentals.com/#printSource" title="print" style="width: 16px; height: 16px; " class="item printSource">print</a><a href="http://jqfundamentals.com/#about" title="?" style="width: 16px; height: 16px; " class="item about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">2 * 3;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="plain">2 / 3;</code></td></tr></tbody></table></div></div></div>
</div>
</div>
<div class="example" id="example-2.7">
<p class="title">Example 2.7:
Incrementing and decrementing
</p>
<div class="example-contents">
<div id="highlighter_278068" class="syntaxhighlighter "><div class="bar"><div class="toolbar"><a href="http://jqfundamentals.com/#viewSource" title="view source" style="width: 16px; height: 16px; " class="item viewSource">view source</a><a href="http://jqfundamentals.com/#printSource" title="print" style="width: 16px; height: 16px; " class="item printSource">print</a><a href="http://jqfundamentals.com/#about" title="?" style="width: 16px; height: 16px; " class="item about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">var</code> <code class="plain">i = 1;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"> </td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="keyword">var</code> <code class="plain">j = ++i; </code><code class="comments">// pre-increment: j equals 2; i equals 2</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="keyword">var</code> <code class="plain">k = i++; </code><code class="comments">// post-increment: k equals 2; i equals 3</code></td></tr></tbody></table></div></div></div>
</div>
</div>
</div>
<div title="Operations on Numbers & Strings" class="section">
<div class="titlepage">
<h4 class="title">
Operations on Numbers & Strings
</h4>
</div>
<p>
In JavaScript, numbers and strings will occasionally behave in ways you might not expect.
</p>
<div class="example" id="example-2.8">
<p class="title">Example 2.8:
Addition vs. concatenation
</p>
<div class="example-contents">
<div id="highlighter_852860" class="syntaxhighlighter "><div class="bar"><div class="toolbar"><a href="http://jqfundamentals.com/#viewSource" title="view source" style="width: 16px; height: 16px; " class="item viewSource">view source</a><a href="http://jqfundamentals.com/#printSource" title="print" style="width: 16px; height: 16px; " class="item printSource">print</a><a href="http://jqfundamentals.com/#about" title="?" style="width: 16px; height: 16px; " class="item about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">var</code> <code class="plain">foo = 1;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="keyword">var</code> <code class="plain">bar = </code><code class="string">'2'</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"> </td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="plain">console.log(foo + bar); </code><code class="comments">// 12. uh oh</code></td></tr></tbody></table></div></div></div>
</div>
</div>
<div class="example" id="example-2.9">
<p class="title">Example 2.9:
Forcing a string to act as a number
</p>
<div class="example-contents">
<div id="highlighter_280603" class="syntaxhighlighter "><div class="bar"><div class="toolbar"><a href="http://jqfundamentals.com/#viewSource" title="view source" style="width: 16px; height: 16px; " class="item viewSource">view source</a><a href="http://jqfundamentals.com/#printSource" title="print" style="width: 16px; height: 16px; " class="item printSource">print</a><a href="http://jqfundamentals.com/#about" title="?" style="width: 16px; height: 16px; " class="item about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">var</code> <code class="plain">foo = 1;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="keyword">var</code> <code class="plain">bar = </code><code class="string">'2'</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"> </td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="comments">// coerce the string to a number</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="plain">console.log(foo + Number(bar));</code></td></tr></tbody></table></div></div></div>
</div>
</div>
<p>
The Number constructor, when called as a function (like above) will have the effect of casting its argument into a number. You could also use the unary plus operator, which does the same thing:
</p>
<div class="example" id="example-2.10">
<p class="title">Example 2.10:
Forcing a string to act as a number (using the unary-plus operator)
</p>
<div class="example-contents">
<div id="highlighter_722003" class="syntaxhighlighter "><div class="bar"><div class="toolbar"><a href="http://jqfundamentals.com/#viewSource" title="view source" style="width: 16px; height: 16px; " class="item viewSource">view source</a><a href="http://jqfundamentals.com/#printSource" title="print" style="width: 16px; height: 16px; " class="item printSource">print</a><a href="http://jqfundamentals.com/#about" title="?" style="width: 16px; height: 16px; " class="item about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">console.log(foo + +bar);</code></td></tr></tbody></table></div></div></div>
</div>
</div>
</div>
<div class="titlepage">
<h4 class="title">
Logical Operators
</h4>
</div>
<p>
Logical operators allow you to evaluate a series of operands using AND and OR operations.
</p>
<div class="example" id="example-2.11">
<p class="title">Example 2.11:
Logical AND and OR operators
</p>
<div class="example-contents">
<div id="highlighter_59159" class="syntaxhighlighter "><div class="bar"><div class="toolbar"><a href="http://jqfundamentals.com/#viewSource" title="view source" style="width: 16px; height: 16px; " class="item viewSource">view source</a><a href="http://jqfundamentals.com/#printSource" title="print" style="width: 16px; height: 16px; " class="item printSource">print</a><a href="http://jqfundamentals.com/#about" title="?" style="width: 16px; height: 16px; " class="item about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="keyword">var</code> <code class="plain">foo = 1;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="keyword">var</code> <code class="plain">bar = 0;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="keyword">var</code> <code class="plain">baz = 2;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"> </td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="plain">foo || bar; </code><code class="comments">// returns 1, which is true</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="plain">bar || foo; </code><code class="comments">// returns 1, which is true</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"> </td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="plain">foo && bar; </code><code class="comments">// returns 0, which is false</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="plain">foo && baz; </code><code class="comments">// returns 2, which is true</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="plain">baz && foo; </code><code class="comments">// returns 1, which is true</code></td></tr></tbody></table></div></div></div>
</div>
</div>
<p>
Though it may not be clear from the example, the <code class="code">||</code> operator returns the value of the first truthy operand, or, in cases where neither operand is truthy, it'll return the last of both operands. The <code class="code">&&</code> operator returns the value of the first false operand, or the value of the last operand if both operands are truthy.
</p>
<p>
Be sure to consult <a title="Truthy and Falsy Things" href="http://jqfundamentals.com/#Truthy and Falsy Things">the section called “Truthy and Falsy Things”</a> for more details on which values evaluate to <code class="code">true</code> and which evaluate to <code class="code">false</code>.
</p>
<div class="note">
<h4 class="title">
Note
</h4>
<p>
You'll sometimes see developers use these logical operators for flow control instead of using <code class="code">if</code> statements. For example:
</p>
<div id="highlighter_86095" class="syntaxhighlighter "><div class="bar"><div class="toolbar"><a href="http://jqfundamentals.com/#viewSource" title="view source" style="width: 16px; height: 16px; " class="item viewSource">view source</a><a href="http://jqfundamentals.com/#printSource" title="print" style="width: 16px; height: 16px; " class="item printSource">print</a><a href="http://jqfundamentals.com/#about" title="?" style="width: 16px; height: 16px; " class="item about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="comments">// do something with foo if foo is truthy</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="plain">foo && doSomething(foo);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"> </td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="comments">// set bar to baz if baz is truthy;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="comments">// otherwise, set it to the return</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="comments">// value of createBar()</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>7</code></td><td class="content"><code class="keyword">var</code> <code class="plain">bar = baz || createBar();</code></td></tr></tbody></table></div></div></div>
<p>
This style is quite elegant and pleasantly terse; that said, it can be really hard to read, especially for beginners. I bring it up here so you'll recognize it in code you read, but I don't recommend using it until you're extremely comfortable with what it means and how you can expect it to behave.
</p>
</div>
<div title="Comparison Operators" class="section">
<div class="titlepage">
<h4 class="title">
Comparison Operators
</h4>
</div>
<p>
Comparison operators allow you to test whether values are equivalent or whether values are identical.
</p>
<div class="example" id="example-2.12">
<p class="title">Example 2.12:
Comparison operators
</p>
<div class="example-contents">
<div id="highlighter_1250" class="syntaxhighlighter "><div class="bar"><div class="toolbar"><a href="http://jqfundamentals.com/#viewSource" title="view source" style="width: 16px; height: 16px; " class="item viewSource">view source</a><a href="http://jqfundamentals.com/#printSource" title="print" style="width: 16px; height: 16px; " class="item printSource">print</a><a href="http://jqfundamentals.com/#about" title="?" style="width: 16px; height: 16px; " class="item about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="keyword">var</code> <code class="plain">foo = 1;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="keyword">var</code> <code class="plain">bar = 0;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="keyword">var</code> <code class="plain">baz = </code><code class="string">'1'</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="keyword">var</code> <code class="plain">bim = 2;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"> </td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="plain">foo == bar; </code><code class="comments">// returns false</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="plain">foo != bar; </code><code class="comments">// returns true</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="plain">foo == baz; </code><code class="comments">// returns true; careful!</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"> </td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="plain">foo === baz; </code><code class="comments">// returns false</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="plain">foo !== baz; </code><code class="comments">// returns true</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="plain">foo === parseInt(baz); </code><code class="comments">// returns true</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"> </td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="plain">foo > bim; </code><code class="comments">// returns false</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="plain">bim > baz; </code><code class="comments">// returns true</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="plain">foo <= baz; </code><code class="comments">// returns true</code></td></tr></tbody></table></div></div></div>
</div>
</div>
</div>
</div>
<h3 class="title">
Conditional Code
</h3>
<p>
Sometimes you only want to run a block of code under certain conditions. Flow control — via <code class="code">if</code> and <code class="code">else</code> blocks — lets you run code only under certain conditions.
</p>
<div class="example" id="example-2.13">
<p class="title">Example 2.13:
Flow control
</p>
<div class="example-contents">
<div id="highlighter_748183" class="syntaxhighlighter "><div class="bar"><div class="toolbar"><a href="http://jqfundamentals.com/#viewSource" title="view source" style="width: 16px; height: 16px; " class="item viewSource">view source</a><a href="http://jqfundamentals.com/#printSource" title="print" style="width: 16px; height: 16px; " class="item printSource">print</a><a href="http://jqfundamentals.com/#about" title="?" style="width: 16px; height: 16px; " class="item about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="keyword">var</code> <code class="plain">foo = </code><code class="keyword">true</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="keyword">var</code> <code class="plain">bar = </code><code class="keyword">false</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"> </td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="keyword">if</code> <code class="plain">(bar) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="spaces"> </code><code class="comments">// this code will never run</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces"> </code><code class="plain">console.log(</code><code class="string">'hello!'</code><code class="plain">);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"> </td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="keyword">if</code> <code class="plain">(bar) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces"> </code><code class="comments">// this code won't run</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="plain">} </code><code class="keyword">else</code> <code class="plain">{</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces"> </code><code class="keyword">if</code> <code class="plain">(foo) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces"> </code><code class="comments">// this code will run</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces"> </code><code class="plain">} </code><code class="keyword">else</code> <code class="plain">{</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="spaces"> </code><code class="comments">// this code would run if foo and bar were both false</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="spaces"> </code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>17</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div>
</div>
</div>
<div class="note">
<h4 class="title">
Note
</h4>
<p>
While curly braces aren't strictly required around single-line <code class="code">if</code> statements, using them consistently, even when they aren't strictly required, makes for vastly more readable code.
</p>
<p>
Be mindful not to define functions with the same name multiple times within separate <code class="code">if</code>/<code class="code">else</code> blocks, as doing so may not have the expected result.
</p>
</div>
<div title="Truthy and Falsy Things" id="Truthy and Falsy Things" class="section">
<div class="titlepage">
<h4 class="title">
Truthy and Falsy Things
</h4>
</div>
<p>
In order to use flow control successfully, it's important to understand which kinds of values are "truthy" and which kinds of values are "falsy." Sometimes, values that seem like they should evaluate one way actually evaluate another.
</p>
<div class="example" id="example-2.14">
<p class="title">Example 2.14:
Values that evaluate to true
</p>
<div class="example-contents">
<div id="highlighter_373272" class="syntaxhighlighter "><div class="bar"><div class="toolbar"><a href="http://jqfundamentals.com/#viewSource" title="view source" style="width: 16px; height: 16px; " class="item viewSource">view source</a><a href="http://jqfundamentals.com/#printSource" title="print" style="width: 16px; height: 16px; " class="item printSource">print</a><a href="http://jqfundamentals.com/#about" title="?" style="width: 16px; height: 16px; " class="item about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="string">'0'</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="string">'any string'</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="plain">[]; </code><code class="comments">// an empty array</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="plain">{}; </code><code class="comments">// an empty object</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="plain">1; </code><code class="comments">// any non-zero number</code></td></tr></tbody></table></div></div></div>
</div>
</div>
<div class="example" id="example-2.15">
<p class="title">Example 2.15:
Values that evaluate to false
</p>
<div class="example-contents">
<div id="highlighter_129455" class="syntaxhighlighter "><div class="bar"><div class="toolbar"><a href="http://jqfundamentals.com/#viewSource" title="view source" style="width: 16px; height: 16px; " class="item viewSource">view source</a><a href="http://jqfundamentals.com/#printSource" title="print" style="width: 16px; height: 16px; " class="item printSource">print</a><a href="http://jqfundamentals.com/#about" title="?" style="width: 16px; height: 16px; " class="item about">?</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">0;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="string">''</code><code class="plain">; </code><code class="comments">// an empty string</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="plain">NaN; </code><code class="comments">// JavaScript's "not-a-number" variable</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="keyword">null</code><code class="plain">;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="plain">undefined; </code><code class="comments">// be careful -- undefined can be redefined!</code></td></tr></tbody></table></div></div></div>
</div>
</div>