1.for in

對(duì)象中有多少組鍵值對(duì),我們的FOR IN 循環(huán)就遍歷多少次(不一定) 每一次循環(huán)KEY這個(gè)變量存儲(chǔ)的都是當(dāng)前循環(huán)這組鍵對(duì)值的屬性名 1、KEY存儲(chǔ)的值都是字符串格式的(不管屬性名是否為數(shù)字) 2、在FOR IN 循環(huán)遍歷的時(shí)候，大部分瀏覽器都是先把對(duì)象中的鍵值對(duì)進(jìn)行排序(把數(shù)字屬性名的排在前面,并且排列的時(shí)候按照數(shù)字由小到大排列),其次再把非數(shù)字的屬性名按照之前編寫的順序排列,循環(huán)的時(shí)候按照重新排列的順序依次遍歷(小數(shù)算作字母不算作數(shù)字)for (var key in obj) { console.log(typeof key) "string" //key 屬性名 console.log(obj.key)//獲取obj中key這個(gè)屬性對(duì)應(yīng)的屬性值 undefined <==>obj['key'] {‘key’:'key屬性的值'} console.log(obj[key]);每一次循環(huán)把key變量存儲(chǔ)的值(當(dāng)前遍歷的屬性名)獲取到放在中括號(hào)中,獲取OBJ對(duì)應(yīng)屬性的屬性值 'key':字符串key key:變量key,代表的是存儲(chǔ)的值 }obj['key'] obj.key 屬性名是key obj[key] 屬性名不是key 而是key變量存儲(chǔ)的值 復(fù)制代碼

2. 數(shù)據(jù)類型轉(zhuǎn)換

2.1 把其他數(shù)據(jù)類型轉(zhuǎn)換為number類型

A) isNaN 、Number、parseInt、parseFloat true --> 1 false --> 0 '' --> 0 '12'-->12 '12px' --> NaN/12 '帥哥' --> NaN null --> 0 undefined --> NaN {} /$/ function() {} --> NaN [] //引用數(shù)據(jù)類型轉(zhuǎn)換為數(shù)字 通過toString方法把數(shù)組轉(zhuǎn)化為字符串,然后再調(diào)用Number把字符串轉(zhuǎn)換為數(shù)字 [] --> '' -->0 [12] --> '12' -->12 [12,23] --> '12,23' --> NaNB)在進(jìn)行加減乘除數(shù)學(xué)運(yùn)算的時(shí)候 1、加減乘除 2、除了加法有特殊性,其余的運(yùn)算符都是數(shù)學(xué)運(yùn)算,也就是遇到非數(shù)字類型，需要把其轉(zhuǎn)換為number再進(jìn)行運(yùn)算 1- '1' = 0 10 * null = 0 10/undefined = NaN . 10 * [10] = 100 加法的特殊性: 在遇到字符串的時(shí)候 + 不是數(shù)學(xué)運(yùn)算 而是字符串拼接 只要不遇到字符串就是數(shù)學(xué)運(yùn)算 1+ '1' = '11' null + '1' = 'null1' 字符串拼接：把其他值轉(zhuǎn)為字符串然后再拼接 （toString） 其他數(shù)據(jù)類型的toString是直接把值用單(雙)引號(hào)包起來即可，只有對(duì)象的有特殊性，對(duì)象.toString =' [object object]' (1).toString --> '1' (true).toString ---> "true" null undefined 都有toString() 方法 但是瀏覽器不讓用 [12,23].toString() "12,23" /^$/.toString() "/^$/" (function() {}).toString() "function() {}" ({name:"hou"}).toString() "[object object]"1+ null + undefined + [] +'hou' + null + undefined + [] + 101 +null ---> 1 1 + true --->2 2 + undefined ---> NaN NaN + [] --->NaN + '' --->"NaN" "NaN" + 'hou' + 'null' + 'undefined' + '' + '10'---> "NaNhounullundefined10"復(fù)制代碼

2.2 將其他數(shù)據(jù)類型轉(zhuǎn)換為布爾類型

