js基礎知識點總結

來源:互聯網
上載者:User

標籤:定時器   .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基礎知識點總結

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.