Dec 27
JQuery Tutorial #1 :: Matching Elements
Tutorial #1: Matching Elements
----------------------------------------------------
Welcome to the tutorial! Today, we'll be learning about the wonders of JQuery and its ability to return a precisely-matched set of elements that match the requirements you easily pass through a function.
You may have seen the JQuery function before; if not, it looks like this: $().
The function is used for many, many different things, but today we'll be covering the art of using it to find elements.
The first thing to know is that JQuery requires a knowledge of the page you'll be modifying with javascript, as you'll be navigating the DOM (Document Object Model, basically the structure of HTML elements on a page). I suggest you either view source (ctrl+u in Firefox, page -> view source in IE) or download Firebug, a plugin for those with enough common sense to use a Mozilla product.
Firebug allows you to navigate the DOM with ease by either opening the interface and clicking around, or right clicking anywhere on the page and selecting "Inspect Element". You can also test javascript by pasting it in the console, or check on any AJAX requests that may be happening. Also part of the console are all generated errors just ready to be debugged.
WARNING: Do not read the above. You could just read this, which pretty much summarizes the three long sentences:
"If you haven't had firebugs babies yet, you really should get going."
Oops, too late. Let's move on then.
On to the JQuery!
Like I mentioned earlier, the JQuery function is $, the dollar sign. You call it like any javascript function:
$("argument 1")
There are also special circumstances involving an argument 2...which we will not get into, as after trudging through this junk I call a post, you'll need incentive to learn more later; the promise of an argument 2 should do well. =D
Argument 1, hereafter known as A1, is what we will be focusing on.
There are a couple of different ways to match elements in JQuery, I will be focusing on the main ones today.
#1, Tag Names
Tag names are good when you're trying to match ALL of a specific type of element in the <body>.
In the case that you're working with this:
- Code: HTML
<p>Hello</p>
<p>Zoop</p>
<div>This is a DIV</div>
And running this:
- Code:
$("p")
The code will return the first two elements. Can you tell me why? Yes, that IS why. Good job!
#2, Class Names/IDs
Class names are a great way to match multiple elements.
If you have this:
- Code: HTML
<p>We Apologize</p>
<p class="hello">For The</p>
<p class="hello">Inconvenience</p>
Running the following code:
- Code:
$(".hello")
Will return the last two <p> elements. Why? Because of the little dot in A1. This dot tells JQuery the following text is a class name.
This code works almost exactly the same way for ID matching, except that you use a # instead of a .
If you had:
- Code: HTML
<p id="zoop">Zoop</p>
<p>Zoop</p>
And ran:
- Code:
$("#zoop")
The first <p> element would have been returned. Get it? Got it? Good.
Now, in front of the # or the ., we can put a tag name. So if you only want span elements with the class 'holy', you'd use this:
- Code:
$("span.holy")
And if you only want table elements with the ID of 'hello', you'd use this:
- Code:
$("table#hello")
EXTRA CREDIT #3, Attribute Selectors
Here comes the tricky part. Suppose I have the following HTML document.
- Code: HTML
<p id="hello" title="first">
<span id="arrg" title="first">
</p>
<span id="zack" title="second">
<p id="zoop" alt="second">
<span id="blah" title="third">
</p>
Bear with me. Now, let's break up the following code.
- Code:
$("*[@title=first]")
$(" : We know what this does, it invokes JQuery.
* : Match all element tag names. This can be replaced with any element tag name, like P or Span or Div. By using P, you restrict the results to only P elements.
[@ : This tells JQuery that we're ATTRIBUTE MATCHING. An attribute is an option set by you pertaining to an element. The attribute name is the type of attribute it is (e.g. alt, title) and the attribute value is...the value of the attribute, like "third" or "first" or "second". The [@ means we're looking for a specific value of a specific attribute.
title=first]") : This tells JQuery we want to find all elements (because of the * from #2) that have an attribute named "title" set to the value of "first". Then it ends the function.
In its entirety, this code returns the first <p> element and the <span> within it, as those are the only elements on the page that have a title of "first". Now, had we changed the * to a P, it would have only returned the <p> element; similarly, had we changed it to a SPAN, it would have only returned the <span> element.
As for what you can do with these returned elements I speak of...well, you'll just have to wait.
Questions
Okay, at the end of each tutorial I post here, I'll write a small question or two that you can PM the answer[s] of to me. I will tell you if you're correct.
1. How do I fetch all P elements that have the attribute "colspan" set to 6?
2. How do I get all TD elements that have a class name of "fetch"?
Thanks for reading this lengthy tutorial. If you just skipped down to see how the story ended, you suck. =D
-Choco
-
Comment by RyuraGS, Dec 27 2007, 08:43 PM
Great tutorial! Looking forward to seeing future tutorials.
-
Comment by choco, Dec 27 2007, 08:44 PM
Thanks man! Glad you liked it. =]
-
Comment by nightLIFE, Dec 27 2007, 08:50 PM
Good work.
-
Comment by ChipChamp, Jan 6 2008, 12:48 AM
Sweet! This is the best tutorial I've seen on JQuery... the docs on its site weren't all that helpful to me. Thanks!
-
Comment by choco, Jan 13 2008, 11:15 AM
Thanks for the kind words, ChipChamp.
-
Comment by RyuraGS, Jan 21 2008, 04:54 PM
choco, you may want to revise this tutorial since ZB uses jQuery 1.2.2 now. The [@...] functionality has long since been replaced by [attribute]
- Add new comment:
1:29 PM Dec 8
