Just Do it with jQuery
-
Upload
selfteachme -
Category
Technology
-
view
32 -
download
0
Transcript of Just Do it with jQuery
![Page 1: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/1.jpg)
![Page 2: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/2.jpg)
![Page 3: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/3.jpg)
jQueryWhat is
?
![Page 4: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/4.jpg)
![Page 5: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/5.jpg)
![Page 6: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/6.jpg)
Including itO N A P A G E
![Page 7: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/7.jpg)
![Page 8: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/8.jpg)
![Page 9: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/9.jpg)
![Page 10: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/10.jpg)
![Page 11: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/11.jpg)
![Page 12: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/12.jpg)
![Page 13: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/13.jpg)
CDNContent Delivery Network
![Page 14: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/14.jpg)
![Page 15: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/15.jpg)
![Page 16: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/16.jpg)
![Page 17: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/17.jpg)
<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
![Page 18: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/18.jpg)
![Page 19: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/19.jpg)
Edge CasesCaveats& 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
![Page 20: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/20.jpg)
![Page 21: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/21.jpg)
DOMW H A T I S T H E
?Document Object Model
![Page 22: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/22.jpg)
![Page 23: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/23.jpg)
![Page 24: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/24.jpg)
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
A T 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 >
![Page 25: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/25.jpg)
Ready?$(‘document’).ready(function() {
// code goes here});
![Page 26: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/26.jpg)
Selecting&Doing
![Page 27: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/27.jpg)
$(‘.item’).hide();
SELECT DO
JQUERY jQuery(‘.item’).hide();
![Page 28: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/28.jpg)
$(‘document’).ready(function() {// code goes here
});
JQUERY SELECT DO
![Page 29: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/29.jpg)
SliderB U I L D I N G A
![Page 30: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/30.jpg)
ProgrammerT H I N K L I K E A
1234
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.
![Page 31: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/31.jpg)
ProgrammerT H I N K L I K E A
567
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.
![Page 32: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/32.jpg)
![Page 33: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/33.jpg)
HeaderA N I M A T I N G A
O N S C R O L L
![Page 34: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/34.jpg)
![Page 35: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/35.jpg)
MobileC R E A T I N G
N A V I G A T I O N
![Page 36: Just Do it with jQuery](https://reader031.fdocuments.net/reader031/viewer/2022030305/5871ab111a28abda6a8b57a9/html5/thumbnails/36.jpg)