JavaScript??

?1.簡介?? ?

JavaScript簡介：
?? ??? ?JS是運行在瀏覽器端的一門腳本語言，一開始主要用來做瀏覽器驗證，但現(xiàn)在功能已經(jīng)不止于此。
?? ??? ?所謂腳本語言就是指，代碼不需要編譯，直接運行，并且讀入一行運行一行
?? ??? ?
?? ??? ?JavaScript目前應(yīng)用非常廣泛，例如：瀏覽器端的驗證，Ajax，客戶端等，甚至也有服務(wù)器端的JavaScript--node.js?? ??

2.編寫位置?? ???

?　　（1）網(wǎng)頁內(nèi)部
?? ??? ??? ?<script type="text/javascript">
?? ??? ??? ? alert("這是啥");
?? ??? ??? ? </script>
?? ??? ? （2）外部的.js文件

　　　　JavaScript一般單獨寫在一個.js文件中，通過以下方法來引用
?? ??? ??? ?<script type="text/javascript"? src="script.js"></script>
?? ???? （3）基本語法
?? ??? ??? ? ①注釋
?? ??? ??? ? 單行注釋 //
?? ??? ??? ? 多行注釋 /**/
?? ??? ??? ? ②變量
?? ??? ??? ? Ⅰ聲明：JS是一門弱類型語言，聲明變量時不需要指定變量的類型，只需要使用var關(guān)鍵字
?? ??? ??? ??? ?例如：var a；
?? ??? ??? ??? ??? ?
?? ??? ??? ?Ⅱ賦值：
?? ??? ??? ??? ?JS是一門動態(tài)類型的語言，可以給一個變量賦任意類型的值，同時在使用過程中可以任意修改變量
?? ??? ??? ??? ?變量的類型
?? ??? ??? ??? ?a=123;
?? ??? ??? ??? ?a="hello";
?? ??? ??? ?
?? ??? ??? ?Ⅲ聲明和賦值同時進行
?? ??? ??? ??? ?var b=123;
?? ??? ??? ??? ?var c="hello";
?? ??? ??? ??? ?var d=true;
?? ??? ??? ?
?? ??? ??? ?③函數(shù)
?? ??? ??? ??? ?在JS中函數(shù)也是一個對象，也可以將一個函數(shù)的引用賦值給一個變量
?? ??? ??? ??? ?1)聲明函數(shù)使用function關(guān)鍵字
?? ??? ??? ??? ?第一種方式：
?? ??? ??? ??? ?var sum=function(a,b){
?? ??? ??? ??? ??? ?return a+b;
?? ??? ??? ??? ?};
?? ??? ??? ??? ?第二種方式：
?? ??? ??? ??? ?function sum2(a,b,c){
?? ??? ??? ??? ??? ?return a+b+c;
?? ??? ??? ??? ?};
?? ??? ??? ??? ?sum2(2,3,4);
?? ??? ??? ??? ?
?? ??? ??? ??? ?2)函數(shù)的調(diào)用：
?? ??? ??? ??? ??? ?-函數(shù)的引用+（）;
?? ??? ??? ??? ??? ?-sum(123,234)
?? ??? ??? ??? ??? ?-sum2(123,"abc",true)
?? ??? ??? ??? ?調(diào)用函數(shù)不會檢查參數(shù)類型和個數(shù)，所以在js中不存在重載這回事

例如：

?? ??? ??? ?
?? ??? ??? ?④對象
?? ??? ??? ??? ?Ⅰ對象的創(chuàng)建
?? ??? ??? ??? ??? ?(1)var obj=new Object();
?? ??? ??? ??? ??? ?(2)var obj ={}
?? ??? ??? ?
?? ??? ??? ??? ?Ⅱ動態(tài)的為對象添加屬性
?? ??? ??? ??? ??? ?對象.屬性名=屬性值
?? ??? ??? ??? ??? ?例：obj.name="張三";
?? ??? ??? ??? ??? ??? ?obj.age=16;
?? ??? ??? ??? ??? ??? ?obj.fun=function(){
?? ??? ??? ??? ??? ??? ??? ?alert("hello");
?? ??? ??? ??? ??? ??? ?};
?? ??? ??? ??? ?Ⅲ在創(chuàng)建對象時，直接添加屬性
?? ?????

　　注意：鍵值對之間使用 “ ：”隔開。

?

3.事件

