推薦閱讀

有趣的前端知識(shí)（一）
有趣的前端知識(shí)（二）

---

---

JavaScript（簡(jiǎn)稱(chēng)“JS”） 是一種具有函數(shù)優(yōu)先的輕量級(jí)，解釋型或即時(shí)編譯型的編程語(yǔ)言。

JS內(nèi)置對(duì)象

一切皆對(duì)象，方法即對(duì)象，可以直接作參數(shù)傳入。

1. String對(duì)象

var s="he";
var s=new String("he");
s.length;

1. Number對(duì)象

var num=123.123;
console.log(num.toFixed(2));//保留2位小數(shù)

1. Boolean對(duì)象

ture/false

1. Array對(duì)象

var a=[100,299];
var a1=["zhangsna",25,true];//js中變量無(wú)類(lèi)型，所以可以存各種類(lèi)型的數(shù)據(jù)，Object
var b=new Array();
b=["aa",22];
//追加數(shù)據(jù)
b.push("adah");
console.log(b[2]);//adah
//數(shù)組倒轉(zhuǎn)
var arr=[1,2,3];
arr.reverse();// 3 2 1
//數(shù)組排序
var c=[3,43,6,2,5];
c.sort();//輸出后 2,3,43,5,6按照字符串來(lái)排的。并不單單是按照數(shù)的大小來(lái)比的。
比較方法：js內(nèi)置的固定方法，按照字符串來(lái)比較值的大小。（字符串值轉(zhuǎn)換為Unicode的值在進(jìn)行比較）；
使用匿名方法做參數(shù)，改變排序，默認(rèn)由小到大；
c.sort(function(a-b){return a-b};);//2,3,5,6,43;

1. Math對(duì)象

無(wú)需創(chuàng)建，直接調(diào)用屬性和方法。

console.log(Math.PI);
console.log(Math.round(4.234));//取整，4
console.log(Math.round(4.577));//取整 ，5，四舍五入

1. Date對(duì)象
   處理日期和對(duì)象。

var date=new Date();（時(shí)間一般來(lái)源用戶的瀏覽器時(shí)間）var a=new Date("2022.11.23");(時(shí)間來(lái)源服務(wù)器)//轉(zhuǎn)換為本地日期或者字符串；
console.log(d.toLocaleTimeString());
console.log(s.toLocaleDateString());
//獲取時(shí)間分量
讀 ：getXXX(); 寫(xiě)：setXXX();
var r=a.getHours();
var x=a.getDate();
var  y=a.getMonth();
var day =(y+1)+"月"+x+"日";//月份從0 開(kāi)始
console.log(day);//11月23日

1. RegExp對(duì)象

正則表達(dá)式

var reg=/正則表達(dá)式/匹配模式;
var reg =/\d/g
var reg =new RegExp(正則表達(dá)式,模式);
var reg=new RegExp("\\d","g");

匹配模式
g：全局檢測(cè)字符串
i :忽略大小寫(xiě)來(lái)檢測(cè)字符串
正則表達(dá)式的方法

reg.exex(str);
//普通模式：從str中找出和reg相匹配的第一個(gè)字符串；
//全局模式：從第n次調(diào)用從str里找出和reg匹配的第n個(gè)字符串。
var str="you can ,you no ,no akn nosss";
/*普通模式，調(diào)用第一個(gè)字符串*/
console.log(reg.exec(str));
/*全局模式的，第n次調(diào)用第n個(gè)字符串*/
var reg=/no/g;
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));

判斷str中是否包含與reg匹配的字符串。
reg.test(str);
str.replace(reg,"字符串");
將str中與reg匹配的所有字符串都替換目標(biāo)。
console.log(str.replace(reg,"o"));
//字符串是不可變的，修改字符串的方法，并沒(méi)有改變?cè)址?#xff0c;而是生成了新字符串
str.match(reg)
從str中找出包含與reg匹配的字串；
console.log(str.match(reg));
str.search(reg);
從str中找出與reg匹配的第一個(gè)子串的索引；
console.log(str.search(reg));

Function對(duì)象

function 定義函數(shù)
Function 對(duì)象
js的函數(shù)沒(méi)有重載，調(diào)用函數(shù)名一樣的，無(wú)論傳入多少函數(shù)，調(diào)用同一個(gè)函數(shù)，默認(rèn)當(dāng)成一個(gè)數(shù)組對(duì)象（arguments）傳入，需要啥調(diào)用啥。沒(méi)有收到實(shí)參的參數(shù)值和undefined。

function sum(){var s=0;if(arguments.length>0){for(var i=0;i<arguments.length;i++){s+=arguments[i];     }       } return s;
}
var a=new Function ("x","y","return(x+y);");

JS外部對(duì)象

• 外部對(duì)象就是瀏覽器提供的內(nèi)部的API。
• 這些對(duì)象由瀏覽器開(kāi)發(fā)者設(shè)計(jì)并開(kāi)發(fā)。
• 這些對(duì)象分為2個(gè)部分，BOW包含了DOM
  

BOM模型

瀏覽器整體是一個(gè)對(duì)象

- window對(duì)象

window對(duì)象對(duì)應(yīng)著瀏覽器窗口本身。window對(duì)象是BOM的頂層對(duì)象（核心對(duì)象），所有的對(duì)象都是通過(guò)它延伸出來(lái)的，也可以說(shuō)為window的子對(duì)象。
window對(duì)象表示瀏覽器目前正在打開(kāi)的窗口，為全局對(duì)象,直接后代無(wú)需加window前綴，但是document對(duì)象的后代需要加上document前綴。

//彈出框
function f1(){alert("1");
}
//確認(rèn)框
function f2(){var v=confirm("nnn");console.log(v);
}
//輸入框
function f3(){var a=prompt("aaa");console.log(a);
}

