DOM(Document Object Model)學習路線
阿新 • • 發佈：2020-11-30
21陣列.html
/* 早期的版本： 1// push() 功能：在陣列末尾新增一個或多個元素 引數：新增的元素序列 返回值：返回的是原陣列增加元素後的長度 特點 會改變原陣列 2// unshift() 用法基本與push()一樣，只是在陣列前面新增元素 %unshift:取消移動% 3// pop() 功能：在陣列末尾刪除一個元素 引數：無引數 返回值：返回的是刪除的那個元素 特點 會改變原陣列 4// shift() 用法基本與pop()一樣，只是在陣列前面刪除元素 5// splice() 刪除 新增 替換 功能：在陣列末尾刪除一個元素 引數：第一個引數表示從什麼位置開始 第二個引數表示刪除的元素個數 當第二個引數為0 可以表示新增元素 從第三個引數開始 都是新增的元素 返回值：返回的是刪除的元素組成的陣列 特點 會改變原陣列 6// reverse() 功能：以陣列元素進行翻轉 引數：無引數 返回值：返回的是翻轉後的陣列 特點 會改變原陣列 "1,3,5"=>'5,3,1' 7// slice() 功能：對陣列進行擷取 引數：第一個引數表示從什麼位置開始 第二個引數表示到什麼位置結束(不包含) 返回值：返回的是擷取的元素組成的新陣列 特點 不會改變原陣列 8// concat() 功能：合併陣列 引數：放需要合併的陣列或值 返回值：返回的是合併後的新陣列 特點 不會改變原陣列 9// toString() 把陣列轉成字串 10// indexOf() 10-1 lastIndexOf() 10-2 findIndex(function(item,index,arr){}) */ var arr = [1, 3, 5, 3]; var res = arr.findIndex(function (item, index, arr) { return item === 3; }); console.log(arr); // 列印結果：[1, 3, 5, 3] console.log(res); // 列印結果：1 /* 功能：在陣列中查詢元素 引數：需要查詢的元素 返回值：數字，-1代表沒有找到，或者找到的序號 特點 不會改變原陣列, 找到第一個滿足條件為止 11// Join() 功能：以指定的符號連線陣列的每個元素 引數：指定的符號或者為空(不傳引數 預設以逗號) 返回值：返回的是連線後的字串 特點 不會改變原陣列 # es6的版本： Vue是宣告式程式設計，for是命令式。 <!-- 12.forEach 13.filter 14.map 15.some 16.every 17.reduce 18.Array.isArray() 19.sort() instanceof 和 isArray 當檢測Array例項時, Array.isArray 優於 instanceof,因為Array.isArray能檢測iframes. --> //sort() 功能：對陣列進行排序 引數：接受一個函式,可選 返回值：拍好序的新陣列 特點 會改變原陣列 */ var arr = [1, 3, 5, 12]; arr.sort(); // arr列印結果：[1, 12, 3, 5] var res = arr.sort(function (a, b) { return b - a; // arr列印結果：[12, 5, 3, 1] return a - b; // arr列印結果：[1, 3, 5, 12] }); /* arr.sort(function (a, b) { if (a > b) { return 1; } else if (a < b) { return -1; } return 0; }); // forEach() 功能：對陣列進行迴圈 和for作用類似 引數：接受一個函式 返回值：undefined 特點 不會改變原陣列 */ var arr = [1,3]; var res = arr.forEach(function(item,index,arr){ // item代表每一次迴圈的元素值 index代表每一次迴圈的元素下標 arr代表當前陣列 console.log(item); console.log(index); console.log(arr); }); console.log("自己實現forEach-------------------"); Array.prototype.forEach01 = function(ary,fn){ for (let i = 0; i < arr.length; i++) { fn(arr[i],i,arr); } } arr.forEach01(arr,function(item,index,arr){ console.log(item); console.log(index); console.log(arr); }); /* // filter() 功能：在陣列中過濾元素 引數：接受一個函式 返回值：滿足條件的元素組成的陣列 特點 不會改變原陣列 var arr = [1, 3, 5, 7]; var res = arr.filter(function (item, index, arr) { return item % 3 === 0; }); console.log(res); // 列印結果：[3] // some() 似同filter() 功能：在陣列中找有沒有滿足條件的元素 引數：接受一個函式 返回值：布林值 找到滿足條件返回true 否則返回false 特點 不會改變原陣列 只要找到第一個滿足條件的元素終止迴圈 則返回true // every() 功能：看陣列中元素是否都滿足條件 引數：接受一個函式 返回值：布林值 只要找到一個不滿足返回false，全部滿足返回true 特點 不會改變原陣列 只要找到第一個不滿足條件的元素終止迴圈 則返回false // map() 功能：對原陣列進行對映，新陣列的元素值是每次迴圈函式的返回值決定 引數：接受一個函式 返回值：與原陣列對應的新陣列 特點 不會改變原陣列 */ var arr = [1, 3, 5, 7]; var res = arr.map(function (item, index, arr) { return item + 3 ; }); console.log(res); // 列印結果：[4,6,8,10] /* // reduce() reduceRight()-> <%從右到左%> 功能：求和 引數：接受一個函式 返回值：返回currentValue->item 特點 不會改變原陣列 應用一：求陣列元素和 */ var sum = arr.reduce(function (pre, item, index, arr) { return pre + item; },0); //0可省，代表index從0開始 //應用二：陣列去重 [1,3,5,3] //判斷val是否存在於陣列arr當中 function has1(arr, val) { for (var i = 0; i < arr.length; i++) { if (arr[i] === val) { return true; } } return false; } // function fn(arr){ var newArr = []; arr.forEach(function(item,index,arr){ //判斷新陣列是否有，item if(!has1(newArr,item)){ newArr.push(item); } }); return newArr; } console.log(fn([10, 2, 3, 4, 2, 2, 11,"7","o","o","7","7",null,null])); // 列印結果：[10, 2, 3, 4, 11, "7", "o", null]
21字串.html
var str = "github1:cnamep1"; // 底層： new String(str) //var str2 = new String('hello'); /* charAt() 1.功能 求指定位置的字元 2.引數 表示位置的整數 從0開始 3.返回值 對應位置的字元 4.特點 indexOf() 用法基本與陣列的indexOf類似 lastIndexOf() toUpperCase() toLowerCase() */ console.log(str.charAt(0)); //g console.log(str.charAt(str.length - 1)); //1 console.log(str.indexOf('1')); // 6 console.log(str.indexOf('0')); // -1 console.log(str.lastIndexOf('1')); //14 /* substr() substring() slice() */ console.log(str.substr(5)); //b1:cnamep1 console.log(str.substr(5,2)); //b1 console.log(str.substring(5,2)); //thu console.log(str.substring(2,5)); //thu console.log(str.slice(5,2)); //數字大的不能放第一個引數 console.log(str.slice(2,5)); //thu console.log(str); //github1:cnamep1 /* charCodeAt() String.fromCharCode(122) */ var str1 = "abc012ABC"; console.log(str1.charCodeAt(0)); // 97 ascii碼 console.log(str1.charCodeAt(3)); // a 97 z (97+25=122) A 65 '0'-> 48 console.log(String.fromCharCode(122)); // 'z'
22Math物件.html
var a = []; console.log(Array.isArray(a)); //true console.log(Math); console.log(Math.PI); console.log(Math.abs(-1)); // ceil() 向上取整 floor() 向下取整 console.log(Math.ceil(10.9)); // 11 console.log(Math.ceil(10.01)); // 11 console.log(Math.ceil(-10.9)); // -10 console.log(Math.floor(10.9)); // 10 console.log(Math.floor(10.05)); // 10 console.log(Math.floor(-10.9)); // -11 // round() 四捨五入 往數大的去靠 console.log(Math.round(0.5)); //1 console.log(Math.round(-4.5)); //-4 console.log(Math.round(-4.6)); //-5 console.log(Math.round(4.5)); //5 // max,min console.log(Math.max(10, 23, -4)); // pow(a,b) a的b次方 console.log(Math.pow(2, 4)); // random() [0,1) for (var i = 0; i < 100; i++) { console.log(Math.random()); }
23日期物件.html
//23日期物件
//1.產生一個日期物件
var date = new Date();
console.log(date); // Thu Jul 30 2020 07:05:04 GMT+0800 (中國標準時間)
console.log(date.toLocaleString()); // 2020/7/30 上午7:05:04
//2.常用日期方法
var year = date.getFullYear();
var month = date.getMonth(); // 0-11月
var day = date.getDate();
var hour = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
console.log(year + "-" + (month + 1) + "-" + day +
"\t" + hour + ":" + minutes + ":" + seconds);
//2020-7-30 7:26:47
//星期幾,0-6,搞個數組
var weekday = date.getDay();
var array = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
console.log(array[weekday]); // 星期四
- 23-1.dateToString()同date.toLocaleString()：
var date = new Date();
console.log(date.toLocaleString()); // 2020/7/30 上午8:08:59
function toTwo(h) {
return h < 10 ? "0" + h : h;
}
function dateToString(date) {
var year = date.getFullYear();
var month = date.getMonth();
month = toTwo(month + 1);
var day = toTwo(date.getDate());
var hour = toTwo(date.getHours());
var minutes = toTwo(date.getMinutes());
var seconds = toTwo(date.getSeconds());
var weekday = date.getDay();
var array = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
console.log(year + "-" + month + "-" + day +
"\t" + hour + ":" + minutes + ":" + seconds);
console.log(array[weekday]);
}
dateToString(date);
/*
2020-07-30 08:08:59
星期四
*/
- 23-2.StringToDate：
var str = "2022-11-11";
// 2022/11/11或2022-11-11
var d = new Date(str);
console.log(d.getMonth()); // 10
console.log(Date.parse(str));
/*
1-6681-2480-0000 一千多億
1970年1月1日到該時間經歷的毫秒數
*/
var d2 = new Date(Date.parse(str));
console.log(d2.getMonth()); //10
- 23-2.加天數：
dateObj.setDate(dayValue):
例如當前為4月，如果setDate(-2),則為3月29日
var d = new Date();
console.log(d.toLocaleDateString());
// 2020/7/30
d.setDate(d.getDate() + 5);
/*
加5天,
setMonth(),setHours()等同理
*/
console.log(d.getMonth());// 7
console.log(d.getDate());// 4
- 23-2.時間差：
//倒計時，時間差，雙十一。
/*
顯式呼叫： Date.parse(dateString)
隱式呼叫: new Date(dateString).getTime()
*/
var endTime = new Date("2020-10-1");
var now = new Date();
console.log(endTime - now);// 5406624675
console.log(endTime.getTime() - now.getTime());
// 5406624675
var chaDate = new Date(endTime.getTime() - now.getTime());
console.log(chaDate.toLocaleTimeString());// 下午9:50:24
1.html
/*
Dom元素的建立，刪除，查詢，修改，複製
Dom操作，查詢元素，設定元素的樣式，增加元素
事件
是系統預先定義好的行為，單擊，雙擊
事件三要素：1.事件源 2.事件處理 3.事件
*/
let i = 0;
setInterval(()=>{
console.log(i++);
},1000);
2事件.html
3元素的顯示與隱藏.html
4滑鼠移入與移出.html
5表單相關事件.html
6獲取元素n種方式.html
let a = 1;
console.log(a);
7類樣式操作.html
8操作元素內容.html
9表單屬性.html
10自定義屬性.html
11tab.html
12節點層級.html
13元素建立與新增.html
14微博釋出內容.html
15元素克隆.html
16建立元素總結.html
17事件機制.html
18事件流.html
19事件委託.html