javascript
JavaScript知识概要
JavaScript??
?1.簡(jiǎn)介?? ?
JavaScript簡(jiǎn)介：
?? ??? ?JS是運(yùn)行在瀏覽器端的一門腳本語言，一開始主要用來做瀏覽器驗(yàn)證，但現(xiàn)在功能已經(jīng)不止于此。
?? ??? ?所謂腳本語言就是指，代碼不需要編譯，直接運(yùn)行，并且讀入一行運(yùn)行一行
?? ??? ?
?? ??? ?JavaScript目前應(yīng)用非常廣泛，例如：瀏覽器端的驗(yàn)證，Ajax，客戶端等，甚至也有服務(wù)器端的JavaScript--node.js?? ??
2.編寫位置?? ???
? （1）網(wǎng)頁內(nèi)部
?? ??? ??? ?<script type="text/javascript">
?? ??? ??? ? alert("這是啥");
?? ??? ??? ? </script>
?? ??? ? （2）外部的.js文件
JavaScript一般單獨(dú)寫在一個(gè).js文件中，通過以下方法來引用
?? ??? ??? ?<script type="text/javascript"? src="script.js"></script>
?? ???? （3）基本語法
?? ??? ??? ? ①注釋
?? ??? ??? ? 單行注釋 //
?? ??? ??? ? 多行注釋 /**/
?? ??? ??? ? ②變量
?? ??? ??? ? Ⅰ聲明：JS是一門弱類型語言，聲明變量時(shí)不需要指定變量的類型，只需要使用var關(guān)鍵字
?? ??? ??? ??? ?例如：var a；
?? ??? ??? ??? ??? ?
?? ??? ??? ?Ⅱ賦值：
?? ??? ??? ??? ?JS是一門動(dòng)態(tài)類型的語言，可以給一個(gè)變量賦任意類型的值，同時(shí)在使用過程中可以任意修改變量
?? ??? ??? ??? ?變量的類型
?? ??? ??? ??? ?a=123;
?? ??? ??? ??? ?a="hello";
?? ??? ??? ?
?? ??? ??? ?Ⅲ聲明和賦值同時(shí)進(jìn)行
?? ??? ??? ??? ?var b=123;
?? ??? ??? ??? ?var c="hello";
?? ??? ??? ??? ?var d=true;
?? ??? ??? ?
?? ??? ??? ?③函數(shù)
?? ??? ??? ??? ?在JS中函數(shù)也是一個(gè)對(duì)象，也可以將一個(gè)函數(shù)的引用賦值給一個(gè)變量
?? ??? ??? ??? ?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ù)不會(huì)檢查參數(shù)類型和個(gè)數(shù)，所以在js中不存在重載這回事
例如：
?? ??? ??? ?
?? ??? ??? ?④對(duì)象
?? ??? ??? ??? ?Ⅰ對(duì)象的創(chuàng)建
?? ??? ??? ??? ??? ?(1)var obj=new Object();
?? ??? ??? ??? ??? ?(2)var obj ={}
?? ??? ??? ?
?? ??? ??? ??? ?Ⅱ動(dòng)態(tài)的為對(duì)象添加屬性
?? ??? ??? ??? ??? ?對(duì)象.屬性名=屬性值
?? ??? ??? ??? ??? ?例：obj.name="張三";
?? ??? ??? ??? ??? ??? ?obj.age=16;
?? ??? ??? ??? ??? ??? ?obj.fun=function(){
?? ??? ??? ??? ??? ??? ??? ?alert("hello");
?? ??? ??? ??? ??? ??? ?};
?? ??? ??? ??? ?Ⅲ在創(chuàng)建對(duì)象時(shí)，直接添加屬性
?? ?????
注意：鍵值對(duì)之間使用 “ ：”隔開。
?
3.事件
(1)用戶操作網(wǎng)頁或者瀏覽器所發(fā)生的交互行為稱為事件。比如：點(diǎn)擊按鈕，最小化窗口，修改文本框內(nèi)容等。
?? ??? (2)JS為我們定義許多瀏覽器中的事件。比如：單擊、雙擊、移動(dòng) 等。
?? ??? (3)我們可以通過為事件設(shè)置一個(gè)響應(yīng)函數(shù)來對(duì)事件進(jìn)行響應(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>
?? ??? ??? ??? ??? ?//獲取到按鈕的對(duì)象
?? ??? ??? ??? ??? ?var btn =document.getElementById("btn");
?? ??? ??? ??? ??? ?//為btn綁定一個(gè)單擊響應(yīng)函數(shù)
?? ??? ??? ??? ??? ?btn.οnclick=function(){
?? ??? ??? ??? ??? ??? ?alert("hello");
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?</script>
?? ??? ??? ?3)幾種鼠標(biāo)事件
?? ??? ??? ??? ?//鼠標(biāo)單擊事件
?? ??? ??? ??? ?<button id="btn" οnclick="alert('你點(diǎn)我干嘛')">點(diǎn)我</button>
?? ??? ??? ??? ?
鼠標(biāo)單擊按鈕事件觸發(fā)
?? ??? ??? ??? ?//鼠標(biāo)雙擊事件
?? ??? ??? ??? ?<button id="btn" οndblclick="alert('你點(diǎn)我干嘛')">點(diǎn)我</button>
?? ??? ??? ??? ?//鼠標(biāo)移到按鈕上事件觸發(fā)
?? ??? ??? ??? ?<button id="btn" οnmοuseοver="alert('鼠標(biāo)移動(dòng)上來了！')">點(diǎn)我</button>
?? ??? ??? ??? ?//鼠標(biāo)從按鈕上移走事件觸發(fā)
?? ??? ??? ??? ?<button id="btn" οnmοuseοut="alert('鼠標(biāo)移走！')">點(diǎn)我</button>
?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?
4.加載方式?
??????? (1)瀏覽器加載網(wǎng)頁代碼時(shí)是由上到下依次加載的。
?? ??? ?(2)如果我們?cè)跒g覽器還尚未加載網(wǎng)頁中的元素，那么將無法確定，控制臺(tái)將會(huì)報(bào)錯(cuò)。
?? ??? ?解決該問題有兩種方式：
?? ??? ??? ?1)將JS代碼編寫到body標(biāo)簽的下邊。但是我們習(xí)慣上將JS、CSS等代碼都編寫在head標(biāo)簽中，
?? ??? ??? ?這種形式不符合使用規(guī)則
?? ??? ??? ?2)將js代碼編寫到window.οnlοad=function(){}中，推薦使用方式
?? ??? ??? ?注意：編寫js時(shí)，上來就把window.οnlοad=function(){}寫上
?? ??? ???? 程序是一行一行執(zhí)行的，如果var btn=document.getElementById("btn1");代碼之前沒有寫window.οnlοad=function(){}
那么在執(zhí)行的時(shí)候是找不到body里面的id="btn1",因此window.οnlοad=function(){}作用就是加載完整個(gè)頁面之后再執(zhí)行里面的內(nèi)容。
但是如果將javascript寫在body里面，之前已經(jīng)加載完了id="btn1"，所以var btn=document.getElementById("btn1");再運(yùn)行就沒有問題了。
注意：<button>標(biāo)簽只能寫在body里面。
5.DOM編程?
??? DOM全稱：Document Object Model?? ?
??? DOM編程是JavaScript中非常重要的一部分內(nèi)容 。??
?? ?DOM主要是通過JavaScript來控制網(wǎng)頁中的各種元素，從而達(dá)到使網(wǎng)頁可以和用戶進(jìn)行動(dòng)態(tài)交互的作用。
?? ?DOM的操作主要分為四部分：增、刪、改、查。
?? ?
? （1）document對(duì)象:
?? ??? ?document是一個(gè)文檔節(jié)點(diǎn)，代表整個(gè)文檔，所有節(jié)點(diǎn)都是它的后代節(jié)點(diǎn)。
?? ??? ?document也是window的對(duì)象的屬性，可以直接使用。
??? （2）節(jié)點(diǎn)類型：
?? ?? ? ? ? ?? ① 元素節(jié)點(diǎn)：HTML文檔中的HTML標(biāo)簽
?? ??? ??????? ②文本節(jié)點(diǎn)：元素的屬性
?? ??? ? ? ? ? ③ 屬性節(jié)點(diǎn)：HTML標(biāo)簽中的文本內(nèi)容
（3）節(jié)點(diǎn)屬性
（4）元素節(jié)點(diǎn)的屬性：?? ??? ??? ??? ?
1.獲取元素對(duì)象.屬性名?? ??? ??? ???
? 例：element.value
?? ??? ??? ??? ??? ?element.id
?? ??? ??? ??? ??? ?element.className
?? ??? ??? ??? 2.設(shè)置元素對(duì)象.屬性名=新的值
?? ??? ??? ??? ?例：element.value="hello"
?? ??? ??? ??? ??? ?element.id="id01"
?? ??? ??? ??? ??? ?element.className="newClass"
?? ??? ??? ?其它屬性：
?? ??? ??? ??? ?innerHTML:元素節(jié)點(diǎn)通過該屬性獲取和設(shè)置標(biāo)簽內(nèi)部的html代碼
?? ??? ??? ??? ?nodeValue：文本節(jié)點(diǎn)可以通過nodeValue屬性獲取和設(shè)置文本節(jié)點(diǎn)的內(nèi)容
?? ? （5）***DOM查詢
?? ??? ? 通過document對(duì)象查詢：
?? ??? ????? document.getElementById()
?? ??? ??? ?-通過id屬性獲取一個(gè)元素節(jié)點(diǎn)對(duì)象
?? ??? ???? document.getElementsByTagName()
?? ??? ??? ?-通過標(biāo)簽名獲取一組元素節(jié)點(diǎn)對(duì)象
?? ??? ???? document.getElementByName()
?? ??? ??? ?-通過name屬性獲取一組元素節(jié)點(diǎn)對(duì)象,一般用來獲取表單項(xiàng)
?? ?
?? ??? ?通過具體的元素對(duì)象查詢：
?? ??? ??? ?element.getElementsByTagName
?? ??? ??? ?-查找當(dāng)前元素節(jié)點(diǎn)內(nèi)指定標(biāo)簽名的子節(jié)點(diǎn)
?? element.childNodes
?? ??? ???? -查找當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)
?? ??? ???? element.firstChild
?? ??? ???? -查找當(dāng)前節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)
?? ??? ???? element.lastChild
?? ??? ???? -查找當(dāng)前節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)
?? ??? ???? element.parentNode
?? ??? ???? -查找當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)
?? ??? ???? element.previousSibling
?? ??? ???? -查找當(dāng)前節(jié)點(diǎn)的前一個(gè)兄弟節(jié)點(diǎn)
?? ??? ???? element.nextSibling
?? ??? ???? -查找當(dāng)前節(jié)點(diǎn)的后一個(gè)兄弟節(jié)點(diǎn)
?? ?? 例： ????
注意：1.function myQuery(idStr,func){
?? ??? ?var btn=document.getElementById(idStr);
?? ??? ? btn.οnclick=func;
?? ?? ? }
這段代碼為4個(gè)查詢中共有的內(nèi)容，所以封裝成一個(gè)方法，下面直接調(diào)用就可以了，避免寫重復(fù)代碼，起到了簡(jiǎn)化代碼的作用。
2.在查詢? “#city的所有子節(jié)點(diǎn)” 的時(shí)候，其實(shí)只有四個(gè)--北京，上海，東京，首爾；但是在用火狐瀏覽器和谷歌瀏覽器運(yùn)行時(shí)會(huì)把
節(jié)點(diǎn)與節(jié)點(diǎn)之間的空格也當(dāng)作了一個(gè)節(jié)點(diǎn)，所有此時(shí)應(yīng)該根據(jù)元素節(jié)點(diǎn)的屬性，用if語句判斷一下if(liEle5[i].nodeType==1){} ，當(dāng)nodeType==1時(shí)才是元素節(jié)點(diǎn)。
??
?? （6）***DOM增刪改
?? ??? ??? ??? ①創(chuàng)建元素節(jié)點(diǎn)
?? ??? ??? ??? ?document.createElement(標(biāo)簽名)
?? ??? ??? ? ②添加子節(jié)點(diǎn)
?? ??? ??? ??? ?父節(jié)點(diǎn).appendChild(子節(jié)點(diǎn))
?? ??? ??? ? ③插入節(jié)點(diǎn)
?? ??? ??? ??? ?父節(jié)點(diǎn).insertBefore(新節(jié)點(diǎn),舊節(jié)點(diǎn))
?? ??? ??? ? ④替換節(jié)點(diǎn)
?? ??? ??? ??? ?父節(jié)點(diǎn).replaceChild(新節(jié)點(diǎn),舊節(jié)點(diǎn))
?? ??? ??? ? ⑤刪除節(jié)點(diǎn)
?? ??? ??? ??? ?父節(jié)點(diǎn).removeChild(子節(jié)點(diǎn))
?? ??? ??? ??? ?子節(jié)點(diǎn).parentNode.removeChild(子節(jié)點(diǎn)) *****
?? ??? ??? ? ⑥讀寫元素內(nèi)部HTML代碼
?? ??? ??? ??? ?讀取
?? ??? ??? ??? ??? ?元素.innerHTML
?? ??? ??? ??? ?設(shè)置
?? ??? ??? ??? ???? 元素.innerHTML = 新值
需要注意點(diǎn)：在設(shè)置元素節(jié)點(diǎn)時(shí)有以下兩種方式：
1.document.getElementById("bj").innerHTML = "天津";
?? ??? ??? ?? 2.document.getElementById("bj").firstChild.nodeValue="天津";
? 請(qǐng)參照以上（4）元素節(jié)點(diǎn)的屬性中其他屬性部分。
轉(zhuǎn)載于:https://www.cnblogs.com/double-s/p/7801886.html
總結(jié)
以上是生活随笔為你收集整理的JavaScript知识概要的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ipython使用 python3,20
- 下一篇： Spring Boot 使用常见问题