為什么偶數(shù)行沒有被賦予h類的樣式 ，而先$("#table tr").toggleClass("h");之后再$("#table tr:odd").toggleClass("c");就有反應(yīng) 求解釋
<!DOCTYPE HTML>
<html>
<head>
? ? <meta charset="utf-8">
? ? <title>隔行換色</title>
? ? <script src="http://idcbgp.cn/static/lib/jquery/1.9.1/jquery.js"></script>
? ? <style type="text/css">
? ? body,
? ? table,
? ? td,
? ? {
? ? ? ? font-family: Arial, Helvetica, sans-serif;
? ? ? ? font-size: 12px;
? ? }
? ??
? ? .h {
? ? ? ? background: #0F0;
? ? ? ? color: #F3F;
? ? }
? ??
? ? .c {
? ? ? ? background: red;
? ? ? ? color: #000;
? ? }
? ? </style>
</head>
<body>
? ? <h4>.toggleClass(className)和.toggleClass(className,switch)</h4>
? ? <table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
? ? ? ? <tr>
? ? ? ? ? ? <td>慕課jQuery入門</td>
? ? ? ? ? ? <td>慕課jQuery入門</td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td>慕課jQuery入門</td>
? ? ? ? ? ? <td>慕課jQuery入門</td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td>慕課jQuery入門</td>
? ? ? ? ? ? <td>慕課jQuery入門</td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td>慕課jQuery入門</td>
? ? ? ? ? ? <td>慕課jQuery入門</td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td>慕課jQuery入門</td>
? ? ? ? ? ? <td>慕課jQuery入門</td>
? ? ? ? </tr>
? ? </table>
? ? <script type="text/javascript">
? ? //給所有的tr元素加一個(gè)class="c"的樣式
? ? $("#table tr").toggleClass("c");
? ? </script>
? ? <script type="text/javascript">
? ? //給所有的偶數(shù)tr元素切換class="c"的樣式
? ? //所有基數(shù)的樣式保留，偶數(shù)的被刪除
? ? $("#table tr:odd").toggleClass("h");
? ? </script>
? ? <script type="text/javascript">
? ? //第二個(gè)參數(shù)判斷樣式類是否應(yīng)該被添加或刪除
? ? //true，那么這個(gè)樣式類將被添加;
? ? //false，那么這個(gè)樣式類將被移除
? ? //所有的奇數(shù)tr元素，應(yīng)該都保留class="c"樣式
? ? //$("#table tr:even").toggleClass("c", true); //這個(gè)操作沒有變化，因?yàn)闃邮揭呀?jīng)是存在的
? ? </script>
</body>
</html>
2021-09-27
css樣式加載順序?qū)е碌?，把h類的樣式寫在c類樣式就有了,反之一樣的
2019-12-10