ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
### 获取元素的第二种方式 ~~~ document.getElementsByTagName('标签名') ~~~ *** 与Java中使用方式基本一致 课堂练习-1: 给一堆li加点击事件,显示自身包含的内容 ~~~ <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul{ list-style: none; } li{ cursor: pointer; } </style> <script type="text/javascript"> window.onload = function(){ var aLi = document.getElementsByTagName('li'); for(var i = 0;i < aLi.length;i++){ aLi[i].onclick = function(){ alert(this.innerHTML); }; } } </script> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>0</li> </ul> </body> </html> ~~~ 课堂练习-2: 在页面生成2000个按钮(性能问题,利用字符串添加) 课堂练习-3: 生成一排10个50px\*50px的div,颜色红黄蓝循环 课堂练习-4: 模拟QQ成员列表 ![](https://box.kancloud.cn/3fc1817b8d20d04f4919733fde1191c1_346x499.png) ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> ul,li,h2{ padding:0; margin: 0; list-style: none; } #list{ width:200px; margin:0 auto; border: 1px solid #D5D5D5; } h2{ font-size: 16px; color:#fff; background: #008000; text-indent: 4em; line-height: 28px; } #list ul li{ border-bottom: 1px solid #D5D5D5; line-height: 26px; text-indent: 2em; cursor: pointer; } #list ul{ display: none; } #list h2{ cursor: pointer; border-bottom: 1px solid #D5D5D5; } #list ul li:hover{ background: yellowgreen; } </style> <script type="text/javascript"> window.onload = function(){ var oList = document.getElementById('list'); var aUl = oList.getElementsByTagName('ul'); var aH2 = oList.getElementsByTagName('h2'); var li = null; for(var i = 0;i < aH2.length;i++){ // 索引 aH2[i].index = i; aH2[i].onOff = true; aH2[i].onclick = function(){ if(this.onOff){ oList.getElementsByTagName('ul')[this.index].style.display = 'block'; }else{ oList.getElementsByTagName('ul')[this.index].style.display = 'none'; } this.onOff = !this.onOff; } } for(var i = 0;i < aUl.length;i++){ var aLi = aUl[i].getElementsByTagName('li'); for(var j = 0;j < aLi.length;j++){ aLi[j].onclick = function(){ if(li != null){ li.style.backgroundColor = '#fff'; } this.style.backgroundColor = 'yellowgreen'; li = this; } } } } </script> </head> <body> <ul id="list"> <li> <h2>我的好友</h2> <ul> <li>王一一</li> <li>李文华</li> <li>搞发展</li> </ul> </li> <li> <h2>我的同事</h2> <ul> <li>黄腾达</li> <li>六和谐</li> <li>形如一</li> <li>沈从文</li> <li>张曼玉</li> </ul> </li> <li> <h2>我的同学</h2> <ul> <li>郭文明</li> <li>因调整</li> <li>正安全</li> </ul> </li> </ul> </body> </html> ~~~ *** ### this的应用 与Java类似,代表当前元素 直接用alert(this)看一下,object window-->window是js的老大,alert(1)相当于window.alert(1),所以**this相当与alter的调用者** 特殊情况: ~~~ oBtn.onclick = fn; function fn(){ // 这里this指的是oBtn } ~~~ ~~~ oBtn.onclick = function(){ // 但是如果这里调用了其他函数 fn(); } function fn(){ // 这里this指的是window } ~~~ 解决办法是存一份,**that = this** ~~~ for(var i = 0;i < aBtn.length;i++){ oBtn.onclick = function(){ that = this; fu(); } function fn(){ that.style.background = red; } ~~~ *** 课堂练习-2:鼠标移入显示隐藏div,模拟桌面应用 ![](https://box.kancloud.cn/e9f5d95ade71e96b8a3a3c3b725f924d_731x343.gif) *** 课后作业-1:图片随鼠标移动显现 ![](https://box.kancloud.cn/b708ccb52d14bd390120ac9c1cac2d96_521x572.png) ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding:0;margin:0;} #box{ /*background: #0F7CBF;*/ width:600px; height:600px; position: relative; } .pray{ width:50px; height: 50px; position:absolute; background: #D5D5D5; opacity: 0.5; } .img{ width:50px; height: 50px; position:absolute; z-index: -1; overflow: hidden; transition: 0.3s; } </style> <script type="text/javascript"> window.onload = function(){ var oBox = document.getElementById('box'); for(var i = 0;i < 10;i++){ for(var j = 0;j < 10;j++){ oBox.innerHTML += '<div class="pray" style="left:'+(i*52)+'px;top:'+(j*52)+'px;"></div>'; oBox.innerHTML += '<div class="img" style="left:'+(i*52)+'px;top:'+(j*52)+'px;background:url(img/pic.jpg) no-repeat '+(-i*52)+'px '+(-j*52)+'px"></div>' } } var aDiv = oBox.getElementsByTagName('div'); for(var i = 0;i < aDiv.length;i++){ aDiv[i].onmouseover = function(){ if(this.className == 'pray'){ this.style.display = 'none'; } } } } </script> </head> <body> <div id="box"></div> </body> </html> ~~~ *** [图片素材下载](https://pan.baidu.com/s/11Luvx0SiX71Zk01lpSUS_g)