需求：
根据窗口尺寸，在宽度>640时加载大图，在宽度<=640时加载小图。
需求呈现
步骤：
- 在HTML的div.item标签中，将大图和小图的src写入自定义属性data-；
- 监听window窗口的resize事件；
- 用jQuery的each方法，对div.item取data-的值，赋到item的html中；
- 取值用jQuery对象的.data()方法，赋值用jQuery对象的.html()方法；
- 函数写完后调用一次，用事件的jQuery方法.trigger();
用到的理论：遍历$元素.each()、标签的自定义属性data-与dataset、调用事件扳机trigger
$对象的each方法（jQuery）
作用：
用于遍历$jQuery对象，对这些元素进行批量的操作。
语法：
$items.each(function(index, element){})
说明：
在这个each方法中：
- 函数的第一个参数，即index在函数运算中取值为$items[index]的索引值
- 函数的第二个参数，即element在函数运算中取值为$items[index]即这个DOM对象
- 所以$(element)为$items中的逐个DOM转jQuery对象（可以使用jQuery方法）
- 在函数中return false; 将停止each循环。
W3school说明：
自定义属性data-*
用途：
存储DOM元素的属性，方便JS操作。如长串的图片名、普通文字字符串等。
提高代码的可维护性，在JS操作时避免拼接。
在 HTML中写入元素的自定义属性名
自定义属性名中可以用“-”套多层，如“data-item-src”。每个单词都不能用大写。
<tagName class=’类名’ data-属性名 = ”值”;></tagName>
原生JS取值
- 元素的dataset是一个键值对数组，是当前元素里自定义属性的集合，属性名是键。
- 取值时，就是在dataset中用属性名做键取值，属性名需要用驼峰连写，中间不能用“-”
var 值 = DOMobj.dataset[“属性名”];
用jQuery取值
- 在jQuery中，$对象的.data()就可以取到
取值时，属性名可以用-，也可以用驼峰
var 值 = $(obj).data(“属性名”);
博客园链接：HTML5 data-* 自定义属性
自定义属性组dataset与类名组classList的区别
类名组classList是类名的结合（H5中），用来操作元素上所有的类名（className）；
classList的方法
- 增加类名 DOMobj.add(‘类名’);
- 删除类名 DOMobj.remove(‘类名’);
- 判断类名 DOMobj.contains(‘类名’);
- 替换：有就加，没有就不加 DOMobj.toggle(‘类名’);
类名与自定义属性的层级不同
- 自定义属性dataset中的每个自定义属性data-*=””在HTML中与class=””平级，写在行内；
事件的trigger方法（jQuery）
- 放在事件注册的末尾，表示注册后立即发生一次该事件；
- 语法：
$(obj).on(“事件类型”, function(){ 函数体; }).trigger(“事件类型”);
代码实现
HTML中
大图用background-imge，小图用<a><img></a>但因为a是动态生成的，所以不能存值。值存在div.item里
<div class="carousel-inner" role="listbox">
<!-- 轮播图的图片都写在a中，大图用background-imge，小图用<a><img></a>但因为a是动态生成的，所以不能存值。值存在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中
- 监听window窗口的resize事件；
- 用jQuery的each方法，对div.item取data-的值，赋到item的html中；
- 取值用jQuery对象的.data()方法，赋值用jQuery对象的.html()方法；
- 函数写完后调用一次，用事件的jQuery方法.trigger();
用到的理论：遍历$元素.each()、标签的自定义属性data-与dataset、调用事件扳机trigger
$(function(){
$(window).on("resize",function(){ // 监听屏幕事件
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"); //扳机触发事件
//入口函数末尾
})
2018.1.21
