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