jQuery - Selector: Custom Selectors Step By Step Tutorial

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

jQuery - Selector: Custom Selectors

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

jQuery Selector Step By Step Tutorial - Part 5: jQuery adds its own custom selectors. It wide variety of CSS and XPath selectors. The syntax is the same as the CSS pseudo-class syntax, where the selectors starts with a colon (:). For practice, we will style alternate rows. For this job, we use two custom selectors in the jQuery library, :odd and :even. Let's do it.

First, create a html document named "customselector.html". enter with following code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom Selectors</title>
<link rel="stylesheet" href="custom-song.css" type="text/css" media="screen">
<script src="jquery.js" type="text/javascript"></script>
<script src="custom-song.js" type="application/javascript"></script>
</head>

<body>

<table>
  <tr>
    <td>Title</td>
    <td>Singer</td>    
  </tr>
  <tr>
    <td>Yesterday</td>
    <td>Beatles</td>    
  </tr>  
  <tr>
    <td>Kiss Me Quick</td>
    <td>Elvis</td>    
  </tr>  
  <tr>
    <td>Ben</td>
    <td>Michael Jackson</td>    
  </tr>  
  <tr>
    <td>Hei, Jude!</td>
    <td>Beatles</td>    
  </tr>  
</table>

</body>
</html>

Then, create a file named "custom-song.css". Enter with following code:


.odd{
  background-color:#3399FF;
}
.even{
  background-color:#FFFFCC;
}

Last, create a file named "custom-song.js". Enter with jQuery syntax like this:


$(document).ready(function(){
  $('tr:odd').addClass('odd');	
  $('tr:even').addClass('even');	  
});

Now, point your browser to customselector.html. You may get like this:

| Give Your Opinion | Recommend

Share and Bookmark to: These icons link to social bookmarking sites where readers can share and discover new web pages.

624

posting

Your Name *	:
Email *	:	(Will not be published)
Website/URL	:
Your Comment *	:

* Required

PHP Basic	PHP Classes	PHP Framework	PHP Application	PHP Security	PHP Editor
PHP Books	PHP Database	MySQL	Hosting	Apache	CSS
Motivation	Web Design	PHP API	JavaScript	Computer Tips

phpeveryday.com

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

jQuery - Selector: Custom Selectors