01-獲取孩子節(jié)點(diǎn)
childNodes 獲取的包括文本
-
nodeType 為1是標(biāo)簽 為2是屬性 為3是文本
var box = document.getElementById('box'); var btns = box.childNodes; // console.log(btns); var arrNode = []; for (var i = 0; i<btns.length; i++){ if (btns[i].nodeType == 1){ // 標(biāo)簽元素 arrNode.push(btns[i]); } } console.log(arrNode); children 直接可以獲取到元素節(jié)點(diǎn)
02-獲取兄弟節(jié)點(diǎn)
- nextElementSibling 在IE9以上用這個(gè)
- nextSibling IE9一下用這個(gè)
- 兼容寫(xiě)法 var next3 = btn.nextElementSibling || btn.nextSibling;
03-獲取父親節(jié)點(diǎn)
// 獲取父親節(jié)點(diǎn)
console.log(btn.parentNode);
03-通過(guò)類名獲取標(biāo)簽的封裝
getElementsByClassName() 在IE9以下無(wú)效
-
兼容寫(xiě)法
// 兼容寫(xiě)法 function getEleClassName(dom,className) { if (dom.getElementsByClassName){ // 此方法可以識(shí)別 return dom.getElementsByClassName(className); }else { // 方法不能識(shí)別 *通配符選擇器,可以獲取dom下面的所有標(biāo)簽 var eles = dom.getElementsByTagName('*'); // 存放標(biāo)簽 var tempArr = []; for(var i = 0; i<eles.length; i++){ if (eles[i].className == className){ tempArr.push(eles[i]); } } return tempArr; } }
04-節(jié)點(diǎn)的使用&九宮格動(dòng)態(tài)創(chuàng)建
// 1.獲取標(biāo)簽
var btns = document.getElementById('box').getElementsByTagName('button');
var bottom = document.getElementById('bottom');
// 2.添加節(jié)點(diǎn)
// 用來(lái)存放節(jié)點(diǎn)
var array = [];
// 總列數(shù)
var count = 3;
// 當(dāng)前行號(hào)
var row = 0;
// 當(dāng)前列號(hào)
var col = 0;
// 間距
var margin = 10;
// 添加節(jié)點(diǎn)
btns[0].onclick = function () {
// 2.1 創(chuàng)建節(jié)點(diǎn)
var div = document.createElement('div');
bottom.appendChild(div);
div.className = 'curr';
// 添加到數(shù)組
array.push(div);
// 遍歷
for (var i = 0; i < array.length; i++) {
row = parseInt(i / count);
col = i % count;
array[i].style.left = col * (100 + margin) + 'px';
array[i].style.top = row * (100 + margin) + 'px';
}
};
// 刪除節(jié)點(diǎn)
btns[1].onclick = function () {
// 刪除節(jié)點(diǎn)
bottom.removeChild(array.pop());
}
05-發(fā)微博
// 1.獲取標(biāo)簽
var box = document.getElementById('box');
var textA = box.children[0];
var btn = box.children[1];
var oul = box.children[2];
// 2.添加點(diǎn)擊事件
btn.onclick = function () {
var content = textA.value;
if (content == ''){
// 判斷有沒(méi)有內(nèi)容,如果沒(méi)有內(nèi)容直接返回
alert('請(qǐng)輸入內(nèi)容');
return;
}
// 1.創(chuàng)建li
var oli = document.createElement('li');
var oa = document.createElement('a');
oa.innerHTML = '刪除';
oli.innerHTML = textA.value;
oli.appendChild(oa);
// 清空內(nèi)容
textA.value = '';
oul.insertBefore(oli,oul.children[0]);
// if(oul.children.length > 0){
// }else {
// // 第一次添加到頭部
// oul.appendChild(oli);
// }
// 給a標(biāo)簽綁定事件
oa.onclick = function () {
oul.removeChild(this.parentNode);
}
}
06-日期對(duì)象的認(rèn)識(shí)
- getFullYear() 從 Date 對(duì)象以四位數(shù)字返回年份捐名。
- getMonth() 從 Date 對(duì)象返回月份 (0 ~ 11)。
- getDate() 從 Date 對(duì)象返回一個(gè)月中的某一天 (1 ~ 31)浪慌。
- getHours() 返回 Date 對(duì)象的小時(shí) (0 ~ 23)昼牛。
- getMinutes() 返回 Date 對(duì)象的分鐘 (0 ~ 59)。
- getSeconds() 返回 Date 對(duì)象的秒數(shù) (0 ~ 59)而钞。
- getMilliseconds() 返回 Date 對(duì)象的毫秒(0 ~ 999)经伙。
- getTime() 返回 1970 年 1 月 1 日至今的毫秒數(shù)。 時(shí)間戳
- valueOf() 返回 Date 對(duì)象的原始值嗓节。 時(shí)間戳
1969年8月,貝爾實(shí)驗(yàn)室的程序員肯湯普遜利用B編譯語(yǔ)言荧缘，創(chuàng)造了C語(yǔ)言.
最初計(jì)算機(jī)操作系統(tǒng)是32位，而時(shí)間也是用32位表示拦宣。也就是說(shuō)32位能表示的最長(zhǎng)時(shí)間是68年截粗，而實(shí)際上到2038年01月19日03時(shí)14分07秒，便會(huì)到達(dá)最大時(shí)間鸵隧，過(guò)了這個(gè)時(shí)間點(diǎn)绸罗，所有32位操作系統(tǒng)時(shí)間便會(huì)變?yōu)?0000000 00000000 00000000 00000000，也就是1901年12月13日20時(shí)45分52秒豆瘫，這樣便會(huì)出現(xiàn)時(shí)間回歸的現(xiàn)象珊蟀，很多軟件便會(huì)運(yùn)行異常了。
到這里外驱，我想問(wèn)題的答案已經(jīng)出來(lái)了:因?yàn)橛?2位來(lái)表示時(shí)間的最大間隔是68年育灸，而最早出現(xiàn)的UNIX操作系統(tǒng)考慮到計(jì)算機(jī)產(chǎn)生的年代和應(yīng)用的時(shí)限綜合取了1970年1月1日作為UNIX TIME的紀(jì)元時(shí)間(開(kāi)始時(shí)間)，至于時(shí)間回歸的現(xiàn)象相信隨著64為操作系統(tǒng)的產(chǎn)生逐漸得到解決昵宇，因?yàn)橛?4位操作系統(tǒng)可以表示到292,277,026,596年12月4日15時(shí)30分08秒磅崭，相信我們的N代子孫，哪怕地球毀滅那天都不用愁不夠用了瓦哎，因?yàn)檫@個(gè)時(shí)間已經(jīng)是千億年以后了绽诚。
07-自定義時(shí)間
-
如果括號(hào)里面沒(méi)有寫(xiě)日期,就是代表默認(rèn)獲取當(dāng)前的時(shí)間,如果寫(xiě)了就是自定義的時(shí)間
// 1.自定義時(shí)間 // 如果括號(hào)里面沒(méi)有寫(xiě)日期,就是代表默認(rèn)獲取當(dāng)前的時(shí)間,如果寫(xiě)了就是自定義的時(shí)間 var date = new Date('2018/2/23 10:10:10'); console.log(date.getFullYear()); console.log(date.getMonth()); console.log(date.getDate()); var mins = date.getTime(); // 計(jì)算事件差 var nowDate = new Date(); // 獲取當(dāng)前的毫秒數(shù) var nowMins = nowDate.getTime(); console.log(mins); console.log(nowMins); console.log(mins - nowMins);
08-鐘表案例
// 1.獲取標(biāo)簽
var h = document.getElementById('hour');
var m = document.getElementById('minute');
var s = document.getElementById('second');
// 2.獲取當(dāng)前的時(shí)分秒
setInterval(function () {
var date = new Date();
// 獲取毫秒
// var minSecond = date.getMilliseconds();
// 秒針
var second = date.getSeconds();
// 分針
var minute = date.getMinutes();
// 時(shí)針
var hour = date.getHours()%12 + minute/60;
// 2.2旋轉(zhuǎn)
// 秒針
s.style.transform = 'rotate('+ second*6 +'deg)';
m.style.transform = 'rotate('+ minute*6 +'deg)';
h.style.transform = 'rotate('+ hour*30 +'deg)';
},100)
01.設(shè)置字符翻轉(zhuǎn)以及移動(dòng)到不同行上顯示不同的顏色
!important 提升優(yōu)先級(jí)
02.九宮格算法的分析
03.九宮格算法的分析以及實(shí)現(xiàn)
// 遍歷
// 總列數(shù)
var count = 3;
// 當(dāng)前列號(hào)
var col = 0;
// 當(dāng)前行號(hào)
var row = 0;
// 間距
var margin = 10;
for(var i = 0; i<list.length; i++){
// 計(jì)算當(dāng)前的行號(hào)
col = i % count;
// 計(jì)算當(dāng)前的列號(hào)
row = parseInt(i / count);
list[i].style.left = col * (100 + margin) + 'px';
list[i].style.top = row * (100 + margin) + 'px';
list[i].style.position = 'absolute';
}
04.tab切換的實(shí)現(xiàn)
-
通過(guò)這個(gè)案例主要講解標(biāo)簽的屬性可以自定義
// 1.獲取標(biāo)簽 var btns = document.getElementById('top').getElementsByTagName('button'); var divs = document.getElementById('bottom').getElementsByTagName('div'); // 2.添加事件 for(var i = 0; i < btns.length; i++){ // 標(biāo)簽的屬性可以自定義, 可以自己增加一個(gè)屬性,在需要的時(shí)候取出來(lái)使用 btns[i].index = i; btns[i].onclick = function () { // 2.1排他思想 for(var i = 0; i < btns.length; i++){ btns[i].className = ''; } this.className = 'curr'; // 2.2 切換div // 設(shè)置所有的盒子為 none for (var i = 0; i < divs.length; i++){ divs[i].style.display = 'none'; } // 設(shè)置當(dāng)前點(diǎn)擊對(duì)應(yīng)的盒子為 block divs[this.index].style.display = 'block'; } }
05.數(shù)組的常用方法
1.concat() 連接兩個(gè)或更多的數(shù)組，并返回結(jié)果杭煎。
2.push() 向數(shù)組的末尾添加一個(gè)或更多元素恩够，并返回新的長(zhǎng)度。
3.pop() 刪除并返回?cái)?shù)組的最后一個(gè)元素
4.unshift()向數(shù)組的開(kāi)頭添加一個(gè)或更多元素羡铲，并返回新的長(zhǎng)度蜂桶。
5.shift() 刪除并返回?cái)?shù)組的第一個(gè)元素
6.slice() 第一個(gè)參數(shù)代表從數(shù)組的那個(gè)索引開(kāi)始截取, 第二個(gè)參數(shù)代表截取到那個(gè)索引停止 會(huì)返回一個(gè)截取后新的數(shù)組,而原始數(shù)組不會(huì)發(fā)生改變
-
7.splice() 刪除元素，并向數(shù)組添加新元素也切。
第一個(gè)參數(shù) index 代表要從數(shù)組的那個(gè)位置開(kāi)始刪除
第二個(gè)參數(shù) howmany 代表要?jiǎng)h除元素的個(gè)數(shù)
-
item1, ..., itemX 可選扑媚。向數(shù)組添加的新項(xiàng)目。 在刪除的位置添加新的選項(xiàng)可以添加多個(gè)
console.log(arr.splice(1, 2,'隔壁老王')); console.log(arr);
-
8.join() 把數(shù)組的所有元素放入一個(gè)字符串雷恃。元素通過(guò)指定的分隔符進(jìn)行分隔疆股。
-
用來(lái)切割數(shù)組,將其轉(zhuǎn)換為字符串, 默認(rèn)用逗號(hào)隔開(kāi) 原數(shù)組不變
console.log(arr.join('*')); 張三*李四*王五*3*劉二麻子
-
-
9.sort() 對(duì)數(shù)組的元素進(jìn)行排序 會(huì)改變?cè)獢?shù)組
a>b 為升序 a<b 為降序 var arr1= [0, 3, 2, 5,7]; arr1.sort(function (a,b) { return a>b; }); console.log(arr1);
06.字符串的常用方法
1.字符串截取保留2為小數(shù)
2.indexOf() 檢索字符串。返回指定的索引 從前面查找
3.lastIndexOf() 從后向前搜索字符串倒槐。
4.charAt() 返回在指定位置的字符旬痹。
5.charCodeAt()返回在指定的位置的字符的 Unicode 編碼。
-
6.slice() 提取字符串的片斷，并在新的字符串中返回被提取的部分两残。
如果傳入一個(gè)參數(shù)會(huì)從這個(gè)位置截取到最后 7.split() 把字符串分割為字符串?dāng)?shù)組永毅。
8.toLowerCase() 把字符串轉(zhuǎn)換為小寫(xiě)。
9.toUpperCase() 把字符串轉(zhuǎn)換為大寫(xiě)人弓。
07.判斷文件的格式是否正確
// 1.獲取標(biāo)簽
var oinput = document.getElementById('oinput');
// 2.添加事件
oinput.onchange = function () {
// alert(oinput.value);
// 2.1截取
var text = oinput.value;
var index = text.lastIndexOf('.');
// 轉(zhuǎn)換為小寫(xiě)
var lastName = text.slice(index+1).toLowerCase();
if(lastName == 'png' || lastName == 'jpg'){
alert('格式正確');
}else {
alert('格式不正確,請(qǐng)上傳格式為png或者jpg的圖片');
}
}
08.定時(shí)器
1.多次定時(shí)器
-
定時(shí)器注意點(diǎn): 如果定時(shí)器不用的話一定要清空,否則會(huì)造成內(nèi)存泄漏
setInterval() 方法可按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式沼死。
-
setInterval() 方法會(huì)不停地調(diào)用函數(shù)，直到 clearInterva() 被調(diào)用或窗口被關(guān)閉
/* * setInterval() * 多次定時(shí)器 可以間隔固定的時(shí)間執(zhí)行某段代碼 * 第一個(gè)參數(shù) 要執(zhí)行的代碼塊, 函數(shù)名 * 第二個(gè)參數(shù) 間隔時(shí)間 單位ms 毫秒 * */ var timer = null; timer = setInterval(fn,1000); function fn() { alert('我是多次定時(shí)器'); } // 清空多次定時(shí)器 clearInterval(timer);
-
- 一次定時(shí)器
-
setTimeout() 方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式崔赌。
/*一次定時(shí)器 延遲多少秒執(zhí)行 setTimeout(fn,1000); 第一個(gè)參數(shù) 要執(zhí)行的代碼塊, 函數(shù)名 第二個(gè)參數(shù) 間隔時(shí)間 單位ms 毫秒 * */ var timer = null; timer = setTimeout(fn,1000); function fn() { alert('我是一次定時(shí)器'); } // 清空一次定時(shí)器 clearTimeout(timer);
09.定時(shí)器勻速動(dòng)畫(huà)
// 1.獲取標(biāo)簽
var btn = document.getElementById('btn');
var box = document.getElementById('box');
// 2.添加事件
btn.onclick = function () {
linear(box,0,4,800);
};
// 抽取函數(shù)
/**
* 勻速動(dòng)畫(huà)
* @param begin 初始值
* @param speed 速度
* @param target 目標(biāo)值
*/
function linear(dom,begin,speed,target) {
// 1.清空上次定時(shí)器
clearInterval(dom.timer);
// 2.開(kāi)啟定時(shí)器
dom.timer = setInterval(function () {
begin += speed;
// 判斷終止條件
if (begin >= target) {
clearInterval(dom.timer);
begin = target;
}
dom.style.left = begin + 'px';
}, 10);
}
10.定時(shí)器緩動(dòng)動(dòng)畫(huà)
// 1.獲取標(biāo)簽
var btn = document.getElementById('btn');
var box = document.getElementById('box');
// 定時(shí)器
var timer = null;
// 目標(biāo)值
var target = 800;
// 初始值
var begin = 0;
// 速度
var speed = 0;
// 2.添加事件
btn.onclick = function () {
// 2.1 清除定時(shí)器
clearInterval(timer);
timer = setInterval(function () {
speed = (target - begin) / 10;
begin += speed;
// 四舍五入函數(shù) round()
if (Math.round(begin) >= target) {
clearInterval(timer);
// alert('定時(shí)器清空');
begin = target;
}
console.log(begin);
box.style.left = begin + 'px';
}, 50)
}
4256-106.jpg
01.點(diǎn)名冊(cè)案例
// 1.獲取標(biāo)簽
var btns = document.getElementById('box').getElementsByTagName('button');
var oh1 = document.getElementById('oh1');
// 2.添加事件
// 開(kāi)始
var timer = null;
var arr = ['張三','李四','王五','劉二麻子','二狗','小明','隔壁老王'];
btns[0].onclick = function () {
// 清空定時(shí)器
clearInterval(timer);
timer = setInterval(function () {
// 1.生成隨機(jī)數(shù) 生成 0-1的隨機(jī)數(shù),但是不能取到1
var randomNum = parseInt(Math.random() * arr.length);
// 2.從數(shù)組中取出值
oh1.innerHTML = arr[randomNum];
},10);
};
// 停止
btns[1].onclick = function () {
clearInterval(timer);
}
02.長(zhǎng)圖展示
// 1.獲取標(biāo)簽
var spans = document.getElementById('box').getElementsByTagName('span');
var pic = document.getElementById('pic');
// 2.添加事件
var timer = null;
var begin = 0;
var speed = 4;
spans[0].onmouseover = function () {
clearInterval(timer);
timer = setInterval(function () {
begin -= speed;
if (begin <= -505){
clearInterval(timer);
begin = -505;
}
pic.style.top = begin + 'px';
},10)
};
spans[1].onmouseover = function () {
clearInterval(timer);
timer = setInterval(function () {
begin += speed;
if (begin >= 0){
clearInterval(timer);
begin = 0;
}
pic.style.top = begin + 'px';
},10)
}
03.展示陰影
<div id="box">
<span id="cover"></span>
</div>
// 1.獲取標(biāo)簽
var box = document.getElementById('box');
var cover = document.getElementById('cover');
// 2.添加點(diǎn)擊事件
var timer = null;
var begin = 150;
box.onmouseover = function () {
clearInterval(timer);
timer = setInterval(function () {
begin -= 3;
if (begin <= 0){
clearInterval(timer);
begin = 0;
}
cover.style.top = begin + 'px';
},10);
}
04.js定時(shí)器原理
- 一次定時(shí)器 在指定時(shí)間內(nèi), 將任務(wù)放入事件隊(duì)列,等待js引擎空閑后被執(zhí)行.
- setInterval(fn, 100)容易產(chǎn)生誤區(qū)：并不是上一次fn執(zhí)行完了之后再過(guò)100ms才開(kāi)始執(zhí)行下一次fn意蛀。 事實(shí)上，setInterval并不管上一次fn的執(zhí)行結(jié)果健芭，而是每隔100ms就將fn放入主線程隊(duì)列浸间，而兩次fn之間具體間隔多久就不一定了。
- 定時(shí)器的用處, 如果有很多節(jié)點(diǎn)渲染,可以將多個(gè)節(jié)點(diǎn)放入定時(shí)器中來(lái)執(zhí)行,這樣就不會(huì)阻塞線程,提高用戶體驗(yàn)
05.一次定時(shí)器執(zhí)行多次操作以及遞歸的認(rèn)識(shí)
var box = document.getElementById('box');
var timer = setTimeout(jump,1000);
var count = 5;
function jump() {
// 每次進(jìn)來(lái)先清空上一個(gè)定時(shí)器
clearTimeout(timer);
count--;
box.innerHTML = '要在' + count + '秒后跳轉(zhuǎn)';
if (count <= 0){
window.location.;
}else {
// timer = setTimeout(jump,1000);
timer = setTimeout(arguments.callee,1000);
// 遞歸:自己搞自己, 自己調(diào)用自己
// arguments.callee 在函數(shù)內(nèi)部指的是函數(shù)本身
}
}
06.簡(jiǎn)單輪播圖的認(rèn)識(shí)
// 1.獲取標(biāo)簽
var oul = document.getElementById('oul');
// 2.圖片輪播
// 初始值
var begin = 0;
setInterval(function () {
begin -= 4;
if (begin <= -1200){
begin = 0;
}
oul.style.left = begin + 'px';
},20)
07.左右輪播圖
// 1.獲取標(biāo)簽
var spans = document.getElementById('box').getElementsByTagName('span');
var oul = document.getElementById('oul');
// 2.添加點(diǎn)擊事件
// 點(diǎn)擊右側(cè)
var timer = null;
// 偏移量
var begin = 0;
// 索引
var loop = 0;
// 速度
var speed = 4;
// 記錄標(biāo)志
var flag = true;
spans[1].onclick = function () {
if (flag == false) return;
flag = false;
// 頁(yè)碼自增1
loop++;
if (loop > 5){
// 重置頁(yè)碼為1
loop = 1;
// 重置偏移量
begin = 0;
}
timer = setInterval(function () {
begin -= speed;
if (begin <= loop * -640){
clearInterval(timer);
begin = -640 * loop;
flag = true;
}
oul.style.left = begin + 'px';
},10)
};
// 左邊
spans[0].onclick = function () {
if (flag == false) return;
flag = false;
loop--;
if (loop < 0){
loop = 4;
begin = 5 * -640;
}
timer = setInterval(function () {
begin += speed;
if (begin >= loop * -640){
clearInterval(timer);
begin = -640 *loop;
flag = true;
}
oul.style.left = begin + 'px';
},10);
}
08.發(fā)送驗(yàn)證碼
// 1.獲取標(biāo)簽
var btn = document.getElementById('btn');
// 2.添加事件
var timer = null;
// 剩余的秒數(shù)
var count = 5;
btn.onclick = function () {
// 2.1 禁止按鈕點(diǎn)擊
this.disabled = true;
// this 在定時(shí)器中指向窗口,因?yàn)殚_(kāi)啟定時(shí)期的時(shí)候本身就是window.setInterval()
// 備份指針
var that = this;
// 2.2 倒計(jì)時(shí)
timer = window.setInterval(function () {
count--;
if(count < 0){
clearInterval(timer);
count = 5;
that.disabled = false;
that.innerHTML = '重新發(fā)送驗(yàn)證碼';
}else {
that.innerHTML = '剩余' + count + '秒';
}
},1000)
}
09.節(jié)點(diǎn)操作
// 1.創(chuàng)建節(jié)點(diǎn)
var h1 = document.createElement('h1');
h1.innerHTML = '我是標(biāo)題';
// 2.添加節(jié)點(diǎn)
// appendChild 在節(jié)點(diǎn)后面添加
// document.body.appendChild(h1);
var box = document.getElementById('box');
// insertBefore 第一個(gè)參數(shù)是要插入的節(jié)點(diǎn), 第二個(gè)參數(shù)是要插入到那個(gè)節(jié)點(diǎn)前面 如果為null則插入到最后面
document.body.insertBefore(h1,box);
// 創(chuàng)建節(jié)點(diǎn)
var div = document.createElement('div');
div.style.width = '200px';
div.style.height = '200px';
div.style.background = 'red';
document.body.appendChild(div);
// 3.刪除節(jié)點(diǎn) 要?jiǎng)h除的節(jié)點(diǎn)
document.body.removeChild(box);
// 4.克隆節(jié)點(diǎn)
// cloneNode 如果為true就會(huì)復(fù)制節(jié)點(diǎn)里面的所有孩子節(jié)點(diǎn),包括樣式
// 如果為false 就只是賦值自己
var ele = box.cloneNode(false);
console.log(ele);
ele.style.marginTop = '10px';
// 添加節(jié)點(diǎn)
document.body.appendChild(ele);
// 替換節(jié)點(diǎn)
var box = document.getElementById('box');
var h1 = document.createElement('h1');
h1.innerHTML = '我是標(biāo)題';
document.body.replaceChild(h1,box);
198750-106.jpg
