$(document).ready(function() {
$('#topics a').click(function(event) {
event.preventDefault();
var topic = $(this).text();
$('#topics a.selected').removeClass('selected');
$(this).addClass('selected');
$('#news tr').show();
if (topic != 'All') {
$('#news tr:has(td):not(:contains("'+topic+'"))')
.hide();
}
});
});
("'+topic+'"))里面的加号和两对引号各代表什么意思呢？
试了很多次，发现只有这种组合代码才能运行。
感谢解答。
html和css代码如下：
<!DOCTYPE html>
jQuery News
<link rel="stylesheet" href="09.css" type="text/css" />
<script src="jquery.js"></script>
<script src="09.js"></script>
jQuery News
<div id="topics">
Topics:
<a href="topics/all.html" class="selected">All</a>
<a href="topics/community.html">Community</a>
<a href="topics/Conferences.html">Conferences</a>
<a href="topics/Documentation.html">Documentation</a>
<a href="topics/Plugins.html">Plugins</a>
<a href="topics/Releases.html">Releases</a>
<a href="topics/Miscellaneous.html">Miscellaneous</a>
</div>
<table id="news">
<thead>
<tr>
<th>Date</th>
<th>Headline</th>
<th>Author</th>
<th>Topic</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="4">2011</th>
</tr>
<tr>
<td>Apr 15</td>
<td>jQuery 1.6 Beta 1 Released</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Feb 24</td>
<td>jQuery Conference 2011: San Francisco Bay Area</td>
<td>Ralph Whitbeck</td>
<td>Conferences</td>
</tr>
<tr>
<td>Feb 7</td>
<td>New Releases, Videos & a Sneak Peek at the jQuery UI Grid</td>
<td>Addy Osmani</td>
<td>Plugins</td>
</tr>
<tr>
<td>Jan 31</td>
<td id="release">jQuery 1.5 Released</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Jan 30</td>
<td>API Documentation Changes</td>
<td>Karl Swedberg</td>
<td>ddDocumentation444</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="4">2010</th>
</tr>
<tr>
<td>Nov 23</td>
<td>Team Spotlight: The jQuery Bug Triage Team</td>
<td>Paul Irish</td>
<td>Community</td>
</tr>
<tr>
<td>Oct 4</td>
<td>New Official jQuery Plugins Provide Templating, Data Linking and Globalization</td>
<td>John Resig</td>
<td>Plugins</td>
</tr>
<tr>
<td>Sep 4</td>
<td>The Official jQuery Podcast Has a New Home</td>
<td>Ralph Whitbeck</td>
<td>Documentation</td>
</tr>
<tr>
<td>Aug 24</td>
<td>jQuery Conference 2010: Boston</td>
<td>Ralph Whitbeck</td>
<td>Conferences</td>
</tr>
<tr>
<td>Aug 13</td>
<td>The jQuery Project is Proud to Announce the jQuery Mobile Project</td>
<td>Ralph Whitbeck</td>
<td>Plugins</td>
</tr>
<tr>
<td>Jun 14</td>
<td>Seattle jQuery Open Space and Hack Attack with John Resig</td>
<td>Rey Bango</td>
<td>Conferences</td>
</tr>
<tr>
<td>Mar 16</td>
<td>Microsoft to Expand its Collaboration with the jQuery Community</td>
<td>John Resig</td>
<td>Miscellaneous</td>
</tr>
<tr>
<td>Mar 15</td>
<td>jQuery Conference 2010: San Francisco Bay Area</td>
<td>Mike Hostetler</td>
<td>Conferences</td>
</tr>
<tr>
<td>Jan 14</td>
<td>jQuery 1.4 Released</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Jan 8</td>
<td>14 Days of jQuery and the New API Browser</td>
<td>John Resig</td>
<td>Documentation</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="4">2009</th>
</tr>
<tr>
<td>Dec 3</td>
<td>jQuery Wins .NET Magazine Award</td>
<td>John Resig</td>
<td>Miscellaneous</td>
</tr>
<tr>
<td>Dec 3</td>
<td>jQuery Joins the Software Freedom Conservancy</td>
<td>Ralph Whitbeck</td>
<td>Miscellaneous</td>
</tr>
<tr>
<td>Oct 22</td>
<td>jQuery Summit</td>
<td>John Resig</td>
<td>Conferences</td>
</tr>
<tr>
<td>Aug 20</td>
<td>code.jquery.com Redirected to Google Ajax APIs</td>
<td>Mike Hostetler</td>
<td>Miscellaneous</td>
</tr>
<tr>
<td>Jul 2</td>
<td>jQuery Conference 2009</td>
<td>John Resig</td>
<td>Conferences</td>
</tr>
<tr>
<td>Mar 6</td>
<td>jQuery UI 1.7 Released</td>
<td>Rey Bango</td>
<td>Plugins</td>
</tr>
<tr>
<td>Jan 28</td>
<td>jQuery Meetup in San Francisco</td>
<td>John Resig</td>
<td>Conferences</td>
</tr>
<tr>
<td>Jan 14</td>
<td>jQuery 1.3 and the jQuery Foundation</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="4">2008</th>
</tr>
<tr>
<td>Nov 19</td>
<td>Cloudfront CDN for jQuery</td>
<td>John Resig</td>
<td>Miscellaneous</td>
</tr>
<tr>
<td>Sep 28</td>
<td>jQuery, Microsoft, and Nokia</td>
<td>John Resig</td>
<td>Community</td>
</tr>
<tr>
<td>Aug 29</td>
<td>jQuery.com Site Redesign</td>
<td>John Resig</td>
<td>Miscellaneous</td>
</tr>
<tr>
<td>Aug 15</td>
<td>jQuery Conference 2008</td>
<td>Karl Swedberg</td>
<td>Conferences</td>
</tr>
<tr>
<td>Jul 14</td>
<td>jQuery UI 1.5.2</td>
<td>Paul Bakaus</td>
<td>Plugins</td>
</tr>
<tr>
<td>Jun 26</td>
<td>jQuery UI 1.5.1</td>
<td>Paul Bakaus</td>
<td>Plugins</td>
</tr>
<tr>
<td>Jun 26</td>
<td>jQuery Camp 2008</td>
<td>Rey Bango</td>
<td>Conferences</td>
</tr>
<tr>
<td>Jun 9</td>
<td>jQuery UI v1.5 Released, Focus on Consistent API and Effects</td>
<td>Paul Bakaus</td>
<td>Plugins</td>
</tr>
<tr>
<td>Jun 4</td>
<td>jQuery 1.2.6: Events 100% faster</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Mar 7</td>
<td>jQuery UI Worldwide Sprint: Mar 14-15</td>
<td>Richard Worth</td>
<td>Conferences</td>
</tr>
<tr>
<td>Feb 8</td>
<td>jQuery 1.2.3: AIR, Namespacing, and UI Alpha</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Jan 23</td>
<td>jQuery UI and beyond: The jQuery-Liferay partnership</td>
<td>Paul Bakaus</td>
<td>Community</td>
</tr>
<tr>
<td>Jan 15</td>
<td>jQuery 1.2.2: 2nd Birthday Present</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="4">2007</th>
</tr>
<tr>
<td>Dec 8</td>
<td>jQuery Plugins site updated</td>
<td>Mike Hostetler</td>
<td>Plugins</td>
</tr>
<tr>
<td>Dec 6</td>
<td>Flot, a new plotting plugin for jQuery</td>
<td>Bradley Sepos</td>
<td>Plugins</td>
</tr>
<tr>
<td>Nov 2</td>
<td>Google Using jQuery</td>
<td>Rey Bango</td>
<td>Miscellaneous</td>
</tr>
<tr>
<td>Sep 17</td>
<td>jQuery UI: Interactions and Widgets</td>
<td>John Resig</td>
<td>Plugins</td>
</tr>
<tr>
<td>Sep 10</td>
<td>jQuery 1.2: jQuery.extend(”Awesome”)</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Sep 6</td>
<td>jQueryCamp ‘07 (Boston)</td>
<td>John Resig</td>
<td>Conferences</td>
</tr>
<tr>
<td>Aug 24</td>
<td>jQuery 1.1.4: Faster, More Tests, Ready for 1.2</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Jul 17</td>
<td>SF jQuery Meetup and Ajax Experience</td>
<td>John Resig</td>
<td>Conferences</td>
</tr>
<tr>
<td>Mar 11</td>
<td>SXSWi jQuery Meetup</td>
<td>John Resig</td>
<td>Conferences</td>
</tr>
<tr>
<td>Feb 28</td>
<td>jQuery 1.1.2</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Feb 21</td>
<td>jQuery is OpenAjax Compliant</td>
<td>John Resig</td>
<td>Miscellaneous</td>
</tr>
<tr>
<td>Feb 20</td>
<td>jQuery and Jack Slocum’s Ext</td>
<td>John Resig</td>
<td>Miscellaneous</td>
</tr>
<tr>
<td>Feb 18</td>
<td>The jQuery IRC Channel</td>
<td>Yehuda Katz</td>
<td>Community</td>
</tr>
<tr>
<td>Feb 14</td>
<td>jQuery Nightly Builds</td>
<td>Paul McLanahan</td>
<td>Miscellaneous</td>
</tr>
<tr>
<td>Feb 2</td>
<td>New jQuery Project Team Members</td>
<td>Rey Bango</td>
<td>Community</td>
</tr>
<tr>
<td>Jan 29</td>
<td>New jQuery API Browser</td>
<td>Rey Bango</td>
<td>Documentation</td>
</tr>
<tr>
<td>Jan 27</td>
<td>Introduction to Firebug and jQuery, Screencast</td>
<td>John Resig</td>
<td>Documentation</td>
</tr>
<tr>
<td>Jan 22</td>
<td>jQuery 1.1.1</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Jan 15</td>
<td>Interface 1.1 Released</td>
<td>John Resig</td>
<td>Plugins</td>
</tr>
<tr>
<td>Jan 14</td>
<td>jQuery Birthday: 1.1, New Site, New Docs</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Jan 13</td>
<td>jQuery wallpapers</td>
<td>Nate Cavanaugh</td>
<td>Miscellaneous</td>
</tr>
<tr>
<td>Jan 11</td>
<td>Selector Speeds</td>
<td>John Resig</td>
<td>Miscellaneous</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="4">2006</th>
</tr>
<tr>
<td>Dec 27</td>
<td>The Path to 1.1</td>
<td>John Resig</td>
<td>Miscellaneous</td>
</tr>
<tr>
<td>Dec 18</td>
<td>Meet The People Behind jQuery</td>
<td>John Resig</td>
<td>Community</td>
</tr>
<tr>
<td>Dec 13</td>
<td>Helping you understand jQuery</td>
<td>John Resig</td>
<td>Documentation</td>
</tr>
<tr>
<td>Dec 12</td>
<td>jQuery 1.0.4</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Dec 12</td>
<td>jQuery v1.0.3 API docs on gotAPI.com</td>
<td>Rey Bango</td>
<td>Documentation</td>
</tr>
<tr>
<td>Dec 12</td>
<td>jQuery Presentation in Phoenix</td>
<td>Rey Bango</td>
<td>Conferences</td>
</tr>
<tr>
<td>Nov 28</td>
<td>jQuery at AZPhp</td>
<td>Rey Bango</td>
<td>Conferences</td>
</tr>
<tr>
<td>Nov 14</td>
<td>Expandable Sidebar Menu Screencast</td>
<td>John Resig</td>
<td>Documentation</td>
</tr>
<tr>
<td>Oct 27</td>
<td>jQuery 1.0.3</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
<tr>
<td>Oct 26</td>
<td>jQuery Button Contest</td>
<td>Rey Bango</td>
<td>Miscellaneous</td>
</tr>
<tr>
<td>Oct 25</td>
<td>Friends of Firefox: Mozilla Utilizes jQuery</td>
<td>Will Jessup</td>
<td>Miscellaneous</td>
</tr>
<tr>
<td>Oct 18</td>
<td>Zebra Table Showdown</td>
<td>John Resig</td>
<td>Documentation</td>
</tr>
<tr>
<td>Oct 13</td>
<td>Minor API Change in 1.0.2</td>
<td>John Resig</td>
<td>Releases</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="4">2005</th>
</tr>
<tr>
<td>Dec 17</td>
<td>JSON and RSS</td>
<td>John Resig</td>
<td>Documentation</td>
</tr>
<tr>
<td>Dec 14</td>
<td>Google Homepage API</td>
<td>John Resig</td>
<td>Miscellaneous</td>
</tr>
<tr>
<td>Dec 13</td>
<td>XPath and CSS Selectors</td>
<td>John Resig</td>
<td>Miscellaneous</td>
</tr>
<tr>
<td>Dec 12</td>
<td>Sparklines with JavaScript and Canvas</td>
<td>John Resig</td>
<td>Miscellaneous</td>
</tr>
</tbody>
</table>
</div>
/***************************************
Default Styles
***************************************/
html, body {
margin: 0;
padding: 0;
}
body {
font: 80% Verdana, Helvetica, Arial, sans-serif;
color: #000;
background: #fff;
}
#container {
margin: 10px 2em;
}
h1 {
font-size: 2.5em;
margin-bottom: 0;
}
h2 {
font-size: 1.3em;
margin-bottom: .5em;
}
h3 {
font-size: 1.1em;
margin-bottom: 0;
}
code {
font-size: 1.2em;
}
a {
color: #06581f;
}
/***************************************
Chapter Styles
***************************************/
#topics {
font-size: 0.9em;
margin: 6px 0;
}
#topics a {
text-decoration: none;
color: #000;
padding: 0 6px;
}
#topics a.selected {
background-color: #6f93ce;
color: #fff;
}
#topics a:hover {
background-color: #6f93ce;
color: #fff;
}
#news {
width: 100%;
border-collapse: collapse;
}
#news th,
#news td {
padding: 3px 6px;
vertical-align: top;
}
#news td:first-child {
width: 48px;
}
#news th {
text-align: left;
color: #fff;
}
#news thead th {
background-color: #15b;
}
#news tbody th {
background-color: #6f93ce;
}
#news .alt td {
background-color: #ccc;
}
#news .alt-2 td {
background-color: #ddd;
}
#news td.selected {
background-color: #eee;
}
.highlight {
font-weight: bold;
font-style: italic;
color: #080;
}
#news td.active {
background-color: #dfd;
}
