- How to build a basic HTML 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.
- 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.
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:
On the line after that one, put this:
What’s up with this?
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:
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:
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:
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:
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:
Putting It Together
<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>
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