問(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>
二、使用 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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>