前几天就遇到过这样的问题，明明我用的是('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. mysql 4 索引的优缺点

    为什么要创建索引呢?这是因为,创建索引可以大大提高系统的性能. 第一,通过创建唯一性索引,可以保证数据库表中每一行数据的唯一性. 第二,可以大大加快 数据的检索速度,这也是创建索引的最主要的原因. 第 ...

  2. Python JavaScript概述

    一.如何编写? 1.JavaScript代码存在形式 <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  3. iOS图片填充UIImageView(contentMode)

    本文主要形象的介绍一下UIView的contentMode属性: 核心代码 [self.prp_imageView setContentMode:UIViewContentModeScaleAspec ...

  4. C++迭代器 iterator【转】

    1. 迭代器(iterator)是一中检查容器内元素并遍历元素的数据类型.(1) 每种容器类型都定义了自己的迭代器类型,如vector:vector<int>::iterator iter ...

  5. C++命名空间的解释 【转】

    使用命名空间的目的是对标识符的名称进行本地化,以避免命名冲突.在C++中,变量.函数和类都是大量存在的.如果没有命名空间,这些变量.函数.类的名称将都存在于全局命名空间中,会导致很多冲突.比如,如果我 ...

  6. 拉普拉斯矩阵（Laplace Matrix）与瑞利熵（Rayleigh quotient）

    作者:桂. 时间:2017-04-13  07:43:03 链接:http://www.cnblogs.com/xingshansi/p/6702188.html 声明:欢迎被转载,不过记得注明出处哦 ...

  7. Java多线程学习笔记（二）——Executor,Executors,ExecutorService比较

    Executor:是Java线程池的超级接口:提供一个execute(Runnable command)方法;我们一般用它的继承接口ExecutorService. Executors:是java.u ...

  8. Linux -atime、mtime、ctime

    Linux中,文件都有其自身的atime.mtime.ctime,在不同的命令下,各时间发生相应的改变.下面,我们来简单的介绍一下: atime (access time):表示最后一次访问文件或目录 ...

  9. Linux-进程描述（4）之进程优先级与进程创建执行

    进程优先级 进程cpu资源分配就是指进程的优先权(priority).优先权高的进程有优先执行权利. 权限与优先级.权限(privilege)是指在多用户计算机系统的管理中,某个特定的用户具有特定的系 ...

  10. linux网络编程（socket）之面向连接（TCP/IP）

    1.流程 服务器: 创建socket: 绑定端口: 监听: 监听到有连接请求,接受请求: 建立连接,开始对话. 客户端: 创建socket: 请求建立连接: 连接建立成功,开始对话. 2.实例代码 / ...