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

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代码:

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

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值