JS基礎（上）

時間 2019-12-12

標籤基礎欄目 JavaScript 简体版

原文原文鏈接

JS與DOM的關係

瀏覽器有渲染html代碼的功能，把html源碼（如div,p標籤等）在內存裏造成一個DOM對象javascript

文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標準方法。DOM 將HTML文檔呈現爲帶有元素、屬性和文本的樹結構（節點樹）。html

HTML文檔能夠說由節點構成的集合，三種常見的DOM節點:java

1. 元素節點：上圖中<html>、<body>、<p>等都是元素節點，即標籤。node

2. 文本節點:向用戶展現的內容，如<li>裏的內容JavaScript、DOM、CSS等文本。數組

3. 屬性節點:元素屬性，如<a>標籤的連接屬性href="http://www.imooc.com"。瀏覽器

BOM對象（把瀏覽器的地址欄，歷史記錄，DOM等裝在一個對象）函數

瀏覽器內部有JS解釋器/引擎；在html裏的JS代碼會被引擎所執行，執行的結果是對DOM對象的操做（便是對節點樹內的標籤進行操做）3d

JS添加特效：無非就是用JS操做DOM對象而已htm

JS的引入方式

JS代碼可在html中任意位置編寫，但瀏覽器解析代碼是從上到下的，需注意此時html是否已經解析該標籤，能讓JS可否獲取該DOM對象，因此有時會把代碼放到html的結束前，便是</html>前對象

直接在html中編寫：<script type="text/javascript">代碼</script>

經過外部引用進來： <script type=text/javascript src=」」></script>

爲防止網頁加載緩慢，也能夠把非關鍵的JavaScript放到網頁底部

變量的聲明

var 變量名；變量名區分大小寫；不用var聲明會污染全局變量；變量名以字母、下劃線、美圓符號開頭，後面部分可數字

函數即完成特定功能的代碼段；

經常使用方法

輸出語句到html中，使用document.write(「」)

Confire() ：消息確認對話框；點擊確認返回true

運算符問題

拼接運算符：+ ，若是是數字則相加，是字符則鏈接；如2+3+‘love’+4+5 //輸出5love45

和PHP不一樣，通常用.

邏輯運算符或：返回爲true的值；如：

var a = 1;

var b = false;

var d = (a || b); //d爲1

邏輯運算符與： 返回最後面的變量值

var a = 22;

var b=33;

alert(a && b); //輸出33

數組與對象的操做

JS中數組的數字鍵值只能從0開始遞增

注意：數組中括號，JS中length ；對象用大括號

Js的內置對象的使用

window對象

window對象和JS不要緊；是瀏覽的一個數組對象，供JS來操做。

Window.open()

做用域

狀況1：函數內沒找到該參數，會一直外部繼續找，直到全局空間（函數外）尋找window屬性

狀況2：var聲明變量；在函數內聲明僅屬於該函數內的局部變量。若是直接賦值，不加var（如：a=10）就會一直往外找該變量，找到則賦值給它，不然默認賦給window.變量名

找表標籤對象

不會的方法到h3c查找HTML DOM 手冊

方法名若是返回是集合則getElements ，如class，P等標籤都不是惟一的因此s

id惟一返回對象，P等不惟一返回集合

根據id獲取

根據標籤找對象

對於表單元素，可使用name尋找

按照類名查找

根據結點查找

對象的操做

img對象下還有多個屬性

img.src img.style.width

注意：

<div class="ch"> 中操做div對象的修改class名字屬性用div.className =

CSS樣式與DOM ： obj.style.width

CSS屬性帶橫線則去之首字大寫： border-top à obj.style.borderTop

注意：此處獲取寬高是把CSS內嵌，比較方便；而且返回的是字符串形式

實戰每次點擊變顏色而且邊框增大10像素

Object.style.display = none/block 實現隱藏和顯示

Object.className = name 實現修改類名

獲取內聯樣式屬性

獲取內存中在渲染的style的值，使用obj.currrentStyle（）和 window.getComputedStyle()獲取

window.getComputedStyle(obj,僞元素)[arrt] ：

obj獲取運算後的樣式目標元素；

僞元素：通常爲null，能夠修改成鼠標放上去的狀態‘：active’

獲取的值只讀便是隻能獲取，不能直接修改，要修改仍是要經過obj.style.屬性修改

內聯樣式一開始不可以獲取是由於一開始沒有定義內聯定義，可是可以初始化賦值

獲取的顏色返回是RGB形式的

注意：只有IE和Opera支持使用currentStyle獲取HTMLElement的計算後的樣式

標準瀏覽器使用getComputedStyle()，對此兼容性問題，使用封裝進方法中進行判斷使用哪一個。obj便是對象名，arrt是獲取屬性名

對象的建立和刪除 node.html

暴力結點 nodein.html

innerHTML 是結點的一個屬性值，表明結點內的內容，便是某標籤內的內容

級聯菜單的製做 jilianorder.html

定時器的使用

不是js的內容屬於瀏覽器的

setTimeout (表達式,延時時間) ：設置在延遲多少時間執行一次一個表達式

clearTimeout(名); 設置清除這個延遲器

setInterval() 方法可按照指定的週期（以毫秒計）來調用函數或計算表達式；屢次執行

clearInterval() 方法取消 setInterval() 的設置

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。