### jQuery - Introduction

jQuery is a Javascript library (or framework) that simplifies the language. With jQuery we need less lines of code than if we were using pure Javascript.

Let's see a basic example of changing the background of all elements that have a given class:

        Vanilla Javascript*:

        var elements = document.getElementsByClassName("example");

        for (var a = 0; a < elements.length; a++) {

            elements[a].style['background-color'] = "black";

        }

        * Vanilla Javascript is the name used for pure javascript, with no libraries.

        jQuery:

        $(".example").css("background-color", "black");

With jQuery we can manipulate the DOM and the CSS of elements, track events, create effects and animations etc.

jQuery runs on all browsers and you can find thousands of plugins online that are based on jQuery. With those plugins you easily create photo gallery, grids, sliders, popups, form validation and much more.

#### Installing jQuery

To start using jQuery we need to download the .js file that contains all the code for the library. To to this, go to https://jquery.com/download/.

You can download the most recent compressed production on version, or use a CDN link.

For this course we'll use the CDN version because it's easier to set-up. For your projects it's always good to have all files in your own server.

Now we just need to make the link on our pages, just like we do it with Javascript.

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

In the beginning of the course we learned that we should always place the script for our javascript files at the end of the body element, right before closing it.

But the link to jQuery is better to include in the head element of our page. This is because many components of our page might depend on jQuery to run, like the plugins mentioned above. So we need to make sure that it's loaded before any other javascript file.

Now that we have jQuery loaded in our html pages, let's start exploring it. In the next lesson we'll start learning the basic functions of this library.

### Contents