Introduction to jQuery

3. jQuery
What is
?

6. Including itO N A P A G E

13. CDNContent Delivery Network

17. <script src="https://
ajax.googleapis.com/ajax/libs/jquery/
3.1.1/jquery.min.js"></script>
ABOVE THE </BODY>
YOUR SCRIPTS
<script src=“js/production.js”></script>
</body>
A L L S C R I P T S S H O U L D B E L O A D E D L A S T

19. Edge Cases
Caveats& S O M E T I M E S I T H A S
T O G O I N T H E < H E A D >
<script src=“js/production.js”
defer=“defer”></script>
S O M E L I B R A R I E S M U S T
B E L O A D E D B E F O R E T H E
D O M O R C S S

21. DOM
W H A T I S T H E
?Document Object Model

24. D O C U M E N T
H T M L
R O O T E L E M E N T
E L E M E N T
E L E M E N T T E X T
T E X T
T E X T
AT T R I B U T E
E L E M E N T
E L E M E N T
E L E M E N T
< H E A D >
< T I T L E > "M Y H E A D I N G ”
"M Y H E A D I N G ”
" C L I C K H E R E ”
H R E F
< H 1 >
< A >
< B O D Y >

25. Ready?
$(‘document’).ready(function() {
// code goes here
});

26. Selecting
&Doing

27. $(‘.item’).hide();
SELECT DO
JQUERY jQuery(‘.item’).hide();

28. $(‘document’).ready(function() {
// code goes here
});
JQUERY SELECT DO

29. Slider
B U I L D I N G A

30. ProgrammerT H I N K L I K E A
1
2
3
4
When the user clicks on the next button, go to the next slide.
When the user clicks on the previous button, go to the previous slide.
When the user is on the last slide and clicks on the next button,
automatically go back to the beginning.
When the user is on the first slide and clicks on the previous button,
automatically go to the end.

31. ProgrammerT H I N K L I K E A
5
6
7
Wait 3 seconds and automatically show the next slide.
When the user hovers over the rotator, pause it.
When the user mouses off the rotator, unpause it.

33. Header
A N I M A T I N G A
O N S C R O L L

35. Mobile
C R E A T I N G
N A V I G A T I O N