庫和框架的區(qū)別？
- 庫（library）：將代碼集合成一個產(chǎn)品，供開發(fā)者調(diào)用。面向?qū)ο蟮拇a組織而成的是類庫，面向過程組織而成的是函數(shù)庫
- 框架（framework）：為了解決一個（一類）問題而開發(fā)的產(chǎn)品，開發(fā)者只需要使用框架提供的類或函數(shù)就可以實現(xiàn)全部功能
- 區(qū)別：庫和框架比較類似，都是代碼的集合，不過框架更具有針對性，可以說框架是庫的升級版，提供一套完整的代碼，不需要自己重組。
jquery能做什么？
- 動態(tài)操作CSS樣式
- 用css()方法直接設(shè)置樣式
- 用添加刪除class更改樣式
- 選擇器快捷獲取DOM
- 操作DOM
- 動態(tài)改變DOM內(nèi)容
- 接受并響應(yīng)事件
- 實現(xiàn)動畫效果
- 操作動畫隊列
- 統(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>這是一個段落</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">這是一個段落</p>
<script>
$('p').addClass('zero');
</script>
</body>
</html>
- 動態(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">這是一個段落</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">這是一個段落</p>
<button type='button'>switch</button>
<script>
$('button').on('click', function(){
$('p').text('Forever');
});
</script>
</body>
</html>
jquery 對象和 DOM 原生對象有什么區(qū)別？如何轉(zhuǎn)化？
- DOM對象：DOM是Document object model的縮寫，即文檔對象模型，是W3C標準的用于操作文檔的API
- jQuery對象：是通過jQuery包裝DOM對象后所產(chǎn)生的對象。
-
區(qū)別：
1.兩者的原理截然不同，并不是同一類的對象；
2.兩者擁有不同的方法，不能夠混用，否則會出錯； -
轉(zhuǎn)換：
1.DOM對象轉(zhuǎn)換成jQuery對象：在DOM對象外包裝$()
<!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">這是一個段落</p>
<button type='button'>switch</button>
<script>
var test = document.getElementsByClassName('test');
var $test = $('test');
console.log($test)
</script>
</body>
</html>
2.Query對象轉(zhuǎn)換成DOM對象：[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">這是一個段落</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：為一個元素一個或多個事件，綁定一個事件處理程序
<!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">這是一個段落</p>
<button type='button'>switch</button>
<script>
$('button').bind('click', function(){
$('p').text('更改內(nèi)容');
});
</script>
</body>
</html>
- unbind：從元素上刪除一個以前附加的事件處理程序
- delegate：delegate() 方法為指定的元素（屬于被選元素的子元素）添加一個或多個事件處理程序，并規(guī)定當這些事件發(fā)生時運行的函數(shù)；適用于當前或未來的元素（比如由腳本創(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">這是一個段落</p>
<button type='button'>switch</button>
<script>
$('body').delegate('p', 'click', function(){
$(this).after('<p>這是要展示的內(nèi)容</p>');
});
</script>
</body>
</html>
- live：附加一個事件處理器到匹配目前選擇器的所有元素，現(xiàn)在和未來，1.7以后棄用
- on：在選定的元素上綁定一個或多個事件處理函數(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：移除一個事件處理函數(shù)
jquery 如何展示/隱藏元素？
- 使用hide()和show()方法實現(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í)行函數(shù)
$('.show').on('click', function(){
$('p').show();
});
$('.hide').on('click', function(){
$('p').hide();
});
});
</script>
</body>
</html>
jQuery動畫如何使用？
- jQuery animate() 方法用于創(chuàng)建自定義動畫
語法：$(selector).animate({params},speed,callback);
{params}：設(shè)置動畫效果
speed：設(shè)置動畫速度
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'>動畫</button>
<script>
var clickable = true; //一開始可以點擊
$('button').on('click', function(){
if(!clickable){ //如果不能點擊
return; //直接return什么都不做
};
clickable = false; //當點擊后變成不能點擊,避免多次點擊動畫重復(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()會獲取到內(nèi)部的標簽，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">新番時間表</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="#">劇場啟動計劃</a>
</li>
<li>
<a href="#">特報</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官方演唱會</a>
</li>
<li>
<a href="#">OP官方演唱會</a>
</li>
<li>
<a href="#">新番發(fā)布會</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è)置或檢索對象的縮放比例。除此之外，它還有其他一些小作用，比如觸發(fā)ie的hasLayout屬性，清除浮動、清除margin的重疊等。*/
/*對外部容器設(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;
}
/*對li設(shè)置左外邊距20px，所以一排中三個li的總體witdth是220*3+20*3-20=700。減去20因為父容器設(shè)置了-20px，使內(nèi)部浮動的六個li橫向向左移動20px*/
/*重點：父元素的負外邊距 = 第一個浮動子元素的外邊距，可以將子元素整體水平方向移動*/
/*因為內(nèi)部a .btn標簽應(yīng)用了絕對定位，所以對此父容器設(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;
}
/*利用絕對定位調(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)塊元素寬度不會像塊級元素一樣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)運珠 猴哥款',
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(); //默認事件行為將不再觸發(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>
