Selectors in jQuery

In this tutorial i’ll go over some of the frequently used Selectors and show you how to use them. Most of jQuery’s manipulations revolve around selectors, so it’s a vital skill to know.

  1. <table class="holder" border="1">
  2. <tbody>
  3. <tr>
  4. <td id="1">One</td>
  5. <td id="2">Two</td>
  6. <td id="3">Three</td>
  7. <td id="4">Four</td>
  8. <td id="5">Five</td>
  9. </tr>
  10. </tbody></table>

So.. we want to select the first td. We do this by first selecting all the td tags and then use :first to select the first td. Using jQuery’s great chaining ability, we change the text.

  1.  $("td:first").text("This is the altered first box");

jQuery also has :odd and :even selectors. This will select the odd or even id’s. In this next example. We are selecting all of the odd td’s , and then select the first one of them. Again , we use jQuery’s chainability.

  1. $("td:odd:first").text("We changed this using odd and first");

You need to be aware that selecting the odds/evens does not use the element ids. It just counts them. It starts from 0 and starts counting, not from 1. This is why it changes the second cell using the method above.

Now, lets match the next one by specific text. We can do this using the :contains selector. We look in all td elements, then in them we look for the word Three , if we find it we replace the text.

  1. $("td:contains(’Three’)").text("we matched the text, then changed it.");

We can use the element id to edit select what we want. jQuery’s element selector is the hash symbol (#).

  1. $("#4").text("We found this using the id");

The last one! How are we going to select it? We are going to use the gt selector. We can specify a tag, and jQuery counts how many there are. In this case we select td and it counts them (remember it starts at 0, not 1). It will select all the td that are higher than the number we specify. So we have 5 td , 0,1,2,3,4 . Se specify number 3, so only number 4 is effected. Thats our last td.

  1. $("td:gt(3)").text("The Last One!");

Demo File

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • StumbleUpon
  • bodytext
  • description
  • Slashdot
  • Technorati
  • Sphinn
  • del.icio.us
  • Facebook
  • Google
Filed under: Uncategorized, jquery, tutorial, ,

5 Responses

  1. Michael Says:

    Awesome :D
    Is there a way to store this in a variable?
    I know nothing of jquery :P

    Posted on April 23rd, 2008 at 11:48 am

  2. Panzer Says:

    Yep, just use normal javascript.

    var hoolahoop = $(jqueryselectorstuffhere);

    Posted on April 23rd, 2008 at 3:40 pm

  3. Manipulation in jQuery | Query7 - PHP jQuery Linux Says:

    [...] Using Selectors to Select HTML Elements in jQuery [...]

    Posted on April 26th, 2008 at 2:31 pm

  4. darren Says:

    cool, thanks for the tutorials.

    as for the comment above. you can store the actual dom node (as opposed to the jquery object) using;

    var hoolahoop = $(jqueryselectorstuffhere).get(0);

    Posted on May 5th, 2008 at 3:58 am

  5. Skylog » Blog Archive » links for 2008-05-07 Says:

    [...] Using Selectors in jQuery (tags: jquery) [...]

    Posted on May 7th, 2008 at 2:33 am

Leave a Reply