標籤:定時器 .class 空間 ret 數組 模組 跳轉 creat targe
如何在一個網站或者一個頁面,去書寫你的js代碼:
1.js的分層(功能):jquery(tool) 組件(ui) 應用(app),mvc(backboneJs)
2.js的規劃():避免全域變數和方法(命名空間,閉包,物件導向),模組化(seaJs,requireJs)
常用內部類:Data Array Math String
HTML 屬性,CSS屬性
HTML:屬性.HTML 屬性="值";
CSS:對象.style.CSS屬性="值";
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)" >
修改div中的內容
innerHTML:對象中所有的內容(常值內容和標籤內容),一般指的是雙標籤或者容器標籤
innerText:對象中所有的常值內容
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名")
Firefox瀏覽器中空白處也算一個節點
parentNode:父節點
childNodes:子節點
firstChild:第一個子節點
lastChild:最後一個子節點
nextSibling:下一個兄弟節點【注意:必須是同父級關係】
previousSiblind:前一個兄弟節點【注意:必須是同父級關係】
登入驗證:
onsubmit:表單提交事件
onsubmit="return 函數()"
js基礎知識點總結