jQuery Simple Selectors

A03B0023 Last week we started looking at the jQuery selector by looking at the syntax we used to get our “hello world” demo working.

Today, we’ll start digging a little deeper into this main feature of jQuery.

There are four basic ways to get data using the selector.

  • By the tag name
  • By the ID
  • By the class name
  • Using an XPath statement

We can’t really deal with XPath statements until we fully understand the first three, so we’ll spend our time today dealing with the first three and then come back and look at XPath selectors later.

Probably the most common way of retrieving an element in JavaScript is by using the ID:

var someVariable;
someVariable = document.getElementById("someIdHere");

We can do the same thing in jQuery by writing:

var someVariable;
someVariable = $("#someIdHere");

Note that anytime you want to retrieve an element by its ID in jQuery, you prefix the value of the ID with a “#”.

Once you have the object, you can then call functions like you would in JavaScript.

In JavaScript, you can also retrieve all of a particular set of tags on a page.  For example, to get all of the anchor tags and loop through them, you’d do something like:

var anchorTags;
anchorTags = document.getElementsByTagName("a");
var anchorIndex;
for (anchorIndex = 0;
   anchorIndex < anchorTags.length;
   anchorIndex++)
{
/* do something here */
}

In jQuery you can do the same thing, often in one line:

$("a").SomeBuiltInFunction();

We’ll get into the details of how to call our own functions in a later post.

Where I personally really started to get excited was when I saw that I could do the same thing I’ve been doing with tags with classes.

Have you ever wanted to get a list of all of the elements of a particular class and iterate over them so that you could perform some action on them?  Now you can.  It is as simple as:

$(".classNameHere").SomeBuiltInFunction();

As you can probably see, a lot of this works a lot like CSS does.  That’s the beauty of it all.  You can actually select elements using CSS select statements.  If you are familiar with CSS, you should be very comfortable with our next post on jQuery.

 

Other post in jQuery

Related Post

  • jQuery – Explaining Last Week’s CodejQuery – Explaining Last Week’s Code Last week I left you with a chunk of code that showed you that you had successfully installed jQuery into your web application. The code we need to discuss looks like this: $(document).ready(f...
  • jQuery Selectors – Looks just like CSSjQuery Selectors – Looks just like CSS Last week we took a look at the jQuery selector syntax, which allows us to select elements by their ID, class name, or tag name. While it is pretty cool that you can select by class name, that ...
  • jQuery – class manipulationjQuery – class manipulation So, now that we've fully exhausted the topic of how to select elements using jQuery, what can we do with it? Well, one thing we can do is use the two built-in methods, addClass and removeClass, ...
  • jQuery – The Man, The Myth, The LegendjQuery – The Man, The Myth, The Legend I admit it.  I've been ignoring jQuery for quite a while.  But I have a tendency to do that with most new things.  I generally don't work with beta software and I wait for critical m...
  • jQuery Looks like XPathjQuery Looks like XPath So far in our examination of jQuery we've seen how to select an ID, select a set of elements by tag name and select a set of elements by their class.  But what if we wanted to select a set of elem...