时间：2017-08-11
  描述：jQuery基础介绍与实例
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      .level1{
        list-style: none;
      }
      .level2{
        list-style: none;
      }
    </style>
    <script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $(".level1 > a").click(function(){
          $(this).addClass("current")//添加样式
          .next().show()//下一个元素显示
          .parent().siblings().children("a").removeClass("current")//元素的父元素的所有兄弟元素的<a>去掉current样式
          .next().hide();
          return;
        });
      });
      /*
       * jQuery对象转化成DOM对象
       */
      var $level = $(".level1");//jQuery对象
      //方法1
      var level = $level[0];//DOM对象
      //方法2
      var level2 = $level.get(0);
      /*
       * DOM对象转换成jQuery对象
       */
      var menu = document.getElementById('box');//DOM对象
      var $menu = $(menu);//jQuery对象
      
    </script>
  </head>
  <body>
    <div id="box">
      <ul class="menu">
        <li class="level1">
          <a href="#none">衬衫</a>
          <ul class="level2">
            <li><a href="#none">短袖衬衫</a></li>
            <li><a href="#none">短袖衬衫</a></li>
            <li><a href="#none">短袖衬衫</a></li>
            <li><a href="#none">短袖衬衫</a></li>
          </ul>
        </li>
        <li class="level1">
          <a href="#none">卫衣</a>
          <ul class="level2">
            <li><a href="#none">开襟卫衣</a></li>
            <li><a href="#none">开襟卫衣</a></li>
            <li><a href="#none">开襟卫衣</a></li>
            <li><a href="#none">开襟卫衣</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>