jQuery

问答

一、说说库和框架的区别？

库（Library）
库是将代码集合成的一个产品，提供很多的API，供开发者调用。开发者在开发的时候只需要使用库的一部分类或者函数，即可以实现功能。
框架（Framework）
开发者在使用框架的时候，必须使用这个框架的全部代码。
打个比方就是，框架相当于一台完整的电脑，而库相当于各个零件，我们需要去自己组装成一台电脑。

二、jquery 能做什么？

jQuery 是一个 JavaScript 函数库，它通常能提供以下功能：

方便快捷的获取DOM元素
如果使用原生的JS方式来遍历DOM或者查找DOM元素，会有很多冗余的代码。而jQuery只需要一行就够了，非常简洁方便。
例如，找到ul里面的class为current的标签。

$('ul').find('li.current');

动态修改页面样式
即使在页面呈现之后，使用jQuery可以动态修改CSS的样式。jQuery能够改变文档中某个部分的类或者个别的样式属性。
例如，找到ul里面的第一个子标签li，给它添加名为active的类名。

$('ul > li:first').addClass('active');

为页面增加动态效果
jQuery提供了一系列特效的方法，比如隐藏、显示、淡入淡出、滑入滑出、animate自定义动画。
统一Ajax操作

三、jQuery 对象和 DOM 原生对象有什么区别？如何转化？

DOM对象是通过原生JS获得的对象，只能使用原生JS的属性和方法；jQuery 对象是通过jQuery获得的对象，只能使用jQuery自己封装的属性和方法。
jQuery对象转换为DOM原生对象：

var  el = $('div')[1]; //$('div').eq[1]

DOM原生对象转化为jQuery对象：

var el = document.getElementById('wrap');
var $el = $(el);

四、jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？

jQuery绑定事件的方式有：
bind
规定向被选元素添加一个或多个事件处理程序，这是最简单的方法。

$('a').bind('click', function(){
     alert('ok');
})

unbind
移除被选元素的事件处理函数，或者当事件发生时终止函数的运行。

$('button').click(function() {
      $('p').unbind();
})

delegate
为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

$( "#members" ).delegate( "li a", "click", function( e ) {} );

live
为被选元素添加一个或者多个事件处理程序，

$('a').live('click', function() { 
      alert("That tickles!");
});

on
把bind、delegate、live三种方法统一，用起来更方便

$( "#members" ).on( "click", "li a", function( e ) {} );

off
移除事件函数

$('button').click(function() {
    $('p').off('click'); //移除p上的click事件
})

推荐使用on，因为把其他三种都统一起来了，用起来更方便。

五、jquery 如何展示/隐藏元素？

展示元素

$(selector).show(speed,callback)

显示出隐藏的p

$(".btn2").click(function(){
  $("p").show();
});

隐藏元素

$(selector).hide(speed,callback)

隐藏元素p

$('.btn').click(function() {
    $('p').hide();
})

六、jquery 动画如何使用？

jQuery用于创建自定义动画。

$(selector).animate({params}, speed, callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });

七、如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

设置和获取元素的内部内容：html([string])。当没有参数的时候，返回的是innerHTML，当传一个string参数的时候，修改innerHTML的值为参数值。
设置和获取元素内部文本：text([string])。和html操作类似。

八、如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

获取表单用户输入或者选择的内容：.val()
设置表单用户输入或者选择的内容：.val('value')
获取元素属性：.attr()
设置元素属性：.attr(attributeName)

代码

一、使用 jquery实现如下效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>导航栏：商品分类</title>
  <link  rel="stylesheet" href="http://at.alicdn.com/t/font_cle58omuscahsemi.css">
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    li{
      list-style: none;
    }
    a{
      text-decoration: none;
    }
    .clearfix:after{
      content: '';
      display: block;
      clear: both;
    }
    .nav{
      width: 200px;
      margin: 10px 0 0 10px;
      font-size: 15px;
      line-height: 30px;
      background: rgb(199,23,30);
    }
    .nav>li{
      padding: 0 10px;
      border-bottom: 1px dotted #de272e;
      position: relative;
    }
    .nav>li>a{
      color: #eee;
    }
    .nav>li>.iconfont{
      color: #eee;
      float: right;
    }
    .classify{
      width: 200px;
      position: absolute;
      display: none;
      top: 0px;
      left: 200px;
      border: 1px solid #ddd;
    }
    .classify>li{
      width: 70px;
      margin: 0 20px 0 10px;
      float: left;
    }
    .classify>li>a{
      color: black;
    }
  </style>
