- 循環(huán)
- for循環(huán)：循環(huán)次數(shù)確定
- 選項(xiàng)卡
- 隨機(jī)驗(yàn)證碼
- 去重
- 獲取當(dāng)前元素下面的所有子元素
- 隔行換色的九九乘法表
- for..in循環(huán)：遍歷普通對(duì)象的屬性；
- while循環(huán)：循環(huán)次數(shù)不確定
- 隨機(jī)驗(yàn)證碼
- 封裝上一個(gè)哥哥元素
- do...while循環(huán)，基本不用
- 跟循環(huán)有關(guān)的：break, continue;
- break:阻斷循環(huán)執(zhí)行封断；
for(var i=0; i<=7; i++){
alert(i);
if(i==3){
break;//當(dāng)執(zhí)行此次循環(huán)時(shí)仑扑，阻斷循環(huán)執(zhí)行辰妙，即i=4以后的都不執(zhí)行；
}
}
- continue:只跳過該次循環(huán)，其他循環(huán)正常運(yùn)行秫筏；
for(var i=0; i<=7; i++){
if(i==3){
continue;//當(dāng)i=3時(shí)，執(zhí)行continue挎挖，此次循環(huán)停止这敬，直接執(zhí)行i=4的循環(huán)；后面的語句不再執(zhí)行蕉朵；
}
alert(i);
}
- 注意點(diǎn)：
- 函數(shù)中崔涂，阻斷程序執(zhí)行，用的是return始衅；
- 循環(huán)中冷蚂，阻斷循環(huán)執(zhí)行，用的是break汛闸；
- 循環(huán)中蝙茶，阻斷該次循環(huán)，其他循環(huán)繼續(xù)诸老，用的是continue;
- 判斷
var n=3;
seitch(n){
case 1:
alert(1);
break;
case 2:
alert(2);
break;
case 3:
alert(3);
break;
default:
alert(4);
break;
}
- 運(yùn)算符
- "=="的隱式數(shù)據(jù)類型比較
- 對(duì)象==對(duì)象 對(duì)象比較的是地址，則[]==[] false;
- 數(shù)字與對(duì)象：0==[]:為真浙垫；[]轉(zhuǎn)換為"",再轉(zhuǎn)換為0刨仑；
- 數(shù)字與布爾值： 0==![]: 為真；當(dāng)使用夹姥！時(shí)杉武，優(yōu)先進(jìn)行判斷，[]為真辙售，![]為假轻抱，所以0==![]為真；
- null==undefined;
- NaN跟任何值都不相等圾亏，包括它自己十拣；
- 瀏覽器信息
- 獲取方法：window.navigator.userAgent
- 判斷：通過查找信息中的特定字符串來判斷瀏覽器種類，用indexOf()方法志鹃；
- Chrome:谷歌瀏覽器夭问；信息為：
Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36
- 判斷條件：if(u_agent.indexOf("Chrome")>-1);
- Firefox:火狐瀏覽器；信息為：
Mozilla/5.0 (Windows NT 6.2; WOW64; rv:22.0) Gecko/20100101 Firefox/22.0
- 判斷條件：if(u_agent.indexOf("Firefox")>-1);
- IE8:IE瀏覽器曹铃；
- 判斷條件：if(u_agent.indexOf("MSIE 8.0")>-1);
- DOM節(jié)點(diǎn)關(guān)系
- elementnode.childNodes: 元素節(jié)點(diǎn)下的所有子節(jié)點(diǎn)缰趋，包括元素節(jié)點(diǎn)，空白節(jié)點(diǎn)陕见，注釋節(jié)點(diǎn)等秘血；
- elementnode.children: 元素節(jié)點(diǎn)下的所有元素子節(jié)點(diǎn)，只包括元素節(jié)點(diǎn)评甜；
- 兼容性問題：在IE8瀏覽器下灰粮，會(huì)包含注釋節(jié)點(diǎn)，不兼容忍坷，若使用此方法粘舟，必須保證在所有子節(jié)點(diǎn)中不能包含注釋熔脂；
- 實(shí)例：目的獲得一個(gè)元素節(jié)點(diǎn)下的所有元素子節(jié)點(diǎn)，首先判斷瀏覽器種類柑肴，如果不是IE8瀏覽器時(shí)霞揉，使用children，如果是晰骑，則遍歷所有子節(jié)點(diǎn)适秩，判斷其節(jié)點(diǎn)類型來排除掉除了元素節(jié)點(diǎn)以外，其他的節(jié)點(diǎn)硕舆；
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var oul=document.getElementsByTagName("ul")[0];
//children屬性秽荞，所有的瀏覽器都支持，只有在IE8瀏覽器下會(huì)把注釋算在子元素節(jié)點(diǎn)中岗宣；所以要先判斷瀏覽器種類蚂会，看是否可用；
var u_agent=window.navigator.userAgent;
function getchildren(eleobj) {
if(u_agent.indexOf("MSIE 8.0")==-1){
return eleobj.children;
}
var achild=eleobj.childNodes;
var ary1=[];
for(var i=0; i<achild.length; i++){
if(achild[i].nodeType==1){
ary1.push(achild[i]);
}
//if條件語句可用三目形式： achild[i].nodeType==1?ary1.push(achild[i]):null;
}
return ary1;
}
var achilds=getchildren(oul);
console.log(achilds);
</script>
</body>
- nodeObject.previousSibling返回給定子節(jié)點(diǎn)的上一個(gè)哥哥子節(jié)點(diǎn)(包括空白節(jié)點(diǎn)耗式，注釋節(jié)點(diǎn)等)胁住； 若不存在,則返回null;
- nodeObject.previousElementSibling: 返回給定子節(jié)點(diǎn)的上一個(gè)元素子節(jié)點(diǎn)，兼容性不好刊咳，IE瀏覽器不支持彪见；
- 實(shí)例：1）封裝一個(gè)函數(shù)，獲取當(dāng)前元素上一個(gè)哥哥元素娱挨；2）獲取當(dāng)前元素所有的哥哥元素組成的數(shù)組集合余指；
<body>
<div class="div-1">內(nèi)容1</div>
<div class="div-2">內(nèi)容2</div>
<div class="div-3">內(nèi)容3</div>
<div class="div-4">內(nèi)容4</div>
<div class="div-5">內(nèi)容5</div>
<script>
var aDiv=document.getElementsByTagName("div");
//封裝一個(gè)，獲取當(dāng)前元素上一個(gè)哥哥元素的函數(shù)跷坝；
function preEle(curEle) {
if(curEle.previousElementSibling){
return curEle.previousElementSibling;
}
var pre=curEle.previousSibling;
while(pre && pre.nodeType!==1){//判斷pre是否存在酵镜，不存在即為null，為false柴钻；跳出循環(huán)淮韭；
pre=pre.previousSibling;
}
return pre;
}
//獲取當(dāng)前元素所有的哥哥元素
//思路：實(shí)參-當(dāng)前元素；返回值贴届，所有哥哥元素節(jié)點(diǎn)組成的數(shù)組集合靠粪；
var curelement=aDiv[3];
function allpre(curnet) {
var allpres=[];
while(preEle(curnet)){//判斷條件：curnet形參當(dāng)前元素上一個(gè)哥哥元素是否存在，不存在則返回null毫蚓，為假占键，循環(huán)停止；
allpres.unshift(preEle(curnet));
//用push會(huì)使元素倒著放進(jìn)數(shù)組中元潘；用unshift是元素正序放進(jìn)數(shù)組中畔乙；
curnet=preEle(curnet);//進(jìn)行重新賦值，然后接著判斷翩概；
}
return allpres;
}
var pe=allpre(curelement);
console.log(pe);
</script>
</body>
- DOM動(dòng)態(tài)操作
- 創(chuàng)建元素節(jié)點(diǎn)：createElement()
- 語法：document.createElement("標(biāo)簽名");
- 創(chuàng)建文本節(jié)點(diǎn)：createTextNode()
- 語法：document.createTextNode("文本內(nèi)容");
- 與innerHTML的區(qū)別：
- createTextNode()方法添加的文本啸澡，為純文本袖订，不帶格式，html標(biāo)簽會(huì)被看作文本處理嗅虏；
- innerHTML賦值方法，會(huì)保留文本的格式上沐，會(huì)保留html標(biāo)簽皮服，會(huì)起作用；
- 在末尾附加節(jié)點(diǎn)：appendChild()：在父級(jí)節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)后面添加一個(gè)新的子節(jié)點(diǎn)参咙；通常用于給新建元素節(jié)點(diǎn)插入文本節(jié)點(diǎn)龄广；
- 語法：parentnode.appendChild(newnode);
- 在指定節(jié)點(diǎn)前面插入節(jié)點(diǎn)：insertBefore()
- 語法：parentnode.insertBefore(newnode,node1);即：在父級(jí)元素下的node1節(jié)點(diǎn)前插入newnode節(jié)點(diǎn)；
- 刪除節(jié)點(diǎn)：removeChild():刪除父級(jí)元素下的子節(jié)點(diǎn)蕴侧；
- 語法：parentnode.removeChild(node);即：在父級(jí)元素下刪除node子節(jié)點(diǎn)择同；
- 注意：在進(jìn)行removeChild()方法刪除的子節(jié)點(diǎn)，雖不在DOM樹中净宵，但還存在內(nèi)存中敲才，想要徹底刪除此節(jié)點(diǎn)，給其賦值為null;
- 替換元素節(jié)點(diǎn)：replaceChild()
- 語法：parentnode.replaceChild(newnode,oldnode)择葡；即：將某元素下的oldnode節(jié)點(diǎn)替換成newnode;
- 注意：當(dāng)oldnode節(jié)點(diǎn)被替換后紧武，所有與之相關(guān)的屬性及內(nèi)容都被移出；
<script>
//步驟：先創(chuàng)建后插入敏储；
var odiv=document.createElement("div");//創(chuàng)建新的元素節(jié)點(diǎn)
var odivtext=document.createTextNode("美好的一天阻星，堅(jiān)持就會(huì)勝利，你的努力不會(huì)白費(fèi)");//創(chuàng)建新的文本節(jié)點(diǎn)已添；
odiv.appendChild(odivtext);//將文本節(jié)點(diǎn)插入到odiv元素節(jié)點(diǎn)的最后一位妥箕；
var obody=document.body;//獲得body元素節(jié)點(diǎn)的方法；
obody.appendChild(odiv);//將odiv插入到body中更舞；
</script>
- 獲得body元素節(jié)點(diǎn)方法：document.body;
- 獲得node1節(jié)點(diǎn)的父級(jí)節(jié)點(diǎn)的方法：node1.parentnode;
- 克隆節(jié)點(diǎn)：cloneNode()：原節(jié)點(diǎn)中的屬性名及屬性值畦幢，全部復(fù)制；
- 語法：node1.cloneNode(參數(shù))
- node1為需要克隆的節(jié)點(diǎn)疏哗；
- 參數(shù)分為false和true;其中false為只克隆表層呛讲，不克隆里面內(nèi)容；true為深度克隆返奉，即內(nèi)部內(nèi)容也克卤锤椤；
<body>
<div class="mass" id="div1">美好的一天</div>
<script>
//獲取元素節(jié)點(diǎn)odiv芽偏；
var odiv=document.getElementById("div1");
//克隆元素節(jié)點(diǎn)
var odiv2=odiv.cloneNode();//只克隆表層雷逆，不克隆里面內(nèi)容；
var odiv3=odiv.cloneNode(false);//只克隆表層污尉，不克隆里面內(nèi)容膀哲；
var odiv4=odiv.cloneNode(true);//深度克隆往产，即內(nèi)部內(nèi)容也克隆某宪；
document.body.appendChild(odiv2);
document.body.appendChild(odiv3);
document.body.appendChild(odiv4);
</script>
</body>
- 屬性操作
- "odiv.屬性名"：獲得odiv元素的屬性值仿村，或設(shè)置屬性值；當(dāng)屬性名為變量時(shí)，不能用此方式；
- odiv["屬性名"]:獲得odiv元素的屬性值漓雅，或設(shè)置屬性值；當(dāng)屬性名為變量時(shí)畏鼓，不加雙引號(hào)；
- attribute():
- elementNode.getAttribute("屬性名"):獲取元素節(jié)點(diǎn)屬性名的屬性值壶谒；
- elementNode.setAttribute("屬性名","屬性值"):設(shè)置或修改元素節(jié)點(diǎn)屬性名的屬性值云矫；
- elementNode.removeAttribute("屬性名"):刪除元素節(jié)點(diǎn)上的屬性；
- "."設(shè)置自定義屬性與attribute()方法設(shè)置的區(qū)別：
- 1）通過點(diǎn)來設(shè)置自定義屬性汗菜，在html標(biāo)簽中看不到让禀，但是通過setAttribute()設(shè)置的屬性可以看到；
- 2）通過點(diǎn)獲取元素身上已經(jīng)定義好的自定義屬性呵俏，不能拿到堆缘，但是通過getAttribute()可以獲取到屬性值；
<body>
<div id="div1" class="div-dd" meihao="123">美好的</div>
<script>
var odiv=document.getElementById("div1");
alert(odiv.meihao);//不能獲取屬性值普碎，返回的是undefined;
alert(odiv.getAttribute("meihao"));//可以獲取屬性值;
</script>
</body>
- 注意：千萬不要混搭吼肥；即：通過點(diǎn)設(shè)置的自定義屬性，不要用getAttribute()方法來獲嚷槌怠缀皱；通過setAttribute()方法設(shè)置的屬性，不能用點(diǎn)來獲榷啤斗；
<body>
<div id="div1" class="mass">美好的一天</div>
<script>
var odiv=document.getElementById("div1");
//第一種情況，用自定義屬性添加屬性赁咙，用getAttribute()不能獲取到屬性值钮莲；
odiv.index=12;
alert(odiv.index);//能拿到；
alert(odiv.getAttribute("index"));//不能拿到彼水，返回的值為null;
//第二種情況崔拥，用setAttribute()添加的屬性，用"."也獲取不到屬性值凤覆；
odiv.setAttribute("index",123);
alert(odiv.index);//不能拿到返回的值為undefined;
alert(odiv.getAttribute("index"));//能拿到链瓦；
</script>
</body>
- innerHTML屬性：獲取或設(shè)置元素節(jié)點(diǎn)的文本內(nèi)容
- 語法：elementnode.innerHTML="內(nèi)容";其中內(nèi)容為帶格式添加，標(biāo)簽會(huì)起作用；
- 改變元素節(jié)點(diǎn)的CSS樣式：
- 語法：elementnode.style.property=new style;
- 例：
- 設(shè)置字體顏色：mycon.style.color="red";
- 設(shè)置字體：mycon.style.fontFamily="宋體";
- 設(shè)置字體大写雀：mycon.style.fontSize="10px";
- 作用：用于設(shè)置或修改單一的樣式渤刃；
- 設(shè)置顯示和隱藏
- 語法：elementnode.style.display="value";如：mycon.style.display="block/none";
- 設(shè)置或獲得元素節(jié)點(diǎn)的class名
- 語法：elementnode.className="類選擇器名";
- 作用：可以通過修改class名，來改變元素的所有樣式類型贴膘；
- 打印
- 打印對(duì)象身上的屬性和方法：console.dir(對(duì)象)卖子；
- 數(shù)據(jù)類型檢測
- typeof 用于基本數(shù)據(jù)類型檢測；
- obj1 instanceOf Object 前面的對(duì)象是否屬于后面的類（類首字母大寫）
- obj.constructor 可以拿到所屬的構(gòu)造函數(shù)刑峡；
- Object.prototype.toString.call(arg) 打印arg類的詳細(xì)信息揪胃；
- NaN出現(xiàn)的情況：
- Number()數(shù)據(jù)類型轉(zhuǎn)換失敗
- 無效運(yùn)算的時(shí)候；如：null+undefined undefined+undefined;
- undefined出現(xiàn)的情況：
- 函數(shù)定義了形參氛琢，但沒有賦值實(shí)參，獲得的形參值為undefined;
- 函數(shù)沒有寫return随闪，或是寫了return阳似，但是未賦值；函數(shù)獲得的值為undefined;
- 當(dāng)一個(gè)對(duì)象上的屬性名不存在的時(shí)候铐伴，不會(huì)報(bào)錯(cuò)撮奏，會(huì)返回undefined;
<script>
//1.函數(shù)添加了形參但是未設(shè)置實(shí)參，得到的形參值為undefined;
function fn(a) {
if(a==null){//a的值為undefined;undefined==null;則彈出true;
alert(true);
}else{
alert(false);
}
}
var res=fn();
//2.函數(shù)定義完当宴，沒有添加return,或添加return后未賦值畜吊，函數(shù)返回值為undefined；
function fn(a) {
if(a==null){//a的值為undefined;undefined==null;則彈出true;
alert(true);
}else{
alert(false);
}
return ;//添加return后户矢，沒有賦值玲献，函數(shù)也沒有返回值；
}
var res=fn();//res為undefined;
console.log(res);
</script>
- 嚴(yán)格轉(zhuǎn)換與非嚴(yán)格轉(zhuǎn)換
- 嚴(yán)格轉(zhuǎn)換Number();轉(zhuǎn)換失敗為NaN
- 在Switch()中梯浪，判斷使用嚴(yán)格比較"==="
- Number(null)為0捌年；其中null+10的值為10；但是null!=0;即alert(null==0)挂洛，彈出的結(jié)果為false;
- Number(undefined)為NaN;
- 算術(shù)運(yùn)算中的使用
- 加號(hào)"+"：1）字符串拼接（只要不是數(shù)字間相加礼预，其余的全部拼接）；2）加法運(yùn)算:全部是數(shù)字之間的加法虏劲；3）null+10的值為10托酸；
- 減號(hào)"-",乘號(hào)"*",除號(hào)"/",取余"%":全部進(jìn)行數(shù)學(xué)運(yùn)算，會(huì)默認(rèn)進(jìn)行數(shù)據(jù)轉(zhuǎn)換（按照嚴(yán)格轉(zhuǎn)換Number());
- 比較：null參與進(jìn)行算術(shù)運(yùn)算時(shí)柒巫，會(huì)被嚴(yán)格轉(zhuǎn)換為0励堡；undefined參與算術(shù)運(yùn)算時(shí)，會(huì)被嚴(yán)格轉(zhuǎn)換成NaN吻育，結(jié)果為NaN;
- 例：("123px"+3)=123px3念秧；("123px"*-/%3)=NaN; (null+10)=10;(null-10)=-10;(undefined+-x/%10)=NaN;0/0=NaN;
- false轉(zhuǎn)換為0；true轉(zhuǎn)換為1布疼；
- []轉(zhuǎn)換為0摊趾；
- isNaN(參數(shù)):驗(yàn)證參數(shù)是否為非有效數(shù)字NaN币狠，若為NaN則返回true;若不為NaN則返回false;
- 如果isNaN函數(shù)的參數(shù)不是Number類型， isNaN函數(shù)會(huì)首先嘗試將這個(gè)參數(shù)嚴(yán)格轉(zhuǎn)換為數(shù)值砾层，然后才會(huì)對(duì)轉(zhuǎn)換后的結(jié)果是否是NaN進(jìn)行判斷漩绵。
isNaN(NaN); // true
isNaN(undefined); // true
isNaN({}); // true
isNaN(true); // false
isNaN(null); // false
isNaN(37); // false
// strings
isNaN("37"); // false: 可以被轉(zhuǎn)換成數(shù)值37
isNaN("37.37"); // false: 可以被轉(zhuǎn)換成數(shù)值37.37
isNaN("37,5"); // true
isNaN('123ABC'); // true: parseInt("123ABC")的結(jié)果是 123, 但是Number("123ABC")結(jié)果是 NaN
isNaN(""); // false: 空字符串被轉(zhuǎn)換成0
isNaN(" "); // false: 包含空格的字符串被轉(zhuǎn)換成0
// dates
isNaN(new Date()); // false
isNaN(new Date().toString()); // true
isNaN("blabla") // true: "blabla"不能轉(zhuǎn)換成數(shù)值
// 轉(zhuǎn)換成數(shù)值失敗， 返回NaN
- 非嚴(yán)格轉(zhuǎn)換：parseInt():轉(zhuǎn)化為整數(shù)肛炮；parseFloat():保留小數(shù)轉(zhuǎn)化止吐；
- 其他數(shù)據(jù)類型轉(zhuǎn)為布爾數(shù)據(jù)類型
- Boolean()
- 假："",0,NaN,null,undefined,false
- 真：除了假都是真；
- if(一個(gè)值) 會(huì)轉(zhuǎn)成布爾侨糟；
- if(表達(dá)式/比較) 會(huì)默認(rèn)轉(zhuǎn)成布爾碍扔；
- 其他數(shù)據(jù)類型轉(zhuǎn)成字符串?dāng)?shù)據(jù)類型
- 對(duì)象轉(zhuǎn)字符串：toString()；
- 數(shù)字轉(zhuǎn)字符串：""+數(shù)字秕重；用在時(shí)鐘中的0變?yōu)?0不同；
- 函數(shù)自帶的參數(shù)機(jī)制：arguments;
- 當(dāng)函數(shù)中實(shí)參的個(gè)數(shù)不確定，獲取所有的實(shí)參值溶耘，用arguments;
- arguments為類數(shù)組二拐，不能使用數(shù)組的方法；
- arguments的屬性：
- arguments.callee():獲取函數(shù)本身凳兵；
- arguments.length():類數(shù)組長度百新；
- 實(shí)例：
<script>
//針對(duì)函數(shù)實(shí)參個(gè)數(shù)不確定的函數(shù)，利用arguments來獲取所有的實(shí)參值
//通過遍歷arguments類數(shù)組庐扫，將所有的數(shù)字求和饭望；
function fn(){
var sum=0;
for(var i=0; i<arguments.length; i++){
if(!isNaN(arguments[i])){//判斷條件中isNaN(參數(shù))，若參數(shù)不是NaN,則將參數(shù)強(qiáng)制進(jìn)行Number轉(zhuǎn)換聚蝶，然后再判斷是否為NaN;
sum+=Number(arguments[i]);
}
}
return sum;
}
var res=fn(1,2,3,4,"12","13px");
console.log(res);
</script>
- 類數(shù)組包含兩種：
- htmlCollection 元素集合：tagName className name ...
- arguments類數(shù)組
- 所有的類數(shù)組杰妓，都不能使用數(shù)組的方法；
- 閉包思想：在函數(shù)調(diào)用時(shí)碘勉，會(huì)形成一個(gè)私有作用域巷挥，保護(hù)里面的變量不受外界的干擾，函數(shù)的這種保護(hù)機(jī)制验靡，叫做閉包倍宾；
- 選項(xiàng)卡中的使用：在for循環(huán)中，添加點(diǎn)擊事件胜嗓，i值無法保存
- 通過閉包函數(shù)高职，將i值保存在自己的私有作用域中；
- 設(shè)置自定義屬性：將i值保存在自定義屬性中辞州；
- 用點(diǎn)設(shè)置怔锌，在標(biāo)簽中，無法看到，但必須用點(diǎn)獲劝Ｔ涝涤；
- 用setAttribute()設(shè)置，在標(biāo)簽中會(huì)看到岛杀，但必須用getAttribute獲壤；用點(diǎn)獲取不到类嗤；
- 普通對(duì)象：
- 當(dāng)定義普通對(duì)象時(shí)糊肠，亂序定義，但對(duì)象會(huì)重新排序遗锣，純數(shù)字屬性名以升序的形式排在前面货裹，非純數(shù)字屬性名按照定義順序排在后面；
var obj={
name:"guobin",
age:18,
sex:"nan",
14:34,
13:36,
15:25,
};
//當(dāng)定義普通對(duì)象時(shí)精偿，亂序定義泪酱，但是當(dāng)使用時(shí)，對(duì)象會(huì)重新排序还最，純數(shù)字屬性名以升序的形式排在前面，非純數(shù)字屬性名按照定義順序排在后面毡惜；即定義對(duì)象后為obj={13: 36, 14: 34, 15: 25, name: "guobin", age: 18, sex: "nan"};
- 函數(shù)類型
