phpeveryday.com

The best tutorial of php, php framework, php strategies, object oriented oriented,


jQuery - Selector: Choose a Style at Custom Selectors

Tag: jQuery, $(), factory, function, selectors, custom selectors   Category: JavaScript
post: 21 Mar 2008 read: 472


jQuery Selector Step By Step Tutorial - Part 6: In this post, we will see nice implementation of custom selectors. We find special text (such "Jude") in <td>, then make special style on it.

Modify our css, become like this:


.odd{
  background-color:#3399FF;
}
.even{
  background-color:#FFFFCC;
}
.top40{
 color:#FF0000;
 font-weight:bold;
}

Next, modify js file, become like this:


$(document).ready(function(){
  $('tr:odd').addClass('odd');	
  $('tr:even').addClass('even');
  
  $('td:contains("Jude")').addClass('top40');
});

You will get like this:



Series this article:
jQuery - Selectors: Understanding The $() Factory Function
jQuery - Selector: Modifying Style at List Item Levels
jQuery - Selector: Styling Sub Level Item
jQuery - Selector: XPath Selectors
jQuery - Selector: Custom Selectors
jQuery - Selector: Choose a Style at Custom Selectors
jQuery - Selector: Modify Style for Table Header
jQuery - Selector: Styling Sibling
jQuery - Selector: Styling Next Cell

| Give Your Opinion | Recommend
Share and Bookmark to: These icons link to social bookmarking sites where readers can share and discover new web pages.
digg del.icio.us technorati Ma.gnolia BlinkList

Recommended articles by other readers:
Web Services: How PHP Kiss VB.NET? (Part 1)
Chart: How to Build Cool Animation Real Time Chart
Joomla: Fast Road to Understand Component Programming
Email: Send Attachement Mail
mod_rewrite - Part 1: create your "fantasy" URL

What do You Think?
Your Name *:
Email *:
(Will not be published)
Website/URL:
Your Comment *:
* Required


615
posting