Boolean ! !! 條件判斷,也是轉(zhuǎn)換為布爾類型，然后判斷真假 只有 0 NaN null undefined 空字符串 五個(gè)轉(zhuǎn)換為false 其余都是true [] ---> true -1 ---> trueif (box) {首先把box 變量存儲(chǔ)的值獲取到，轉(zhuǎn)化為布爾類型，如果轉(zhuǎn)化為true條件成立 反之不成立 }if(3 +'3px') { //條件成立 3 + '3px' ---> '33px' true }if(3- '3px') { // 條件不成立 3 - '3px' ---> NaN false } 復(fù)制代碼

2.3 使用"=="進(jìn)行比較

在使用"=="進(jìn)行比較的時(shí)候，如果左右兩邊數(shù)據(jù)類型不相同，瀏覽器會(huì)默認(rèn)轉(zhuǎn)換為相同的類型，然后再比較（"==="不會(huì)這樣操作） 對(duì)象和對(duì)象：比較的是空間地址，不是相同的空間，結(jié)果肯定是false [] == [] false var a = {} var b = a ; a==b true 對(duì)象和數(shù)字:把對(duì)象轉(zhuǎn)換為數(shù)字 [] == 0 true ({}) == NaN false NaN和自己不相等和其他任何值都不相等 對(duì)象和字符串：把兩邊都轉(zhuǎn)換為數(shù)字比較的 [] == '' true 對(duì)象和布爾：把兩邊都轉(zhuǎn)換為數(shù)字 [] == true 0==1 false [] == false 0 ==0 true ![] == false --> 把數(shù)組變?yōu)椴紶栐偃》?= false --> false == false --> true字符串和數(shù)字:字符串轉(zhuǎn)換為數(shù)字 字符串和布爾：都轉(zhuǎn)化為數(shù)字 布爾和數(shù)字: 布爾轉(zhuǎn)換為數(shù)字規(guī)律：兩個(gè)等于號(hào)比較，左右兩邊數(shù)據(jù)值的類型不一樣，瀏覽器會(huì)把兩邊的類型都轉(zhuǎn)換為數(shù)字然后再比較，但是null 和undefined除外 null == undefined --> true null === undefined ---> false null以及undefined 和其他任何值都不相等 復(fù)制代碼

3.Math中的常用方法:

數(shù)學(xué)函數(shù):但是它是對(duì)象數(shù)據(jù)類型的 typeof Math 'object' Math對(duì)象中給我們提供了很多常用操作數(shù)字的方法 abs 取絕對(duì)值 ceil 向上取整 floor 向下取整 round 四舍五入 Math.round(12.3) -->12 Math(12.5) ---> 13 正數(shù)中5包含在向上 Math.round(-12.3) ---> -12 Math.round(-12.5) ---> -12 負(fù)數(shù)5 包含在向下 Math.round(-12.51) -13 random 獲取[0,1)之間的隨機(jī)小數(shù) 很難獲取到0 獲取[0,10]之間的隨機(jī)整數(shù) Math.round(Math.random()*10) 獲取[3,15]之間的隨機(jī)整數(shù) Math.round(Math.random()*12 + 3) 獲取[n,m]之間的隨機(jī)整數(shù) Math.round(Math.random()*(m-n) + n) max/min 獲取一組值中的最大值和最小值 PI 獲取圓周率 pow 獲取一個(gè)值的多少次冪 Math.pow(10,2) --> 100 sqrt 開平方 Math.sqrt(100) ---> 10 復(fù)制代碼

4.字符串常用方法:

