JavaScript与DOM操作实例-优快云博客

本文链接：https://blog.youkuaiyun.com/oumaharuki/article/details/76314892
<!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循环

for套for

this
