文章目录: 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>