　　(1)用戶操作網(wǎng)頁或者瀏覽器所發(fā)生的交互行為稱為事件。比如：點擊按鈕，最小化窗口，修改文本框內(nèi)容等。
?? ??? (2)JS為我們定義許多瀏覽器中的事件。比如：單擊、雙擊、移動 等。
?? ??? (3)我們可以通過為事件設(shè)置一個響應(yīng)函數(shù)來對事件進行響應(yīng)。可以通過兩種方式為元素綁定響應(yīng)函數(shù)：
?? ??? ??? ?1)直接通過標(biāo)簽的屬性來設(shè)置，這種方式是結(jié)構(gòu)與行為耦合，不推薦使用
?? ??? ??? ??? ? <button οnclick="alert('hello')">按鈕</button>
?? ??? ??? ??? ? -這種方式叫做結(jié)構(gòu)與行為耦合，不推薦使用這種方式
?? ??? ??? ?2)在<script>標(biāo)簽來設(shè)置
?? ??? ??? ??? ?<button id="btn">按鈕</button>
?? ??? ??? ??? ?<script>
?? ??? ??? ??? ??? ?//獲取到按鈕的對象
?? ??? ??? ??? ??? ?var btn =document.getElementById("btn");
?? ??? ??? ??? ??? ?//為btn綁定一個單擊響應(yīng)函數(shù)
?? ??? ??? ??? ??? ?btn.οnclick=function(){
?? ??? ??? ??? ??? ??? ?alert("hello");
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?</script>
?? ??? ??? ?3)幾種鼠標(biāo)事件
?? ??? ??? ??? ?//鼠標(biāo)單擊事件
?? ??? ??? ??? ?<button id="btn" οnclick="alert('你點我干嘛')">點我</button>
?? ??? ??? ??? ?

　　　　　　鼠標(biāo)單擊按鈕事件觸發(fā)

　　　　
?? ??? ??? ??? ?//鼠標(biāo)雙擊事件
?? ??? ??? ??? ?<button id="btn" οndblclick="alert('你點我干嘛')">點我</button>
?? ??? ??? ??? ?//鼠標(biāo)移到按鈕上事件觸發(fā)
?? ??? ??? ??? ?<button id="btn" οnmοuseοver="alert('鼠標(biāo)移動上來了！')">點我</button>
?? ??? ??? ??? ?//鼠標(biāo)從按鈕上移走事件觸發(fā)
?? ??? ??? ??? ?<button id="btn" οnmοuseοut="alert('鼠標(biāo)移走！')">點我</button>
?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?

4.加載方式?

??????? (1)瀏覽器加載網(wǎng)頁代碼時是由上到下依次加載的。
?? ??? ?(2)如果我們在瀏覽器還尚未加載網(wǎng)頁中的元素，那么將無法確定，控制臺將會報錯。
?? ??? ?解決該問題有兩種方式：
?? ??? ??? ?1)將JS代碼編寫到body標(biāo)簽的下邊。但是我們習(xí)慣上將JS、CSS等代碼都編寫在head標(biāo)簽中，
?? ??? ??? ?這種形式不符合使用規(guī)則
?? ??? ??? ?2)將js代碼編寫到window.οnlοad=function(){}中，推薦使用方式
?? ??? ??? ?注意：編寫js時，上來就把window.οnlοad=function(){}寫上

?? ??? ???? 程序是一行一行執(zhí)行的，如果var btn=document.getElementById("btn1");代碼之前沒有寫window.οnlοad=function(){}

那么在執(zhí)行的時候是找不到body里面的id="btn1",因此window.οnlοad=function(){}作用就是加載完整個頁面之后再執(zhí)行里面的內(nèi)容。

　　但是如果將javascript寫在body里面，之前已經(jīng)加載完了id="btn1"，所以var btn=document.getElementById("btn1");再運行就沒有問題了。

　　注意：<button>標(biāo)簽只能寫在body里面。

5.DOM編程?

??? DOM全稱：Document Object Model?? ?

??? DOM編程是JavaScript中非常重要的一部分內(nèi)容 。??
?? ?DOM主要是通過JavaScript來控制網(wǎng)頁中的各種元素，從而達到使網(wǎng)頁可以和用戶進行動態(tài)交互的作用。
?? ?DOM的操作主要分為四部分：增、刪、改、查。
?? ?

?　（1）document對象:
?? ??? 　　?document是一個文檔節(jié)點，代表整個文檔，所有節(jié)點都是它的后代節(jié)點。
?? ??? 　　?document也是window的對象的屬性，可以直接使用。

??? （2）節(jié)點類型：
?? ?? ? ? ? ?? ① 元素節(jié)點：HTML文檔中的HTML標(biāo)簽
?? ??? ??????? ②文本節(jié)點：元素的屬性
?? ??? ? ? ? ? ③ 屬性節(jié)點：HTML標(biāo)簽中的文本內(nèi)容

　　（3）節(jié)點屬性

　　（4）元素節(jié)點的屬性：?? ??? ??? ??? ?

　　　　1.獲取元素對象.屬性名?? ??? ??? ???

