jQuery选择器中的空格问题

最新推荐文章于 2022-03-09 23:41:02 发布

weixin_30697239

最新推荐文章于 2022-03-09 23:41:02 发布

阅读量80

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wyw0304-/p/6826074.html

版权

前几天就遇到过这样的问题，明明我用的是('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>

转载于:https://www.cnblogs.com/wyw0304-/p/6826074.html

weixin_30697239

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器中的空格问题

前几天就遇到过这样的问题，明明我用的是('tr :even').css('background','#ccc')想改变表格中行的背景色，反复试了还是没改变。还问了度娘还是没找到原因所在（当时问题描述的方向错了）。今天再次遇到了这个问题，原来是我习惯性地把空格给加上了。加了空格的效果是这样的：去掉空格后得到了想要的样子：以上两种结果可以看出，...
复制链接

扫一扫