<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <style>

            table td{

                border-spacing:0;

                padding: 5px 10px;

                border: 1px solid #ddd;

            }

        </style>

    </head>

    <body>

        <table>

            <thead>

                <td>姓名</td>

                <td>年龄</td>

            </thead>

            <tr>

                <td>张三</td>

                <td>12</td>

            </tr>

            <tr>

                <td>李四</td>

                <td>11</td>

            </tr>

        </table>

        <ul>

            <li>

                <p>文字1</p>

                <p>文字1</p>

            </li>

            <li>

                <p>文字2</p>

                <p>文字2</p>

            </li>

            <li>

                <p>文字3</p>

                <p>文字3</p>

            </li>

        </ul>

    </body>

    <script src="jquery-3.1.0.min.js"></script>

    <script>

        console.log(document.getElementsByTagName('table')[0].innerHTML);

        // <thead>

        //         <tr><td>姓名</td>

        //         <td>年龄</td>

        //     </tr></thead>

        //     <tbody><tr>

        //         <td>张三</td>

        //         <td>12</td>

        //     </tr>

        //     <tr>

        //         <td>李四</td>

        //         <td>11</td>

        //     </tr>

        // </tbody>

        //错误示范

        // $('table').children('tr').children('td').eq(0).css({

        //     'background': 'blue',

        //     'border-bottom': '1px solid red'

        // });

        console.log($('ul').children('p').eq(0).html());//undefined

        console.log($('table').children('tr').html());//undefined

        //正确示范1

        console.log($('table').find('tr').children('td').eq(0));//长度为6的数组里面的第一个值

         $('table').find('tr').children('td').eq(0).css({

            'color': 'blue'

        });

         //正确示范2

        $('table tr td:nth-child(1)').css({

            'background': 'pink',

            'border-bottom': '1px solid red'

        });

        $('ul').children('li').children('p').eq(0).css('border','1px solid blue');

        $('ul').children('li').children('p:nth-child(1)').css('color','red');

    </script>

</html>

总结：
　　一、table结构

　　如以上代码所示，对于table表格而言，thead标签里面会默认自动加上一层tr标签，同时，与thead相并列的tbody标签，如果不加，也是会自动默认加上的，tbody里面的td外如果没有tr，那么也会被默认加上。所以，在使用选择器来选择table里面的元素时一定要注意，别忘了由于默认添加上的标签而导致的结构的变化。

　　二、children（）与find（）的区别

　　选择器children（）只是用来选择子代元素的，无法选择到后代元素。而选择器find（）既可以选择到子代元素，也可以选择到后代元素，通常的话，习惯确定是后代元素的话就用选择器find（）。所以，如果用children（）来选择一个后代元素，必然得到的结果是undefined了。所以，清楚结构是很重要的。

　　三、选择器eq(n)与nth-child(n)的差异

　　$('ul').children('li').children('p') 得到的是 [p, p, p, p, p, p, prevObject: r.fn.init(3)]， .eq(0)之后，获得的是第一个p，因此只有第一个p加上了蓝色边框。

$('ul').children('li').children('p:nth-child(1)') 得到的是[p, p, p, prevObject: r.fn.init(3)]，即p的父元素（各自依属的三个li标签）下的第一个子节点，因此有三个p标签里面的文字变成了红色。

　　以上三点都是比较容易忽视的地方，以后要注意了，不能再同一块石头上摔倒两次哟！

table相关的选择器 & children()与find()的区别 & 选择器eq(n)与nth-child(n)的差异的更多相关文章

  1. 一个样例看清楚JQuery子元素选择器children()和find()的差别

    近期在我们的hybrid app项目开发中定位出了一个问题.通过这个问题了解下JQuery选择器find()和children()的差别.问题是这种:我们的混合app是一个单页面应用(main.htm ...

  2. jquery简单原则器（匹配除了指定选择器之外的元素 selector 表示选择器）

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

  3. 基于jquery中children()与find()的区别介绍

    本篇文章介绍了,基于jquery中children()与find()的区别,需要的朋友参考下 .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选 ...

  4. jquery遍历之children()与find()的区别

    hildren(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选. .find(selector)方法是返回匹配元 ...

  5. parentNode、parentElement，childNodes、children 它们有什么区别呢？

    parentNode.parentElement,childNodes.children 它们有什么区别呢?parentElement 获取对象层次中的父对象. parentNode 获取文档层次中的 ...

  6. E:in-range伪类选择器与E:out-of-range伪类选择器

    E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内(通常通过min属性值与max属性值来限定),且实际输入值在该范围内时使用的样式.E:out-of-range伪类选择器用来指定 ...

  7. CSS3选择器（一）之基本选择器

    CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...

  8. jQuery 中的children()和 find() 的区别

    <!DOCTYPE html> <html> <head> <script type="text/javascript" src=&quo ...

  9. jQuery过滤选择器:first和:first-child的区别，CSS伪类:first-child

    最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号 ...

随机推荐

  1. php递归查找指定目录下及子文件名称是否包含中文空格及括号

    //php递归查找该目录下及子文件名称是否包含中文空格括号 function searchDir($path,&$data){ if(is_dir($path)){ $dp=dir($path ...

  2. 用Redis实现优先级队列

    在最近在面试过程中,张先森遇到一个面试官这么问,如果一个并发很大的消息应用,想要根据请求的优先级来处理,该怎么做.我当时只是笼统地回答用redis,面试官点了点头,这个问题就此通过. 那么用redis ...

  3. 记一次VS Code崩溃的解决（Win10扫描自动回复系统文件）

    早上修改Vue.js框架搭建的项目,正高兴着,突然电脑崩溃,重启后VS code打不开,报错如下: DWrite.dll丢失 然后查看了一下 C:\windows\system32\下  DWrite ...

  4. C++编程规范（不断更新）

    本文总结一些经验教训,以使编出来的代码更为健壮. 1.定义类/结构体的时候不要和系统函数冲突(尤其是不同系统/平台之间移植的时候) 有时候在windows系统下编译没问题,但是在linux系统下就不行 ...

  5. 7.21.04 for循环

    for循环的三个语句可以放置任何表达式,但是有个不成文的规则,for循环的3个部分应当对同一个计数器变量进行初始化,检测和更新.若不遵循这一规则,编写的循环常常晦涩难懂! 如果在循环第一部分声明了一个 ...

  6. Linux 常用性能工具简介

    一.wget 文件下载 使用wget下载单个文件:wget URL 下载并以不同的文件名保存:wget -O wordpress.zip URL wget限速下载:wget --limit-rate= ...

  7. @Autowired和@Resource的区别是什么？

    @Autowired 与@Resource: 1.@Autowired与@Resource都可以用来装配bean. 都可以写在字段上,或写在setter方法上. 2.@Autowired默认按类型装配 ...

  8. maven 随笔

    <build> <plugins> <!--打包源代码--> <plugin> <artifactId>maven-source-plugi ...

  9. Begin the new life as a coder

    今天刚刚开通博客园的博客频道,这里将成为自我成长点滴记录的土壤!从今天开始,从这篇博文开始,我将分享自己从一个fresher开始的成长经历.原与广大仁人志士共同在程序中共享快乐!我真是太高兴了 :D

  10. Redis集群的相关概念

    1.1 redis-cluster架构图 架构细节: (1)所有的redis节点彼此互联(PING-PONG机制),内部使用二进制协议优化传输速度和带宽. (2)节点的fail是通过集群中超过半数的节 ...