</head>
<body>
  <div>
    <ul class="nav">
      <li>
        <a href="#">珠宝玉器</a>
        <span class="iconfont"></span>
        <ul class="classify clearfix">
                    <li><a href="">翡翠</a></li>
                    <li><a href="">玉石</a></li>
                    <li><a href="">宝石</a></li>
                    <li><a href="">水晶</a></li>
                    <li><a href="">玛瑙</a></li>
                    <li><a href="">珍珠</a></li>
                    <li><a href="">钻石</a></li>
                    <li><a href="">琥珀</a></li>
                    <li><a href="">和田</a></li>
                    <li><a href="">琥珀</a></li>
                </ul>
      </li>
      <li>
        <a href="#">珠宝玉器</a>
        <span class="iconfont"></span>
        <ul class="classify clearfix">
                    <li><a href="">翡翠</a></li>
                    <li><a href="">玉石</a></li>
                    <li><a href="">宝石</a></li>
                    <li><a href="">水晶</a></li>
                    <li><a href="">玛瑙</a></li>
                    <li><a href="">珍珠</a></li>
                </ul>
      </li>
      <li>
        <a href="#">珠宝玉器</a>
        <span class="iconfont"></span>
        <ul class="classify clearfix">
                    <li><a href="">翡翠</a></li>
                    <li><a href="">玉石</a></li>
                    <li><a href="">宝石</a></li>
                    <li><a href="">水晶</a></li>
                </ul>
      </li>
      <li>
        <a href="#">珠宝玉器</a>
        <span class="iconfont"></span>
        <ul class="classify clearfix">
                    <li><a href="">翡翠</a></li>
                    <li><a href="">玉石</a></li>
                    <li><a href="">宝石</a></li>
                    <li><a href="">水晶</a></li>
                    <li><a href="">玛瑙</a></li>
                    <li><a href="">珍珠</a></li>
                </ul>
      </li>
      <li>
        <a href="#">珠宝玉器</a>
        <span class="iconfont"></span>
        <ul class="classify clearfix">
                    <li><a href="">翡翠</a></li>
                    <li><a href="">玉石</a></li>
                    <li><a href="">宝石</a></li>
                    <li><a href="">水晶</a></li>
            </ul>
      </li>
    </ul>
  </div>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
    $('.nav>li').on('mouseleave', function() {
      $(this).find('.classify').hide();
    })
    $('.nav>li').on('mouseenter', function() {
      $(this).find('.classify').show();
    })
  </script>
</body>
</html>

预览

