庫和框架的區(qū)別？
- 庫（library）：將代碼集合成一個(gè)產(chǎn)品，供開發(fā)者調(diào)用。面向?qū)ο蟮拇a組織而成的是類庫怒竿，面向過程組織而成的是函數(shù)庫
- 框架（framework）：為了解決一個(gè)（一類）問題而開發(fā)的產(chǎn)品，開發(fā)者只需要使用框架提供的類或函數(shù)就可以實(shí)現(xiàn)全部功能
- 區(qū)別：庫和框架比較類似扩氢，都是代碼的集合耕驰，不過框架更具有針對(duì)性，可以說框架是庫的升級(jí)版录豺，提供一套完整的代碼朦肘，不需要自己重組。
jquery能做什么双饥？
- 動(dòng)態(tài)操作CSS樣式
- 用css()方法直接設(shè)置樣式
- 用添加刪除class更改樣式
- 選擇器快捷獲取DOM
- 操作DOM
- 動(dòng)態(tài)改變DOM內(nèi)容
- 接受并響應(yīng)事件
- 實(shí)現(xiàn)動(dòng)畫效果
- 操作動(dòng)畫隊(duì)列
- 統(tǒng)一Ajax操作
- 簡化JavaScript代碼
- 用css()方法直接設(shè)置樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
</head>
<body>
<p>這是一個(gè)段落</p>
<script>
$('p').css('color', 'yellow');
</script>
</body>
</html>
- 用添加媒抠、刪除class更改樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
<style>
.test {
color: red;
}
.zero {
color: yellowgreen;
}
</style>
</head>
<body>
<p class="test">這是一個(gè)段落</p>
<script>
$('p').addClass('zero');
</script>
</body>
</html>
- 動(dòng)態(tài)改變DOM內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
</head>
<body>
<p class="test">這是一個(gè)段落</p>
<script>
$('p').text('miss you!')
</script>
</body>
</html>
- 接受并響應(yīng)事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
</head>
<body>
<p class="test">這是一個(gè)段落</p>
<button type='button'>switch</button>
<script>
$('button').on('click', function(){
$('p').text('Forever');
});
</script>
</body>
</html>
jquery 對(duì)象和 DOM 原生對(duì)象有什么區(qū)別？如何轉(zhuǎn)化咏花？
- DOM對(duì)象：DOM是Document object model的縮寫趴生，即文檔對(duì)象模型，是W3C標(biāo)準(zhǔn)的用于操作文檔的API
- jQuery對(duì)象：是通過jQuery包裝DOM對(duì)象后所產(chǎn)生的對(duì)象。
-
區(qū)別：
1.兩者的原理截然不同苍匆，并不是同一類的對(duì)象刘急；
2.兩者擁有不同的方法，不能夠混用浸踩，否則會(huì)出錯(cuò)叔汁； -
轉(zhuǎn)換：
1.DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象：在DOM對(duì)象外包裝$()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
</head>
<body>
<p class="test">這是一個(gè)段落</p>
<button type='button'>switch</button>
<script>
var test = document.getElementsByClassName('test');
var $test = $('test');
console.log($test)
</script>
</body>
</html>
2.Query對(duì)象轉(zhuǎn)換成DOM對(duì)象：[index]或get(index)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
</head>
<body>
<p class="test">這是一個(gè)段落</p>
<button type='button'>switch</button>
<script>
var $test = $('.test');
// console.log($test[0]);
console.log($test.get(0));
</script>
</body>
</html>
jquery中如何綁定事件？bind民轴、unbind攻柠、delegate、live后裸、on瑰钮、off都有什么作用妒貌？推薦使用哪種片迅？使用on綁定事件使用事件代理的寫法？
- bind：為一個(gè)元素一個(gè)或多個(gè)事件害驹，綁定一個(gè)事件處理程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
</head>
<body>
<p class="test">這是一個(gè)段落</p>
<button type='button'>switch</button>
<script>
$('button').bind('click', function(){
$('p').text('更改內(nèi)容');
});
</script>
</body>
</html>
- unbind：從元素上刪除一個(gè)以前附加的事件處理程序
- delegate：delegate() 方法為指定的元素（屬于被選元素的子元素）添加一個(gè)或多個(gè)事件處理程序因苹，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)苟耻；適用于當(dāng)前或未來的元素（比如由腳本創(chuàng)建的新元素）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
</head>
<body>
<p class="test">這是一個(gè)段落</p>
<button type='button'>switch</button>
<script>
$('body').delegate('p', 'click', function(){
$(this).after('<p>這是要展示的內(nèi)容</p>');
});
</script>
</body>
</html>
- live：附加一個(gè)事件處理器到匹配目前選擇器的所有元素，現(xiàn)在和未來扶檐，1.7以后棄用
- on：在選定的元素上綁定一個(gè)或多個(gè)事件處理函數(shù)凶杖，提供綁定事件處理的所有功能
推薦使用：1.7版本以后，推薦on方法款筑，可以替代之前所有方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<button type='button'>Add</button>
<script>
$('button').on('click', function(){
$('ul').append('<li>新增內(nèi)容</li>');
});
$('ul').on('mouseenter', 'li', function(){
$(this).css('background-color', 'yellow');
});
</script>
</body>
</html>
- off：移除一個(gè)事件處理函數(shù)
jquery 如何展示/隱藏元素智蝠？
- 使用hide()和show()方法實(shí)現(xiàn)展示隱藏元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
</head>
<body>
<p>Paragraph</p>
<button class='show' type='button'>Show</button>
<button class="hide" type='button'>Hide</button>
<script>
$(document).ready(function(){ //DOM準(zhǔn)備就緒后執(zhí)行函數(shù)
$('.show').on('click', function(){
$('p').show();
});
$('.hide').on('click', function(){
$('p').hide();
});
});
</script>
</body>
</html>
jQuery動(dòng)畫如何使用？
- jQuery animate() 方法用于創(chuàng)建自定義動(dòng)畫
語法：$(selector).animate({params},speed,callback);
{params}：設(shè)置動(dòng)畫效果
speed：設(shè)置動(dòng)畫速度
callback：設(shè)置回調(diào)函數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
<style>
#ct {
border: 1px solid white;
background-color: pink;
width: 100px;
height: 100px;
position: relative;
}
</style>
</head>
<body>
<div id="ct">jQuery Anime</div>
<button type='button'>動(dòng)畫</button>
<script>
var clickable = true; //一開始可以點(diǎn)擊
$('button').on('click', function(){
if(!clickable){ //如果不能點(diǎn)擊
return; //直接return什么都不做
};
clickable = false; //當(dāng)點(diǎn)擊后變成不能點(diǎn)擊,避免多次點(diǎn)擊動(dòng)畫重復(fù)執(zhí)行
$('#ct').animate({left: '100px'}, 1000);
$('#ct').animate({top: '100px'}, 1500);
$('#ct').animate({left: '0'}, 2000);
$('#ct').animate({top: '0'}, 2500);
});
</script>
</body>
</html>
如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容奈梳？如何設(shè)置和獲取元素內(nèi)部文本杈湾？
- 設(shè)置和獲取元素內(nèi)部HTML內(nèi)容：用html()方法可以獲取，如果在()中寫入文本攘须，可以設(shè)置HTML內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
</head>
<body>
<div id='ct'><i>jQuery</i></div>
<button type='button'>Change</button>
<script>
console.log($('ct').html());
$('button').on('click', function(){
$('#ct').html('<b>黑色五葉草</b>');
});
</script>
</body>
</html>
- 設(shè)置和獲取元素內(nèi)部文本：用text()方法就可以設(shè)置和獲取元素內(nèi)部文本內(nèi)容漆撞，用法和html()一樣
text()與html()區(qū)別在于，html()會(huì)獲取到內(nèi)部的標(biāo)簽于宙，text()獲取的均是文本內(nèi)容
如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容浮驳？如何設(shè)置和獲取元素屬性？
- 設(shè)置和獲取表單用戶輸入內(nèi)容
通過val()方法捞魁，就可以設(shè)置和獲取表單用戶輸入內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
</head>
<body>
<input type='text' value='123'>
<script>
console.log($('input').val());
$('input').val(456);
</script>
</body>
</html>
導(dǎo)航條
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>導(dǎo)航條</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
.nav {
box-sizing: border-box;
}
.nav-aside {
background-color: #c7171e;
width: 150px;
/* padding: 0 10px; */
}
.nav-aside .category {
position: relative;
height: 40px;
line-height: 40px;
border-bottom: 1px dotted #de272e;
}
.nav-aside .cate-title {
display: bolck;
color: #fff;
font-size: 14px;
margin: 0 10px;
padding: 10px;
}
.nav-aside .five {
border-bottom: none;
}
.nav-aside .icon-goto {
color: #fff;
font-size: 16px;
float: right;
margin-right: 25px;
}
.nav-aside .category:after {
display: block;
content: "";
clear: both;
}
.nav-aside .child-panel {
position: absolute;
top: 0;
left: 150px;
background: #fff;
border: 1px solid #ccc;
width: 200px;
font-size: 12px;
display: none;
}
.nav-aside .category.hover .child-panel {
display: block;
}
.child-panel li {
width: 96px;
float: left;
padding: 15px 2px;
text-align: center;
}
</style>
</head>
<body>
<div class="nav">
<ul class="nav-aside">
<li class="category">
<a href="#" class="cate-title">連載新番</a>
<span class="icon-goto">></span>
<ul class="child-panel">
<li>
<a href="#">黑色四葉草</a>
</li>
<li>
<a href="#">飆速宅男</a>
</li>
<li>
<a href="#">齊木楠雄的災(zāi)難</a>
</li>
<li>
<a href="#">牙斗獸娘</a>
</li>
<li>
<a href="#">七大罪</a>
</li>
<li>
<a href="#">刻刻</a>
</li>
</ul>
</li>
<li class="category">
<a href="#" class="cate-title">季度完結(jié)</a>
<span class="icon-goto">></span>
<ul class="child-panel">
<li>
<a href="#">素晴</a>
</li>
<li>
<a href="#">犬屋敷</a>
</li>
<li>
<a href="#">暗殺教室</a>
</li>
<li>
<a href="#">調(diào)教咖啡廳</a>
</li>
<li>
<a href="#">食戟之靈</a>
</li>
<li>
<a href="#">寶石之國</a>
</li>
</ul>
</li>
<li class="category">
<a href="#" class="cate-title">新番時(shí)間表</a>
<span class="icon-goto">></span>
<ul class="child-panel">
<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 class="category">
<a href="#" class="cate-title">資訊</a>
<span class="icon-goto">></span>
<ul class="child-panel">
<li>
<a href="#">劇場啟動(dòng)計(jì)劃</a>
</li>
<li>
<a href="#">特報(bào)</a>
</li>
<li>
<a href="#">pv</a>
</li>
<li>
<a href="#">告知映像</a>
</li>
</ul>
</li>
<li class="category five">
<a href="#" class="cate-title">官方延伸</a>
<span class="icon-goto">></span>
<ul class="child-panel">
<li>
<a href="#">ED官方演唱會(huì)</a>
</li>
<li>
<a href="#">OP官方演唱會(huì)</a>
</li>
<li>
<a href="#">新番發(fā)布會(huì)</a>
</li>
<li>
<a href="#">聲優(yōu)采訪</a>
</li>
</ul>
</li>
</ul>
</div>
<script>
$(function () {
$('.nav-aside .category').on('mouseenter', function () {
$(this).addClass('hover');
// 或者
// $(this).find('.child-panel').show();
// 或者
// $(this).find('.child-panel').css('display', 'block');
});
$('.nav-aside .category').on('mouseleave', function () {
$(this).removeClass('hover');
// 或者
// $(this).find('.child-panel').hide();
// 或者
// $(this).find('.child-panel').css('display', 'none');
});
});
</script>
</body>
</html>
tab切換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tab切換</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<style>
* {
box-sizing: border-box;
}
/*告訴瀏覽器去理解你設(shè)置的邊框和內(nèi)邊距的值是包含在width內(nèi)的*/
body,
ul,
li,
p {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
body {
font: 12px/150% Arial, Verdana, "\5b8b\4f53";
color: #666;
}
a {
color: #666;
text-decoration: none;
}
.clearfix:after {
display: block;
content: '';
clear: both;
}
.clearfix {
zoom: 1;
}
/*是IE瀏覽器的專有屬性抹恳，它可以設(shè)置或檢索對(duì)象的縮放比例。除此之外署驻，它還有其他一些小作用奋献，比如觸發(fā)ie的hasLayout屬性健霹，清除浮動(dòng)、清除margin的重疊等瓶蚂。*/
/*對(duì)外部容器設(shè)置定位*/
.mod-tab {
position: relative;
margin: 10px;
}
.mod-tab .tabs {
float: left;
border: 1px solid #ccc;
border-bottom: none;
border-radius: 3px 3px 0 0;
}
.mod-tab .tabs li {
float: left;
padding: 8px 0;
}
.mod-tab .tabs li a {
padding: 0 10px;
border-right: 1px solid #ccc;
line-height: 1;
}
.mod-tab .tabs li:last-child a {
border: none;
}
.mod-tab .tabs li.active {
background: #ccc;
}
.mod-tab .tabs li.active a {
color: #c81623;
}
/*702=width:700 + border:2*/
.mod-tab .panel-ct {
border: 1px solid #ccc;
width: 702px;
}
/*將容器水平向左平移20px*/
.mod-tab .prod-ct {
margin-left: -20px;
margin-top: -20px;
}
.mod-tab .panel {
display: none;
}
.mod-tab .panel.active {
display: block;
}
/*對(duì)li設(shè)置左外邊距20px糖埋，所以一排中三個(gè)li的總體witdth是220*3+20*3-20=700。減去20因?yàn)楦溉萜髟O(shè)置了-20px窃这，使內(nèi)部浮動(dòng)的六個(gè)li橫向向左移動(dòng)20px*/
/*重點(diǎn)：父元素的負(fù)外邊距 = 第一個(gè)浮動(dòng)子元素的外邊距瞳别，可以將子元素整體水平方向移動(dòng)*/
/*因?yàn)閮?nèi)部a .btn標(biāo)簽應(yīng)用了絕對(duì)定位，所以對(duì)此父容器設(shè)置了定位*/
.mod-tab .prod {
position: relative;
float: left;
width: 220px;
padding: 10px 20px;
margin-left: 20px;
margin-top: 20px;
text-align: center;
border: 1px solid #eee;
background: #fff;
}
.mod-tab .cover {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.3);
transition: all 0.3;
opacity: 0;
}
/*利用絕對(duì)定位調(diào)整a連接-立即搶購的位置*/
.mod-tab .cover .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #c81623;
color: #c81623;
padding: 10px 15px;
border-radius: 3px;
text-align: center;
background: #fff;
cursor: pointer;
/*
margin-top: -20px;
margin-left: -50px;
*/
}
.mod-tab .prod.hover .cover {
opacity: 1;
}
.mod-tab .prod-name {
height: 36px;
text-align: center;
font-weight: normal;
font-size: 12px;
color: #666;
}
.mod-tab .prod-price {
text-align: center;
color: #c81623;
}
</style>
</head>
<body>
<div class="mod-tab">
<div class="tabs-ct clearfix">
<ul class="tabs">
<li class="active">
<a href="javascript:void(0)">新款發(fā)布</a>
</li>
<li>
<a href="javascript:void(0)">珠寶首飾</a>
</li>
<li>
<a href="javascript:void(0)">奢侈品</a>
</li>
</ul>
</div>
<ul class="panel-ct clearfix">
<li class="panel active">
<ul class="prod-ct">
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">系列一</div>
<div class="prod-price">￥1001</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">系列二</div>
<div class="prod-price">￥1002</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">系列三</div>
<div class="prod-price">￥1003</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">系列四</div>
<div class="prod-price">￥1004</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">系列五</div>
<div class="prod-price">￥1005</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">系列六</div>
<div class="prod-price">￥1006</div>
</a>
</li>
</ul>
</li>
<li class="panel">
<ul class="prod-ct">
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">系列七</div>
<div class="prod-price">￥1008</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">系列八</div>
<div class="prod-price">￥1008</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">系列九</div>
<div class="prod-price">￥1009</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">系列十</div>
<div class="prod-price">￥1010</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">系列十一</div>
<div class="prod-price">￥1011</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">系列十二</div>
<div class="prod-price">￥1012</div>
</a>
</li>
</ul>
</li>
<li class="panel">
<ul class="prod-ct">
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">系列十三</div>
<div class="prod-price">￥1013</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">系列十四</div>
<div class="prod-price">￥1014</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">系列十五</div>
<div class="prod-price">￥1015</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">系列十六</div>
<div class="prod-price">￥1016</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">系列十七</div>
<div class="prod-price">￥1017</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">系列十八</div>
<div class="prod-price">￥1018</div>
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="mod-tab">
<div class="tabs-ct clearfix">
<ul class="tabs">
<li class="active">
<a href="javascript:void(0)">新款發(fā)布</a>
</li>
<li>
<a href="javascript:void(0)">珠寶首飾</a>
</li>
<li>
<a href="javascript:void(0)">奢侈品</a>
</li>
</ul>
</div>
<ul class="panel-ct clearfix">
<li class="panel active">
<ul class="prod-ct">
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
<div class="prod-name">系列一</div>
<div class="prod-price">￥1001</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
<div class="prod-name">系列二</div>
<div class="prod-price">￥1002</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
<div class="prod-name">系列三</div>
<div class="prod-price">￥1003</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
<div class="prod-name">系列四</div>
<div class="prod-price">￥1004</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
<div class="prod-name">系列五</div>
<div class="prod-price">￥1005</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
<div class="prod-name">系列六</div>
<div class="prod-price">￥1006</div>
</a>
</li>
</ul>
</li>
<li class="panel">
<ul class="prod-ct">
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
<div class="prod-name">系列七</div>
<div class="prod-price">￥1008</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
<div class="prod-name">系列八</div>
<div class="prod-price">￥1008</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
<div class="prod-name">系列九</div>
<div class="prod-price">￥1009</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
<div class="prod-name">系列十</div>
<div class="prod-price">￥1010</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
<div class="prod-name">系列十一</div>
<div class="prod-price">￥1011</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
<div class="prod-name">系列十二</div>
<div class="prod-price">￥1012</div>
</a>
</li>
</ul>
</li>
<li class="panel">
<ul class="prod-ct">
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
<div class="prod-name">系列十三</div>
<div class="prod-price">￥1013</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
<div class="prod-name">系列十四</div>
<div class="prod-price">￥1014</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
<div class="prod-name">系列十五</div>
<div class="prod-price">￥1015</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
<div class="prod-name">系列十六</div>
<div class="prod-price">￥1016</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
<div class="prod-name">系列十七</div>
<div class="prod-price">￥1017</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
<div class="prod-name">系列十八</div>
<div class="prod-price">￥1018</div>
</a>
</li>
</ul>
</li>
</ul>
</div>
<script>
$('.mod-tab .tabs li').on('click', function () {
var $cur = $(this);
console.log($cur);
var index = $cur.index();
console.log(index);
$cur.siblings().removeClass('active');
$cur.addClass('active');
$cur.parents('.mod-tab').find('.panel').removeClass('active');
$cur.parents('.mod-tab').find('.panel').eq(index).addClass('active');
});
$('.mod-tab .prod').on('mouseenter', function () {
$(this).addClass('hover');
});
$('.mod-tab .prod').on('mouseleave', function () {
$(this).removeClass('hover');
});
</script>
</body>
</html>
代理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>代理</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<style>
* {
box-sizing: border-box;
}
body,
ul,
li,
p {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
body {
font: 12px/150% Arial, Verdana, "\5b8b\4f53";
color: #666;
}
a {
color: #666;
text-decoration: none;
}
.layout {
width: 702px;
margin: 10px auto;
}
.btn {
display: inline-block;
/*設(shè)置行內(nèi)塊元素寬度不會(huì)像塊級(jí)元素一樣auto占滿父容器寬度*/
border: 1px solid #c81623;
color: #c81623;
padding: 10px 15px;
border-radius: 3px;
text-align: center;
background: #fff;
cursor: pointer;
}
/*蒙層*/
.cover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
transition: all 0.3s;
opacity: 0;
}
/*蒙層按鈕*/
.cover .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.prod.hover .cover {
opacity: 1;
}
.prod-ct:after {
display: block;
content: '';
clear: both;
}
.prod-ct {
margin-left: -20px;
margin-top: -20px;
}
.prod {
position: relative;
float: left;
width: 220px;
padding: 10px 20px;
margin-left: 20px;
margin-top: 20px;
text-align: center;
border: 1px solid #eee;
background: #fff;
}
.prod-name {
height: 36px;
text-align: center;
font-weight: normal;
font-size: 12px;
color: #666;
}
.prod-price {
text-align: center;
color: #c81623;
}
.btn-add {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="layout">
<h1>珠寶首飾</h1>
<ul class="prod-ct">
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">千足金和田玉</div>
<div class="prod-price">￥998</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">千足金和田玉</div>
<div class="prod-price">￥998</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">千足金和田玉</div>
<div class="prod-price">￥998</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">千足金和田玉</div>
<div class="prod-price">￥998</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">千足金和田玉</div>
<div class="prod-price">￥998</div>
</a>
</li>
<li class="prod">
<div class="cover">
<a href="" class="btn">立即搶購</a>
</div>
<a href="#">
<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
<div class="prod-name">千足金和田玉</div>
<div class="prod-price">￥998</div>
</a>
</li>
</ul>
<a href="#" class="btn btn-add">Add</a>
</div>
<script>
var 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'
}
];
function getProdHtml(prod) {
var html = '';
html += '<li class="prod">';
html += '<div class="cover"><a class="btn" href="">立即搶購</a></div>';
html += '<a href=#>';
html += '<img src="'+prod.img+'" alt="">';
html += '<div class="prod-name">'+prod.name+'</div>';
html += '<div class="prod-price">'+prod.price+'</div>';
html += '</a>';
html += '</li>';
return html;
};
$('.btn-add').on('click', function(event) {
event.preventDefault(); //默認(rèn)事件行為將不再觸發(fā)
$.each(products, function(index, prod){
var html = getProdHtml(prod);
$('.prod-ct').append(html);
});
});
$('.prod-ct').on('mouseenter', '.prod', function(event){
$(this).addClass('hover');
});
$('.prod-ct').on('mouseleave', '.prod', function(event){
$(this).removeClass('hover');
});
</script>
</body>
</html>
