迷你导航笔记--2

引入Icon图标

symbol引用

1、拷贝项目下面生成的symbol代码：

//at.alicdn.com/t/font_1799396_cvz13b3snhj.js

2、加入通用css代码（引入一次就行）：

<style type="text/css">
  .icon {
     width: 1em; height: 1em;
     vertical-align: -0.15em;
     fill: currentColor;
     overflow: hidden;
  }
</style>

3、挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

实现搜索功能

使用form表单

<form class="searchForm" method="get" action="https://www.baidu.com/s">
  <input type="text" name="wd">
  <button type="submit">搜索</button>
</form>

实现点击跳转

使用a标签

<li>
  <a href="https://vuejs.org">
    <div class="site">
      <div class="logo">V</div>
      <div class="link">vuejs.org</div>
    </div>
  </a>
</li>

实现新增按钮

引入jQuery操作

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

$('.addButton').on('click',()=>{
  let url = window.prompt('请输入要添加的网址：')
  if(url.indexOf('https') !== 0){
    url = 'https://' + url
  }
  const $lastLi = $('.siteList').find('li.last')
  const $li = $(`<li>
        <a href="${url}">
          <div class="site">
            <div class="logo">${url[8]}</div>
            <div class="link">${url}</div>
          </div>
        </a>
      </li>`).insertBefore($lastLi)
})