- jQuery-Specific Selectors 8:22
- Working with jQuery-Specific Selectors 1 objective
- Changing Element Properties 4:46
- Changing Element Styles and Classes 3:20
- Adding/Removing Classes 2 objectives
- Stopping the Browser's Default Behavior 8:11
- Looping through a jQuery collection 6:15
- The .each() method 1 objective
- Conclusion 3:19
- Working with jQuery Collections Review 5 questions
Preview
Video Player
00:00
00:00
Conclusion
3:19Great work learning the basics of jQuery! As a final thought -- consider using a CDN to including jQuery in your projects.
DOM manipulation, events, and traversal.
0:00
As we've seen,
they're all made easier by jQuery.
0:03
There's one last thing I want to show you.
0:07
A potentially better way to
add jQuery to your projects.
0:09
If you visit jQuery.com and
go to the download page,
0:13
there's a section on CDNs, or
Content Delivery Networks.
0:17
CDNs allow websites and applications
to serve content like HTML, CSS,
0:23
images, videos and JavaScript files
from servers nearby the user.
0:28
CDNs can offer a performance benefit
by hosting jQuery on servers spread
0:34
across the globe.
0:38
This also offers an advantage that if
the visitor to your website has already
0:40
downloaded a copy of jQuery from the same
CDN it won't have to be re-downloaded.
0:44
This means that using a CDN to
load common JavaScript libraries,
0:49
like jQuery, will often result
in faster loading webpages.
0:54
The less waiting users have to do,
0:58
the more likely they are to
stay on your website.
1:00
This is especially true for mobile users.
1:03
Click on code.jquery.com and
we can see a number of versions of jQuery.
1:05
We'll select the minified version for
version 3.
1:12
Minified means that all
unnecessary characters and
1:15
spaces have been removed from the code
making it extremely difficult for
1:18
humans to read, but faster for a computer.
1:23
Code is minified to improve speed and
performance.
1:26
For projects where it's unlikely that
you'll need to get into the jQuery and
1:29
read or modify anything,
which will probably be the vast
1:33
majority of your projects, it's
advisable to use the minified version.
1:36
This code snippet can be
included in the bottom of
1:41
any page where you'd
normally include jQuery.
1:43
So let's copy this, go to our HTML file,
and replace our jQuery script tag.
1:46
Save, and now we can delete
jQuery from our local files.
1:58
As you can see if we preview, the jQuery
is now loaded from an external host,
2:06
and our project functions the same.
2:12
See the teacher's notes for
more information about the pros and
2:19
cons of using a CDN versus including
the files in your project.
2:22
I hope you've enjoyed this tour of
the basic functionality of jQuery.
2:27
As countless blogs, articles, and
developers out there will tell you,
2:31
you may not need jQuery as
much as you once would have.
2:35
You may not need jQuery at all.
2:38
Perhaps you will always be able to
count yourself among the lucky,
2:40
who need not support older browsers,
like IE9.
2:43
However, jQuery is still used
in a vast portion of the web and
2:47
will likely stick around for awhile.
2:51
It's used in mountains of legacy websites,
in popular HTML and
2:54
CSS frameworks like Bootstrap, and
in large ecosystems like WordPress.
2:58
It's wealth of plug-ins and
resources can help you rapidly build and
3:03
add functionality and
features to your projects.
3:06
Don't be afraid to use it when using
it saves time and makes sense.
3:09
I can't wait to see what you build.
3:14
Until next time, have fun,
and happy coding.
3:16