js基礎知識點總結

時間 2019-11-10

原文原文鏈接

如何在一個網站或者一個頁面，去書寫你的js代碼:
1.js的分層(功能):jquery(tool) 組件(ui) 應用(app),mvc(backboneJs)
2.js的規劃():避免全局變量和方法(命名空間,閉包,面向對象),模塊化(seaJs,requireJs)css

經常使用內部類:Data Array Math Stringhtml

HTML屬性，CSS屬性
HTML：屬性.HTML屬性="值"；
CSS：對象.style.CSS屬性="值";jquery

class和float
1.class:className
2.float:cssFloat數組

獲取對象
id:document.getElementById("id 名")瀏覽器

事件:用戶的動做
鼠標事件：
onclick：點擊
onmouseover: 鼠標放上
onmouseout:鼠標離開
ondbclick:雙擊事件
onmousedown:鼠標按下
onmouseup:鼠標擡起
onmousemove鼠標移動
表單事件：
onfocus:獲取焦點
onblur:失去焦點
onsubmit:提交事件
onchange:當發生改變的時候
onreset:重置事件
鍵盤事件:
onkeyup:鍵盤擡起
onkeydown:鍵盤按下
onkeypress:鍵盤按鍵一次
窗口時間:onload事件
頁面加載完成以後馬上執行的事件
兩種方式:
1.<script>window.onload=init/*函數名，不能加括號*/;</script>
2.<body onload="init()"></body>
event:保存事件發生時的相關的信息
當事件發生的時候,event
event.clientX:事件發生時的X的座標
event.clientY:事件發生時的Y的座標
event.target:事件源
event:必須經過實際參數的形式傳遞給函數才能夠用閉包

<input type = "button" value = "點擊" onclick = "fn(event)" >mvc

修改div中的內容
innerHTML:對象中全部的內容（文本內容和標籤內容），通常指的是雙標籤或者容器標籤
innerText:對象中全部的文本內容app

document.createElement("標籤名");
document.body.appendChild(對象);
removeChild(對象)
document.body是body標籤對象
document.documentElement是html標籤對象模塊化

ECMAscript,BOM,DOM
1.window:對象最高級
2.BOM:瀏覽器對象: brower object model
3.DOM:文檔對象模型:document object model
4.BOM:網頁一打開就會存在
5.DOM:去操做的代碼
6.document是連接DOM和BOM
document有下級，其餘的都沒有下級【多窗口】函數

window.open("連接","name","設置");
1.width:設置窗口寬度
2.height:設置窗口高度
3.left:新窗口到左端距離
4.top:新窗口到頂部的距離
5.srollbars:滾動條【yes,no,1,0】
6.toolbar:工具類【yes,no,0】
7.location:地址欄
window.close: 關閉窗口
window.close()

建立定時器:
一次性計時器:window.setTimeout("函數()"，時間t)
執行:是在時間t以後執行js代碼【只會執行一次】
時間:以毫秒爲單位

反覆性計時器:window.setInterval("函數()"，時間t)
時間:以毫秒爲單位
執行:是每過期間t就會執行一次js代碼【n次】

清楚定時器:
清除一次性定時器:window.clearTimeout(定時器名)
清除反覆性定時器:window.clearInterval(定時器名)
注意:要想清除定時器，必須給定時器名字，匿名定時器沒法清除

找對象的方法:
di:document.getElementById("id名");
標籤:document.getElementsByTagName("標籤名")//獲取的是對象的集合(數組)
對象.getElementByTagName(標籤名)
name:document.getElementByName("name名");//form集合(數組)
className:document.getElementByClassName("class名");//集合(數組)【firefox】
document.images;//獲取img對象(數組)
document.links;//獲取連接對象(數組)
document.forms;//獲取表單對象(數組)
document.body;//body標籤對象
document.documentElement;//HTML對象
event:事件信息對象
this:當前對象

location對象
location.href:返回url信息【能夠獲取url信息，也能夠給其賦值，實現跳轉頁面】
location.assign():加載新的文檔【跳轉頁面】
location.reload():從新加載當前的文檔【刷新頁面】
location.replace():用新的文檔替代當前的文檔【跳轉頁面】

location.assign和location.replace的區別:
location.assign:會產生歷史記錄
location.replace:不會產生歷史記錄

history對象:
history.length:瀏覽過的url數量
history.back():返回歷史記錄的前一個頁面
history.forward():加載歷史記錄中的下一個頁面
history.go(n):跳轉到歷史記錄中指定的頁面，若是是-1實際上就是history.back()的功能

screen對象
screen.height:獲取屏幕的高度
screen.width:獲取屏幕的寬度
screen.availHeight:獲取除去任務欄的高度
screen.availWidth:獲取除去任務欄的寬度

navigator對象
navigator.appName:瀏覽器名
navigator.appCodeName:瀏覽器代碼名
navigator.appVersion:瀏覽器的版本號和平臺信息
navigator.userAgent:瀏覽器信息

DOM:描述網頁各個組成部分的關係
var obj = document.getElementById("id名")
火狐瀏覽器中空白處也算一個節點
parentNode:父節點
childNodes:子節點
firstChild:第一個子節點
lastChild:最後一個子節點
nextSibling:下一個兄弟節點【注意:必須是同父級關係】
previousSiblind:前一個兄弟節點【注意:必須是同父級關係】

登陸驗證：onsubmit:表單提交事件onsubmit="return 函數()"

相關標籤/搜索

每日一句

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