首頁 > 文章 > web前端 > js基礎知識點總結分享

js基礎知識點總結分享

小云云原創: 2018-03-26 17:15:142434瀏覽

本文主要和大家分享js基礎知識點總結，希望能幫助大家。

如何在一個網站或一個頁面，去書寫你的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.
event:保存事件發生時的相關的資訊
當事件發生的時候,event
event.clientX:事件發生時的X的座標
event.clientY :事件發生時的Y的座標
event.target:事件來源
event:必須透過實際參數的形式傳遞給函數才可以用

修改p中的內容
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名")
火狐瀏覽器中空白處也算一個節點
parentNode:父節點
childNodes:子節點
firstChild:第一個子節點
lastChild:最後一個子節點
nextSibling:下一個兄弟節點【注意:必須是同父級關係】
previousSiblind:前一個兄弟節點【注意:必須是同父級關係】

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

js基礎知識點總結分享

相關文章