JS基礎操作

2022-02-20 13:24:16 字數 3657 閱讀 2744

1、if語句

if (條件表示式) 

// 當條件表示式結果為true,會執行**塊;反之不執行

// 條件表示式可以為普通表示式

// 0、undefined、null、""、nan為假,其他均為真

// 1.雙分支

if (表示式1) else

// 2.多分支

if (表示式1) else if (表示式2)

...else if (表示式2) else

if (表示式1) ...

}...

2、switch語句
switch (表示式) 

// 1.表示式可以為 整數表示式 或 字串表示式

// 2.值可以為 整數 或 字串

// 3.break可以省略

// 4.default為預設**塊,需要出現在所有case最下方,在所有case均未被匹配時執行

1、for迴圈
for (迴圈變數①; 條件表示式②; 迴圈變數增量③) 

// 1.迴圈變數可以在外、在內宣告

// 2.執行邏輯 ① ②④③ ... ②④③ ②,入口為①,出口為②,②④③個數為[0, n]

2、while迴圈
while (條件表示式)
3、do...while迴圈
do  while (條件表示式);
4、for...in迴圈
obj = 

for (k in obj)

// 用於遍歷物件:遍歷的結果為key,通過語法訪問對應的value

5、for...of迴圈
iter = ['a', 'b', 'c'];

for (i of iter)

// 1.用於遍歷可迭代物件:遍歷結果為index,通過語法訪問對應的value

// 2.es6新增,可迭代物件有 字串、陣列、map、set、anguments、nodelist等

try  catch (err)  finally 

// 1.err為儲存錯誤資訊的變數

// 2.finally分支在異常出現與否都會被執行

throw "自定義異常"

// 必要的時候拋出自定義異常,要結合對應的try...catch使用

1、函式的定義
function 函式名 (引數列表) 

var 函式名 = function (引數列表)

let 函式名 = (引數列表) =>
(function (引數列表) )

// 匿名函式需要自呼叫

(function (引數列表) )(引數列表);

2、函式的呼叫

3、函式的引數

function fn (a, b, c) 

fn(100);

function fn (a)

fn(100, 200, 300) // 200,300被丟棄

function fn (a, b=20, c, d=40) 

fn(100, 200, 300);

function fn (a, ...b) 

fn(100, 200, 300);

// ...變數必須出現在引數列表最後

4、返回值
function fn () 

// 1.可以空return操作,用來結束函式

// 2.返回值可以為任意js型別資料

// 3.函式最多只能擁有乙個返回值,返回多個的時候,不報錯,只返回最後乙個值

1、getelement系列
// 1.通過id名獲取唯一滿足條件的頁面元素

document.getelementbyid('id名');

// 該方法只能由document呼叫

// 2、通過class名獲取所有滿足條件的頁面元素

document.getelementsbyclassname('class名');

// 該方法可以由document及任意頁面元素物件呼叫

// 返回值為htmlcollection (乙個類陣列結果的物件,使用方式同陣列)

// 沒有匹配到任何結果返回空htmlcollection物件 ()

// 3.通過tag名獲取所有滿足條件的頁面元素

document.getelementsbytagname('tag名');

// 該方法可以由document及任意頁面元素物件呼叫

// 返回值為htmlcollection (乙個類陣列結果的物件,使用方式同陣列)

// 沒有匹配到任何結果返回空htmlcollection物件 ()

2、queryselect系列
// 1.獲取第乙個匹配到的頁面元素

document.queryselector('css語法選擇器');

// 該方法可以由document及任意頁面物件呼叫

// 2.獲取所有匹配到的頁面元素

document.queryselectorall('css語法選擇器');

// 該方法可以由document及任意頁面物件呼叫

// 返回值為nodelist (乙個類陣列結果的物件,使用方式同陣列)

// 沒有匹配到任何結果返回空nodelist物件 ()

3、id名
div.style.backgroundcolor = 'red';

// 1.操作的為行間式

// 2.可讀可寫

// 3.具體屬性名採用小駝峰命名法

// eg: 背景顏色

// 推薦

getcomputedstyle(頁面元素物件, 偽類).getpropertyvalue('background-color');

// 不推薦

getcomputedstyle(頁面元素物件, 偽類).backgroundcolor;

// ie9以下

頁面元素物件.currentstyle.getattribute('background-color');

頁面元素物件.currentstyle.backgroundcolor;

// 1.頁面元素物件由js選擇器獲取

// 2.偽類沒有的情況下用null填充

// 3.計算後樣式為唯讀

// 4.該方式依舊可以獲取行間式樣式 (獲取邏輯最後的樣式)

頁面元素物件.classname = "";  // 清除類名

頁面元素物件.classname = "類名"; // 設定類名

頁面元素物件.classname += " 類名"; // 新增類名 前面要注意加空格

classlist[add|remove|toggle] //add新增 remove 刪除 toggle有則無,無則有

eg: this.classlist.toggle('active') //如果class裡沒有active就加上,有就刪掉

HTML基礎js操作

ces 最開始學的四種定義方式 var test 123 定義乙個變數這個叫區域性變數 test 123 這個就叫做全域性變數 let test 123 區域性變數另一種方式 const name 1111 常量不允許修改 const name dsx 預設全域性變數 name 123 functi...

學習js基礎操作總結

1.開啟頁面 window.open 關閉頁面 window.close 2.定時器 有返回物件 返回的是這個定時器的物件 setinterval 連環炸彈 間隔執行 settimeout 定時炸彈 延遲執行 清理定時器 var sett settimeout function 3000 var s...

JS基礎加強五 陣列操作

mdn 開發者 陣列 boolean 無 陣列.every filter foreach map some function element,index,arr 對陣列中每一項執行以下函式,如果都返回true,every返回true,如果有一項返回false,則停止遍歷 every返回false 不...