需求：
根據(jù)窗口尺寸弦疮，在寬度>640時(shí)加載大圖诱建，在寬度<=640時(shí)加載小圖钮蛛。
需求呈現(xiàn)
步驟：
- 在HTML的div.item標(biāo)簽中昂拂，將大圖和小圖的src寫入自定義屬性data-受神；
- 監(jiān)聽window窗口的resize事件；
- 用jQuery的each方法格侯，對(duì)div.item取data-的值鼻听，賦到item的html中；
- 取值用jQuery對(duì)象的.data()方法养交，賦值用jQuery對(duì)象的.html()方法精算；
- 函數(shù)寫完后調(diào)用一次，用事件的jQuery方法.trigger();
用到的理論：遍歷$元素.each()碎连、標(biāo)簽的自定義屬性data-與dataset灰羽、調(diào)用事件扳機(jī)trigger
$對(duì)象的each方法（jQuery）
作用：
用于遍歷$jQuery對(duì)象，對(duì)這些元素進(jìn)行批量的操作鱼辙。
語法：
$items.each(function(index, element){})
說明：
在這個(gè)each方法中：
- 函數(shù)的第一個(gè)參數(shù)廉嚼，即index在函數(shù)運(yùn)算中取值為$items[index]的索引值
- 函數(shù)的第二個(gè)參數(shù)，即element在函數(shù)運(yùn)算中取值為$items[index]即這個(gè)DOM對(duì)象
- 所以$(element)為$items中的逐個(gè)DOM轉(zhuǎn)jQuery對(duì)象（可以使用jQuery方法）
- 在函數(shù)中return false; 將停止each循環(huán)倒戏。
W3school說明：
自定義屬性data-*
用途：
存儲(chǔ)DOM元素的屬性怠噪，方便JS操作。如長串的圖片名杜跷、普通文字字符串等傍念。
提高代碼的可維護(hù)性，在JS操作時(shí)避免拼接葛闷。
在 HTML中寫入元素的自定義屬性名
自定義屬性名中可以用“-”套多層憋槐，如“data-item-src”。每個(gè)單詞都不能用大寫淑趾。
<tagName class=’類名’ data-屬性名 = ”值”;></tagName>
原生JS取值
- 元素的dataset是一個(gè)鍵值對(duì)數(shù)組阳仔，是當(dāng)前元素里自定義屬性的集合，屬性名是鍵扣泊。
- 取值時(shí)近范，就是在dataset中用屬性名做鍵取值嘶摊，屬性名需要用駝峰連寫，中間不能用“-”
var 值 = DOMobj.dataset[“屬性名”];
用jQuery取值
- 在jQuery中评矩，$對(duì)象的.data()就可以取到
取值時(shí)叶堆，屬性名可以用-，也可以用駝峰
var 值 = $(obj).data(“屬性名”);
博客園鏈接：HTML5 data-* 自定義屬性
自定義屬性組dataset與類名組classList的區(qū)別
類名組classList是類名的結(jié)合（H5中）稚照，用來操作元素上所有的類名（className）蹂空；
classList的方法
- 增加類名 DOMobj.add(‘類名’);
- 刪除類名 DOMobj.remove(‘類名’);
- 判斷類名 DOMobj.contains(‘類名’);
- 替換：有就加，沒有就不加 DOMobj.toggle(‘類名’);
類名與自定義屬性的層級(jí)不同
- 自定義屬性dataset中的每個(gè)自定義屬性data-*=””在HTML中與class=””平級(jí)果录，寫在行內(nèi)；
事件的trigger方法（jQuery）
- 放在事件注冊(cè)的末尾咐熙，表示注冊(cè)后立即發(fā)生一次該事件弱恒；
- 語法：
$(obj).on(“事件類型”, function(){ 函數(shù)體; }).trigger(“事件類型”);
代碼實(shí)現(xiàn)
HTML中
大圖用background-imge，小圖用<a><img></a>但因?yàn)閍是動(dòng)態(tài)生成的棋恼，所以不能存值返弹。值存在div.item里
<div class="carousel-inner" role="listbox">
<!-- 輪播圖的圖片都寫在a中，大圖用background-imge爪飘，小圖用<a><img></a>但因?yàn)閍是動(dòng)態(tài)生成的义起，所以不能存值。值存在div.item里 -->
<div class="item active" data-large-item="./img/slide_01_2000x410.jpg" data-small-item="./img/slide_01_640x340.jpg"></div>
<div class="item" data-large-item="./img/slide_02_2000x410.jpg" data-small-item="./img/slide_02_640x340.jpg"></div>
<div class="item" data-large-item="./img/slide_03_2000x410.jpg" data-small-item="./img/slide_03_640x340.jpg"></div>
<div class="item" data-large-item="./img/slide_04_2000x410.jpg" data-small-item="./img/slide_04_640x340.jpg"></div>
</div>
JS中
- 監(jiān)聽window窗口的resize事件师崎；
- 用jQuery的each方法默终，對(duì)div.item取data-的值，賦到item的html中犁罩；
- 取值用jQuery對(duì)象的.data()方法齐蔽，賦值用jQuery對(duì)象的.html()方法；
- 函數(shù)寫完后調(diào)用一次床估，用事件的jQuery方法.trigger();
用到的理論：遍歷$元素.each()含滴、標(biāo)簽的自定義屬性data-與dataset、調(diào)用事件扳機(jī)trigger
$(function(){
$(window).on("resize",function(){ // 監(jiān)聽屏幕事件
var windowWidth=$(window).width(); //獲取屏幕尺寸
console.log(windowWidth);
// var $slideItem = $(".carousel-inner .item"); //需要賦值的元素：div.item
if(windowWidth<=640){ // 屏幕尺寸判斷：xs屏
$(".carousel-inner .item").each(function(index, element){
console.log($(element).data());
//獲取小圖的src值丐巫，用html()方法寫div.item>a
$(element).html('<a href="#" class="smallPic"><img src="'+$(element).data()["smallItem"]+'"></a>');
});
}else{ // 尺寸判斷：除了xs屏
$(".carousel-inner .item").each(function(index, element){
console.log($(element).data());
// 獲取大圖和小圖的src值谈况，用html()方法寫div.item>a
$(element).html('<a href="#" class="largePic" style="background-image:url('+$(element).data()["largeItem"]+');"></a>');
});
}
}).trigger("resize"); //扳機(jī)觸發(fā)事件
//入口函數(shù)末尾
})
2018.1.21
