js第三节-自定义属性、索引值

      第一节陈明吕老师就大致提了一下自定义属性这个概念，自定义属性是我们自己给元素添加的属性，不是元素天生就存在的。自定义属性最常用的是索引值。举个例子来讲一下：

一、自定义属性用法

       比如页面有一个ul元素（id是ul）里面包含了10个li元素，现在陈明吕老师希望点击哪个li，哪个li的背景色就会变成红色。程序如下(重点关注一下自定义属性的用法)：

       var oUl = document.getElementById('ul');

       var aLI = oUl.getElementsByTagName('li');

       for(var i = 0;i < aLi.length;i++){

              aLi[i].index = i;//自定义属性，这个是每一个li元素特有的属性，

               aLi[i].onclick = function(){

                  aLi[this.index].style.background = 'red';

             };

        }

上面的这个小例子，希望大家好好领悟自定义属性是怎么用来当索引值的。

二、自定义属性的应用

1.带缩略图的图片切换效果

                          图1.带缩略图的图片切换效果

HTML代码和CSS代码：

JS代码：

2.QQ列表展开收缩扩展

图2.QQ列表展开收缩扩展

HTML代码和CSS代码：

JS代码：

3.控制多组图片切换

                                                                                 图3.控制多组图片切换

HTML代码和JS代码：

JS代码：

上面的三个案例都用到了自定义的属性和自定义属性的索引值，陈明吕老师希望各位同学能够好好的体会，下一节我们将会讲讲数据类型以及类型的转化这一部分的知识。希望大家继续关注。