jQuery選擇器中的空格問題


   前幾天就遇到過這樣的問題,明明我用的是('tr :even').css('background','#ccc')想改變表格中行的背景色,反復試了還是沒改變。還問了度娘還是沒找到原因所在(當時問題描述的方向錯了)。今天再次遇到了這個問題,原來是我習慣性地把空格給加上了。

加了空格的效果是這樣的:

 


 

 

去掉空格后得到了想要的樣子:

 


以上兩種結果可以看出,加了空格后選中的是其子元素,沒加空格的才是指向它自身(暫時只在帶冒號':'的選擇器中遇到這個問題),一定要注意空格的問題,注意養成良好的編程習慣。

 

以下是代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格變色</title>
    <style type="text/css">
        tr{
            margin-left: 10px;
        }
        td{
            width: 100px;
        }
        table th {  
            border-width: 1px;  
            padding: 8px;  
            border-style: solid;  
            border-color: #a9c6c9;  
        }  
        table td {
            text-align: center;  
            border-width: 1px;  
            padding: 8px;  
            border-style: solid;  
            border-color: #a9c6c9;  
        }  
    </style>
    <script type="text/javascript" src="../jquery/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('tr:even').css('background', '#F6E2E2');
        });
    </script>
</head>
<body>
    <table style="border:1px solid #000;padding: 5px;">
        <thead style="border-bottom:2px solid #000;margin-left: 4px; ">
            <tr><th>姓名</th><th>性別</th><th>暫住地</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>張三</td>
                <td>男</td>
                <td>浙江寧波</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>浙江杭州</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>男</td>
                <td>湖南長沙</td>
            </tr>
            <tr>
                <td>趙六</td>
                <td>男</td>
                <td>浙江溫州</td>
            </tr>
            <tr>
                <td>Rain</td>
                <td>男</td>
                <td>浙江杭州</td>
            </tr>
            <tr>
                <td>Maxman</td>
                <td>女</td>
                <td>浙江杭州</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM