前端web開發js知識點一講解

接觸到js，首先要明白和css之間的差別，以及作用。

1、js如果從外部連結的話，需要在head标簽下加入<script src=""></script>；如果在内部去定義，則是在body裡面加入标簽<script></script>，在标簽裡面具體展開設計。

2、js相對css，理論上與c語言編碼實作某個環節類似，是以相對比css難些。

js知識點如下：

2.1、輸出：我覺得彈窗輸出的作用友善你檢查程式問題，便于檢視結果。

alert() 彈框輸出

confirm() 帶确定取消按鈕的彈框

document.write() 在文檔流中輸出，也就是在網頁上輸出

document.getElementById.innerHTML修改頁面中的html元素

console.log() 在調試平台中輸出

2.2、輸入

3.prompt("提示資訊",預設值)；彈框輸入

parseInt（頁面表單元素輸入值）；innerHTML提取

parseFloat（頁面表單元素輸入值）

2.3、數字類型

數字（number），字元串(string)，布爾(boolean)，數組(array)，對象(object)，空NULL ，未字義類型(undefined)

對象={name:"張三",sex:"男",age:30}. 對象.調用

2.4擷取對象

document.getElementById("id名")；

document.getElementsByClassName(“類名”)[索引值]；

2.5、修改值

對象.innerHTML=新值；

對象.value=

對象.innerText =

2.6、函數：

定義文法：

function 函數名(){

//函數體

}

函數調用：

觸發事件＝函數名（）

對象.事件＝function(){}

事件：

onclick 點選事件

onmouseover 滑鼠懸停事件

onmouseout 滑鼠離開事件

onload事件 頁面加載時調用

onfocus事件 擷取焦點時

onblur事件 失去焦點時

onchange事件 HTML元素發生改變時觸發

更改樣式：

修改屬性值

對象.屬性名＝屬性值

修改CSS樣式

對象.style.樣式名＝樣式值 樣式名（駝峰式寫法 font-size:fontSize）

for循環 if語句 while語句

3、DOM

getAttribute(屬性名) 擷取元素屬性

setAttribute(屬性名，屬性值) 設定元素屬性

擷取子節點方式

childNodes 包含空白節點

children 不包含空白節點

子節點個數

.childNodes.length

.children.length

擷取對應節點方式

childNodes[索引号]

children[索引号]

父節點：

parentNode

第一個子元素 firstChild

最後一個子元素 lastChild

前一個兄弟元素 previousSibling

後一個兄弟元素 nextSilbling

添加元素 appendChild 添加到内部後面

建立元素 ps=document.creatElement("p");

賦屬性值 方式

1）ps.屬性名＝屬性值

2）ps.setAttribute(屬性名，屬性值)

在節點前插入元素 insertBefore(新節點，參考的節點)

父元素.insertBefore(新元素，參考元素)

删除元素

父元素.removeChild(子元素)

替換元素

父元素.replaceChild(替換的新元素，被替換的舊元素)