jQuery and CSS Selectors Part-4
Introduction
In this post you are going to learn all about jQuery
and CSS Selectors, if you are still not using jQuery in your web apps, this
post will motivate you.
Here I am going to talk on "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 browser; table has a solid
white background, with no styling separating one row from the next:
Image1
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 style to it
without changing or adding any inline style (with table), in other word, by keeping
the above table as it is and apply style to it.
It is possible using CSS but it will not be much
concise. jQuery's "Custom Selectors" will create it concise. Before getting
started, let's learn some terms.
Custom
Selectors
There is 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 new and simplest way.
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 affected every <tr> tag.
Image
2
But I want to alternate the colors, keep reading.
Using
odd and even Custom Selectors
Odd (:odd) and Even (:even) selectors are very useful
custom selectors in jQuery library. Let's use them in above table to apply
style in alternate rows.
In the screen given below (Image 3), look at style and
jQuery method that overridden 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 just opposite.
Wait!! Look at above image (browser screen), can you
see the color (in first row) for both tables. Why's such difference?
Look, its 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 following table structure and its
browser out in hand.
Image
5
Now, I am wishing to apply special style for my blog's
url that is http://www.itorian.com
in above image (Image 5). Look at image (Image 6) that has style in action.
Image
6
In above image, jQuery is using :contains key to find "itorian" element in all <td> and when it finds, jQuery adds a style
class named .spcl to it.
In the next post, I will continue my talk on jQuery
Selectors.
I hope you like it. Thanks.
Comments
Post a Comment