<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> li { width:100px; height:150px; float:left; margin-right:30px; background:#f1f1f1; position:relative; z-index:1; } div { width:80px; height:200px; background:red; position:absolute; top:75px; left:10px; display:none; } </style> <script> window.onload = function (){ var aLi = document.getElementsByTagName('li'); var that = null; for( var i=0; i<aLi.length; i++ ){ aLi[i].onmouseover = function (){ that = this; fn1(); }; aLi[i].onmouseout = function (){ this.getElementsByTagName('div')[0].style.display = 'none'; }; } function fn1(){ that.getElementsByTagName('div')[0].style.display = 'block'; } }; </script> </head> <body> <ul> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> </ul> </body> </html>
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>li { height:30px; border-bottom:1px solid #333; }</style><script>window.onload = function (){ var oUl = document.getElementById('list'); var aLi = oUl.getElementsByTagName('li'); var arr = [ '今天', '明天', '后天' ]; var len = arr.length; /* aLi[0].onclick = function (){ alert(1); }; aLi[1].onclick = function (){ alert(1); }; aLi[2].onclick = function (){ alert(1); }; */ // aLi.onclick = function (){ alert(1); }; for( var i=0; i<len; i++ ){ aLi[i].innerHTML = arr[i]; aLi[i].onclick = function (){ // alert(i); i => 3 }; }};</script></head> <body> <ul id="list"> <li></li> <li></li> <li></li></ul> </body></html>for套for
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> var arr = [ [ 1,2,3,4,'4+' ], [ 4,5,6 ], [ 7,8,9 ] ]; // arr[1][2] for( var i=0; i<arr.length; i++ ){ // arr[i][0] // arr[i][1] // arr[i][2] for( var j=0; j<arr[i].length; j++ ){ // alert( arr[i][j] ); } } // for( var i=0; ){} // for( var i=0; ){} window.onload = function (){ var oUl = document.getElementById('list'); var aUl = oUl.getElementsByTagName('ul'); var len = aUl.length; var aLi = null; // 空 for( var i=0; i<len; i++ ){ aLi = aUl[i].getElementsByTagName('li'); for( var j=0; j<aLi.length; j++ ){ aLi[j].style.border = '1px solid red'; } } }; </script> </head> <body> <ul id="list"> <li> <h2>我的好友</h2> <ul> <li>莫涛</li> <li>张森</li> <li>杜鹏</li> </ul> </li> <li><ol><li>no</li><li>no</li><li>no</li></ol></li> <li> <h2>我的坏友</h2> <ul> <li>莫小涛</li> <li>张小森</li> </ul> </li> <li><ol><li>no</li><li>no</li><li>no</li></ol></li> <li> <h2>我的黑名单</h2> <ul> <li>莫张</li> </ul> </li> </ul> </body> </html>
this
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> // this : 这个 // this: 指的是调用 当前 方法(函数)的那个对象 function fn1(){ // this } // fn1(); this => window // oDiv.onclick = fn1; this => oDiv /* oDiv.onclick = function (){ fn1(); fn1() 里的this => window }; <div οnclick=" this fn1(); "></div> fn1(); 里的 this 指的是 window */ // alert( this ); // object window // window 是 JS “老大” // window.alert( this ); function fn1(){ alert( this ); // window } // fn1(); // window.fn1(); </script> </head> <body> <input id="btn1" type="button" value="按钮" /> <input id="btn2" type="button" οnclick=" fn1(); " value="按钮2" /> <script> var oBtn = document.getElementById('btn1'); // oBtn.onclick = fn1; oBtn.onclick = function (){ // this fn1(); }; </script> </body> </html>
js for循环
最新推荐文章于 2023-02-01 14:41:09 发布