JS筆記

js順序

1，獲取標(biāo)簽，元素

2，確定事件

3，具體操作

1. onmouseover="wenzi.style.display='block';"

on mouse over

onkeypress 在用戶按下并放開任何字母數(shù)字鍵時(shí)發(fā)生。系統(tǒng)按鈕（例如，箭頭鍵和功能鍵）無(wú)法得到識(shí)別。[響應(yīng)一個(gè)鍵]

onkeyup 在用戶放開任何先前按下的鍵盤鍵時(shí)發(fā)生。

onkeydown 在用戶按下任何鍵盤鍵（包括系統(tǒng)按鈕，如箭頭鍵和功能鍵）時(shí)發(fā)生。[響應(yīng)幾個(gè)鍵的組合]可以響應(yīng)Ctrl、Alt、Shift等功能鍵和鍵的組合，而onkeypress不能

onfocusout 失去光標(biāo)事件

onfocus 獲得光標(biāo)事件

onabort 圖片下載被打斷時(shí)

onblur 元素失去焦點(diǎn)時(shí)

onclick 鼠標(biāo)點(diǎn)擊

ondblclick 鼠標(biāo)雙擊

onerror 加載文檔或圖片發(fā)生錯(cuò)誤時(shí)

onmousedown 鼠標(biāo)被按下時(shí)

onmousemove 鼠標(biāo)被移動(dòng)時(shí)

onmouseout 鼠標(biāo)離開元素時(shí)

onmouseover 鼠標(biāo)經(jīng)過(guò)元素時(shí)

onmouseup 釋放鼠標(biāo)按鍵時(shí)

onunload 用戶離開頁(yè)面時(shí)

on操作：幾乎每一個(gè)事件前面都要加上on

mouse:鼠標(biāo)，表示這是一個(gè)鼠標(biāo)事件

over：鼠標(biāo)懸浮

out：鼠標(biāo)離開

onclick? on+click? 鼠標(biāo)左擊事件

click: 鼠標(biāo)點(diǎn)擊

js是一種基于事件驅(qū)動(dòng)的語(yǔ)言。

事件：用戶的操作還有其他的一些操作。

2. wenzi.style.display

id

. 相當(dāng)于中文的“的”

點(diǎn)前面的是具有某個(gè)屬性的集合或者叫做對(duì)象

點(diǎn)后面的是前面的對(duì)象的屬性(特征)或者方法（行為）。

文字的style的display

面向?qū)ο螅?/p>

var ergouzi = {};

ergouzi.height = 180;

ergouzi.age = 18;

ergouzi.eat=function(){

}

3. =的作用：

賦值號(hào)，將某個(gè)值賦值給某一個(gè)量。

4. ;的作用：

表示一條代碼的結(jié)束，每一條完整的代碼在結(jié)束的時(shí)候需要加上一個(gè)分號(hào)，讓瀏覽器知道這個(gè)語(yǔ)句結(jié)束了?？梢詧?zhí)行了。

需要注意的在JS里面分號(hào)之后如果其他代碼是另起一行的話，這個(gè)分號(hào)是可以省略的，但是作為規(guī)范，我們每一句話后面都要自覺(jué)的加上分號(hào)。

以后再代碼部署的時(shí)候有可能會(huì)壓縮JS代碼，也需要具有規(guī)范的代碼格式。

oDiv.onclick = function(){

oDiv.style.display = 'block';

oDiv.style.height = '200px';

}

5. 函數(shù)：不是數(shù)學(xué)中的函數(shù)

計(jì)算機(jī)里面函數(shù)其實(shí)就是一堆代碼的封裝。對(duì)外就是某一個(gè)功能的實(shí)現(xiàn)，類似于機(jī)器上的按鈕。

函數(shù)的格式

// function 是函數(shù)的關(guān)鍵字

// over 是函數(shù)名

// ( )? 傳遞參數(shù)

// { }? 里面去實(shí)現(xiàn)功能，類似于CSS的{}

function over(){

//代碼實(shí)現(xiàn)

}

函數(shù)的使用

func_name();? ? 函數(shù)名+();

6. 第一個(gè)兼容問(wèn)題：

能否直接使用元素的ID來(lái)進(jìn)行操作元素的屬性。

需要獲取出來(lái)這個(gè)元素。JS提供了一個(gè)方法。

document.getElementById('元素的id名稱');

7. 變量：可以變化的量叫做變量。 var x = 4; 8+x

常量：不可以變化的量叫做常量。? 4? ? 9+4

變量也可以理解成一個(gè)容器。

var: 告訴瀏覽器，我后面的是一個(gè)變量。

8. document.getElementById('oDiv') 根據(jù)元素的id獲取元素對(duì)象

JS的組成

ECMAScript 約等于JavaScript 語(yǔ)法核心

DOM： document object model? 文檔對(duì)象模型

BOM： browser object model? 瀏覽器對(duì)象模型

get Element By Id? 為了好記憶

獲取? 元素? 根據(jù)? id

9. 注釋

HTML的注釋 <!-- 注釋的內(nèi)容 -->

CSS的注釋? /* 注釋的內(nèi)容 */

JS的注釋：

單行注釋： // 注釋的內(nèi)容

多行注釋： /*

注釋的內(nèi)容

注釋的內(nèi)容

*/

10. 駝峰命名法

大駝峰：

GetName? ? 每一個(gè)單詞的首字母都要大寫。

一般命名對(duì)象以及類

小駝峰：

getElementByID 每一個(gè)單詞的首字母大寫，第一個(gè)單詞除外。

一般命名變量以及函數(shù)

11. 下劃線命名法

