Basic introduction to jQuery (Part 1)

I’ll confess that when I was learning web development, javascript seemed intimidating. But it really doesn’t have to be. If you understand how to select HTML elements with CSS (do you know how classes work?), then you can easily transition into understanding Javascript with the help of jQuery.

Javascript is a powerful language that web developers can use to “manipulate the DOM”, and jQuery is a popular Javascript library that makes it easier and faster to do just that. Really, jQuery is a single Javascript file (jquery.js) that you include on your HTML pages, just like you’d include a CSS file. That’s it. Pure and simple—one file.

What exactly is the DOM and why would we want to manipulate it?

For our purposes, you can think of the Document Object Model, or DOM, as the code that you can see using your browser’s inspect element tool. This code, as is is written after the page loads, is the easiest way I know to think about the DOM.

This is a simplification, of course, but it helps me to put a visual to this stuff. So when we say “manipulate the DOM”, we really mean “manipulate the code that renders in the browser.”

jQuery and Javascript are particularly useful at manipulating that code, or DOM, after the page has already loaded, usually because the user has taken some action like clicking or scrolling. We refer to these user actions as “events“.

Below, we’re going to see how we can change what the DOM looks like (manipulate it) using events. First, we need to set everything up…

Setting up our site to use jQuery

Step 1

In order to use jQuery, we first have to include the library on the HTML pages where we’re going to use it. If you’re following along and using HTML5Boilerplate—that’s already been done for you. Look for these lines in your HTML file to make sure (they should be near the bottom of the page, before the closing </body>  tag):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

The first line of code attempts to load the required jQuery file from Google’s servers instead of your own, which is generally faster and uses fewer of your server’s resources. The second line checks whether or not the browser was able to successfully load the code from Google. If so, it does nothing. If not, it loads the local version of the code from the folder you downloaded from Boilerplate. If you’ve got those lines, that’s all you need to worry about for now.

If you don’t have those lines for some reason, and you are using Boilerplate, you can copy and paste them into the bottom of your file, right before the closing </body> tag.

If you aren’t using Boilerplate, make sure you’re including a copy of the jQuery file on your page. You

Getting the “Document Ready”

Step 2

Now that the jQuery file is included on our page, we can use jQuery on the HTML page itself. But, since we’ll be writing Javascript and not HTML, we need to tell the browser we’re switching syntaxes. Also, we need to make sure that our code loads after the jQuery file is included. So, on our HTML page, under the previous code we identifies in step one, we’ll add a new script section, like so:

<script type="text/javascript">
  //Our code goes here.
</script>

This tells the browser to process all code in between these tags as Javascript.

Step 3

Now we need to tell the browser when and how to process our code. Under most cases, I’ll include this new code to tell the browser to interpret anything else I write as jQuery.

<script type="text/javascript">
jQuery(document).ready(function($){
  //Now our code goes here
  //use jQuery when DOM is ready
});
</script>

This bit of code tells the browser to process the any code in between the curly brackets {} after the DOM is “ready”, or has finished loading. Notably, this means that the HTML, CSS, and scripts on the page have loaded, but does NOT mean that all media (images, videos, etc) have necessarily finished loading.

Now we have the setup to begin writing jQuery functions—this is basically the setup I’d use for every page where I need to include a unique bit of jQuery.

*Alternatively, you could put all of your jQuery in an external file and include that on your page. I think this method is just a little easier to keep straight when learning.

Set up the HTML and CSS

We’re going to add a very simple pop-up box to our page whereas, we click a button on our page and it makes another “popup” box visible. We’ll use some of the same tricks we learned in the last tutorial with CSS visibility. The difference is this time, instead of hovering over an element to reveal another, we’ll click on an element to reveal another.

Step 4

Let’s set up our HTML and CSS first.

Wherever you’d like your button to appear on your page, add some new HTML like this:

<span class="my_button">Test Button</span>
<div class="my_target">Test Target</div>

Step 5

Those just look like simple test right now, so let’s add some simple styles in our CSS:

.my_button {
    padding: 1em;
    background-color: #ffa457;
    display: inline-block;
}
.my_target {
    background-color: #f3f3f3;
    padding: 2em;
    border:1px solid #e5e5e5;
    width: 10em;
}

