jQuery

問(wèn)答

一、說(shuō)說(shuō)庫(kù)和框架的區(qū)別？

  • 庫(kù)（Library）
    庫(kù)是將代碼集合成的一個(gè)產(chǎn)品，提供很多的API，供開發(fā)者調(diào)用。開發(fā)者在開發(fā)的時(shí)候只需要使用庫(kù)的一部分類或者函數(shù)，即可以實(shí)現(xiàn)功能。
  • 框架（Framework）
    開發(fā)者在使用框架的時(shí)候，必須使用這個(gè)框架的全部代碼。
    打個(gè)比方就是，框架相當(dāng)于一臺(tái)完整的電腦，而庫(kù)相當(dāng)于各個(gè)零件，我們需要去自己組裝成一臺(tái)電腦。

二、jquery 能做什么？

jQuery 是一個(gè) JavaScript 函數(shù)庫(kù)，它通常能提供以下功能：

  • 方便快捷的獲取DOM元素
    如果使用原生的JS方式來(lái)遍歷DOM或者查找DOM元素，會(huì)有很多冗余的代碼。而jQuery只需要一行就夠了，非常簡(jiǎn)潔方便。
    例如，找到ul里面的class為current的標(biāo)簽。
$('ul').find('li.current');
  • 動(dòng)態(tài)修改頁(yè)面樣式
    即使在頁(yè)面呈現(xiàn)之后，使用jQuery可以動(dòng)態(tài)修改CSS的樣式。jQuery能夠改變文檔中某個(gè)部分的類或者個(gè)別的樣式屬性。
    例如，找到ul里面的第一個(gè)子標(biāo)簽li，給它添加名為active的類名。
$('ul > li:first').addClass('active');
  • 為頁(yè)面增加動(dòng)態(tài)效果
    jQuery提供了一系列特效的方法，比如隱藏、顯示、淡入淡出、滑入滑出、animate自定義動(dòng)畫。
  • 統(tǒng)一Ajax操作

三、jQuery 對(duì)象和 DOM 原生對(duì)象有什么區(qū)別？如何轉(zhuǎn)化？

  • DOM對(duì)象是通過(guò)原生JS獲得的對(duì)象，只能使用原生JS的屬性和方法；jQuery 對(duì)象是通過(guò)jQuery獲得的對(duì)象，只能使用jQuery自己封裝的屬性和方法。
  • jQuery對(duì)象轉(zhuǎn)換為DOM原生對(duì)象：
var  el = $('div')[1]; //$('div').eq[1]

DOM原生對(duì)象轉(zhuǎn)化為jQuery對(duì)象：

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

四、jquery中如何綁定事件？bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫法？

  • jQuery綁定事件的方式有：
  • bind
    規(guī)定向被選元素添加一個(gè)或多個(gè)事件處理程序，這是最簡(jiǎn)單的方法。
$('a').bind('click', function(){
     alert('ok');
})
  • unbind
    移除被選元素的事件處理函數(shù)，或者當(dāng)事件發(fā)生時(shí)終止函數(shù)的運(yùn)行。
$('button').click(function() {
      $('p').unbind();
})
  • delegate
    為指定的元素（屬于被選元素的子元素）添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。
$( "#members" ).delegate( "li a", "click", function( e ) {} );
  • live
    為被選元素添加一個(gè)或者多個(gè)事件處理程序，
$('a').live('click', function() { 
      alert("That tickles!");
});
  • on
    把bind、delegate、live三種方法統(tǒng)一，用起來(lái)更方便
$( "#members" ).on( "click", "li a", function( e ) {} );
  • off
    移除事件函數(shù)
$('button').click(function() {
    $('p').off('click'); //移除p上的click事件
})
  • 推薦使用on，因?yàn)榘哑渌N都統(tǒng)一起來(lái)了，用起來(lái)更方便。

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

  • 展示元素
$(selector).show(speed,callback)

顯示出隱藏的p

$(".btn2").click(function(){
  $("p").show();
});
  • 隱藏元素
$(selector).hide(speed,callback)

隱藏元素p

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

六、jquery 動(dòng)畫如何使用？

jQuery用于創(chuàng)建自定義動(dòng)畫。

$(selector).animate({params}, speed, callback);
  • 必需的 params 參數(shù)定義形成動(dòng)畫的 CSS 屬性。
  • 可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。
  • 可選的 callback 參數(shù)是動(dòng)畫完成后所執(zhí)行的函數(shù)名稱。
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });

七、如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容？如何設(shè)置和獲取元素內(nèi)部文本？

  • 設(shè)置和獲取元素的內(nèi)部?jī)?nèi)容：html([string])。當(dāng)沒(méi)有參數(shù)的時(shí)候，返回的是innerHTML，當(dāng)傳一個(gè)string參數(shù)的時(shí)候，修改innerHTML的值為參數(shù)值。
  • 設(shè)置和獲取元素內(nèi)部文本：text([string])。和html操作類似。

八、如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容？如何設(shè)置和獲取元素屬性？

  • 獲取表單用戶輸入或者選擇的內(nèi)容：.val()
  • 設(shè)置表單用戶輸入或者選擇的內(nèi)容：.val('value')
  • 獲取元素屬性：.attr()
  • 設(shè)置元素屬性：.attr(attributeName)

代碼

一、使用 jquery實(shí)現(xiàn)如下效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>導(dǎo)航欄：商品分類</title>
  <link  rel="stylesheet" >
  <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>

預(yù)覽

二、使用 jquery 實(shí)現(xiàn)如下效果

<!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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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>

預(yù)覽
問(wèn)題： 點(diǎn)奢侈品2的時(shí)候頁(yè)面跳到了頂部，可能是什么原因？如何解決
主要是a鏈接的href值的原因。#包含了一個(gè)位置信息，默認(rèn)的錨是#top，也就是網(wǎng)頁(yè)的上端。
在頁(yè)面很長(zhǎng)的時(shí)候會(huì)使用#來(lái)定位頁(yè)面的具體位置，格式為：# + id。
如果要定義一個(gè)死鏈接要使用 javascript:void(0)，這樣點(diǎn)擊后就不會(huì)有反應(yīng) 。

三、實(shí)現(xiàn)如下效果

<!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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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)">立即搶購(gòu)</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: '珂蘭 黃金轉(zhuǎn)運(yùn)珠 猴哥款',
        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)">立即搶購(gòu)</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>

預(yù)覽

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • (續(xù)jQuery基礎(chǔ)(1)) 第5章 DOM節(jié)點(diǎn)的復(fù)制與替換 （1）DOM拷貝clone() 克隆節(jié)點(diǎn)是DOM的常...
    凜0_0閱讀 1,519評(píng)論 0贊 8
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,508評(píng)論 0贊 2
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,276評(píng)論 0贊 1
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關(guān)注...
    前端進(jìn)階之旅閱讀 16,953評(píng)論 18贊 503
  • 大橫按的和弦不需要死記，但是需要我們熟悉掌握音階。 比如C調(diào)的AM和弦，根據(jù)AM和弦可以推算BM,CM,DM,EM...
    吳松乾閱讀 3,374評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容