每一個(gè)單詞之間使用下滑線連接。

例如：user_name

12. 標(biāo)識(shí)符命名規(guī)則：也就是起名字的規(guī)則。

1.字母數(shù)字下劃線$組成

2.一般是一字母或者$開頭的。不能以數(shù)字開頭

3.起名字盡量使用英文，可以使用中文或者漢字但是不推薦

4.要有意義，不要使用a,b,c單字母定義。

13. background-image:url();

如果要修改的屬性是復(fù)合屬性，那么要修改屬性的名字，改為駝峰命名法。

obj.style.backgroundImage='url()';

14. true | false? 布爾值 真和假

15. ==? 判斷是否相等

16.if判斷

if(box.checked == true){

box.checked = false;

}else{

box.checked = true;

}

if(判斷){

}

if(判斷){

}else{

}

17.<a href="javascript:alert(1);">點(diǎn)擊</a>

? a標(biāo)簽的href屬性里面是可以實(shí)現(xiàn)js代碼的。

18. 奇葩的class

一般來(lái)說(shuō)我們操作標(biāo)簽的屬性都是直接使用屬性名進(jìn)行操作。

如果遇到CSS里面的復(fù)合屬性，我們把它改變成駝峰命名法

19. 操作屬性的第二種方法

? 第一種 obj.style.屬性名 = 屬性值

? 第二種 obj.style[屬性名]= 屬性值

? 區(qū)別：第二種是可以接受一個(gè)變量名為屬性名

? 但是如果接受的是一個(gè)具體的屬性字符串，那么需要添加引號(hào)[]。

20. js的三種輸出方式：

1.alert(); 提示窗口

2.console.log(); 在控制臺(tái)輸出

3.document.write();在文檔調(diào)用本段js的地方輸出

21.變量與字符串：

變量是一個(gè)容器，里面是用來(lái)存放東西的，可以使數(shù)字，也可以是字符串，也可以是對(duì)象，也可以是其他的東西，比如說(shuō)布爾值。

字符串：一串字符

變量是可以接收字符串

也就是說(shuō)在定義字符串的時(shí)候，可以使用單引號(hào)也可以使用雙引號(hào)，

在代碼中使用到字符串的時(shí)候必須要加上引號(hào)，使用變量的時(shí)候不需要（不能加）。

22.通過(guò)js的obj.style.樣式操作的是元素的行間屬性。

行間樣式：直接寫在HTML元素style屬性中的樣式

內(nèi)部樣式：寫在HTML頭部的style標(biāo)簽里面的樣式

外部樣式：通過(guò)link或者@import引入的外部樣式

23優(yōu)先級(jí)

如果樣式?jīng)]有沖突，那么所有的設(shè)置效果都會(huì)顯示。

如果樣式?jīng)_突 行間>所有。

外部樣式與內(nèi)部樣式誰(shuí)距離標(biāo)簽近，誰(shuí)的優(yōu)先級(jí)高

在操作元素樣式的要統(tǒng)一，要不全部使用行間樣式操作，要不全部統(tǒng)一為操作元素的類

24.js代碼是按照從上到下的順序加載的，執(zhí)行也是從上到下的順序。一行代碼執(zhí)行完之后，再加載下一行代碼。一個(gè)頁(yè)面中script標(biāo)簽有很多，他的執(zhí)行也是從上到下。

25.匿名函數(shù)，當(dāng)一個(gè)函數(shù)直接賦值的時(shí)候，這個(gè)時(shí)候函數(shù)不需要具有名字，類似的比如賦值事件，賦值給變量都不需要名字。

26.window.onload 頁(yè)面加載事件，當(dāng)整個(gè)頁(yè)面所有的HTML標(biāo)簽加載完成的時(shí)候，會(huì)自動(dòng)的觸發(fā)這個(gè)事件，有了這個(gè)事件我們不需要考慮js的位置，寫在onload事件函數(shù)里面的代碼會(huì)在頁(yè)面加載完成的時(shí)候執(zhí)行。

27.js規(guī)范 自己寫的js一般書寫在body之前，所有的頁(yè)面標(biāo)簽之后。

28.行間事件的提取 樣式表現(xiàn)，行為與內(nèi)容相分離。首先通過(guò)js獲取出來(lái)要添加事件的標(biāo)簽，然后給這個(gè)標(biāo)簽添加指定的事件處理函數(shù)，最后實(shí)現(xiàn)函數(shù)。

29.頁(yè)面添加js的方式

行間 a標(biāo)簽的href 行間事件

內(nèi)部 寫在script標(biāo)簽里

外部 通過(guò)script標(biāo)簽的src屬性引入

30.一旦script標(biāo)簽通過(guò)src屬性引入了外部的js文件，這個(gè)標(biāo)簽內(nèi)部就不能寫任何js代碼。

31.document.getElementByTagName

獲取的是一組數(shù)據(jù)，即便里面符合條件的只有一個(gè)，那么也是一組數(shù)據(jù)。

get? Element? s? By? Tag Name

獲取 元素? ? 們? 根據(jù)? 標(biāo)簽 名

32.document.getElementByClassName（他不會(huì)變色）

獲取的是一組數(shù)據(jù)，即便里面符合條件的只有一個(gè)，那么也是一組數(shù)據(jù)。

get? Element? s? By? ClassName

獲取 元素? ? 們? 根據(jù)? 類名

33.while('條件'){

符合條件執(zhí)行，如果一直符合，那就一直循環(huán)。

最后有一個(gè)改變條件，不然就是死循環(huán)。

}

34.if('條件'){

符合條件執(zhí)行，只循環(huán)一次。

}