链接与列表知识及导航小示例 -

链接

a标签的打开方式，用target属性定义
- 默认。在相同的框架中打开被链接文档。
```
<a href="www.php.cn" target="_self"></a>
```
- 在新窗口中打开被链接文档。
```
<a href="www.php.cn" target="_blank"></a>
```
- 在父框架集中打开被链接文档。
```
<a href="www.php.cn" target="_parent"></a>
```
- 在整个窗口中打开被链接文档。
```
<a href="www.php.cn" target="_top"></a>
```
使用a标签进行文件下载：当href中的地址指向一个文件时
可以用download属性定义文件名称
```
<a href="a.png" download="img下载.png"></a>
```
使用a标签进行拨打电话：在href中使用tel:电话号格式
```
<a href="tel:18345678901">18345678901</a>
```
使用a标签进行调整到邮箱：在href中使用tomail:邮箱格式
```
<a href="tomail:demo@163.com">demo@163.com</a>
```

用a标签与id设置锚点

<a href="#bottom">到达底部</a>
<p>文本</p>
.......
<p id="bottom">底部</p>

列表

无序列表：ul+li

<ul>
<li>首页</li>
<li>php工具</li>
<li>视频课程</li>
</ul>

有序列表：ol+li

 <ol>
   <li>html/css</li>
   <li>javascript</li>
   <li>php</li>
 </ol>

自定义列表：dl+dt+dd

<dl>
   <dt>前端</dt>
   <dd>html</dd>
   <dd>css</dd>
   <dd>js</dd>
   <dt>服务端</dt>
   <dd>php</dd>
   <dd>java</dd>
   <dd>c</dd>
   <dt>数据库</dt>
   <dd>memcacheed</dd>
   <dd>redis</dd>
   <dd>mysql</dd>
 </dl>

定位

默认:static，静态定位/文档流定位
元素未设置position属性时，默认是以文档流的顺序进行排列
文档流：按照书写顺序
相对定位
元素相对于自己在文档流中原始位置相对偏移
```
p{
  position:relative;
  top:50 px;
  left:30px;
}
```
绝对定位
元素找到距离最近的具有定位属性的父级元素相对偏移。如果父级中都没有定位属性，则相对于body偏移
```
p{
  position:absolute;
  top:50 px;
  left:30px;
}
```

事件监听与事件代理

事件属性

<button onclick="console.log(this.innerText)">按钮</button>

对象属性

 <button>按钮</button>
 <script>
     document.querySelectorAll('button')[0].onclick=function(){
         console.log(this.innerText);
     }
 </script>

注：当用对象属性方式对同一个元素绑定了对个相同事件时，只有最后的事件有效

事件监听器

 <button>按钮</button>
 <script>
     const btn=document.querySelectorAll('button')[0];
     btn.addEventListener('click',function(){
         console.log('第一次点击');
     })
     btn.addEventListener('click',function(){
         console.log('第二次点击');
     })
 </script>

注：两次事件都会触发

事件的触发阶断

冒泡：从内层到外层（默认值）

 <div>
   <li><a href="">点击</a></li>
 </div>
 <script>
   const a = document.querySelector("a");
   const li = document.querySelector("li");
   const div = document.querySelector("div");
   const body = document.body;
   a.addEventListener("click", showTagName);
   li.addEventListener("click", showTagName);
   div.addEventListener("click", showTagName);
   body.addEventListener("click", showTagName);
   function showTagName() {
     alert(this.tagName);
   }
 </script>

捕获：由外向内触发

 <div>
   <li><a href="">点击</a></li>
 </div>
 <script>
   const a = document.querySelector("a");
   const li = document.querySelector("li");
   const div = document.querySelector("div");
   const body = document.body;
   a.addEventListener("click", showTagName, true);
   li.addEventListener("click", showTagName, true);
   div.addEventListener("click", showTagName, true);
   body.addEventListener("click", showTagName, true);
   function showTagName() {
     alert(this.tagName);
   }
 </script>

阻止事件冒泡与捕获

非IE浏览器

e.stopPropagation();

IE浏览器

e.cancleBubble=true

事件代理
用父级元素代理所有子元素及更下级元素上的同名事件

 <ul>
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
   <li>item4</li>
   <li>item5</li>
 </ul>
 <script>
   document.querySelector("ul").addEventListener("click", function (ev) {
     console.log(ev.target); //事件触发者
     console.log(ev.currentTarget); //事件绑定者
   });
 </script>

导肮小示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      a {
        color: #bbb;
        text-decoration: none;
      }
      #nav {
        background-color: black;
        height: 50px;
        line-height: 50px;
      }
      li {
        list-style: none;
        margin: 0 10px;
        float: left;
      }
      #nav > li > a:hover {
        color: white;
      }
      #nav > li {
        position: relative;
      }
      #nav > li > ul {
        position: absolute;
        top: 50px;
        width: 180px;
        border: 1px solid #aaa;
        border-top: none;
      }
      #nav > li > ul > li a {
        display: inline-block;
        height: 50px;
        color: #444;
      }
      ul.sub li:hover {
        background-color: #eee;
      }
      #nav > li > ul {
        /* display: none; */
      }
    </style>
  </head>
  <body>
    <ul id="nav">
      <li><a href="">首页</a></li>
      <li><a href="">视频教程</a></li>
      <li><a href="">入门教程</a></li>
      <li><a href="">社区问答</a></li>
      <li>
        <a href="">技术文章</a>
        <ul>
          <li><a href="">PHP教程</a></li>
          <li><a href="">PHP框架</a></li>
          <li><a href="">html教程</a></li>
          <li><a href="">css教程</a></li>
          <li><a href="">js教程</a></li>
          <li><a href="">mysql教程</a></li>
        </ul>
      </li>
      <li>
        <a href="">资源下载</a>
        <ul>
          <li><a href="">PHP工具</a></li>
          <li><a href="">在线工具</a></li>
          <li><a href="">手册下载</a></li>
          <li><a href="">学习课件</a></li>
        </ul>
      </li>
      <li><a href="">PHP培训</a></li>
    </ul>
  </body>
  <script>
    const navs = document.querySelectorAll("#nav > li");
    navs.forEach(function (nav) {
      nav.addEventListener("mousemove", showSubMenu);
      nav.addEventListener("mouseout", closeSubMenu);
    });
    function showSubMenu(ev) {
      if (ev.target.nextElementSibling !== null) {
        ev.target.nextElementSibling.style.display = "block";
      }
    }
    function closeSubMenu(ev) {
      if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {
        ev.target.nextElementSibling.style.display = "none";
      }
    }
  </script>
</html>