jQuery选择器之——first-child和first-of-type们

 

旁白：

　　好久没写博客了，很多原因，各种忙碌，没时间。有学习的时间已经很不错了，哪来的写博客的时间。

当然，这些都是借口，真正的原因大概还是没有养成写博客的习惯吧，如果有人看到我的博客，而你也是一个刚刚加入博客的程序员，请@我一起努力！

　　今天又看了看jQuery手册，为什么要看手册呢，因为好久没用jQuery突然想写个简单的选择器结果几次报错，尴尬！以前所谓的学习jQuery只是听了几节视频课，做了一下随堂联系，后来又学习其他的东西，以至于jQuery都忘的差不多了，这里提醒和我一样的初学者jQuery还是要经常用的，手册也是要温习的。

说重点：温习jQuery手册时看到了选择器这节，怎么都看不懂 first-child和first-of-type 们了

正文：

说说first-child和first-of-type 们 那些事

　　为什么会疑惑：

 1 <ul>
 2             <li>John</li>
 3             <li>Karl</li>
 4             <li>Brandon</li>
 5         </ul>
 6         <ul>
 7             <li>Glen</li>
 8             <li>Tane</li>
 9             <li>Ralph</li>
10 </ul>
11 <script type="text/javascript">
12             
13             $("ul li:first-child").css('background','yellow');
14             $("ul li:first-of-type").css('background','yellow');
15             
16             
17 </script>

　　怎么弄，怎么感觉这两个的结果是一样的。

　　疑惑，弄不明白，看看手册。

 

 

　　看了半天，也没有看出个所以然，再看看下面的例子，也没有找到解决的办法。

　　咋整！

　　后面又是一大堆:nth-child   :nth-of-type,:nth-last-child  :nth-last-of-type   之流

　　看来今天不搞清of-type这点事，不是一个选择器有问题，而是这类选择器都搞不清楚啊

　　然后连滚带爬的看完好几个这样的例子。

　　终于，让我找到了一个例子。

 

 1 <div> 
 2      <span>John</span>  
 3      <b>Kim</b> 
 4      <span>Adam</span> 
 5      <b>Rafael</b> 
 6      <span>Oleg</span>
 7 </div>
 8 <div> 
 9      <b>Dave</b> 
10      <span>Ann</span>
11      </div>
12 <div> 
13      <i><span>Maurice</span></i>  
14      <span>Richard</span> 
15      <span>Ralph</span> 
16      <span>Jason</span>
17 </div>
18 <script>
19   $("span:nth-of-type(2)");  
20 </script>

　　怎么看，怎么觉得这个例子和其他的例子不同。

　　再翻到前面看看，前面的选择器的例子，都用什么<ul>里面包<li>或者<div>里面包<span>

　　燃鹅，这个例子

　　它里面是乱的，从这里开始，我开始理解这些这个of-type的用法了。

　　

1 <--html如上-->
2 
3 
4 <script type="text/javascript">
5             
6     $("span:nth-child(2)").css('background','yellow');
7             
8 </script>

 

 

 　　我看到了这样的一个结果，和我预想的结果不一样啊 

　　

　　然后我又写了如下代码

1  <--html如上-->
2  
3  
4  <script type="text/javascript">
5              
6      $("span:nth-of-type(2)").css('background','yellow');
7             
8 </script>

　　结果：

　　

　　两个结果，终于不一样了。

　　我总结了一下：

　　　　span:nth-child(2)：大概是说的是两点：
    • 　　这个元素是span
    • 　　这个元素在同级别（同一个父元素，可能老大是其他元素：p i b 等）中排名老二

　　　　

　　　　span:nth-of-type(2)：大概是说的这两点：
    • 　　这个元素是span
    • 　　这个元素前面有且只有一个同级别的span（注意，这里老大一定是span，不是其他元素）

　　然后，我就发现跑题了，我说的应该是first-child和first-of-type啊。

　　别急，一样的道理，我又反过来验证了first-child和first-of-type

 

 

　　　　span：first-child：说的是两点：
    • 　　这个元素是span
    • 　　这个元素在同级别（同一个父元素）中排名老大（这里就不管老二是什么鬼了）

　　　　

　　　　span：first-of-type：说的这两点：
    • 　　这个元素是span
    • 　　这个元素是第一个span（这里注意，一定是span ，这里只看span）

　　说到这里，基本上就完了，我称这些都是“ first-child和first-of-type 们”。还有last啊什么的都是一样的。
　　说这么多过程，就是把我的学习经过记录下来，留给自己以后回忆，也给阅读者一个学习的过程。

　　最后，发表一下我的感慨：

　　　　这个所手册的人真的太坏了，写的都不是人话

　　　　我感觉，要是子元素都一样就选择用first-child们

　　　　　　　　要是子元素不同，经常用first-of-type    当然选择同级别的老几，nth-child还是要用的

　　欢迎大家踊跃来喷！

 

posted @ 2017-03-29 20:43  Your-lord  阅读(169)  评论(0)  编辑  收藏  举报