二、使用 jquery 实现如下效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tab栏切换</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    a{
      text-decoration: none;
    }
    li{
      list-style: none;
    }
    .clearfix:after{
      content: '';
      display: block;
      clear: both;
    }
    .wrap{
      margin: 10px;
      color: #666;
      font: 12px Arial;
    }
    .nav{
      width: 177px;
      border: 1px solid #ccc;
      border-bottom: none;
      border-radius: 4px;
    }
    .nav>li{
      float: left;
    }
    .background{
      background: #ccc;
      color: red;
    }
    .nav>li>a{
      line-height: 30px;
      padding: 0 10px;
      color: #666;
    }
    .crumbs{
      border-right: 1px solid #ccc;
      border-left: 1px solid #ccc;
    }
    .production-list{
      width: 700px;
      border: 1px solid #ddd;
      border-radius: 4px;
      text-align: center;
      display: none;
    }
    .production-details{
      margin-right: -20px;
    }
    .active{
      display: block;
    }
    .production-details>li{
      float: left;
      width: 178px;
      margin-right: 20px;
      border: 1px solid #ccc;
      padding: 10px 20px;
      position: relative;
    }
    .production-details .gap{
      margin-bottom: 20px;
    }
    .production-details a{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      border: 1px solid red;
      padding: 10px 15px;
      color: red;
      background: #fff;
      border-radius: 4px;
    }
    .production-details .cover{
      width: 100%;
      height: 100%;
      background: #aaa;
      opacity: 0.7;
      position: absolute;
      top: 0;
      left: 0;
      display: none;
    }
    .production-details>li:hover .cover{
      display: block;
    }
    .production-details .production-name{
      text-align: left;
      height: 36px;
    }
    .production-details .production-price{
      text-align: left;
      color: red;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <ul class="nav clearfix">
      <li class="background"><a href="javascript:void(0)">热门</a></li>
      <li><a class="crumbs" href="javascript:void(0)">珠宝首饰</a></li>
      <li><a href="javascript:void(0)">奢侈品1</a></li>
    </ul>
    <ul class="production">
      <li class="production-list active">
          <ul class="production-details clearfix">
            <li class="gap">
              <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
              ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
              <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
              <div class="production-price">￥1699.00</div>
            </li>
            <li class="gap">
              <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
              ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
              <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
              <div class="production-price">￥1699.00</div>
            </li>
            <li class="gap">
              <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
              ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
              <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
              <div class="production-price">￥1699.00</div>
            </li>
            <li>
              <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
              ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
              <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
              <div class="production-price">￥1699.00</div>
            </li>
            <li>
              <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
              ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
              <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
              <div class="production-price">￥1699.00</div>
            </li>
            <li>
              <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
              ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
              <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
              <div class="production-price">￥1699.00</div>
            </li>
          </ul>
      </li>
      <li class="production-list">
        <ul class="production-details clearfix">
          <li class="gap">
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-8ed952d538e757a0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
            <div class="production-price">￥1699.00</div>
          </li>
          <li class="gap">
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
            <div class="production-price">￥1699.00</div>
          </li>
          <li class="gap">
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏美千足金和通吊坠</div>
            <div class="production-price">￥1639.00</div>
          </li>
          <li>
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
            <div class="production-price">￥699.00</div>
          </li>
          <li>
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
            <div class="production-price">￥169.00</div>
          </li>
          <li>
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
            <div class="production-price">￥99.00</div>
          </li>
        </ul>
      </li>
      <li class="production-list">
        <ul class="production-details clearfix">
          <li class="gap">
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-15ffb40994ae2d1b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏金镶玉路路通吊坠</div>
            <div class="production-price">￥699.00</div>
           </li>
          <li class="gap">
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏美千足金和田玉金镶吊坠</div>
            <div class="production-price">￥1800.00</div>
          </li>
          <li class="gap">
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏美田玉金镶玉路路通吊坠</div>
            <div class="production-price">￥1799.00</div>
          </li>
          <li>
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-15ffb40994ae2d1b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
            <div class="production-price">￥1699.00</div>
          </li>
          <li>
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏美千足镶玉路路通吊坠</div>
            <div class="production-price">￥1099.00</div>
          </li>
          <li>
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏美千足金通吊坠</div>
            <div class="production-price">￥199.00</div>
          </li>
        </ul>
      </li>
    </ul>
  </div>


  <div class="wrap">
    <ul class="nav clearfix">
      <li class="background"><a href="javascript:void(0)">热门</a></li>
      <li><a class="crumbs" href="javascript:void(0)">珠宝首饰</a></li>
      <li><a href="javascript:void(0)">奢侈品2</a></li>
    </ul>
    <ul class="production">
      <li class="production-list active">
          <ul class="production-details clearfix">
            <li class="gap">
              <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
              ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
              <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
              <div class="production-price">￥1699.00</div>
            </li>
            <li class="gap">
              <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
              ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
              <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
              <div class="production-price">￥1699.00</div>
            </li>
            <li class="gap">
              <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
              ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
              <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
              <div class="production-price">￥1699.00</div>
            </li>
            <li>
              <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
              ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
              <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
              <div class="production-price">￥1699.00</div>
            </li>
            <li>
              <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
              ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
              <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
              <div class="production-price">￥1699.00</div>
            </li>
            <li>
              <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
              ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
              <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
              <div class="production-price">￥1699.00</div>
            </li>
          </ul>
      </li>
      <li class="production-list">
        <ul class="production-details clearfix">
          <li class="gap">
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-8ed952d538e757a0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
            <div class="production-price">￥1699.00</div>
          </li>
          <li class="gap">
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
            <div class="production-price">￥1699.00</div>
          </li>
          <li class="gap">
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏美千足金和通吊坠</div>
            <div class="production-price">￥1639.00</div>
          </li>
          <li>
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
            <div class="production-price">￥699.00</div>
          </li>
          <li>
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
            <div class="production-price">￥169.00</div>
          </li>
          <li>
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
            <div class="production-price">￥99.00</div>
          </li>
        </ul>
      </li>
      <li class="production-list">
        <ul class="production-details clearfix">
          <li class="gap">
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-15ffb40994ae2d1b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏金镶玉路路通吊坠</div>
            <div class="production-price">￥699.00</div>
           </li>
          <li class="gap">
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏美千足金和田玉金镶吊坠</div>
            <div class="production-price">￥1800.00</div>
          </li>
          <li class="gap">
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏美田玉金镶玉路路通吊坠</div>
            <div class="production-price">￥1799.00</div>
          </li>
          <li>
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-15ffb40994ae2d1b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
            <div class="production-price">￥1699.00</div>
          </li>
          <li>
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏美千足镶玉路路通吊坠</div>
            <div class="production-price">￥1099.00</div>
          </li>
          <li>
            <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
            ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            <div class="production-name">藏美千足金通吊坠</div>
            <div class="production-price">￥199.00</div>
          </li>
        </ul>
      </li>
    </ul>
  </div>


  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
    $('.nav>li').on('click', function() {
      $(this).addClass('background');
      $(this).siblings().removeClass('background');
      var index = $(this).index();
      var $current = $(this).parents('.wrap').find('.production-list').eq(index);
      $current.addClass('active');
      $current.siblings().removeClass('active');
    })
  </script>
</body>
</html>

预览
问题：点奢侈品2的时候页面跳到了顶部，可能是什么原因？如何解决
主要是a链接的href值的原因。#包含了一个位置信息，默认的锚是#top，也就是网页的上端。
在页面很长的时候会使用#来定位页面的具体位置，格式为：# + id。
如果要定义一个死链接要使用 javascript:void(0)，这样点击后就不会有反应。

三、实现如下效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>加载更多</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    a{
      text-decoration: none;
    }
    li{
      list-style: none;
    }
    .clearfix:after{
      content: '';
      display: block;
      clear: both;
    }
    .wrap{
      margin: 20px auto;
      color: #666;
      font: 12px Arial;
      width: 700px;
    }
    .background{
      background: #ccc;
      color: red;
    }
    .production-details{
      margin-right: -20px;
    }
    .production-details>li{
      float: left;
      width: 178px;
      margin-right: 20px;
      border: 1px solid #ccc;
      padding: 10px 20px;
      position: relative;
    }
    .production-details .gap{
      margin-bottom: 20px;
    }
    .production-details a{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      border: 1px solid red;
      padding: 10px 15px;
      color: red;
      background: #fff;
      border-radius: 4px;
    }
    .production-details .cover{
      width: 100%;
      height: 100%;
      background: #aaa;
      opacity: 0.7;
      position: absolute;
      top: 0;
      left: 0;
      display: none;
    }
    .production-details>li:hover .cover{
      display: block;
    }
    .production-details .production-name{
      text-align: left;
      height: 36px;
    }
    .production-details .production-price{
      text-align: left;
      color: red;
    }
    button{
      padding: 0 15px;
      line-height: 40px;
      border: 1px solid red;
      color: red;
      border-radius: 4px;
      cursor: pointer;
      background: #fff;
      outline: none;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <h1>珠宝首饰</h1>
    <ul class="production-details clearfix">
      <li class="gap">
        <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
        ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
        <div class="production-price">￥1699.00</div>
      </li>
      <li class="gap">
        <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
        ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
        <div class="production-price">￥1699.00</div>
      </li>
      <li class="gap">
        <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
        ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
        <div class="production-price">￥1699.00</div>
      </li>
      <li class="gap">
        <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
        ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
        <div class="production-price">￥1699.00</div>
      </li>
      <li class="gap">
        <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
        ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
        <div class="production-price">￥1699.00</div>
      </li>
      <li class="gap">
        <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
        ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        <div class="production-name">藏美千足金和田玉金镶玉路路通吊坠</div>
        <div class="production-price">￥1699.00</div>
      </li>
    </ul>
    <button>添加</button>
  </div>

  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
  let products = [
    {
        img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
        name: '珂兰 黄金手 猴哥款',
        price: '￥405.00'
    },{
        img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
        name: '珂兰 黄金转运珠 猴哥款',
        price: '￥100.00'
    },{
        img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
        name: '珂兰 黄金手链 3D猴哥款',
        price: '￥45.00'
    }
  ];
  $('button').on('click', function() {
    $('.production-details').append(products.map(product => `
      <li class="gap new">
        <div class="cover"><a href="javascript:void(0)">立即抢购</a></div>
        ![](${product.img})
        <div class="production-name">${product.name}</div>
        <div class="production-price">${product.price}</div>
      </li>
    `))
  })
  $('.production-details').on('click', function() {
    $(this).find('.new').hide();
  })
  </script>
</body>
</html>

预览

最后编辑于：2017.12.05 07:17:53

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,530评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 86,403评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,120评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,770评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,758评论 5赞 367
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,649评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,021评论 3赞 398
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,675评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,931评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,659评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,751评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,410评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,004评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,969评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,203评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,042评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,493评论 2赞 343