Jstr.charAt(索引)：返回指定索引位置的字符，和str[索引]的區(qū)別在于，當(dāng)指定的索引不存在的時(shí)候，中括號(hào)的方式獲取的是undefined,而charAt獲取的是空字符串 str.charCodeAt(索引)：在charAt基礎(chǔ)上，把獲取的字符變?yōu)閡nicode編碼值（對(duì)應(yīng)ASCII碼表） 48-57: 0-9 65-90: A-Z 97-122: a-z str.fromCharCode(十進(jìn)制的unicode值):把值按照ASCII碼表中的信息，轉(zhuǎn)換為原有的字符，和charCodeAt正好對(duì)應(yīng) substr && substring && slice 實(shí)現(xiàn)字符串截取的三個(gè)辦法 str.substr(n,m):從索引n開始 截取m個(gè)字符 str.substring(n,m):從索引n開始，截取到索引為m處（不包含m 即 m-1）把找到的部分截取 str.slice(n,m):和substring語法一樣，區(qū)別在于slice支持以負(fù)數(shù)做索引 當(dāng)索引是負(fù)數(shù)的時(shí)候，瀏覽器在處理的時(shí)候，是用字符串的總長(zhǎng)度加上負(fù)數(shù)索引,然后按照正數(shù)處理操作 str.slice(-7,-3) ===> str.slice(str.length-7,str.length-3) 細(xì)節(jié)： 1、如果只傳遞了n(str.substr(n)/str.substring(n)),相當(dāng)于從索引n開始一直截取到字符串的末尾 2、如果傳遞的索引超出最大限制，也是把能截取的部分截取掉即可 3、如果一個(gè)參數(shù)都不傳遞，相當(dāng)于把整個(gè)字符串都截取（字符串的克隆） str.toUpperCase:把字母全局大寫 str.toLowerCase:把字母全局小寫 indexOf && lastIndexOf str.indexOf:獲取當(dāng)前字符在字符串中第一次出現(xiàn)位置的索引 str.lastIndexOf：獲取的是當(dāng)前字符最后一次出現(xiàn)位置的索引 如果當(dāng)前字符在字符串中沒有出現(xiàn)過，結(jié)果是-1 :我們根據(jù)這個(gè)規(guī)律可以驗(yàn)證一下當(dāng)前字符串是否包含某個(gè)字符 if(str.indexOf('?') === -1) { //沒有出現(xiàn)過 }if(str.indexOf('?') >=0) { //出現(xiàn)過 } str.split:按照某一個(gè)字符把字符串拆分成數(shù)組中的某一項(xiàng)，和數(shù)組的join方法是對(duì)應(yīng)的 var str = 'name=shuaige&age=8' str.split('=') ["name","shuaige&age","8"] str.split(/=|&/g);//支持正則表達(dá)式 ["name","shuaige","age","8"] str.split('') ["n", "a", "m", "e", "=", "s", "h", "u", "a", "i", "g", "e", "&", "a", "g", "e", "=", "8"] str.split(' ') 不太一樣 后邊這個(gè)有空格 ["name=shuaige&age=8"] var ary = [12,34,32] ary.join('+') "12+34+32" "12+34+32".split('+') ==> ["12","34","32"] ary 的元素是數(shù)字 變成了字符串 str.replace:實(shí)現(xiàn)字符的替換 執(zhí)行一次replace 只能替換一次 如果我們有好幾個(gè)需要替換，在不使用正則的情況下我們需要執(zhí)行很多次replace 有些需求即使執(zhí)行很多次replace也實(shí)現(xiàn)不了，此時(shí)需要使用正則處理，真實(shí)項(xiàng)目中replace一般都是和正則搭配使用的 trim && trimLeft && trimRight str.trimLeft:去除字符串開始的空格 str.trimRight:去除字符串結(jié)尾的空格 str.trim：去除字符串首尾的空格字符串應(yīng)用之queryURLParameter var url = "https://www.baidu.com/s?wd=node&rsv_spt=1&issp=1" 目標(biāo):把問號(hào)傳遞的參數(shù)值分別的解析出來 var obj ={wd:'javascript',rsv_spt:1,issp:1} 方案一： function queryURLParameter(url) {//url:傳遞的參數(shù)(我們當(dāng)前要解析的URL地址)var quesIndex = url.indexOf('?')//獲取?的索引位置var obj = {};if(quesIndex === -1) {//url中沒有問號(hào)傳參:直接返回空對(duì)象return obj;}url = url.substr(quesIndex+1);//截取了"wd=node&rsv_spt=1&issp=1" ?后面的var ary = url.split('&');//拆分成數(shù)組["wd=node","rsv_spt=1","issp=1"]for(var i = 0; i < ary.length; i++) {var curAry = ary[i].split('='); //["wd","node"]obj[curAry[0]] = curAry[1];}return obj; }方案二:待分析 String.prototype.myQueryURLParameter = function myQueryURLParameter() {var obj = {},reg = /([^=?&]+)=([^=?&]+)/g;this.replace(reg,function() {var arg = arguments;obj[arg[1]] = arg[2];});return obj; }真實(shí)項(xiàng)目中的驗(yàn)證碼： 真實(shí)項(xiàng)目中的驗(yàn)證碼一般都是后臺(tái)處理的，后臺(tái)返回給客戶端展示的是一個(gè)圖片(圖片中包含了驗(yàn)證碼) 1、字母+ 數(shù)字 2、問答 3、12306 選擇圖片 4、成語填空 5、圖片拼圖 6、滑動(dòng)拖拽letter-spacing:5px 文本字體之間的間距 cursor:pointer;//小手鼠標(biāo) 函數(shù)操作 var codeBox = document.getElementById('codeBox'); ==>生成4位隨機(jī)驗(yàn)證碼 var areaStr = "0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM"; var result = ''; for(var i = 0; i < 4; i++) {//==>隨機(jī)獲取一個(gè)0-61之間的整數(shù)：作為接下來獲取字符的索引var ran = Math.round(Math.random()*61);// =>根據(jù)索引獲取一個(gè)隨機(jī)字符var char = areaStr.charAt(ran);//驗(yàn)證一下新獲取的CHAR字符是否已經(jīng)在RESULT中存在了，如果存在了我們不存儲(chǔ)，重新再獲取一遍，反之才累加到RESULT中//不區(qū)分大小寫 不能同時(shí)存在A a 所以比較的時(shí)候 需要都轉(zhuǎn)換為小寫if(result.toLowerCase().indexOf(char.toLowerCase())>-1) {i--; // i必須減減 才能重新 獲取一遍continue;}// ==>把每一次循環(huán)獲取的字符存放在最后結(jié)果中result+=char; } codeBox.innerHTML = result;點(diǎn)擊盒子生成4個(gè)隨機(jī)驗(yàn)證碼 function queryCode() {.....//生成4個(gè)隨機(jī)數(shù)}codeBox.onclick = queryCode;//點(diǎn)擊盒子重新生成驗(yàn)證碼(此處不加小括號(hào):這塊只是把函數(shù)綁定給元素的點(diǎn)擊事件，方法還沒有執(zhí)行，點(diǎn)擊的時(shí)候才執(zhí)行)禁止用戶選中文字 ==》-webkit-user-select: none // 寫代碼先寫思路 --->從索引上下功夫 比如選擇完 就刪掉該字符 但是 Math.random()* 61 61 也要隨之發(fā)生變化 復(fù)制代碼

5.節(jié)點(diǎn)操作

DOM: document object model 文檔對(duì)象模型，提供一些屬性和方法可以讓我們?nèi)ゲ僮鱀OM元素 獲取DOM元素的方法 document.getElementById 一個(gè)元素對(duì)象 [context].getElementsByTagName 元素集合 [context].getElementsByClassName 通過元素類名獲取元素集合 document.getElementsByName 通過name屬性值獲取節(jié)點(diǎn)集合 document ===>說明上下文不能發(fā)生變化 [context] ===> 說明上下文可以發(fā)生變化 document.documentElement 獲取整個(gè)HTML對(duì)象 document.body 獲取整個(gè)BODY對(duì)象 document.head 獲取整個(gè)HEAD對(duì)象 [context].querySelector 通過選擇器獲取一個(gè)元素對(duì)象 [context].querySelectorAll 通過選擇器獲取元素集合getElementById ==> 此方法的上下文只能是document 一個(gè)HTML頁面中元素的ID理論上是不能重復(fù)的 1、如果頁面中的ID重復(fù)了，我們獲取的結(jié)果是第一個(gè)ID對(duì)應(yīng)的元素對(duì)象 2、在IE7及更低版本瀏覽器中，會(huì)把表單元素的name值當(dāng)作id來識(shí)別使用(項(xiàng)目中盡量不要讓表單的name和其他元素的id相同) 3、如果我們把JS放在結(jié)構(gòu)的下面，我們可以直接使用ID值來獲取這個(gè)元素(不需要通過getElementsById獲取)，而且這種方式會(huì)把頁面中所有ID是他的元素都獲取到（元素對(duì)象/元素集合） ===> 不推薦 獲取頁面中ID值為#box1的所有元素標(biāo)簽 var allList = document.getElementsByTagName('*'); var result = []; for(var i = 0 ; i < allList.length; i ++) { var item = allList[i]; item.id === 'box1' ? result.push(item):null; }getElementsByTagName 上下文可以自己來指定 獲取到的結(jié)果是一個(gè)元素集合(類數(shù)組集合) 1、獲取的結(jié)果是集合，哪怕集合中只有一項(xiàng)，我們想要操作這一項(xiàng)（元素對(duì)象）,需要先從集合中獲取出來，然后再操作 var bodyBox = document.getElementsByTagName('body'); bodyBox[0].getElementsByTagName('div'); 2、在指定的上下文中，獲取所有子子孫孫元素中標(biāo)簽名叫做這個(gè)的(后代篩選)getElementsByClassName 上下文也可以隨意指定 獲取的結(jié)果也是一個(gè)元素集合（類數(shù)組集合） 1、真實(shí)項(xiàng)目中我們經(jīng)常會(huì)通過樣式類名來獲取元素，getElementsByClassName這個(gè)方法在IE6-8瀏覽器中是不兼容的 getElementsByName 通過元素的Name屬性值獲取一組元素（類數(shù)組:節(jié)點(diǎn)集合NodeLIst） 它的上下文也只能是document IE瀏覽器只能識(shí)別表單元素的name屬性值，所以我們這個(gè)方法一般都是用來操作表單元素的document.documentElement/document.body 獲取HTML或者BODY(一個(gè)元素對(duì)象) document.documentElement.clientWidth || document.body.clientWidth//獲取當(dāng)前瀏覽器窗口可視區(qū)域的寬度(當(dāng)前頁面一屏幕的寬度) clientHeight是獲取高度querySelector /querySelectorAll ---->性能沒有這么好 在IE6-8下不兼容，而且也沒有什么特別好的辦法處理它的兼容，所以這兩個(gè)方法一般多用于移動(dòng)端開發(fā)使用 querySelector:獲取一個(gè)元素對(duì)象 querySelectorAll :獲取的是一個(gè)元素集合 只要是css支持的選擇器，這里大部分都支持document.querySelectorAll('#div1');//根據(jù)ID獲取所有的元素 document.querySelectorAll('.box');//根絕className獲取元素集合 document.querySelectorAll('div');//根據(jù)標(biāo)簽獲取元素集合 document.querySelectorAll('body>div');//子代選擇器 body下的 div document.querySelectorAll('#box2 li');//后代選擇器 document.querySelectorAll('div [name=xxxxx]');DOM的節(jié)點(diǎn) node:節(jié)點(diǎn)，瀏覽器認(rèn)為一個(gè)HTML頁面中的所有內(nèi)容都是節(jié)點(diǎn)(包括標(biāo)簽、注釋、文字文本等) 元素節(jié)點(diǎn)：HTML標(biāo)簽 文本節(jié)點(diǎn)：文字內(nèi)容(高版本瀏覽器會(huì)把空格和換行也當(dāng)作文本節(jié)點(diǎn)) 注釋節(jié)點(diǎn)：注釋內(nèi)容 document文檔節(jié)點(diǎn)元素節(jié)點(diǎn) nodeType:1 nodeName: 大寫標(biāo)簽名(在部分瀏覽器的怪異模式下，我們寫的標(biāo)簽名是小寫，它獲取的就是小寫) nodeValue: null [curEle].tagName:獲取當(dāng)前元素的標(biāo)簽名(獲取的標(biāo)簽名一般都是大寫)文本節(jié)點(diǎn) --- 空格 換行 屬于文本 節(jié)點(diǎn) nodeType:3 nodeName: #text nodeValue:文本內(nèi)容注釋節(jié)點(diǎn) nodeType:8 nodeName: #comment nodeValue:注釋內(nèi)容文檔節(jié)點(diǎn) nodeType:9 nodeName: #document nodeValue:nulldocument.body.childNodes節(jié)點(diǎn)：用來描述頁面中每一部分之間關(guān)系的，只要我可以獲取頁面中的一個(gè)節(jié)點(diǎn)，那么我就可以通過相關(guān)的屬性和方法獲取頁面中的所有節(jié)點(diǎn) childNodes:獲取當(dāng)前元素所有子節(jié)點(diǎn)(節(jié)點(diǎn)集合:類數(shù)組) 注:不僅僅是元素子節(jié)點(diǎn)，文本、注釋等都會(huì)包含在內(nèi)； 子節(jié)點(diǎn)說明只是在兒子輩分中查找children:獲取所有的元素子節(jié)點(diǎn)(元素集合) 在IE6-8下獲取的結(jié)果和標(biāo)準(zhǔn)瀏覽器中有區(qū)別(IE6-8中會(huì)把注釋節(jié)點(diǎn)當(dāng)作元素節(jié)點(diǎn)獲取到) parentNode:獲取當(dāng)前元素的父節(jié)點(diǎn)(元素對(duì)象) previousSibling nextSibling previousSibling:獲取當(dāng)前節(jié)點(diǎn)的上一個(gè)哥哥節(jié)點(diǎn)(不一定是元素節(jié)點(diǎn)也可能文本或者注釋) nextSibling:獲取當(dāng)前節(jié)點(diǎn)的下一個(gè)弟弟節(jié)點(diǎn)previousElementSibling nextElementSibling previousElementSibling：獲取當(dāng)前節(jié)點(diǎn)的上一個(gè)哥哥元素節(jié)點(diǎn)(IE6-8不兼容) nextElementSibling：獲取當(dāng)前節(jié)點(diǎn)的下一個(gè)弟弟元素節(jié)點(diǎn)（IE6-8不兼容）firstChild lastChild firstChild:當(dāng)前元素所有子節(jié)點(diǎn)中的第一個(gè)(也不一定是元素節(jié)點(diǎn)，可能是文本和注釋) lastChild:當(dāng)前元素所有子節(jié)點(diǎn)中的最后一個(gè)firstElementChild lastElementChild(IE6-8不兼容)DOM的增刪改 真實(shí)項(xiàng)目中，我們偶爾會(huì)在JS中動(dòng)態(tài)創(chuàng)建一些HTML標(biāo)簽，然后把其增加到頁面中 document.createElement 在JS中動(dòng)態(tài)創(chuàng)建一個(gè)HTML標(biāo)簽 容器.appentChild(新元素) 把當(dāng)前創(chuàng)建的新元素增加到容器的末尾位置 insertBefore 容器.insertBefore(新元素，老元素) 在當(dāng)前容器中，把新創(chuàng)建的元素增加到老元素之前//真實(shí)項(xiàng)目中很多需求是通過動(dòng)態(tài)創(chuàng)建元素來完成的，其中有一個(gè)需求：解析一個(gè)URL地址每一部分的信息（包含問號(hào)傳遞的參數(shù)） 1、純字符串拆分截取 2、編寫強(qiáng)大的正則，捕獲到需要的結(jié)果 3、通過動(dòng)態(tài)創(chuàng)建一個(gè)A標(biāo)簽，利用A標(biāo)簽的一些內(nèi)置屬性來分別獲取每一部分的內(nèi)容 var link = document.createElement('a'); link.herf = 'http://www.zhufengpeixun.cn/stu/?name=zxt&age=27#teacher'; //此處地址就是我們需要解析的URL hash:存儲(chǔ)的是哈希值 '#teacher' hostname:存儲(chǔ)的是域名 'www.zhufengpeixun.cn' pathname:存儲(chǔ)的是請(qǐng)求資源的路徑名稱'/stu/' protocol:協(xié)議'http:' search:存儲(chǔ)的是問號(hào)傳遞的參數(shù)值，沒有傳遞是空字符串'' ===>'?name=zxt&age=27'function queryURLParameter(url) { var link = document.createElement('a'); link.href = url;var search = link.search, obj = {}; if(search.lenght === 0) return; search = search.substr(1).split(/&|=/g); //拆分完之后 奇數(shù)項(xiàng)是key 偶數(shù)項(xiàng)是value ["name","zxt","age","27"] for(var i = 0; i < search.length; i +=2) { var key = search[i]; value = search[i+1]; obj[key] = value; } link = null; return obj; }removeChild 容器.removeChild(元素) 在當(dāng)前容器中把某一個(gè)元素移除掉 replaceChild 容器.replaceChild(新元素,老元素) 在當(dāng)前容器中，拿新元素替換老元素 cloneNode 元素.cloneNode(false/true) 把原有的元素克隆一份一模一樣的 false:只克隆當(dāng)前元素本身 true:深度克隆，把當(dāng)前元素本身以及元素的所有后代都進(jìn)行克隆 [set/get/remove] Attribute 給當(dāng)前元素設(shè)置/獲取/移除 屬性的（一般操作的都是它的自定義屬性）box.setAttribute('myIndex',0); box.getAttribute('myIndex'); box.removeAttribute('myIndex')；使用xxx.index 和xxx.setAttribute('index',0)這兩種設(shè)置自定義屬性的區(qū)別 xxx.index:是把當(dāng)前操作的元素當(dāng)作一個(gè)普通對(duì)象，為其設(shè)置一個(gè)屬性名（和頁面中的HTML標(biāo)簽沒關(guān)系） xxx.setAttribute:把元素當(dāng)作特殊的對(duì)象來處理，設(shè)置的自定義屬性是和頁面結(jié)構(gòu)中的DOM元素映射在一起的JS中獲取的元素對(duì)象，我們可以把它理解為兩種角色： 與頁面HTML結(jié)構(gòu)無關(guān)的普通對(duì)象 與頁面HTML結(jié)構(gòu)存在映射關(guān)系的元素對(duì)象元素對(duì)象中的內(nèi)置屬性，大部門都和頁面的標(biāo)簽存在映射關(guān)系： xxx.style.backgroundColor = 'xxx' 此時(shí)不僅把JS中對(duì)象對(duì)應(yīng)的屬性值改變了，而且也會(huì)映射到頁面的HTML標(biāo)簽上(標(biāo)簽中有一個(gè)style行內(nèi)樣式、元素的樣式改變了)xxx.className='xxx' 此時(shí)不僅是把JS對(duì)象中的屬性值改了，而且頁面中的標(biāo)簽增加了class樣式類(可以看見的)元素對(duì)象的自定義屬性：xxx.index = 0 僅僅是把JS對(duì)象中增加了一個(gè)屬性名(自定義的)，和頁面中的HTML沒啥關(guān)系(在結(jié)構(gòu)上看不見) xxx.setAttribute:通過這種方式設(shè)置的自定義屬性和之前提到的內(nèi)置屬性差不多，都是和HTML結(jié)構(gòu)存在映射關(guān)系的（設(shè)置的自定義屬性可以呈現(xiàn)在結(jié)構(gòu)上）獲取當(dāng)前元素的上一個(gè)哥哥元素節(jié)點(diǎn) 首先獲取當(dāng)前元素的上一個(gè)哥哥節(jié)點(diǎn)，判斷當(dāng)前獲取的節(jié)點(diǎn)是否為元素節(jié)點(diǎn)（nodeType ===1），如果不是，基于當(dāng)前獲取的節(jié)點(diǎn)，找他的上一個(gè)哥哥節(jié)點(diǎn)。。。（找?guī)状尾恢?#xff09;一直到找到的節(jié)點(diǎn)是元素節(jié)點(diǎn)為止， 如果在查找過程中，發(fā)現(xiàn)沒有上一個(gè)哥哥節(jié)點(diǎn)了（找到頭了），則不再繼續(xù)查找 function pre(curEle) { var p = curEle.previousSibling; //p 為null 結(jié)束 p的nodeType ===1 結(jié)束 while(p && p.nodeType !==1) { p = p.previousSibling;//p: p!=null } return p; } //擴(kuò)展 next:獲取下一個(gè)弟弟元素節(jié)點(diǎn) function next(curEle) { var p = curEle.nextSibling; //p 為null 結(jié)束 p的nodeType ===1 結(jié)束 while(p && p.nodeType !==1) { p = p.nextSibling;//p: p!=null } return p; }prevAll:獲取所有的哥哥元素節(jié)點(diǎn) function prevAll(curEle) { var arr = []; var p = curEle.previousSibling; //p 為null 結(jié)束 while(p) { // 如果是元素節(jié)點(diǎn) 放到數(shù)組中 if(p.nodeType ===1) { arr.push(p); } p = p.previousSibling;//p: p!=null } return arr; }nextAll:獲取所有的弟弟元素節(jié)點(diǎn) function nextAll(curEle) { var arr = []; var p = curEle.nextSibling; //p 為null 結(jié)束 說明找到了盡頭 while(p ) { if(p.nodeType ===1) { arr.push(p); } p = p.nextSibling;//p: p!=null } return arr; } siblings:獲取所有的兄弟元素節(jié)點(diǎn) //既要往前找 又要往后找 function siblings(curEle) { var arr = []; var p = curEle.previousSibling; var n = curEle.nextSinling; while(p) { // 如果是元素節(jié)點(diǎn) 放到數(shù)組中 if(p.nodeType ===1) { arr.push(p); } p = p.previousSibling;//p: p!=null }while(n ) { if(n.nodeType ===1) { arr.push(n); } n = n.nextSibling;//p: p!=null } return arr;} index:獲取當(dāng)前元素在兄弟中的排名索引function index() { var arr = []; var index = 0; var p = curEle.previousSibling; //p 為null 結(jié)束 while(p) { // 如果是元素節(jié)點(diǎn) 放到數(shù)組中 arr.push(p); p = p.previousSibling;//p: p!=null } index = arr.length; return index;} 復(fù)制代碼

