初步小结

1.之前的CSS有些遗忘，返回去重新看知识点，频繁会浪费项目时间。

比如说：

　　position定位　　

1 position: absolute;//绝对定位2 position:relative;//相对定位，一般给父div设置，让子div在里面定位　　　

2.样式属性写的有些乱

　　每个选择器写相对应的属性样式，div设置宽高

3.JS和JQ的DOM操作不够熟练，比如获取元素上，思考的不够准确，

4.写代码时一定要先想清楚做什么，想要效果是什么，怎么做 ，用什么来实现，一步一步来，

5.this的使用，参数传值，不够熟练，

6.JQ操作里的eq()方法将匹配元素集缩减值指定 index 上的一个。

例子：

1  2  3  4    9   10 11 12 13 
     
      14   
      
list item 1
15   
      
list item 2
16   
      
list item 3
17   
      
list item 4
18   
      
list item 5
19 
     
20 21 22 23 

结果：

如果提供负数，则指示从集合结尾开始的位置，而不是从开头开始

7.$(this).index()，在编写选项卡及轮播图等特效时经常用到

　　从0开始

例子：

场景一： 同级元素标签相同

html代码：

1 
     
      2         
      
one
3         
      
two
4         
      
three
5         
      
four
6     
     

jq代码：

1     //  $(this).index() 测试代码一 2     $("li").on("click",function(){ 3         var index = $(this).index(); 4         console.log(index); // 依次点击li元素输出： 0,1,2,3 5     }) 6     // $(obj).index(this) 测试代码二 7     $("li").on("click",function(){ 8         var index = $("li").index(this); 9         console.log(index); // 依次点击li元素输出： 0,1,2,310 　　})

 执行两段脚本并依次点击li元素，都是输出： 0/1/2/3，在这个场景下，作用一样。

场景二：同级元素标签不相同

html代码：

1 
     
      2         
      
this is span
3         
      
this is span
4         
      this is b5         
      this is b6     
     

jq代码：

1     //  $(this).index() 测试代码一 2     $("b").on("click",function(){ 3         var index = $(this).index(); 4         console.log(index); // 依次点击b元素输出:2,3 5     }) 6     // $(obj).index(this) 测试代码二 7     $("b").on("click",function(){ 8         var index = $("b").index(this); 9         console.log(index); // 依次点击b元素输出:2,310     })

测试代码一中，index()是元素在当前同级元素中的位置下标，不区分标签；

测试代码二中，返回值是当前操作元素（this）在$（"b"）集合中的下标。$( "b" )是jQuery对象集合，所以非同级元素也可以使用