Ermm…. jQuery … why, what?

Painting… colours… so beautiful. Art however has multiple forms. Let’s look at metalworking or carpenters. They also build beautiful things but they also build tools that help them. Let’s say that we want to build a chair and we have only a saw blade. How… we can try to cut directly but we better get ourselves a cutting table first. Nice, now we can cut way better. We should also make some kind of tool first that allows us to cut straight lines without cutting our fingers… yea, that would speed things up.

See, in order to reach our goal easier, to deliver something that looks better and is safer we have build ourselves a “framework” composed by different tools that we mix together for the end result.

That is jQuery. It is a framework for JavaScript. It does everything that JS does but much more, much easier and with less code.

What’s better, just like with the wooden pieces, we can always use either JS or jQuery in any moment as we see fit.

Like when we were building our wood cutting framework, we need to do a bit of setup and building first.

How can we make jQuery work for us?

Search on the internet for “jQuery CDN” or go to http://code.jquery.com – CDN = content delivery network. It means that some computers around the world have the file and you will get it the fastest from the closest computer to you.

Select the newest version – minified if possible.
Minified = the smallest possible from which you cannot understand anything but works perfectly.
Uncompressed = the version that also has the code visible. It also works perfectly.

Click on it

In the HTML file write
<script type=”text/javascript” language=”javascript” src=”https://code.jquery.com/jquery-2.1.4.min.js”></script> where the last part “http://code.jquery.com/jquery-2.1.4.min.js” is the URL you got on point number 3

Save the HTML file and refresh

Now, this is how we add jQuery into our HTML. Note that we already this this with our JS and CSS files previously. As stated above, jQuery is not something super super complicated. It is just some JS code written by a team which allows us to write less and do things faster.

How to play with an element?

Let’s use the same JS code as above document.querySelector(“#first_leaf”) and we will change it’s colour just to see that the code works. Let’s add .style.backgroundColor=”red” to our JS selector. Finally, the code will look like this

document.querySelector(“#first_leaf”).style.backgroundColor=”red”;

We can observe here that JavaScript uses the “.” to navigate between the available functions of each function. Note that in the last sentence the word function has been used twice. It is not a mistake. JavaScript is a language based mostly on functions. At the end of the functions there are properties and those properties accept values. Exactly in the same way as the CSS accepts values for its properties. Do you remember how we have said that HTML is mostly based on tags. Same concept, just a different language.

Since we know that jQuery will help us write less but achieve the same result we can write the above code as:

The first line of text is the preparation required that we spoke about previously. From now on, jQuery will be represented by the “$” sign.

The second row is us sending our CSS selector to jQuery and when the results comes back asking jQuery again to change the background colour of our element to red.

Tomorrow we will learn how to see if jQuery works and where we can see the errors because it would be really difficult to create anything without knowing if it works or not. It like painting as a blind man.