标签：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 li { list-style:none; } 8 .lis { width:80px; height:30px; border:1px solid #333; position:relative; } 9 .lis a { display:block; line-height:30px; text-align:center; text-decoration:none; color:#000; background:#f1f1f1; } 10 ul ul { padding:0; margin:0; width:140px; border:1px solid #333; position:absolute; top:30px; left:-1px; background:#FF9; display:none; } 11 ul ul li { text-align:center; line-height:30px; } 12 </style> 13 14 <!-- 15 16 希望把某个元素移除你的视线： 17 18 1、display:none; 显示为无 19 2、visibility:hidden; 隐藏 20 3、width \ height 21 4、透明度 22 5、left \ top 23 6、拿一个白色DIV盖住它 24 7、margin负值 25 …… 26 27 --> 28 29 </head> 30 31 <body> 32 33 <ul> 34 <li id="lis" class="lis"> 35 <a id="link" href="#">微博</a> 36 <ul id="ul1"> 37 <li>私信</li> 38 <li>评论</li> 39 <li>@我</li> 40 </ul> 41 </li> 42 </ul> 43 44 <script> 45 46 // 毕加索 = 帕布罗.迭戈.荷瑟.山迪亚哥.弗朗西斯科.德.保拉.居安.尼波莫切诺.克瑞斯皮尼亚诺.德.罗斯.瑞米迪欧斯.西波瑞亚诺.德.拉.山迪西玛.特立尼达.玛利亚.帕里西奥.克里托.瑞兹.布拉斯科.毕加索 47 48 var li = document.getElementById(‘lis‘); 49 var ul = document.getElementById(‘ul1‘); 50 var a = document.getElementById(‘link‘); 51 52 li.onmouseover = show; 53 li.onmouseout = hide; 54 55 function show(){ 56 ul.style.display = ‘block‘; 57 a.style.background = ‘yellow‘; 58 } 59 60 function hide(){ 61 ul.style.display = ‘none‘; 62 a.style.background = ‘#f1f1f1‘; 63 } 64 65 /* 66 JS中如何获取元素： 67 1、通过ID名称来获取元素： 68 document get element by id ‘link‘ 69 docuemnt.getElementById(‘link‘); 70 2 71 …… 72 73 事件：鼠标事件、键盘事件、系统事件、表单事件、自定义事件…… 74 75 onclick 76 onmouseover 77 onmouseout 78 onmousedown 79 onmouseup 80 onmousemove 就像是鼠标抚摸一样的事件 81 …… 82 83 onload 加载完以后执行…… 84 window.onload = 事情 85 img.onload 86 body.onload 87 …… 88 89 如何添加事件： 90 元素.onmouseover 91 92 函数：可以理解为-命令，做一些事~~ 93 function abc(){ // 肯定不会主动执行的！ 94 …… 95 } 96 1、直接调用：abc(); 97 2、事件调用：元素.事件 = 函数名 oDiv.onclick = abc; 98 99 function (){} 匿名函数 100 元素.事件 = function (){}; 101 102 103 测试： 104 alert(1); 带一个确定按钮的警告框 105 alert(‘ok‘); ‘ok‘ 字符串 106 alert("ok"); 107 108 变量： 109 var li = document.getElementById(‘lis‘); 110 var num = 123; 111 var name = ‘leo‘; 112 */ 113 </script> 114 115 </body> 116 </html>
标签：
原文地址：http://www.cnblogs.com/hduhdc/p/5248128.html