This is all pretty simple, but now we should have some boxes on our page that look more or less like this (don’t worry if yours don’t look exactly the same):

Step 6

What we want to do is hide the “target” by default, so that we only see the button on our page. This is easily accomplished by CSS, and the same technique we used for our dropdown menus in the last tutorial:

.my_target {
    background-color: #f3f3f3;
    padding: 2em;
    border:1px solid #e5e5e5;
    width: 10em;
    display: none;
}

The display: none; declaration should “hide” the target from our view, so that we only see the button on the page.

Writing your first jQuery function

Now that we have our pages set up the way we want, we’re going to write our first jQuery function to manipulate the DOM and show users our target pop-up box when we click on the button.

Step 7

Find the previous “document ready” function you added to your HTML page, and we’ll add some new code between:

<script type="text/javascript">
jQuery(document).ready(function($) {

  $(".my_button").click(function(){
    $(".my_target").toggle();
  });
  
});
</script>

Now your button should be working! Check it out in the example below:

See the Pen jQuery pop-up button by Alex Turnwall (@alturnwall) on CodePen.0

How the jQuery function actually works

But why? How? Let’s break down the jQuery to see how it works:

Our simple function has two parts: a selector and an action. The selector is the button we made, called “my_button”, and the action is “click”. So, this line of code:  $(“.my_button”).click(function(){}); is basically saying: “when you click on the element with a class of ‘my_button’, do something“.

Whatever that something is goes between the curly braces. In our case, this is: $(“.my_target”).toggle();, which means “toggle the element with a class ‘my_target’.”

If we string the two parts together, we have our complete function, like so:

$(".my_button").click(function(){
   $(".my_target").toggle();
});

In plain language, we could read this as:

“When ‘my_button’ is clicked, toggle ‘my_target’.”

That’s the core of what we’re doing here. When we click on the first thing we define, we cause something to happen to the other thing we define.

We’re using two basic jQuery methods to make this happen: click and toggle.

.click()
is a jQuery event method (more here). It allows whatever element is selected to be the thing users can click on to create the event to make something else happen. There are more event methods here.

.toggle()
is a jQuery effect method (more here). It alternates hiding and showing whatever element is selected. There are more effect methods here.

Both click and toggle do something on our page because they’ve been defined in the jQuery file we included in Step 1.

You can actually see the DOM manipulation happen!

Open the example page in a new tab →

Before you click on the button, use your inspect element tool to look at the HTML code. It should look something like this:

This is exactly the same thing you previously wrote in your HTML in Step 4, right? Good. It should be.

Now, keeping the element inspector open, click the button and see what happens to the code.

Viola! The code actually changed before your very eyes! You’re actually seeing the DOM being manipulated!

There, that wasn’t that hard, was it?

What should have been added to the code was the attribute  style=”display: block;”. This happens thanks to the toggle method you added—this is actually how the jQuery works—using simple HTML and CSS! All the jQuery is doing here is actually assigning this attribute and inline style to your page. Refer back to the toggle documentation for specifics.

Let’s review what we’ve learned

1. When you’re using jQuery, all you’re really doing is changing the HTML on your page—albeit in “real time”—as the user interacts with the page. This is the basic meaning of “manipulating the DOM”.
2. jQuery is a single file you include on your page that is written in Javascript. Ergo, when you’re using jQuery, you’re writing Javascript.
3. Javascript, HTML and CSS all work together to make this magic happen. jQuery is a library that makes interacting with all of these easier.
4. In order to use jQuery, the file must be included on our HTML pages.
5. Any jQuery that we write must be included on the HTML page inside <script> tags, below the original jQuery file link.
6. jQuery works by using selectors to select a specific HTML element, and then…
7. uses methods to do manipulate the page.
8. Methods are pre-defined in the jQuery library, and you can find all of them in the jQuery API documentation.

Pfew.

This was a very simple example that perhaps needs a little polishing with some better CSS styling, but it sets you up to write other functions that you can use to do achieve more complex effects. The sky is the limit—all you need to do is check out the jQuery documentation to see what methods await you.

Want more?

If you want to dig deeper into jQuery, check out try.jquery.com for more in-depth tutorials and examples, and follow the above links on the page for further documentation.

We’ll continue with polishing the design and functionality in the next tutorial →