Intro to jQuery – Part 2

Now that you know how to select and modify objects, I will show you how to perform actions when certain events happen on your page. Say you want to have something happen when a user clicks a button. How would you do that? Here’s some sample HTML:

<input type="text" id="fieldText" />
<button id="btnText">Add</button>
<ul id="listOutput"></ul>

Let’s say that when the user clicks the btnText button, we take whatever text is in the fieldText textbox and add it to the unordered list listOutput. Like modifying elements, you can bind events to elements by first selecting them.

jQuery provides the click function, which will run your code when a user clicks the elements you selected with $. For more information, check out the jQuery events page and explore the other events you can bind to. Here’s an example:

$("#btnText").click(function() {

So, back to our example, let’s use jQuery to add the text from the textbox to our list when the user clicks on the button:

$("#btnText").click(function() {

There’s a lot happening here: first off, we’re telling jQuery to run some code for us when the user clicks our button. Then, when the user does click it, we’re using append to add an <li> to our list. Notice how we’re also selecting the textbox and using the val function to get the value typed into the textbox.

It’s worth noting that the val function can also set the value of a form element, and works on ANY form element regardless of how that element stores its value.

Ok, let’s go ahead and demonstrate another event function called change. This event is fired for text fields when a user changes the text, or on dropdowns when the user changes the selection. Consider the following html code:

<select id="dropdownItems">
<option>item 1</option>
<option>item 2</option>
<option>item 3</option>
<ul id="listOutput"></ul>

Let’s say that when the user changes the selection on the dropdown, we take the text from the selected item and add it to our list. Here’s how to use jQuery to do that:

$("#dropdownItems").change(function() {
  $("#listOutput").append("<li>" + $("#dropdownItems").val() + "</li>");

As you can see, this is very similar to the example before with the textbox. The main difference is that we’re triggering the code with a different event.

This example code will run, but there is room for improvement. Let’s talk about using the “this” keyword. In JavaScript and many other languages, “this” refers to an object that you’re currently working on. In this example, if you were to use the “this” keyword inside of the function we created inside the change event, it would refer to the dropdown that triggered the event. Let’s go ahead and re-write the code to demonstrate:

$("#dropdownItems").change(function() {
  $("#listOutput").append("<li>" + $(this).val() + "</li>");

Notice how we’re wrapping the this keyword with a call to the $ function: we do this to make sure that it’s really a jQuery object. So, why would you want to use “this” over explicitly selecting the object again? Well, the main reason to do this is if you want to bind your function to multiple objects. Let’s say there are 3 dropdowns on the page and you want to use the same code to handle the change event on them. Instead of copy-pasting the code, you can use jQuery to bind the function to all of the dropdowns, and use the this keyword to use which ever dropdown triggered the event. Given the following html code:

<select id="dropdown1" class="my-dropdown">...</select>
<select id="dropdown2" class="my-dropdown">...</select>
<select id="dropdown3" class="my-dropdown">...</select>
<ul id="listOutput"></ul>

Notice how I added the “my-dropdown” class to each of the dropdowns. This is a class that I made up so that I can use jQuery to select all of the relevant dropdowns at once:

$(".my-dropdown").change(function() {
  $("#listOutput").append("<li>" + $(this).val() + "</li>");

Notice how this code is nearly identical to our previous example, with the exception of the initial selection criteria. Instead of selecting one element by ID, I’m selecting any elements that contain the class “my-dropdown”. This allows me to bind events to multiple elements with one line of code; this is one of the most powerful aspects of jQuery.

Important Note: The above example will only bind events to elements that meet that criteria at the point in time when that line of code was executed. For example, if later on in the JavaScript I added the “my-dropdown” class to another element and we already created the event bindings, that element will not fire the event. If you want to be able to dynamically handle events, use the on function with the selector parameter.

In part 3, I will talking about effects with the jQuery UI library.

One thought on “Intro to jQuery – Part 2

  1. Pingback: Tutorial: jQuery Part 1 & 2 | From Mainframes to jQuery and Beyond…

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s