前几天就遇到过这样的问题，明明我用的是('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. centos7安装nagios步骤

    一.Nagios简介 Nagios是一款开源的电脑系统和网络监视工具,能有效监控Windows.Linux和Unix的主机状态,交换机路由器等网络设置,打印机等.在系统或服务状态异常时发出邮件或短信报 ...

  2. ios 网络/本地播放器

    推荐播放器: LRLAVPlayer相对易懂好修改,调整添加内容. https://github.com/codeWorm2015/videoPlayer NSString*path=[[NSBund ...

  3. 关于constraint的用法

    1.主键约束:要对一个列加主键约束的话,这列就必须要满足的条件就是非空因为主键约束:就是对一个列进行了约束,约束为(非空.不重复)以下是代码  要对一个列加主键,列名为id,表名为emp格式为:alt ...

  4. C#网络程序设计(1)网络编程常识与C#常用特性

        网络程序设计能够帮我们了解联网应用的底层通信原理!     (1)网络编程常识: 1)什么是网络编程 只有主要实现进程(线程)相互通信和基本的网络应用原理性(协议)功能的程序,才能算是真正的网 ...

  5. centos7安装redis3.0和phpredis扩展详细教程(图文)

    整理一下centos7安装redis3.0和phpredis扩展的过程,有需要的朋友可以拿去使用. 一.安装redis3.0 1.安装必要的包 yum install gcc 2.centos7安装r ...

  6. JS 实现banner图的滚动和选择效果

    CSS+JS实现banner图滚动和点击切换 HTML 部分代码: <body> <div id="banner"> <div id="in ...

  7. 导出Mysql数据库中的数据

    使用mysqldump 指令: D:\>mysqldump -u root -proot bookStore>bookStore.sql

  8. JavaScript中变量、参数、函数之间的关系

    ------------------------------ 废话不多说,直接开始. 我们看一段代码(参考其他资料所得) <script type="text/javascript&q ...

  9. 移动前端常用meta标签

    移动前端常用meta标签 移动前端head常用meta标签 原文链接:http://caibaojian.com/mobile-meta.html //code from http://caibaoj ...

  10. javascript 中 with 的使用

    1)简要说明         with 语句可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性.要给对象创建新的属性,必须明确地引用该对象. 2)语法格式  with(object ...