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');});