Intro to jQuery – Part 1

Prerequisites

  • How to build a basic HTML page.
  • How to use the <script> tag to add JavaScript code to a page.
  • basic programming skill (how to call a function) would be helpful.
  • Optional: Knowledge about CSS, since you’ll use that same knowledge in jQuery when selecting elements.

If you want to learn more about HTML before moving on to JavaScript, check out these tutorials:

http://htmldog.com/guides/htmlbeginner

http://www.w3schools.com/html/html_intro.asp

Quick Definitions

  • Element: an HTML tag on your web page. Example:
    <a href="aboutme.html">About Me</a>
  • Selector: A query used to select one or more elements in CSS and jQuery.
  • DOM: Document Object Model, refers to the HTML that the browser has loaded on the page.

What is jQuery?

jQuery is a lot of different things to the developers that use it every day, however for a beginner it’s important to focus on the basics. jQuery is a simple way of picking out parts of your html and making changes to those parts. I found that emphasizing a two-step approach in understanding what jQuery does helps the learner focus on each piece separately and then combine the pieces into a working line of code.

Getting Started

To get started, you’ll want to create a basic HTML file. Then, you’ll want to add a reference to the jQuery js file. The simplest way to do that is to include the following line of HTML inside of your <head> tag:

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>

On the line after that one, put this:

<script type="text/javascript">
$(function() {

//put your jQuery code here...

});
</script>

What’s up with this?

When the browser is reading your HTML and JavaScript code, it does so from top to bottom. Unless your script tag is all the way at the bottom of the HTML file, the browser will try to run your JavaScript code before it has had a chance to load the page. This means that you will get unexpected and buggy results. So, jQuery has a solution: it will call your code when the page is loaded, and not a second before. You don’t have to understand exactly how this works, just put your code where my code comment above says, and your code will run at the correct time. This will make more sense in later tutorials when I talk about handling events with jQuery, but for now this will get us started.

Step 1: Selecting Elements

Before we can modify the elements on our page, we need to select the ones we want. In order to do that, we’re going to use the $ function. What are some different ways that we can select elements on the page? Well, there are 3 basic ways:

  • By element name. “give me all of the <a> tags on the entire page”.
  • By ID. “give me the element with an ID of textbox1”.
  • By class. “give me the elements that use the class myclass”.

So, what would that look like using jQuery?

If you want to select all of the links on the page, you would write this:

$("a")

Keep in mind that this is only part of the statement, there’s two parts remember!

Now, suppose we have the following piece of HTML code:

<form action="search.php" method="get">
  <input type="search" name="q" id="searchfield" />
  <input type="submit" value="Search!" />
</form>

How would you select the search field textbox in the example above? We can’t use $(“input”) because we’d get BOTH the textbox and the submit button. We need something that will let us select ONLY the textbox. Notice how it has an ID attribute with a value of “searchfield”. So, here’s how we select it:

$("#searchfield")

Notice that we’re using the # symbol. This tells jQuery that we want it to search by ID, not by tag name. Also, keep in mind that this is the exact same syntax that CSS selectors use. The commonality is by design, so that way we can re-use that knowledge in both CSS and jQuery.

Here’s another piece of HTML code:

Name: <input class="required" type="text" id="namefield" /><br />
Email: <input class="required" type="email" id="emailfield" /><br />
Message: <input type="text" id="msgfield" />

Notice how the first two text fields are using the class “required”. Let’s use jQuery to select those two fields:

$(".required")

The . (dot) symbol tells jQuery to search by class name. You can add multiple classes to your tag by separating them with spaces inside of the class attribute like this:

<a class="mylink makeitpurple whatever-i-want">My Link</a>

There are more advanced uses of selectors, however this is enough information on the subject to build something useful.

Step 2: Modifying the Elements

Now that we have our elements selected, we want to do something with them. There are a multitude of jQuery functions designed to do just that. For the full list check out the DOM Manipulation Page on the jQuery website. Let’s start off with one that has an obvious effect on the page:

append("<p>Some Text</p>")

The append(…) function will append child elements inside of the elements that you selected with the $ function. For instance, if you had a <ul> tag and you wanted to add <li> tags inside of it, you could use the append function like this:

append("<li>my item</li>")

Important Note: I am isolating the append(…) call by itself, in a minute we’re going to use the $ and the append function in one line to make a functional line of JavaScript code. These partial examples are just blocks that have to be put together into a working instruction.

Putting It Together

Now that you’ve learned how to select elements and then modify them, let’s put it all together and write one complete one line of code. In order to do this, we’re going to need to put something between the two pieces to tell JavaScript what we’re trying to do. In this case, we’re going to use the . (dot) operator. Here’s why: the $ function returns a jQuery object which contains functions we can call (like append) to modify the objects inside of it. The dot tells JavaScript that we want to access something inside of the object, and then we put the function name after it like this:

<Step 1>.<Step 2>;

That’s the complete line of code. So, here’s a fully working example putting it all together. Given the following HTML code:

<ul id="mylist">
</ul>

Let’s add an item to this list using jQuery in JavaScript:

$("#mylist").append("<li>list item!</li>");

Concluding Thoughts

Learning how to write code can be an overwhelming and confusing process; there are so many resources online and so many different ways of doing things, that it’s not always clear what’s going on. I hope that you have found this explanation of jQuery to be concise and clear, and I also hope that you learned something useful today. Whether you learned something or not, your feedback is always appreciated, so be sure to leave a comment on the page.

In part two, I’ll be covering how to use jQuery to perform basic event handling on your selected elements, so stay tuned!

Additional Reading: jQuery API Reference

[Continue to Part 2…]

Advertisements

2 thoughts on “Intro to jQuery – Part 1

  1. Pingback: Tutorial: Intro to jQuery | From Mainframes to jQuery and Beyond…

  2. 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:

WordPress.com Logo

You are commenting using your WordPress.com 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