?　　　　例：element.value
?? ??? ??? ??? ??? ?element.id
?? ??? ??? ??? ??? ?element.className
?? ??? ??? ??? 　 2.設(shè)置元素對象.屬性名=新的值
?? ??? ??? ??? ?例：element.value="hello"
?? ??? ??? ??? ??? ?element.id="id01"
?? ??? ??? ??? ??? ?element.className="newClass"

?? ??? ??? ?其它屬性：
?? ??? ??? ??? ?innerHTML:元素節(jié)點通過該屬性獲取和設(shè)置標(biāo)簽內(nèi)部的html代碼
?? ??? ??? ??? ?nodeValue：文本節(jié)點可以通過nodeValue屬性獲取和設(shè)置文本節(jié)點的內(nèi)容

?? ? （5）***DOM查詢
?? ??? ? 通過document對象查詢：
?? ??? ????? document.getElementById()
?? ??? ??? ?-通過id屬性獲取一個元素節(jié)點對象
?? ??? ???? document.getElementsByTagName()
?? ??? ??? ?-通過標(biāo)簽名獲取一組元素節(jié)點對象
?? ??? ???? document.getElementByName()
?? ??? ??? ?-通過name屬性獲取一組元素節(jié)點對象,一般用來獲取表單項
?? ?
?? ??? ?通過具體的元素對象查詢：
?? ??? ??? ?element.getElementsByTagName
?? ??? ??? ?-查找當(dāng)前元素節(jié)點內(nèi)指定標(biāo)簽名的子節(jié)點
?? 　　 element.childNodes
?? ??? ???? -查找當(dāng)前節(jié)點的所有子節(jié)點
?? ??? ???? element.firstChild
?? ??? ???? -查找當(dāng)前節(jié)點的第一個子節(jié)點
?? ??? ???? element.lastChild
?? ??? ???? -查找當(dāng)前節(jié)點的最后一個子節(jié)點
?? ??? ???? element.parentNode
?? ??? ???? -查找當(dāng)前節(jié)點的父節(jié)點
?? ??? ???? element.previousSibling
?? ??? ???? -查找當(dāng)前節(jié)點的前一個兄弟節(jié)點
?? ??? ???? element.nextSibling
?? ??? ???? -查找當(dāng)前節(jié)點的后一個兄弟節(jié)點
?? ?? 例： ????

注意：1.function myQuery(idStr,func){
?? ??? 　　?var btn=document.getElementById(idStr);
?? ??? ?　　btn.οnclick=func;
?? ?? ? }

這段代碼為4個查詢中共有的內(nèi)容，所以封裝成一個方法，下面直接調(diào)用就可以了，避免寫重復(fù)代碼，起到了簡化代碼的作用。

　　2.在查詢? “#city的所有子節(jié)點” 的時候，其實只有四個--北京，上海，東京，首爾；但是在用火狐瀏覽器和谷歌瀏覽器運行時會把

節(jié)點與節(jié)點之間的空格也當(dāng)作了一個節(jié)點，所有此時應(yīng)該根據(jù)元素節(jié)點的屬性，用if語句判斷一下if(liEle5[i].nodeType==1){} ，當(dāng)nodeType==1時才是元素節(jié)點。

??
?? （6）***DOM增刪改
?? ??? ??? ??? ①創(chuàng)建元素節(jié)點
?? ??? ??? ??? ?document.createElement(標(biāo)簽名)
?? ??? ??? ? ②添加子節(jié)點
?? ??? ??? ??? ?父節(jié)點.appendChild(子節(jié)點)
?? ??? ??? ? ③插入節(jié)點
?? ??? ??? ??? ?父節(jié)點.insertBefore(新節(jié)點,舊節(jié)點)
?? ??? ??? ? ④替換節(jié)點
?? ??? ??? ??? ?父節(jié)點.replaceChild(新節(jié)點,舊節(jié)點)
?? ??? ??? ? ⑤刪除節(jié)點
?? ??? ??? ??? ?父節(jié)點.removeChild(子節(jié)點)
?? ??? ??? ??? ?子節(jié)點.parentNode.removeChild(子節(jié)點) *****
?? ??? ??? ? ⑥讀寫元素內(nèi)部HTML代碼
?? ??? ??? ??? ?讀取
?? ??? ??? ??? ??? ?元素.innerHTML
?? ??? ??? ??? ?設(shè)置
?? ??? ??? ??? ???? 元素.innerHTML = 新值

需要注意點：在設(shè)置元素節(jié)點時有以下兩種方式：

　　　　1.document.getElementById("bj").innerHTML = "天津";
?? ??? ??? ?? 2.document.getElementById("bj").firstChild.nodeValue="天津";

? 請參照以上（4）元素節(jié)點的屬性中其他屬性部分。

轉(zhuǎn)載于:https://www.cnblogs.com/double-s/p/7801886.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript知识概要的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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