jQuery

Now there are thousands of Javascript libraries out there but none of these libraries has been used or downloaded as often as jQuery.

So why is that?

So if we break this code down, essentially what it’s doing is it’s looking inside the entire document and it’s querying for all the elements that have the selector of a button, so all of the HTML button elements. And then we’re going to add an event listener that is going to detect for clicks on the button. And when it does get detected then we’re going to run the callback function to again look through the document and query for the selector of h1, and then we’re going to change the style, namely the colour of that h1 to the colour red, and we’re using a for loop to traverse through all of the buttons on our web page to add this event listener and this behaviour to all of those buttons.

And this is pure Javascript and it’s a little bit crazy, if you think about it, in order to do something relatively simple, why does it require so many lines of code, and who’s going to take care of all our joint pain from all this typing?
Now you know how sometimes you have these thoughts and you moan and complain about it a little bit and then you kind of get over yourself, right?

But not this guy.

This is John Resig, and he was really unhappy with the way that Javascript worked in web development. He was frustrated by how unnecessarily complex and lengthy the code had to be. So whereas most of us probably had that thought and we promptly forgot about it, not this guy. John decided that he was going to write a library that would do exactly the same as all of this Javascript code, but it was as short and as sweet as this.

And so jQuery was born.

It’s a library, so a bunch of code that somebody else wrote that you can incorporate into your projects and use to improve your projects or to make your life simply a lot easier.

Now what jQuery allows you to do is take a line of code, say this, where we’re looking through the DOM of our web site, we’re selecting the document and we’re querying for the selector h1.
So we’re looking for the h1 element on our web page. Now if we were to use the jQuery library, then we can get rid of all of that and simply say jQuery(“h1”).

And if you want to be even shorter, the shorthand way to write jQuery is simply a dollar sign.
So $(“h1”) does exactly the same as document.querySelector (“h1”).

And you can see that it’s a lot shorter and that will make our Javascript code a lot easier to read, a lot easier to debug and a lot faster to write, so we don’t have to end up breaking our fingers by typing so much Javascript code.