js屬於編寫執行在瀏覽器上的指令碼語言
採用ecmascript語法,來操作bom及dom
操作bom:瀏覽器物件模型
操作dom:文件物件模型
如:使用瀏覽器的歷史記錄,使用瀏覽器的彈出框,修改頁面內容,修改頁面樣式,響應使用者互動事件等
js引入:
1.行間式:存在於行間事件中
文字內容
2.內聯式:存在於頁面script標籤中
3.外聯式:存在於外部js檔案中,通過script標籤src屬性鏈結
由src鏈結外部js的script標籤相當於單標籤,會自動遮蔽標籤內部**塊
index.js檔案
body.style.color = 'red';
index.html檔案
變數的定義:
關鍵字 變數名 = 變數值;
var num = 10;
命名規範:
由數字字母,_,$組成,不能以數字開頭(可以包含中文字元)區分大小寫,不能出現關鍵字及保留字
了解:const num = 10;(常量)
檢視變數值的方式:
print(num);呼叫瀏覽器使用印表機
彈出框檢視:alert(num);
瀏覽器控制台檢視:console.log(num);
將內容寫到頁面:document.write(num);
四種除錯方式:
alert()
console.log()
document.write()
瀏覽器斷點除錯
三種彈出框:
alert():普通彈出框
confirm:確認框
prompt:輸入框
資料型別:
數字型別number:var a = 10;
字串型別string:var a = "sb";
布林型別boolean:var a = true;
未定義型別undefined:var a = undefined;
函式型別:var a = function(){};
物件型別object:var a = {};
空物件null:var a = null;
typeof()可以檢視資料型別
引用型別:
object:var obj = {};(可以被視為字典)
function:var func = function(){};
null:var n = null;
陣列型別:array:var a =new array(1,2,3);使用語法糖方式可省略為var a = (1,2,3)
事件物件:var a = new date();(預設為當前時間)
// a = new date("2019-3-1 12:00:00"); // 設定的時間
console.log(a, typeof(a));
var year = a.getfullyear();
console.log(year)
console.log(a.getday()) // 週幾
console.log(a.getmonth()) // 月份(從0)
console.log(a.getdate()) // 幾號
正則型別:
var re = new regexp('\\d','g');
var res = "abc23asdv123".match(re)
console.log(res);
可簡寫為:
re = /[abc]/gi;
res = 'abc'.match(re);
console.log(res);
總結:正則:/正則語法/ 引數g為全文匹配 引數i 表示為不區分大小寫
字典中所有的key都是string型別,value可以為任意型別
字典中key可以通過中括號及.語法訪問值,當key命名規則不符合css命名規範時只能使用中括號語法
型別轉換:
轉換為字串:string()|.tostring()|" "+
轉數字:number(a)|parsefloat()|parseint()|
轉布林值:boolean(a)
非數字:nan;
運算子:
算數運算子: + - * / % ++ --;
賦值運算子:+= -= *= /= %=;
比較運算子:> < >= <= == === != !==
邏輯運算子: && || !
三目運算子:結果 = 條件表示式 ? 結果1 :結果2;
分支結構:
if(表示式1){}
else if(表示式2){}
else{}
迴圈結構:
for (迴圈變數1;條件表示式2;迴圈變數增量3)
while(條件表示式)
dowhile(條件表示式);
break:結束本層迴圈
continue:結束本次迴圈進入下一次迴圈
函式定義:
function 函式名(引數列表)
呼叫var res = 函式名(引數列表)
匿名函式需要自呼叫
(function(形參列表))(實參列表);
引數講解:
1.個數不需要統一
2.可以任意位置具有預設值
3.通過...語法接收多個值
返回值講解:
1.可以空return操作,用來結束函式
2.返回值可以為任意js型別資料
3.函式最多只能擁有乙個返回值
js選擇器:
引數採用的是id名或類名或標籤名,不需要帶符號
id雖然可以重複 但是js中無法識別,所以禁止
頁面中如果有相同id,則無法匹配任意乙個
getelement系列:
只能得到第乙個相同id物件,
document.getelementbyid('id名');
時間繫結函式位址,使用啟用事件,就會通過函式位址找到函式主體完成指定功能
document.getelementsbyclassname('class名');(結果為陣列型別)
document.getelementsbytagname('tag名');(結果為陣列型別)
queryselect系列:
document.queryselector('css語法選擇器');只能檢索到第乙個滿足條件的標籤(元素物件)
document.queryselectorall('css語法選擇器');
js操作頁面內容:
innertext:普通標籤內容(自身文字與所有子標籤文字)
innerhtml:包含標籤在內的內容(自身文字及子標籤的所有)
js操作頁面樣式:
行間式:div.style.backgroundcolor = 'red';
計算後樣式:(內聯式和外聯式書寫的樣式都叫計算後樣式)
內聯或外聯設定的(行間式設定getcomputedstyle也能獲取到)
getcomputedstyle(頁面元素物件,偽類);
getpropertyvalue('background-color');
類名:頁面元素物件.classname = "";//清除類名;
頁面元素物件.classname = "類名";//設定類名
頁面元素物件.classname += "類名";//新增類名;
事件:元素.on事件名 = function(){}
box.onclick = function(){}
操作頁面文件:
js1.通過選擇器獲取頁面元素物件(指定的標籤)
2.為該物件繫結事件
3,通過事件中的功能操作元素物件(修改內容:innertext|innerhtml 修改樣式 修改類名)
其中修改的樣式是行間式,優先順序高於所有內聯外聯樣式(未設!important)
當修改類名時,會丟失之前類名下的屬性,可以在原類名基礎上增加類名.
多類名之間用空格隔開,所有做字串拼接時一定需要新增空格
清除類名就是將類名置空
前端學習 第六天
第六天知識總結 一 浮動補充 新增浮動的元素不佔據空間 脫離文件流 只要子元素有浮動，父元素必須新增高度 二 頁面補充 a 設計圖 版式寬度 1920 1680 網頁的版心 960 1200 結構規劃 b id名稱 網頁外圍結構 pc端 版心寬度不能用百分比 c 怎樣讓版心左右居中？給要做居中的版心...
前端學習第六天
將transform屬性的值設定為rotate 即可實現旋轉變形，角度為正，則順時針方向旋轉，否則逆時針方向旋轉 旋轉45度 transform rotate 45deg transform origin屬性可以設定自己的自定義變換原點 以左上角為中心原點進行旋轉 transform origin ...
第六天 風氣
第六天 風氣 答 人有了，就得定規矩，否則就是一幫烏合之眾，而不是團隊。1必須朝九晚五。嚴格控制員工手裡有辦公室鑰匙。下班必須準時鎖門，員工準時離開。斷公司外網。要加班必須上級主管簽字，更不准在辦公室留宿，洗澡。這一條很重要，不要讓程式設計師活得像個浪子，精神恍惚，口中神叨，鬍子拉碴，這都是浮動工作...