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

jQuery选择器中的空格问题的更多相关文章

  1. jquery 选择器中含有空格注意

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jquery选择器中两个class是什么意思？

    jquery选择器中两个class是什么意思? $(".class1 .class2") 选择class1元素下class2的元素(中间有空格)$(".class1.cl ...

  3. JQuery选择器中的一些注意事项

    1. 选择器中含有特殊符号的注意事项 1. 1 选择器中含有",","#","("或"]"等特殊字符 根据w3c的规定, ...

  4. 【轻松前端之旅】​CSS选择器中的空格与尖括号有何区别？

    CSS选择器中的空格与尖括号有何区别? 例子1: .a .b { margin: 0; } 空格隔开a和b,选择所有后代元素. 例子2: .a>.b { margin: 0; } 尖括号隔开a和 ...

  5. 处理jQuery选择器中的特殊符号，如（、#等

    前几天解决一个外网问题,客服反馈页面数据加载不出来,首先看一下服务端日志也没报错异常,自己测试了一下,在chrome的Console发现有js报错,原来是js报错导致的数据加载不出来. 调试了一番,发 ...

  6. jQuery选择器中的特殊符号和关键字

    一般情况下,在jQuery选择器中,我们很少会用到诸如"."."#"."("."["等特殊字符,因为根据W3C规定,HT ...

  7. jQuery选择器中空格的问题再探究

    jQuery选择器的空格问题,看似很小,但是差之毫厘谬以千里,让人很是恼火,<锋利的jQuery>书中有个经典的例子,我这里也拷贝下来,再加点自己的想法 <html> < ...

  8. 关于jquery的选择器中的空格问题

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery选择器中的find和空格，children和>的区别、及父节点兄弟节点，还有判断是否存在的写法

     一.find和空格,children和>及其它的区别   空格:$('parent childchild')表示获取parent下的所有的childchild节点(所有的子孙). 等效成  = ...

随机推荐

  1. java基础之类与对象3

    前面我的两篇文章主要介绍了将怎么将事物抽象为对象,以及对象的实例化(就是new一个对象).这篇文章里面我就讲下匿名对象... 还是就举之前的例子把,Car c = new Car();看到这个我们就知 ...

  2. ios url网址相关问题解说

    问题1:ios网址中存在汉字的情况,需要GB_18030_2000编码方法如下: // 汉字转编码 + (NSString *)changeChineseWithEncodingGB_18030_20 ...

  3. WebForm捆绑压缩js和css(WebForm Bundling and Minification)

    .net framework 4以上,可以使用Microsoft.AspNet.Web.Optimization 新建4.0项目 Nuget搜索optimization,安装第一个包 加入Bundle ...

  4. iptables常用命令之配置生产环境iptables及优化

    第一步:清空当前的所有规则和计数 iptables -F #清空所有的防火墙规则 iptables -X #删除用户自定义的空链 iptables -Z #清空计数 第二步:配置允许ssh端口连接 i ...

  5. Linux配置mysql (centos配置java环境 mysql配置篇 总结四)

    ♣安装的几种方法和比较 ♣配置yum源 ♣安装mysql ♣启动mysql ♣修改密码 ♣导入.sql文件 ♣缓存设置 ♣允许远程登录(navicat) ♣配置编码为utf8  1.关于Linux系统 ...

  6. 如何快速理解JavaScript 中重要语句for循环

    一.基本结构:for(起始状态:判断条件:状态改变){ 执行语句: } 执行顺序:for(var i=1;i<3;i++){ alert(i); } 1.判断条件    2.执行语句    3. ...

  7. Unity C# 多态 委托 事件 匿名委托 Lambda表达式 观察者模式 .NET 框架中的委托和事件

    一.多态 里氏替换原则: 任何能用基类的地方,可以用子类代替,反过来不行.子类能够在基类的基础上增加新的行为.面向对象设计的基本原则之一. 开放封闭原则: 对扩展开放,意味着有新的需求或变化时,可以对 ...

  8. HashMap负载因子

    下面是HashMap的一个构造函数,两个参数initialCapacity,loadFactor 这关系HashMap的迭代性能. /** * Constructs an empty <tt&g ...

  9. Java 中的接口有什么作用？好处？

    接口的作用就是把使用接口的人和实现接口的人分开,实现接口的人不必要关心谁去使用,而使用接口的人也不用关心谁实现的接口,由接口将他们联系在一起. 很多JAVA初级程序员对于接口存在的意义很疑惑.不知道接 ...

  10. bzoj4784 [Zjoi2017]仙人掌

    Description 如果一个无自环无重边无向连通图的任意一条边最多属于一个简单环,我们就称之为仙人掌.所谓简单环即不经过重复的结点的环. 现在九条可怜手上有一张无自环无重边的无向连通图,但是她觉得 ...