Learning JQuery-4

3. Custom Selector

We have learned the CSS selector. Does jQuery have its own defined selector? The answer is yes.

For example, the following HTML file contains two tables. How can we make the table color clear?

 chapter2-2    <script type="text/javascript" src="jquery-1.10.2.js"></script>    <script type="text/javascript" src="chapter02.js"></script>Shakespeare's Plays    
 
 
  
  
  
 
   
 
    
As You Like It
 
    
Comedy
 
    
 
   
 
   
 
    
All's Well that Ends Well
 
    
Comedy
 
    
1601
 
   
 
   
 
    
Hamlet
 
    
Tragedy
 
    
1604
 
   
 
   
 
    
Macbeth
 
    
Tragedy
 
    
1606
 
   
 
   
 
    
Romeo and Juliet
 
    
Tragedy
 
    
1595
 
   
 
   
 
    
Henry IV, Part I
 
    
History
 
    
1596
 
   
 
   
 
    
Henry V
 
    
History
 
    
1599
 
   
 
  
 
 
Shakespeare's Sonnets
 
 
  
  
  
 
   
 
    
The Fair Youth
 
    
1-126
 
   
 
   
 
    
The Dark Lady
 
    
127-152
 
   
 
   
 
    
The Rival Poet
 
    
78-86
 
   
 
  
 
 

Add gray background

tr {background-color: #fff;}.alt {background-color: #ccc}

Js Code:

$('tr:even').addClass('alt');

Effect:

Shakespeare's Plays

As You Like It	Comedy
All's Well that Ends Well	Comedy	1601
Hamlet	Tragedy	1604
Macbeth	Tragedy	1606
Romeo and Juliet	Tragedy	1595
Henry IV, Part I	History	1596
Henry V	History	1599

Shakespeare's Sonnets

The Fair Youth	1-126
The Dark Lady	127-152
The Rival Poet	78-86

We want both tables to have even numbers with background colors.

$('tr:nth-child(odd)').addClass('alt');

Shakespeare's Plays

As You Like It	Comedy
All's Well that Ends Well	Comedy	1601
Hamlet	Tragedy	1604
Macbeth	Tragedy	1606
Romeo and Juliet	Tragedy	1595
Henry IV, Part I	History	1596
Henry V	History	1599

Shakespeare's Sonnets

The Fair Youth	1-126
The Dark Lady	127-152
The Rival Poet	78-86

Now I want to highlight all "Henry"

Highlight CSS:

.highlight {  font-weight: bold;  font-style: italic;}

Js Code:

$('td:contains(Henry)').addClass('highlight');

Shakespeare's Plays

As You Like It	Comedy
All's Well that Ends Well	Comedy	1601
Hamlet	Tragedy	1604
Macbeth	Tragedy	1606
Romeo and Juliet	Tragedy	1595
Henry IV, Part I	History	1596
Henry V	History	1599

Shakespeare's Sonnets

The Fair Youth	1-126
The Dark Lady	127-152
The Rival Poet	78-86

Appendix:

Chapter02-2.html

 chapter2-2    <script type="text/javascript" src="jquery-1.10.2.js"></script>    <script type="text/javascript" src="chapter02-2.js"></script>    
 Shakespeare's Plays    
 
 
      
  
  
 
   
 
    
As You Like It
 
    
Comedy
 
    
 
   
 
   
 
    
All's Well that Ends Well
 
    
Comedy
 
    
1601
 
   
 
   
 
    
Hamlet
 
    
Tragedy
 
    
1604
 
   
 
   
 
    
Macbeth
 
    
Tragedy
 
    
1606
 
   
 
   
 
    
Romeo and Juliet
 
    
Tragedy
 
    
1595
 
   
 
   
 
    
Henry IV, Part I
 
    
History
 
    
1596
 
   
 
   
 
    
Henry V
 
    
History
 
    
1599
 
   
 
  
 
 
Shakespeare's Sonnets    
 
 
      
  
  
 
   
 
    
The Fair Youth
 
    
1-126
 
   
 
   
 
    
The Dark Lady
 
    
127-152
 
   
 
   
 
    
The Rival Poet
 
    
78-86
 
   
 
  
 
 

Chapter02.css

@charset "utf-8";/* CSS Document */.horizontal {float: left;list-style: none;margin: 10px;}.sub-level {background: #ccc;}a {color: #00c;}a.mailto {background: url(images/email.png) no-repeat right top;padding-right: 18px;}a.pdflink {background: url(images/pdf.png) no-repeat right top;padding-right: 18px;}a.henrylink {background-color: #fff;padding: 2px;border: 1px solid #000;}/* Part 2 */tr {background-color: #fff;}.alt {background-color: #ccc}.highlight {  font-weight: bold;  font-style: italic;}

Chapter02-2.js

$(document).ready(function() {    //$('tr').filter(':even').addClass('alt');$('tr:nth-child(odd)').addClass('alt');$('td:contains(Henry)').addClass('highlight');});