table相关的选择器 & children()与find()的区别 & 选择器eq(n)与nth-child(n)的差异-白红宇

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

阅读量：4970 次

发布时间：2019-06-12

本文共 1257 字，大约阅读时间需要 4 分钟。

            
                             
     
                                                 姓名                         年龄                    
      
                                                 张三                         12                    
                                           李四                         11                    
              
     
        
                 
                      文字1
                文字1
            
            
                      文字2
                文字2
            
            
                      文字3
                文字3

姓名	年龄
张三	12
李四	11

总结：

　　一、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标签里面的文字变成了红色。

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

转载于:https://www.cnblogs.com/chaoyueqi/p/7545837.html

你可能感兴趣的文章