let和const命令：
ES6新增了let命令，用來聲明變量。它的用法類似於var，但是所聲明的變量，只在let命令所在的代碼塊內有效。
只要塊級作用域內存在let命令，它所聲明的變量就“綁定”這個區域，不再受外部的影響。
不存在變量提升
let不允許在相同作用域內，重複聲明同一個變量。
ES6允許塊級作用域的任意嵌套，外層無法讀取內層作用域的變量，反之可以
const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。
const聲明的常量，也與let一樣不可重複聲明。
const的作用域與let命令相同：只在聲明所在的塊級作用域內有效。
核心：var 和 let const的區別
變量的解構賦值
ES6允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱爲解構.
解構的作用是可以快速取得數組或對象當中的元素或屬性，而無需使用arr[x]或者 obj[key]等傳統方式進行賦值
數組的解構賦值
對象的解構賦值
字符串的解構賦值。
核心的應用(返回多個參數，交換位置，for...of循環)
[注意]一定要用一對小括號包裹解構賦值語句，JS引擎將一對開放的花括號視爲一個代碼塊。語法規定，代碼塊語句不允許出現在賦值語句左側，添加小括號後可以將塊語句轉化爲一個表達式，從而實現整個解構賦值過程
擴展運算符
擴展運算符用三個點號表示，功能是把數組或類數組對象展開成一系列用逗號隔開的值
rest運算符
rest運算符也是三個點號，不過其功能與擴展運算符恰好相反，把逗號隔開的值序列組合成一 個數組
字符串擴展
模板字符串
模板字符串（template string）是增強版的字符串，用反引號（`）標識。它可以當作普通 字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量（${}）。
repeat(n)方法返回一個新字符串，表示將原字符串重複n次。
includes()：返回布爾值，表示是否找到了參數字符串。
startsWith()：返回布爾值，表示參數字符串是否在源字符串的頭部。
endsWith()：返回布爾值，表示參數字符串是否在源字符串的尾部。
=>函數
函數默認值
箭頭函數有幾個使用注意點。
1、函數體內this對象，就是定義時所在的對象，而不是使用時所在的對象。This不會改變了。
2、不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤。
3、不可以使用arguments對象，該對象在函數體內不存在。
4、箭頭函數一定是匿名函數。
5、箭頭函數應用總結：
箭頭函數適合於無複雜邏輯或者無副作用的純函數場景下，例如用在map、reduce、filter的回調函數定義中；
不要在最外層定義箭頭函數，因爲在函數內部操作this會很容易污染全局作用域。最起碼在箭頭函數外部包一層普通函數，將this控制在可見的範圍內；
箭頭函數最吸引人的地方是簡潔。在有多層函數嵌套的情況下，箭頭函數的簡潔性並沒有很大的提升，反而影響了函數的作用範圍的識別度，這種情況不建議使用箭頭函數。
Symbol類型
symbol--表示獨一無二的值，它是js中的第七種數據類型。
基本數據類型：null undefined number boolean string symbol
引用數據類型：object
Symbol():首字母大寫。
symbol 函數前不能使用new,否則會報錯，原因在於symbol是一個原始類型的 值，不是對象。
1、symbol函數接收一個字符串作爲參數，表示對symbol的描述，主要是爲了 在控制檯顯示，或者轉爲字符串的時候，比較容易區分。描述的內容相同僅僅表示 的是描述，不代表其他的意義。
2、symbol數據類型轉換。
symbol可以利用String()、toString()轉換成字符串
利用Boolean()或者！轉換成布爾值(只有true值)
不能轉換成數字。
不能使用任何運算符進行運算。
3、作爲對象的屬性名。
4、注意事項
不能直接使用[symbol()]作爲鍵值，最好添加對應的參數進行區分，而且也不能被 for...in遍歷出來。但可以通過 Object.getOwnPropertySymbols(obj)方法獲 取一個對象所有的symbol屬性。
Set（array）和Map(object)結構
ES6提供了數據結構set. 它類似於數組，但是成員的值都是唯一的，沒有重複的值。
Set 本身是一個構造函數，用來生成 Set 數據結構，數組作爲參數。
每一項即是鍵也是值,鍵和值是相同的。
1、創建一個Set；
2、Set類的屬性--size
3、Set類的方法
Set.add(value) 添加一個數據，返回Set結構本身，允許進行鏈式操作。
Set.delete(value) 刪除指定數據，返回一個布爾值，表示刪除是否成功。
Set.has(value) 判斷該值是否爲Set的成員，返回一個布爾值。
Set.clear() 清除所有的數據，沒有返回值。
forEach()：使用回調函數遍歷每個成員
數據結構--map
JavaScript 的對象（Object），只能用字符串當作鍵。這給它的使用帶來了很大 的限制。ES6 提供了 Map 數據結構。它類似於對象，但是“鍵”的範圍不限於 字符串，各種類型的值（包括對象）都可以當作鍵。Symbol類型當作key輸出時
無法確認是同一個key.
1、創建一個map
2、map類的屬性--size
3、map類的方法
map.set(key,value) :設置鍵名key對應的鍵值value,然後返回整個map結構，如 果key已經有值，則鍵值會被更新，否則就生成該鍵，可以鏈式操作。
map.get(key) get方法讀取key對應的鍵值，如果找不到key，返回undefined
map.delete(key) 刪除某個鍵，返回true.如果刪除失敗，返回false.
map.has(key) 方法返回一個布爾值，表示某個鍵是否在當前map對象之中。
map.clear() 清除所有數據，沒有返回值
map.keys() 返回鍵名的遍歷器
map.values() 返回鍵名/鍵值的遍歷器
map.entries() 返回鍵值對的遍歷器
map.forEach() 使用回調函數遍歷每個成員。
iterator接口和for...of循環
它是一種接口，爲各種不同的數據結構提供統一的訪問機制。任何數據結構只要部署 Iterator 接口，就可以完成遍歷操作
Iterator 的作用有三個：
一是爲各種數據結構，提供一個統一的、簡便的訪問接口；
二是使得數據結構的成員能夠按某種次序排列；
三是 ES6 創造了一種新的遍歷命令for...of循環，Iterator 接口主要供for...of消費。
Generator 函數的語法
Generator函數的概念
Generator 函數是 ES6 提供的一種異步編程解決方案，語法行爲與傳統函數完全不同
Generator 函數是分段執行的，yield表達式是暫停執行標記，而next方法可以恢復執行
yield 表達式
由於 Generator 函數返回的遍歷器對象，只有調用next方法纔會遍歷下一個內部狀態， 所以其實提供了一種可以暫停執行的函數。yield表達式就是暫停標誌。
yield表達式與return語句的區別
既有相似之處，也有區別。相似之處在於，都能返回緊跟在語句後面的那個表達式的值。區別在於每次遇到yield，函數暫停執行，下一次再從該位置繼續向後執行，而return語句不具備位置記憶的功能。
Generator 函數可以不用yield表達式，這時就變成了一個單純的暫緩執行函數。
數組和對象的擴展
數組的擴展方法
1、Array.from()方法用於將對象轉爲真正的數組(類數組轉數組)
2、Array.of()方法用於將一組值，轉換爲數組。
3、fill()方法使用給定值，填充一個數組。
對象的擴展方法
1、對象的簡潔表示法
2、object.assign()用於對象的合併，將源對象的所有可枚舉屬性，複製到目標對象。
應用
1．瞭解class面向對象編程
2．掌握es6語法的靈活運用
綜合應用
3．封裝拖拽效果
4．封裝常見兼容
1.<body>
<script type="text/javascript">
//this是javascript裏面的關鍵字,存在於函數內部.
//this指向有一個總的原則,誰調用這個函數,this指向誰.
//但是有一個總的原則，那就是this指的是調用函數的那個對象
//1.普通函數this
/* function fn(){
alert(this);//[object window]
}
fn();
window.fn(); */
//2.對象的方法
/* var num=100;
var obj={
num:10,
fn:function(){
alert(this);//[object Object]
alert(this.num);//10
}
}
obj.fn();//obj調用
var c=obj.fn;
c();//window調用的額，結果是100 */
//3.事件處理函數裏面
/* document.οnclick=function(){
alert(this);//document調用[object HTMLDocument]
} */
//4.定時器和回調函數(函數做參數)
/* window.setTimeout(function(){
alert(this);//[object Window]
},2000); */
d//直接執行的函數都是window調用的
/* function a(fn){
fn();//[object Window]
}
a(function(){ alert(this) }); */
//5.構造函數:首字母大寫,new運算符調用.
//構造函數this指向new出來的實例對象.
/* function Fn(){
this.num=10;
}
var f1=new Fn();
var f2=new Fn();
alert(f1.num);//10
alert(f2.num);//10 */
</script>
</body>
2.
<html lang="zh">
<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>
</head>
<body>
<ul>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
</ul>
<script type="text/javascript">
//函數是對象,同時也是對象的構造器
//函數也有屬性和方法
//alert(function(a,b,c,d,e){}.length); //代表函數參數的個數.
//函數下面的方法：call/apply/bind
//上面三個方法主打用途:改變this指向.
//call和apply改變this指向.
//第一個參數this指向
//從第二個參數開始:代表函數的參數.
//call從第二個參數開始代表函數的參數，用逗號分隔。
//apply第二個參數代表函數的參數，將參數放入數組中.
/* var a=10;
var obj={
a:100,
showa:function(){
alert(this.a);
}
}
obj.showa();//100
obj.showa.call(window);//10
obj.showa.apply(window);//10 */
/* var a=10;
var obj={
a:100,
showa:function(b,c){
alert(this.a+b+c);
}
} */
//obj.showa(10,20);//130
//obj.showa.call(window,10,20);//40
//obj.showa.bind(window,10,20)();//40 返回的是函數體，需要再次調用.
//obj.showa.apply(window,[10,20]);//40
//案例:點擊li換內容
/* function fn(){
alert(1);
}
setTimeout(fn,2000); */
/* var aLi=document.querySelectorAll('li');//對於數組對象，只能挨個調用事件，用for循環挨個賦事件
for(var i=0;i<aLi.length;i++){
aLi[i].οnclick=function(){
//this:當前點擊的li
alert(this)//
setTimeout(function(){
this.innerHTML='222222222222222222';
alert(this)//
},2000);//和定時器無關,主動觸發.
//若沒有call(this)，則定時器無效，因爲setTimeout是window調用的， this指向window
}
} */
var aLi=document.querySelectorAll('li');
for(var i=0;i<aLi.length;i++){
aLi[i].οnclick=function(){
//this:當前點擊的li
alert(this)
setTimeout(function(){
this.innerHTML='222222222222222222';
alert(this)//加上call(this),後，this指向外面的this
}.call(this),2000);//和定時器無關,主動觸發.，因爲fn()會自動調用，fn.call()也會
}
}
//bind:改變this指向,參數和call一樣,返回的是函數體（call返回的函數，會自動執行）,需要再次觸發.
/* var aLi=document.querySelectorAll('li');
for(var i=0;i<aLi.length;i++){
aLi[i].οnclick=function(){
//this:當前點擊的li
setTimeout(function(){
this.innerHTML='222222222222222222';
}.bind(this),2000);
}
} */
/* var aLi=document.querySelectorAll('li');
for(var i=0;i<aLi.length;i++){
aLi[i].οnclick=function(){
//this:當前點擊的li
var _this=this;//將this存儲下來.
setTimeout(function(){
_this.innerHTML='222222222222222222';
},2000);
}
} */
</script>
</body>
<body>
<ul>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
</ul>
3.
<script type="text/javascript">
//一.定義變量:var和let
//var定義的變量:局部變量(函數內部)和全局變量
/* var num=10;//全局
var fn=function(){
var num=100;//局部變量,作用於函數內部
} */
//1.let用來聲明變量。它的用法類似於var，但是所聲明的變量，只在let命令所在的代碼塊內有效.
//{代碼塊}
/* for(var i=0;i<10;i++){//i:全局的
console.log(i);
}
for(let j=0;j<10;j++){//j:代碼塊內有效
console.log(j);
} */
//alert(i);
//alert(j);//j is not defined
//2.只要塊級作用域內存在let命令，它所聲明的變量就“綁定”這個區域，不再受外部的影響。
/* var aLi=document.querySelectorAll('li');
for(var i=0;i<aLi.length;i++){
aLi[i].οnclick=function(){
alert(i);//6//因爲for不依賴點擊onclick，它照常循環，等點擊時已經循環完了
}
} */
/* var aLi=document.querySelectorAll('li');
for(let i=0;i<aLi.length;i++){
aLi[i].οnclick=function(){
alert(i);//0,1,2,3,4,5
}
} */
/* var a=100;
var a=200;
function fn(){
num=200;
}
fn();
alert(num); 200*/
//3.不存在變量提升
/* alert(num);//undefined
var num=10;
alert(10); */
//alert(num);//報錯num is not defined
//let num=10;
//alert(num);//10
//4.let不允許在相同作用域內，重複聲明同一個變量。
//let a=100;
//let a=200;//報錯的
//5.ES6允許塊級作用域的任意嵌套，外層無法讀取內層作用域的變量，反之可以
/* {
let a=10;
alert(a);//10
//alert(b);//報錯
{
alert(a);//10
let b=20;
{
alert(b);//20
}
}
}
alert(a);//報錯
alert(b);//報錯 */
//二.常量:值不能改變.
const num=10;
num=100;
console.log(num);//報錯.
</script>
</body>
4.
<body>
<script type="text/javascript">
//let arr=[100,200,300,400,500];
/* let a=arr[0];
let b=arr[1];
let c=arr[2];
let d=arr[3];
let e=arr[4];
console.log(a,b,c,d,e); */
//解構賦值:解構的作用是可以快速取得數組或對象當中的元素或屬性及值.
//1.數組的解構賦值.
/* let [a,b,c,d,e]=arr;
console.log(a,b,c,d,e); */
/* let arr=[1,2,[3,4,[5,6,[7,8,[9]]]]];
let [a,b,[c,d,[e,f,[g,h,[i]]]]]=arr;
console.log(a,b,c,d,e,f,g,h,i); */
//核心:一一匹配.
//let [a,b]=[2,4,6];
//console.log(a,b);
//let [a,b,c,d]=[1,2,3];
//console.log(a,b,c,d);//1 2 3 undefined
/* let [a,b,c,d]=[1,2,[3,4]];
console.log(a,b,c,d);//1 2 [3, 4] undefined */
//函數應用解構賦值.
/* function fn([a,b,c,d]){
console.log(a,b,c,d);
}
fn([1,2,3,4]) */
/* function arrcalc(arr){
arr.sort(function(a,b){
return a-b;
});
return [arr.length,arr[arr.length-1],arr[0]];
}
let [len,max,min]=arrcalc([12,6,89,5,7,123,6,8]);
console.log(len);
console.log(max);
console.log(min); */
//2.對象的解構賦值.
/* let obj1={
a:1,
b:2,
c:3
}; */
//變量的名稱和屬性名一致.
/* let {b,c,a}=obj;
console.log(b);//2
console.log(c);//3
console.log(a);//1 */
/* let {name,age,sex,obj}={name:'zhangsan',age:100,sex:'男',obj:obj1};
console.log(obj); */
//如果變量名和屬性名不一致,通過賦值的方式改變,得到值的是後者.
//let {name:xingming,age,sex}={name:'zhangsan',age:100,sex:'男'};
//console.log(xingming);
//console.log(name);//空
//字符串的解構賦值
/* let str='javascript';
let [a,b,c,d,e,f,g,h,i,j]=str;
console.log(a,b,c,d,e,f,g,h,i,j); */
/* var a=10;
var b=50;
var [a,b]=[b,a];
console.log(a,b);//50,10 */
//for...of最好的循環.
/* let arr=['zhangsan','lisi','wangwu'];
for(let value of arr){
alert(value);
} */
//遍歷器（Iterator）就是這樣一種機制。它是一種接口，爲各種不同的數據結構提供統一的訪問機制。任何數據結構只要部署 Iterator 接口，就可以完成遍歷操作（即依次處理該數據結構的所有成員）。
//Iterator 的作用有三個：
//一是爲各種數據結構，提供一個統一的、簡便的訪問接口；
//二是使得數據結構的成員能夠按某種次序排列；
//三是 ES6 創造了一種新的遍歷命令for...of循環，Iterator 接口主要供for...of消費。
/* let arr=['zhangsan','lisi','wangwu'];
let obj={
a:1,
b:2,
c:3
} */
//let str='hello';
/* for(var value of obj){
alert(value);//obj is not iterable
} */
/* for(var value of str){
alert(value);
} */
//console.log(arr[Symbol.iterator]);
//console.log(str[Symbol.iterator]);
//console.log(obj[Symbol.iterator]);//undefined
</script>
</body>
5.
<body>
<ul>
<li>11111111111111</li>
<li>11111111111111</li>
<li>11111111111111</li>
<li>11111111111111</li>
<li>11111111111111</li>
<li>11111111111111</li>
</ul>
<script type="text/javascript">
//擴展運算符:擴展運算符用三個點表示，功能是把數組或類數組對象展開成一系列用"逗號"隔開的值.
//var arr=[14,5,6,32,785,69,1];
//console.log(arr);
//console.log(...arr);
//1.求數組的最大最小值.
//console.log(Math.max(...arr));//14,5,6,32,785,69,1
//2.數組的合併
//var arr1=[1,2,3];
//var arr2=[4,5,6];
//var arr3=[7,8,9];
//console.log([...arr1,...arr2,...arr3]);// [1, 2, 3, 4, 5, 6, 7, 8, 9]
//3.淺拷貝--引用傳遞
/* let a=[1,2,3];
let b=a;//引用傳遞
b.push(4);
console.log(a);//[1, 2, 3, 4]
console.log(b); *///[1, 2, 3, 4]
/* let a=[1,2,3];
let b=[];
for(let i in a){
b[i]=a[i];
}
b.push(4);
console.log(a);
console.log(b); */
/* let a=[1,2,3];
let b=[...a];
b.push(4);
console.log(a);
console.log(b); */
//4.類數組轉真正的數組.
var aLi=document.querySelectorAll('li');//類數組
aLi=[...aLi];
aLi.push('<p></p>');
console.log(aLi);
</script>
</body>
6.
<body>
<ul>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
</ul>
<script type="text/javascript">
//箭頭函數最吸引人的地方是簡潔.箭頭函數是函數的一種簡潔的寫法.
//省略了function 和 return
//如果函數執行多條語句,添加語句塊.
//除了一個參數,其他情況參數都不能省略括號.
/* var fn=function(str){
return str;
} */
//var fn=str=>str;
//alert(fn('hello123'));
/* var sum=function(a,b){
alert(a);
alert(b);
alert(a+b);
}
var sum=(a,b)=>{
alert(a);
alert(b);
alert(a+b);
} */
//函數體內this對象，就是定義時所在的對象，而不是使用時所在的對象。This不會改變了。
//不要在最外層定義箭頭函數，因爲在函數內部操作this會很容易污染全局作用域。最起碼在箭頭函數外部包一層普通函數，將this控制在可見的範圍內；
var obj={
num:10
}
var num=100;
/* function fn1(){
alert(this.num);
}
fn1.call(obj); */
var fn=()=>{
alert(this.num);
}
//fn();//[object Window]
//fn.call(obj);//100
var aLi=document.querySelectorAll('li');
for(var i=0;i<aLi.length;i++){
/* aLi[i].οnclick=()=>{
alert(this);//window
} */
//最起碼在箭頭函數外部包一層普通函數，將this控制在可見的範圍內；
aLi[i].οnclick=function(){//箭頭函數的this來自父級.
setTimeout(()=>{
this.innerHTML='22222222222222';//this不會發生變化.
},2000);
}
}
//[123,456,789].forEach(v=>alert(v));
</script>
</body>
7.
<body>
<script type="text/javascript">
//數組的擴展方法
//1、Array.from()方法用於將對象轉爲真正的數組(類數組轉數組)
/* let obj={
a:1,
b:2,
c:3
}; */
//對象需要有下標和length
/* let obj={
0:'zhangsan',
1:'lisi',
2:'wangwu',
length:3
}
console.log(Array.from(obj)); */// ["zhangsan", "lisi", "wangwu"]
//Set結構的新的數據類型,參數是數組,不允許重複.
let arr=[1,56,89,4,1,56,89,7,32,1,569,9];
/*console.log(arr);
let s1=new Set(arr);
console.log(s1);//set結構
console.log(Array.from(s1)); */
console.log(Array.from(new Set(arr)));
//2、Array.of()方法用於將一組值，轉換爲數組。
//3、fill()方法使用給定值，填充一個數組。
//對象的擴展方法
//1、對象的簡潔表示法
//2、object.assign()用於對象的合併，將源對象的所有可枚舉屬性，複製到目標對象。
</script>
8.
<body>
<script type="text/javascript">
let str='ECMAscript';
//repeat(n)方法返回一個新字符串，表示將原字符串重複n次。
console.log(str.repeat(5));
//includes()：返回布爾值，表示是否找到了參數字符串。---indexOf
console.log(str.includes('scr'));//true
//startsWith()：返回布爾值，表示參數字符串是否在源字符串的頭部。
console.log(str.startsWith('EC'));//true
console.log(str.startsWith('ECWA'));//false
//endsWith()：返回布爾值，表示參數字符串是否在源字符串的尾部。
console.log(str.endsWith('ipt'));//true
console.log(str.endsWith('ot'));//false
</script>
</body>
10.
<body>
<script type="text/javascript">
//rest運算符也是三個點號，不過其功能與擴展運算符恰好相反，把逗號隔開的值序列組合成一個數組
//取代arguments
function fn(b,c,...a){//rest運算符只能做最後一個參數
//b:1
//c:2
//alert(arguments.length);
//alert(arguments[0])
//alert(a.length);
//alert(a[0]);
for(var i=0,sum=0;i<a.length;i++){
sum+=a[i];
}
alert(sum);
}
fn(1,2,3,4,5,6,7,8,9,10);
</script>
</body>
cart.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/cart.css" />
</head>
<body>
<!--main-->
<div id="container" class="cart">
<div class="w">
<!--購物車爲空時顯示的盒子-->
<div class="empty-cart">
<div class="empty-cart-msg">
購物車空空的哦~，去看看心儀的商品吧~
<a href="">去購物></a>
</div>
</div>
<!--全部商品哪一行-->
<div class="cart-top" style="display: block;">
<div class="cart-top-left">
<a href=""><em>全部商品</em></a>
</div>
<div class="cart-top-right">
<span>配送至：</span>
<div class="jdarea">
<div class="areawrap">
<div class="areatext">北京朝陽區三環到四環之間</div>
<b></b>
</div>
</div>
</div>
<div class="footline">
<div class="line"></div>
</div>
</div>
<!--包裹購物車-->
<div class="cart-wrap" style="display: block;">
<div class="w">
<div id="jd-cart">
<div class="cartmain">
<div class="cart-thead">
<div class="cart-col t-checkbox">
<div class="cart-checkbox">
<input type="checkbox" checked="" name="" id="" class="allsel" value="" /> 全選
</div>
</div>
<div class="cart-col t-goods">商品</div>
<div class="cart-col t-props"></div>
<div class="cart-col t-prices">單價(元)</div>
<div class="cart-col t-quantity">數量</div>
<div class="cart-col t-sum">小計(元)</div>
<div class="cart-col t-action">操作</div>
</div>
<div id="cart-list">
<div class="cart-item-list">
<div class="cart-tbody">
<div class="shop">
<div class="cart-checkbox">
<input type="checkbox" checked="" name="" id="" value="" />
</div>
<span class="shop-info">
<a href=""></a>
</span>
<div class="shop-ex">
購滿￥99.00 已免運費
<span class="tips-icon" data-tips="部分超重超大商品運費單獨收取，不在本功能範圍內，準確運費以結算頁爲準"></span>
</div>
</div>
<div class="item-list">
<div class="item-head">
<div class="header-left">
<a class="header-left-p1" href="">
<span>
換購
<b></b>
</span> 活動商品已購滿999.00元，可加價換購商品10件>
</a>
<a class="header-left-p2" href="">換購商品</a>
<a href="">去湊單 ></a>
</div>
<div class="header-price">
<b></b>
</div>
</div>
<div class="goods-item goods-item-sele" style="display: none;">
<div class="goods-info">
<div class="cell b-checkbox">
<div class="cart-checkbox">
<input type="checkbox" checked="" name="" id="" value="" />
<span class="line-circle"></span>
</div>
</div>
<div class="cell b-goods">
<div class="goods-name">
<div class="goods-pic">
<a href=""><img src="images/5631d31eN50010b03.jpg" alt="" /></a>
</div>
<div class="goods-msg">
<div class="goods-d-info">
<a href="">Apple iMac 27英寸一體機（Core i5 處理器/8GB內存/1TB存儲/2GB獨顯/Retina 5K屏 MK462CH/A）</a>
</div>
<div class="goods-ex">
<span class="promise"></span>
<span class="promise">
<i></i><a href="">購買京東服務</a>
</span>
</div>
</div>
</div>
</div>
<div class="cell b-props">
<div class="prop-text">尺碼：27英寸Retina 5K 顯示屏</div>
</div>
<div class="cell b-price">
<strong>13488.00</strong>
<a class="sales-promotion" href="">
促銷優惠
<b></b>
</a>
<div class="sales-promotion-dropdown">
</div>
</div>
<div class="cell b-quantity">
<div class="quantity-form">
<a class="quantity-down" href="javascript:void(0)">-</a>
<input type="text" value="1" />
<a class="quantity-add" href="javascript:void(0)">+</a>
</div>
<div class="quantity-text">有貨</div>
</div>
<div class="cell b-sum">
<strong>13488.00</strong>
</div>
<div class="cell b-action">
<a href="javascript:void(0)">刪除</a><a href="javascript:void(0)">移到我的關注</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="cart-floatbar">
<div class="select-all">
<div class="cart-checkbox">
<input type="checkbox" checked="" name="" id="" class="allsel" value="" /> 全選
</div>
</div>
<div class="operation">
<a href="javascript:void(0)">刪除選中的商品</a><a href="javascript:void(0)">移到我的關注</a>
</div>
<div class="toolbar-right">
<div class="btn-area">
<a href=""></a>
</div>
<div class="price-sum">
<span class="txt">總價（不含運費）：</span>
<span class="totalprice">￥0.00</span>
<span class="txt">已節省：</span>
<span class="totalsave">-￥0.00</span>
</div>
<div class="amount-sum">
已選擇
<em>0</em> 件商品
<b></b>
</div>
</div>
</div>
</div>
</div>
<div class="goods-list goods-selected">
<ul>
<!-- <li>
<div class="goodsinfo">
<div class="p-img">
<a href="##"><img class="loadimg" src="" alt="" sid="" /></a>
</div>
<div class="p-name">
<a class="loadt" href="##"> </a>
</div>
<div class="p-price"><strong><em>￥</em><i class="loadpcp"> </i></strong></div>
<div class="p-btn"><a href="javascript:void(0)"><b></b>加入購物車</a></div>
</div>
</li> -->
</ul>
</div>
</div>
</div>
<script type="text/javascript">
let dataarr= [{
"title": "Apple MacBook Pro 13.3英寸筆記本電腦 銀色(Core i5 處理器/8GB內存/256GB SSD閃存/Retina屏 MF840CH/A)",
"price": "10788.00",
"img": "images/5631d31eN50010b03.jpg"
}, {
"title": "Apple iPad Air 2 平板電腦 9.7英寸（64G WLAN版/A8X 芯片/Retina顯示屏/Touch ID技術 MH182CH）金色",
"price": "3299.00",
"img": "images/5440d612Nb61beccf.jpg"
}, {
"title": "Apple iPad Air 平板電腦 9.7英寸（16G WLAN版/A7芯片/Retina顯示屏 MD788CH）銀色",
"price": "2099.00",
"img": "images/rBEhVVJ3VY8IAAAAAAG_9yE_xEwAAFBZQCT4x0AAcAP271.jpg"
}, {
"title": "Apple Mac mini臺式電腦 (Core i5 處理器/8GB內存/1TB 存儲 MGEN2CH/A)",
"price": "4988.00",
"img": "images/5440f42eN5b4677a6.jpg"
}];
var oUl=document.querySelector('.goods-list ul');
var htmlstr='';
for(var i=0;i<dataarr.length;i++){
/* htmlstr+='<li>'+
'<div class="goodsinfo">'+
'<div class="p-img">'+
'<a href="##"><img class="loadimg" src="'+dataarr[i].img+'" alt="" sid="" /></a>'+
'</div>'+
'<div class="p-name">'+
'<a class="loadt" href="##">'+dataarr[i].title+'</a>'+
'</div>'+
'<div class="p-price"><strong><em>￥</em><i class="loadpcp">'+dataarr[i].price+'</i></strong></div>'+
'<div class="p-btn"><a href="javascript:void(0)"><b></b>加入購物車</a></div>'+
'</div>'+
'</li>'; */
//使用模板字符串--使用反引號
//引用值採用${值}
htmlstr+=`
<li>
<div class="goodsinfo">
<div class="p-img">
<a href="##"><img class="loadimg" src="${dataarr[i].img}" alt="" sid="" /></a>
</div>
<div class="p-name">
<a class="loadt" href="##">${dataarr[i].title} </a>
</div>
<div class="p-price"><strong><em>￥</em><i class="loadpcp"> ${dataarr[i].price}</i></strong></div>
<div class="p-btn"><a href="javascript:void(0)"><b></b>加入購物車</a></div>
</div>
</li>
`;
}
oUl.innerHTML=htmlstr;
</script>
</body>
</html>