定時(shí)器
周期性定時(shí)器（隔一定時(shí)間，執(zhí)行，反復(fù)執(zhí)行，達(dá)到停止條件停止）
function f4(){var a=3;//啟動(dòng)定時(shí)器,返回定時(shí)器id，用來(lái)停止定時(shí)器var id=setInterval(function (){console.log(a--);if (!a){clearInterval(id);console.log("heihei");}},1000)//1s//啟動(dòng)定時(shí)器相當(dāng)于啟動(dòng)了一個(gè)支線程，當(dāng)前方法f4 相當(dāng)于主線程，2個(gè)線程并發(fā)執(zhí)行，不互相等待，因此主線程在啟動(dòng)完該線程立刻向下執(zhí)行，而支線程卻需要在1s后執(zhí)行。console.log("afa");
}
一次性計(jì)時(shí)器（推遲一定時(shí)間執(zhí)行一次函數(shù)，執(zhí)行后自動(dòng)停止，或者手動(dòng)停止。）
var id;
function  f5(){if(id){return;    }//啟動(dòng)定時(shí)器,若想在未執(zhí)行定時(shí)器之前停止，需要使用id。id=setTimeout(function (){console.log("a");},3000);//推遲3s
}
function f6(){//若定時(shí)器已經(jīng)執(zhí)行，則取消無(wú)效，若定時(shí)器還未執(zhí)行，則可以取消；if(id){clearTimeout(id);id=null;}}

- location對(duì)象

location對(duì)象，提供了與當(dāng)前窗口中加載的文檔有關(guān)的信息，還能提供一定的導(dǎo)航的功能。

function b(){var b=confirm("likai？");if (b){location.href="http://www.baidu.com";}
}//跳轉(zhuǎn)至百度。
function a(){location.reload();
}//刷新

history對(duì)象

function d(){history.forward();//前進(jìn)//history.back();后退。
}

screen對(duì)象

function c(){console.log(screen.width);console.log(screen.height);console.log(screen.availHeight);console.log(screen.availWidth);
}

navigator對(duì)象

function f(){console.log(navigator.userAgent);
}

DOM（文檔對(duì)象模型）

DOM樹(shù)
HTML是根節(jié)點(diǎn)，,<>


瀏覽器獲取網(wǎng)頁(yè)后將其解析為對(duì)象，對(duì)網(wǎng)頁(yè)進(jìn)行讀寫(xiě)操作，只需讀寫(xiě)對(duì)象即可，DOM樹(shù)，樹(shù)結(jié)構(gòu)中每級(jí)對(duì)象為節(jié)點(diǎn)。節(jié)點(diǎn)有著不同的分類(lèi)。

DOM的方法（對(duì)于節(jié)點(diǎn)的操作）

讀寫(xiě)節(jié)點(diǎn)名稱(chēng)。類(lèi)型，不能進(jìn)行修改

//讀寫(xiě)節(jié)點(diǎn)名稱(chēng)/類(lèi)型，不能更改
window.onload = function(){
var p=document.getElementById('a');
console.log(p.nodeName);
console.log(p.nodeType);
}
<p id="a"><b>節(jié)點(diǎn)</b>名稱(chēng)</p>

讀寫(xiě)節(jié)點(diǎn)內(nèi)容

//讀寫(xiě)節(jié)點(diǎn)的內(nèi)容（雙標(biāo)簽中間的文本為內(nèi)容<a>heihei</a>）
/*innerHTML(會(huì)將子標(biāo)簽都輸出來(lái))
//innerText（忽略子標(biāo)簽,不把標(biāo)簽當(dāng)標(biāo)簽來(lái)用）*/
window.onload = function(){
console.log(p.innerHTML);
p.innerHTML="<b>讀取</b>節(jié)點(diǎn)";
var b=document.getElementById('b');
console.log(b.innerText);
b.innerText="<u>讀寫(xiě)</u>節(jié)點(diǎn)";
}
<p id="a"><b>節(jié)點(diǎn)</b>名稱(chēng)</p>
<p id="b"><b>hei</b>jie</p>

讀寫(xiě)節(jié)點(diǎn)的值

//讀寫(xiě)節(jié)點(diǎn)的值，表單控件中的數(shù)據(jù)為值，只有如下表單控件才有值，input(9個(gè))，select，textarea
window.onload = function(){var b1=document.getElementById("b1");console.log(b1.value);b1.value="c";}<p><input type="button" value="值" id="b1">
</p>

讀寫(xiě)節(jié)點(diǎn)的屬性

• 通過(guò)方法讀寫(xiě)屬性

//通過(guò)方法讀寫(xiě)屬性
window.onload = function(){var img=document.getElementById("test");console.log(img.getAttribute("src"));//屬性路徑img.setAttribute("src","../images/3.png");//改屬性路徑img.removeAttribute("src"）;//刪除
}
<p><img src="../images/4.png" id="test"></p>

• 通過(guò)標(biāo)準(zhǔn)屬性名讀寫(xiě)屬性

class,id,style

window.onload = function(){
var h= document.getElementById("h");
console.log(h.style.color);
h.style.color="blue";
}
<p id=“h” style="color:blue;">標(biāo)準(zhǔn)屬性</p>

• 通過(guò)不標(biāo)準(zhǔn)屬性名讀寫(xiě)屬性（高版本瀏覽器可兼容）。
  a.herf img.color.

查詢(xún)節(jié)點(diǎn)

1. 根據(jù)id查詢(xún)節(jié)點(diǎn)

var input=document.getElementById("num");

2. 根據(jù)標(biāo)簽查詢(xún)節(jié)點(diǎn)

var imgs=document.getElementsByTagName();//獲取所有圖片

3. 根據(jù)層次查詢(xún)節(jié)點(diǎn)

var c=document.getElementById("c");
查詢(xún)父親
var ul=c.parentNode;
console.log(ul);
查詢(xún)孩子(包含空格)
console.log(ul.childNodes);
查詢(xún)孩子（不包含空格）var imgs=ul.getElementsByTagName("img");查詢(xún)兄弟//節(jié)點(diǎn).父親.孩子[i]
var b=c.parentNode.getElementsByTagName("li")[2];

根據(jù)name查詢(xún)節(jié)點(diǎn)
一般查詢(xún)用于查詢(xún)一組單選或者多選

var name=document.getElementsByName("sex");
console.log(name);

增加節(jié)點(diǎn)

//創(chuàng)建節(jié)點(diǎn)
var li=document.createElement("li");
//設(shè)置ul的內(nèi)容
li.innerHTML="G";
//將li 追加到ul下，在網(wǎng)頁(yè)中顯示出來(lái)
var ul=document.getElementById("city");
ul.appendChild(li);

可以直接在控制臺(tái)寫(xiě)入，也可以寫(xiě)入一個(gè)選擇器，調(diào)用js函數(shù)。

插入節(jié)點(diǎn)

//創(chuàng)建節(jié)點(diǎn)，并寫(xiě)入內(nèi)容
var li=document.createElement("li");
li.innerHTML="T";
//獲取該節(jié)點(diǎn)的父親和弟弟
var ul=document.getElementById("a");
var c=document.getElementById("c");
//把他插入到父親的弟弟前
ul.insertBefore(li,c);

刪除節(jié)點(diǎn)

//獲取要?jiǎng)h節(jié)點(diǎn)的父親
var ul=document.getElementById("a");
//獲取要?jiǎng)h除的元素
var c=document.getElementById("c");
//刪除元素
ul.removeChild(c);