下拉菜单
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>下拉菜单</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } a { color: #fff; text-decoration: none; } .clearfix{ zoom:1; } .clearfix:after{ content: ''; clear: both; width: 0; height: 0; visibility: hidden; display: block; } li{ list-style: none; } nav{ background: #000000; } nav>ul>li{ float: left; width: 200px; padding: 10px 0; text-align: center; } nav>ul>li{ position: relative; } nav>ul>li>ul{ display: none; position: absolute; /*z-index: -1;*/ background: #f1f1f1; top: 40px; width: 100%; } nav>ul>li>ul>li{ padding: 5px 10px; text-align: center; } nav>ul>li>ul a{ color:#000; } </style></head><body><nav class="clearfix"> <ul> <li> <a href="">一级菜单1</a> <ul> <li><a href="">二级菜单1</a></li> <li><a href="">二级菜单1</a></li> <li><a href="">二级菜单1</a></li> <li><a href="">二级菜单1</a></li> </ul> </li> <li> <a href="">一级菜单2</a> <ul> <li><a href="">二级菜单2</a></li> <li><a href="">二级菜单2</a></li> <li><a href="">二级菜单2</a></li> <li><a href="">二级菜单2</a></li> </ul> </li> <li> <a href="">一级菜单3</a> </li> <li> <a href="">一级菜单4</a> <ul> <li><a href="">二级菜单4</a></li> <li><a href="">二级菜单4</a></li> <li><a href="">二级菜单4</a></li> <li><a href="">二级菜单4</a></li> </ul> </li> </ul></nav><script> const navs = document.querySelectorAll("nav>ul>li"); // console.log(navs); //forEach() 用于调用数组的每个元素并传递给函数 navs.forEach(function (nav) { nav.addEventListener("mouseover", showMenu); nav.addEventListener("mouseout", hideMenu); }); //显示二级菜单 function showMenu(ev){ if( ev.target.nodeName === "A" && ev.target.nextElementSibling !== null){ ev.target.nextElementSibling.style.display = "block"; } } //关闭二级菜单 function hideMenu(ev) { if( ev.target.nodeName === "A" && ev.target.nextElementSibling !== null){ ev.target.nextElementSibling.style.display = "none"; } // console.log(ev.children) // if(ev.target.children.length > 1) { // console.log(ev.target); // ev.target.children[1].style.display = "none"; // } }</script></body></html>
引入外联样式的三种方法
1、<style>直接写入样式</style>2、<link rel="stylesheet" href="style.css">3、 <style> @import url("style.css"); @import "style.css"; </style>
元素a的几种主要用法
<!--打开一个网页--><a href="https://www.baidu.com/">百度</a><!--下载文件--><a href="XXX.zip">下载该文档</a><!--发邮件--><a href="mailto: 111111@qq.com">点我发邮件</a><!--打电话--><a href="tel: 18055553333">18055553333</a><!--锚点--><div id="top">111</div><a href="#top">置顶</a>
a标签的几种常用属性
_blank :在新窗口中打开被链接文档。_self :默认。在相同的框架中打开被链接文档。_parent :在父框架集中打开被链接文档。_top :在整个窗口中打开被链接文档。framename :在指定的框架中打开被链接文档。
元素的定位
position：元素默认在页面中按文档流的顺序进行排列static 默认值。没有定位，元素出现在正常的流中。absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。relative 生成相对定位的元素，相对于其正常位置进行定位。inherit 规定应该从父元素继承 position 属性的值。
事件监听器（监听函数）
<button>按钮1</button><button>按钮2</button><button class="button">按钮3</button><script> //获取满足条件的所有元素 document.querySelectorAll("tag") document.querySelectorAll(".class") document.querySelectorAll("#id") const btn = document.querySelectorAll('button'); console.log(btn);//NodeList(2) [button, button] //获取满足调价的第一个元素 const btn1 = document.querySelector('button'); console.log(btn1);//<button>按钮1</button> //addEventListener(事件类型，事件方法)； event:事件 listener:监听（倾听者） //可以给一个元素多次添加同一个事件，并控制事件触发的阶段 const btn2 = document.querySelector(".button"); btn2.addEventListener("click", function(e){ console.log(e.target); }); btn2.addEventListener("click", function(e){ console.log("111"); })</script>
事件冒泡、事件捕获
冒泡：由内层向外层层层触发,false可省略 e.addEventListener("click", fun, false); 捕获；由外层向内层层层触发 e.addEventListener("click", fun, true);
事件委托
<ul class="weituo"> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li></ul><script> // 事件代理： 用父级代理所有子元素以及更下一级的元素上的同名事件 document.querySelector(".weituo").addEventListener("click", function(ev){ console.log(ev.target);//<li>... 返回的是当前正在触发事件的元素 console.log(ev.currentTarget);//<ul>... 返回的是事件绑定者 })</script>
