All right guys. 1
Now in this module I want to introduce you to the most popular Javascript library and it's of course 2
jQuery. 3
Now there's thousands of Javascript libraries out there, and in later modules we're going to be exploring 4
some of these libraries, 5
but none of these libraries have been used or downloaded as often as jQuery. 6
So why is that? 7
Well let's take a look at some code that we've written before. 8
So if we break this code down, essentially what it's doing is it's looking inside the entire document 9
and it's querying for all the elements that have the selector of button, 10
so all of the HTML button elements. And then we're going to add an event listener that is going to detect 11
for clicks on the button. And when it does get detected then we're going to run the callback function 12
to again look through the document and query for the selector of h1, and then we're going to change 13
the style, namely the color of that h1 to the color red, and we're using a for loop to traverse through 14
all of the buttons on our web page in order to add this event listener and this behavior to all of those 15
buttons. 16
So we wrote this code in our drumkit. 17
And this is pure Javascript and it's actually a little bit crazy, if you really think about it, in order 18
to do something relatively simple, 19
why does it require so many lines of code, 20
and who's going to take care of all our joint pain from all this typing? 21
Now you know how sometimes you have these thoughts and you moan and complain about it a little bit and 22
then you kind of get over yourself, right? 23
But not this guy. 24
This is John Resig, and he was really unhappy with the way that Javascript worked in web development. 25
He was really frustrated by how unnecessarily complex and lengthy the code had to be. 26
So whereas most of us probably had that thought and we promptly forgot about it, 27
not this guy. John decided that he was going to write a library that would do exactly the same as all 28
of this Javascript code, 29
but it was as short and as sweet as this. 30
And so jQuery was born. 31
It's a library, 32
so a bunch of code that somebody else wrote that you can incorporate into your own projects and use to 33
improve your own projects or to make your life simply a lot easier. 34
Now we've come across libraries before. 35
Previously we created web sites and we incorporated the Bootstrap library in order to be able to incorporate 36
code that somebody else wrote in the Bootstrap library to make our lives much easier and make it much 37
quicker to improve the user interface of our Web site. 38
Now what jQuery allows you to do is take a line of code, say this, where we're looking through the 39
DOM of our web site, we're selecting the document and we're querying for the selector h1. 40
So we're looking for the h1 element in our web page. 41
Now if we were to use the jQuery library, then we can get rid of all of that and simply say 42
jQuery("h1"). 43
And if you want to be even shorter, the shorthand way to write jQuery is simply a dollar sign. 44
So $("h1") does exactly the same as document.querySelector 45
("h1"). 46
And you can see that it's a lot lot shorter and that will make our Javascript code a lot easier to read, 47
a lot easier to debug and a lot faster to write, 48
so we don't have to end up breaking our fingers by typing so much Javascript code.