JS3-自定义属性、索引值.docx

JS3-自定义属性、索引值1- 自定义属性、自定义一组开关应用-11.1自定义属性的概念元素自身上面没有的属性称之为自定义属性。例如 表单是没有abc这个属性的1.2往元素中添加自定义属性Window.onload=function()Var oBtn=document.getElementsByTagName(input);oBtn0.abc=123;/往button按钮中添加属性abcalert(oBtn0.abc);/123oBtn 0.abc = 456; /覆盖原先自定义属性的值1.3循环往元素中添加自定义属性 for( var i=0; iaBtn.length; i+ )aBtni.abc = 123;aBtni.xyz = true;1.4自定义一组开关的应用无标题文档li list-style: none;width: 114px;height: 140px;background: url(img/normal.png);float: left;margin-right: 20px;window.onload = function() var aLi = document.getElementsByTagName(li);/ var onOff = true;/ 只能控制一组！for(var i = 0; i aLi.length; i+) aLii.onOff = true;aLii.onclick = function() / alert( this.style.background );/ 背景不能判断/ color red #f00 / 相对路径if(this.onOff) this.style.background = url(img/active.png);this.onOff = false; else this.style.background = url(img/normal.png);this.onOff = true;效果如图所示：2-获取自身递增数字及匹配数组内容-2window.onload = function() var aBtn = document.getElementsByTagName(input); /获取所有的button元素var arr = A, B, C, D; /定义一个数组用来存放A，B，C,D四个元素for(var i = 0; i aBtn.length; i+) aBtni.num = 0;aBtni.onclick = function() / alert( arr this.num );this.value = arrthis.num;this.num+;if(this.num = arr.length) this.num = 0;显示效果如图所示3-添加索引值、匹配数组、HTML元素-33.1添加索引值无标题文档window.onload = function() var aBtn = document.getElementsByTagName(input);for(var i = 0; i aBtn.length; i+) aBtni.index = i; / 自定义属性（索引值）aBtni.onclick = function() / alert( i );/ 3alert(this.index);3.2匹配数组匹配数组window.onload = function() var aBtn = document.getElementsByTagName(input);/ 想建立“匹配”“对应”关系，就用索引值var arr = 莫涛, 张森, 杜鹏;for(var i = 0; i aBtn.length; i+) aBtni.index = i; / 自定义属性（索引值）aBtni.onclick = function() / alert( arr this.index );this.value = arrthis.index;3.3建立匹配对应关系用索引“匹配”“对应”关系，就用索引值window.onload = function() var aBtn = document.getElementsByTagName(input);var aP = document.getElementsByTagName(p);/ 想建立“匹配”“对应”关系，就用索引值var arr = 莫涛, 张森, 杜鹏;for(var i = 0; i aBtn.length; i+) aBtni.index = i; / 自定义属性（索引值）aBtni.onclick = function() / alert( arr this.index );this.value = arrthis.index;aPthis.index.innerHTML = arrthis.index;abc4-图片切换综合实例（1）图片切换综合实例ulpadding:0;margin:0lilist-style:nonebodybackground:#333#picwidth:400px;height:500px;position:relative;margin:0 auto;background:url(img/loader_ico.gif) no-repeat center #fff#pic imgwidth:400px;height:500px#pic ulwidth:40px;position:absolute;top:0;right:-50px#pic liwidth:40px;height:40px;margin-bottom:4px;background:#666#pic .activebackground:#FC3#pic spantop:0#pic pbottom:0;margin:0#pic p,#pic spanposition:absolute;left:0;width:400px;height:30px;line-height:30px;text-align:center;color:#fff;background:#000window.onload = function() var oDiv = document.getElementById(pic);var oImg = oDiv.getElementsByTagName(img)0;var oSpan = oDiv.getElementsByTagName(span)0;var oP = oDiv.getElementsByTagName(p)0;var oUl = oDiv.getElementsByTagName(ul)0;var aLi = oUl.getElementsByTagName(li);var arrUrl = img/1.png, img/2.png, img/3.png, img/4.png;var arrText = 小宠物, 图片二, 图片三, 面具;var num = 0;var oldLi = null;for(var i = 0; i arrUrl.length; i+) oUl.innerHTML += ;oldLi = aLinum;/ 初始化oImg.src = arrUrlnum;oSpan.innerHTML = 1 + num + / + arrUrl.length;oP.innerHTML = arrTextnum;aLinum.className = active;for(var i = 0; i aLi.length; i+) aLii.index = i; / 索引值aLii.onclick = function() oImg.src = arrUrlthis.index;oP.innerHTML = arrTextthis.index;oSpan.innerHTML = 1 + this.index + / + arrText.length;/*/ 思路一：全部清空，当前添加for(var i = 0; i aLi.length; i+) aLii.className = ;this.className = active;/*/ 思路二：清空上个，当前添加oldLi.className = ;oldLi = this;this.className = active;*/;数量正在加载中文字说明正在加载中5-图片切换综合实例(2)无标题文档ul padding:0; margin:0; li list-style:none; body background:#333; #pic width:400px; height:500px; position:relative; margin:0 auto; background:url(img/loader_ico.gif) no-repeat center #fff; #pic img width:400px; height:500px; #pic ul width:40px; position:absolute; top:0; right:-50px; #pic li width:40px; height:40px; margin-bottom:4px; background:#666; #pic .active background:#FC3; #pic span top:0; #pic p bottom:0; margin:0; #pic p,#pic span position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; window.onload = function() var oDiv = document.getElementById(pic);var oImg = oDiv.getElementsByTagName(img)0;var oSpan = oDiv.getElementsByTagName(span)0;var oP = oDiv.getElementsByTagName(p)0;var oUl = oDiv.getElementsByTagName(ul)0;var aLi = oUl.getElementsByTagName(li);var arrUrl = img/1.png, img/2.png, img/3.png, img/4.png;var arrText = 小宠物, 图片二, 图片三, 面具;var num = 0;for(var i = 0; i arrUrl.length; i+) oUl.innerHTML += ;/ 初始化function fnTab() oImg.src = arrUrlnum;oSpan.innerHTML = 1 + num + / + arrUrl.length;oP.innerHTML = arrTextnum;for(var i = 0; i aLi.length; i+) aLii.className = ;aLinum.className = active;fnTab();for(var i = 0; i aLi.length; i+) aLii.index = i; / 索引值aLii.onclick = function() num = this.index;fnTab(); 数量正在加载中 文字说明正在加载中 显示效果图如下6-QQ列表展示无标题文档ul , h2 padding:0; margin:0; li list-style:none; #list width:240px; border:1px solid #333; margin:0 auto; #list .lis #list h2 height:30px; line-height:30px; text-indent:20px; background:url(img/ico1.gif) no-repeat 5px center #6FF; color:#000; #list .active background:url(img/ico2.gif) no-repeat 5px center #FF9; color:#000; #list ul display:none; #list ul li line-height:24px; border-bottom:1px solid #333; text-indent:24px; #list ul .hover background:#6FF; window.onload = function ()var oUl = document.getElementById(list);var aH2 = oUl.getElementsByTagName(h2);var aUl = oUl.getElementsByTagName(ul);var aLi = null;var arrLi = ;for( var i=0; iaH2.length; i+ )aH2i.index = i;aH2i.onclick