前几天就遇到过这样的问题，明明我用的是('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. 常用SQL_官方文档使用

    SQL语句基础理论 SQL是操作和检索关系型数据库的标准语言,标准SQL语句可用于操作关系型数据库. 5大主要类型: ①DQL(Data Query Language,数据查询语言)语句,主要由于se ...

  2. Arrays工具类十大常用方法

    0. 声明数组 String[] aArray = new String[5]; String[] bArray = {"a","b","c" ...

  3. 聊聊 Tomcat 的单机多实例

    Tomcat 从何而来? 先说 Tomcat 这一单词解释,如果你不是一个开发者,当然它在美国口语中并非是褒义词:如果你是开发者,那你一定听过 Web 应用服务器.Sun 公司和 Tomcat .如你 ...

  4. 【HDOJ 1286】找新朋友

    找新朋友 Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submissi ...

  5. JSSDK微信自定义分享

    背景:15年之前的微信分享只需要加入一段js就可以实现.后来微信官方全部禁止了.现在的微信分享全部得使用jssdk. 一.分享功能: 在微信内(必须在微信里)打开网站页面,分享给朋友或者分享到朋友圈时 ...

  6. ArrayList 进阶方法之ListIterator

    同样看的都是jdk1.8 中 ArrayList中的源码,整理测试一下而已ListIterator(int index)方法,返回指定下标(包含该下标)后的值,此时index位置的元素就是新列表迭代器 ...

  7. 《Effective C#》读书笔记-1.C# 语言习惯-1.使用属性而不是可访问的数据成员

    思维导图: 大纲: 1.使用属性而不是可访问的数据成员    属性        指定不同的访问权限        隐式属性降低了声明属性的工作量        允许将数据成员作为公共接口的一部分暴露 ...

  8. [.NET] 《Effective C#》快速笔记（三）- 使用 C# 表达设计

    <Effective C#>快速笔记(三)- 使用 C# 表达设计 目录 二十一.限制类型的可见性 二十二.通过定义并实现接口替代继承 二十三.理解接口方法和虚方法的区别 二十四.用委托实 ...

  9. Laravel 5.2 教程 - 文件上传

    一.简介 Laravel 有很棒的文件系统抽象层,是基于 Frank de Jonge 的 Flysystem 扩展包. Laravel 集成的 Flysystem 提供了简单的接口,可以操作本地端空 ...

  10. Github+yeoman+gulp-angular初始化搭建angularjs前端项目框架

    在上篇文章里面我们说到了Github账号的申请与配置 那么当你有了Github账号并创建了一个自己的Github项目之后,首要的当然是搭建自己的项目框架啦! 本人对自己的定位是web前端狗,常用开发框 ...