初步小结
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 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div { width:60px; height:60px; margin:10px; float:left; 6 border:2px solid blue; } 7 .blue { background:blue; } 8 </style> 9 <script type="text/javascript" src="/jquery/jquery.js"></script> 10 </head> 11 12 <body> 13 <ul> 14 <li>list item 1</li> 15 <li>list item 2</li> 16 <li>list item 3</li> 17 <li>list item 4</li> 18 <li>list item 5</li> 19 </ul> 20 21 <script>$('li').eq(2).css('background-color', 'red');//取第三个li,修改背景</script> 22 </body> 23 </html>
结果：
如果提供负数，则指示从集合结尾开始的位置，而不是从开头开始
7.$(this).index()，在编写选项卡及轮播图等特效时经常用到
从0开始
例子：
场景一： 同级元素标签相同
html代码：
1 <ul> 2 <li>one</li> 3 <li>two</li> 4 <li>three</li> 5 <li>four</li> 6 </ul>
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,3 10 })
执行两段脚本并依次点击li元素，都是输出： 0/1/2/3，在这个场景下，作用一样。
场景二：同级元素标签不相同
html代码：
1 <div> 2 <p>this is span</p> 3 <p>this is span</p> 4 <b>this is b</b> 5 <b>this is b</b> 6 </div>
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,3 10 })
测试代码一中，index()是元素在当前同级元素中的位置下标，不区分标签；
测试代码二中，返回值是当前操作元素（this）在$（"b"）集合中的下标。$( "b" )是jQuery对象集合，所以非同级元素也可以使用