文章目录: |
|
|
for 循环 |
|
—— |
|
1.0、切换图片(for循环遍历) |
|
2.0、封装id进行 - 图片切换 |
|
3.0、封装+排他思想(闭包)- 选项卡切换 |
for 循环 9*9乘法表:
for(var i = 1; i < 10; i++) {
for(var j = 1; j <= i; j++){
window.document.white("<span>" + j +"*"+ i +"="+ j * i + "</span>")
}
window.document.white("<br/>")
}
切换图片:
<script>
var ul = document.getElementById("fj");
var aList = document.getElementsByTagName("a");
var des = document.getElementById("des");
var big_img = document.getElementById("big_img");
for(var i = 0; i<aList.length; i++) {
aList[i].onclick = function() {
big_img.src = this.href;
des.innerHTML = this.title;
return false;
}
}
</script>
<p id="dec">蒲公英</p>
<img src="img/img01.jpg" alt="蒲公英" id="big_img" />
<ul id="fj">
<li>
<a href="img/img01.jpg" title="蒲公英">
<img src="img/img01.jpg" alt="蒲公英" id="" />
</a>
</li>
<li>
<a href="img/img01.jpg" title="蒲公英">
<img src="img/img01.jpg" alt="蒲公英" id="" />
</a>
</li>
</ul>
封装id:
分析: |
|
—— $(liID): |
调用 $() 方法,就相当于 var 了一个 document.getElementById("") ,传入一个id,拿到img标签 |
第二种方法则是用 for循环遍历 |
|
<script>
window.onload = function() {
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}
function changeImage(liId,imgSrc) {
$(liID).onmouseover = function() {
$('box').style.background = imgSrc;
};
}
changeImage('li01', 'url("img/img01.png") no-repeat center center');
changeImage('li02', 'url("img/img02.png") no-repeat center center');
changeImage('li03', 'url("img/img03.png") no-repeat center center');
--------------------------------------------------------------------
--------------------------------------------------------------------
var box = document.getElementById('box');
var aList = box.getElementsTagName('li');
for (var i=0; i<aList.length; i++) {
var sli = aList[i];
sli.index = i+1;
sli.onmouseover = function() {
box.style.background = 'url("img/img0"+ this.index +".png") no-repeat center center'
};
}
}
</script>
// 大的图片为box的背景图
<div id="box">
<ul>
<li id="li01">
<img src="img/img01.png" alt="" />
</li>
</ul>
</div>
tab选项卡:
分析: |
|
排他思想 — this: |
在事件中,函数中的this就指向了数据源 |
排他思想 — 同步 与 异步 |
看两个示例 |
<script>
var btns = document.querySelectorAll('button');
for (var i=0; i<btns.length; i++) {
btns[i].index = i;
btns[i].onclick = function() {
alert("你点击了第" + this.index + "个按钮")
};
-----------------------------------------------------------------------
(function (i) {
btns[i].onclick = function() {
alert("你点击了第" + i + "个按钮")
};
})(i)
}
</script>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
-
display 的none 和 block 相互切换并不会影响 性能,而dom操作的删除和插入则会;
<script>
window.onload = function() {
var allList = $('tab_header').getElementsByTagName('li');
var allDom = $('tab_content').getElementsByClassName('dom');
for(var i=0; i<allList.length; i++) {
var li = allList[i];
li.index = i;
li.onmouseover = function() {
for(var j=0; j<allList.length; j++) {
allList[j].className = '';
allDom.style.display = 'none';
};
this.className = "selected";
allDom[this.index].style.display = "block";
}
}
}
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}
</script>
//class 用中划线, id 用下划线
<div id="tab">
// 头部
<div id="tab_heder">
<ul>
<li class="selected">公告</li>
<li>规则</li>
</ul>
</div>
// 内容
<div id="tab_content">
<div class="dom" style="display: block">1111</div>
<div class="dom" style="display: none">2222</div>
</div>
</div>