6.日期操作

Date:日期類，通過它可以對(duì)時(shí)間進(jìn)行處理 var time = new Date()//獲取當(dāng)前客戶端本機(jī)時(shí)間(當(dāng)前獲取的時(shí)間不能作為重要的參考依據(jù)) 獲取的結(jié)果是一個(gè)日期格式的對(duì)象 typeof new Date() --->'object' time.getFullYear() 獲取四位整年數(shù) time.getMonth() 獲取月（0-11 代表1-12月） time.getDate() 獲取日 time.getDay() 獲取星期（0-6 代表周日到周六） time.getHours() 獲取小時(shí) time.getMinutes() 獲取分鐘 time.getSeconds() 獲取秒 time.getMilliseconds() 獲取毫秒 time.getTime() 獲取當(dāng)前日期距離"1970-01-01 00:00:00"的毫秒差var time = new Date('2017-10-22'); 當(dāng)new Date中傳遞了一個(gè)時(shí)間格式的字符串，相當(dāng)于把這個(gè)字符串轉(zhuǎn)換為標(biāo)準(zhǔn)的時(shí)間對(duì)象格式（轉(zhuǎn)換完成后 就可以調(diào)取上面我們講的那些方法了） 時(shí)間格式的字符串 "2017-10-22"(IE下識(shí)別不了) "2017/10/22" "2017/10/22 16:15:34" 1508659621314 ===>傳遞的距離1970的那個(gè)毫秒差 （數(shù)字格式 不能是字符串）var timeBox = document.getElementById('timeBox'); function computed() { var nowTime = new Date(); var targeTime = new Date("2017/10/22 17:00:00"); var spanTime = targeTime - nowTime;//獲取兩個(gè)時(shí)間的毫秒差 //已經(jīng)到達(dá)考試的時(shí)間：此時(shí)我們可以提示開始考試 if(spanTime <=0) { timeBox.innerHTML = '開始考試'； window.clearInterval(timer); return; } //還沒有到達(dá)考試時(shí)間：在總毫秒中計(jì)算出還有多少小時(shí)、分鐘、秒 var hour = Math.floor(spanTime/(1000*60*60)); //把小時(shí)占據(jù)的毫秒去除掉，剩下的值中計(jì)算還有多少分鐘 spanTime -= hour*60*1000; var minute = Math.floor(spanTime/(1000*60)); spanTime -= minute*60*1000; var second = Math.floor(spanTime/1000);//不足十 補(bǔ)零 hour < 10 ? hour = '0'+ hour:null; minute<10?minute = '0'+ minute :null; second < 10 ?second = '0' + second :null;timeBox.innerHTML = hour + ':' + minute + ':' + second; } //以后每隔1s都重新執(zhí)行computed var timer = window.setInterval(computed,1000); 復(fù)制代碼

• 動(dòng)力: 這是我的學(xué)習(xí)筆記(來源于視頻或者查閱文檔),您能從中得到收獲和進(jìn)步,是我分享的動(dòng)力,幫助別人,自己也會(huì)更快樂
• 期望: 不喜勿噴,謝謝合作！如果涉及版權(quán)請(qǐng)及時(shí)聯(lián)系我,馬上刪除!

總結(jié)

以上是生活随笔為你收集整理的JS基础-3的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。