JQuery and CSS Selectors: Part 4

Introduction

In this article you are going to learn about the jQuery and CSS Selectors. If you are still not using jQuery in your web applications, this article will motivate you.

Here I am going to talk about "Custom Selectors"; let's first look at a problem that we will solve in this article.

Problem 1

Look at the following table structure.

            <p>
                <b>Table 1 goes here.</b>
            </p>

            <table>
                <tr>
                    <td>Put your texts here.</td>
                </tr>
                <tr>
                    <td>Put your texts here.</td>
                </tr>
                <tr>
                    <td>Put your texts here.</td>
                </tr>
                <tr>
                    <td>Put your texts here.</td>
                </tr>
                <tr>
                    <td>Put your texts here.</td>
                </tr>
            </table>

            <p>
                <b>Table 2 goes here.</b>
            </p>

            <table>
                <tr>
                    <td>Put your texts here.</td>
                </tr>
                <tr>
                    <td>Put your texts here.</td>
                </tr>
                <tr>
                    <td>Put your texts here.</td>
                </tr>
                <tr>
                    <td>Put your texts here.</td>
                </tr>
            </table>

It looks quite plain in a browser; the table has a solid white background, with no styling separating one row from the next:

 

Image 1

In above code, I have not attached any "class" or "id" attributes with table tag or it's any native tags. Now I'm wishing to apply a style to it without changing or adding any inline style (with table), in other word, by keeping the above table as it is and applying a style to it.

It is possible using CSS but it will not be very concise. jQuery's "Custom Selectors" will create it concisely. Before getting started, let's learn some terms.

Custom Selectors

There is a wide variety of CSS selectors; jQuery adds its own custom selectors, these custom selectors enhance the already impressive capabilities of CSS selectors to locate page elements in a new and a simple manner.

When possible, jQuery uses the native DOM (Document Object Model) selector engine of the browser to find elements. This extremely fast approach is not possible when custom jQuery selectors are used. For this reason, it is recommended to avoid frequent use of custom selectors when a native option is available and performance is very important.

Look at the following image (Image 2) that has a style and it affects every <tr> tag.

 

Image 2

But I want to alternate the colors, so keep reading.

Using odd and even Custom Selectors

Odd (:odd) and Even (:even) selectors are very useful custom selectors in a jQuery library. Let's use them in the above table to apply a style in alternate rows.

In the screen given below (Image 3), look at the style and jQuery method that overrode the above output (Image 2) and applied the new color to alternate and even rows. The first row counts as 0 (even) and the second row counts as 1 (odd), and so on:

 

Image 3

In above jQuery example, change the :even to :odd to get the output as just the opposite.

Wait!! Look at the above image (browser screen), can you see the color (in first row) for both tables. Why is there such a difference?

Look, its the default; if you just use

$('tr:even')

You need to modify it and write it as

$('tr:nth-child(even)')

It counts element's position relative to its parent element, rather than relative to all the elements selected so far. This selector can take either a number, even or odd as its argument. Here is the output now.

 

Image 4

Problem 2

Assume we have the following table structure and its browser out in hand.

 

Image 5

Now, I am wishing to apply a special style for my blog's url; that is http://www.itorian.com in the above image (Image 5). Look at the image (Image 6) that has the style in action.

 

Image 6

In the above image, jQuery is using the :contains key to find an "itorian" element in all <td> and when it finds, jQuery adds a style class named .spcl to it.

In the next article, I will continue my talk on jQuery Selectors. I hope you like it. Thanks.