小猿猿--欢迎解答--谢谢哟
2016-08-07 02:56
采纳率: 50%
浏览 2.3k

js中加号和引号的嵌套问题

$(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 &amp; 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;
}

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • cha_qian 2016-08-07 03:09
    已采纳

    ("'+topic+'")) 第一个双引号和最后一个双引号是一起的,看做contains(""),是contains传入需要引号。第一个单引号和前面的单引号'#news 是一起的,而最后一个单引号是和后面单引号一起的。

    已采纳该答案
    打赏 评论
  • judas_jia 2016-09-09 17:46

    var topic = $(this).text();

    $('#news tr:has(td):not(:contains("'+topic+'"))')
    .hide();
    那是因为contains(text)是要匹配包含括号中的指定文本的元素contains(" ");这个双引号当然是contains必须要有的,如果写成contains("topic"),那查找的应该就是包含字符串“topic”的元素,显然,要的不是这样的效果。 你的topic只是个变量,存储的是从页面获取的文本值,contains里要用字符串变量就得这种形式啊。。。。里面的单引号是因为单双引号要隔开使用,外面是双引号,里面就得是单引号。
    我是这么理解的,如果说的不对请见谅。。。因为我也是菜鸟....

    打赏 评论

相关推荐 更多相似问题