onclick:鼠標(biāo)單擊事件
onmouseover:鼠標(biāo)經(jīng)過事件
onmouseout:鼠標(biāo)移開事件
onchange:文本框內(nèi)容改變事件
onselect:文本框內(nèi)容被選中事件
onfocus:光標(biāo)聚集
onblur:光標(biāo)離開
onload:網(wǎng)頁導(dǎo)入
onunload:關(guān)閉網(wǎng)頁
對象的屬性:反映該對象某些特定的性質(zhì)的,如:字符串的長度、圖像的長寬等;
對象的方法:能夠在對象上執(zhí)行的動作。例如,表單的“提交”(Submit),時(shí)間的“獲取”(getYear)等;
Date 日期對象
訪問方法語法:“<日期對象>.<方法>”
Date對象中處理時(shí)間和日期的常用方法:
get/setDate() 返回,設(shè)置日期
get/setFullYear() 返回,設(shè)置年份,用四位數(shù)表示
get/setYear() 返回,設(shè)置年份
get/setHours 返回,設(shè)置小時(shí) 24小時(shí)
get/setMouth ()返回,設(shè)置月份 0-11月 所以加一
get/setMinutes ()返回,設(shè)置分鐘
get/setTime() 返回,設(shè)置時(shí)間,毫秒為單位
返回/設(shè)置年份方法:get/setFullYear() 返回/設(shè)置年份,用四位數(shù)表示。
var mydate=new Date();//當(dāng)前時(shí)間2014年3月6日
document.write(mydate+"<br>");//輸出當(dāng)前時(shí)間
document.write(mydate.getFullYear()+"<br>");//輸出當(dāng)前年份
mydate.setFullYear(81); //設(shè)置年份
document.write(mydate+"<br>"); //輸出年份被設(shè)定為 0081年。
結(jié)果:Thu Mar 06 2014 10:57:47 GMT+0800 2014
Thu Mar 06 0081 10:57:47 GMT+0800
返回星期方法: getDay() 返回星期,返回的是0-6的數(shù)字
返回/設(shè)置時(shí)間方法: get/setTime() 返回/設(shè)置時(shí)間,單位毫秒數(shù),計(jì)算從 1970 年 1 月 1 日零時(shí)到日期對象所指的
日期的毫秒數(shù)。
字符串:
返回指定位置的字符: stringObject.charAt(index)
字符串分割split(): stringObject.split(separator,limit)
提取字符串substring(): stringObject.substring(startPos,stopPos)
提取指定數(shù)目的字符substr(): stringObject.substr(startPos,length)
向上取整ceil(): Math.ceil(x)
向下取整floor(): Math.floor(x)
四舍五入round(): Math.round(x)
隨機(jī)數(shù) random(): Math.random() 注:random() 方法可返回介于 0 ~ 1之間的一個(gè)隨機(jī)數(shù)。
數(shù)組定義的方法:
1. 定義了一個(gè)空數(shù)組:
var 數(shù)組名= new Array();
2. 定義時(shí)指定有n個(gè)空元素的數(shù)組:
var 數(shù)組名 =new Array(n);
3.定義數(shù)組的時(shí)候,直接初始化數(shù)據(jù):
var 數(shù)組名 = [<元素1>, <元素2>, <元素3>...];
我們定義myArray數(shù)組,并賦值,代碼如下:
var myArray = [2, 8, 6];
說明:定義了一個(gè)數(shù)組 myArray,里邊的元素是:myArray[0] = 2; myArray[1] = 8; myArray[2] = 6。
數(shù)組元素使用:
數(shù)組名[下標(biāo)] = 值;
注意: 數(shù)組的下標(biāo)用方括號括起來,從0開始。
數(shù)組連接concat():arrayObject.concat(array1,array2,...,arrayN)
指定分隔符連接數(shù)組元素join(): arrayObject.join(分隔符) 注:使用.join("")可以進(jìn)行緊密連接。""內(nèi)無空格
顛倒數(shù)組元素順序reverse(): arrayObject.reverse()
選定元素slice(): arrayObject.slice(start,end) 注:從已有的數(shù)組中返回選定的元素。
數(shù)組排序sort(): arrayObject.sort(方法函數(shù)) 注:sort()方法使數(shù)組中的元素按照一定的順序排列。
window對象: window對象是BOM的核心,window對象指當(dāng)前的瀏覽器窗口。
window對象方法:
alert()::顯示帶有一段消息和一個(gè)確認(rèn)按鈕的警告框
prompt(): 顯示可提示用戶輸入的對話框
confirm():顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對話框
open():打開一個(gè)新的瀏覽器窗口或查找一個(gè)已命名的窗口
close():關(guān)閉瀏覽器窗口
print():打印當(dāng)前窗口的內(nèi)容
focus():把鍵盤焦點(diǎn)給與一個(gè)窗口
blur():把鍵盤焦點(diǎn)從頂層窗口移開
moveBy():可相對窗口的當(dāng)前坐標(biāo)把它移動指定的像素
moveTo():把窗口的左上角移動到一個(gè)指定的坐標(biāo)
resizeTo():把窗口的大小調(diào)整到指定的寬高
scrollTo():把內(nèi)容滾動到指定的坐標(biāo)
setInterval():每隔指定的時(shí)間執(zhí)行代碼
setTimeout():在指定的延遲時(shí)間之后來執(zhí)行代碼
clearInterval():取消setInterval()的設(shè)置
clearTimeout()取消setTimeout()測設(shè)置
History 對象:history對象記錄了用戶曾經(jīng)瀏覽過的頁面(URL),并可以實(shí)現(xiàn)瀏覽器前進(jìn)與后退相似導(dǎo)航的功能。
window.history.[屬性|方法]
返回前一個(gè)瀏覽的頁面:window.history.back(); 等價(jià)于 window.history.go(-1);
返回下一個(gè)瀏覽的頁面: window.history.forward(); 等價(jià)于 window.history.go(1);
返回瀏覽歷史中的其他頁面:window.history.go(number);
注:瀏覽器中,返回當(dāng)前頁面之前瀏覽過的第二個(gè)歷史頁面,代碼如下:
window.history.go(-2);
注意:和在瀏覽器中單擊兩次后退按鈕操作一樣。
同理,返回當(dāng)前頁面之后瀏覽過的第三個(gè)歷史頁面,代碼如下:window.history.go(3);
Location對象:location.[屬性|方法] location用于獲取或設(shè)置窗體的URL,并且可以用于解析URL。
Navigator對象:Navigator 對象包含有關(guān)瀏覽器的信息,通常用于檢測瀏覽器與操作系統(tǒng)的版本。
對象屬性:appCodeName:瀏覽器代碼名的字符串表示
appName:返回瀏覽器的名稱
appVersion:返回瀏覽器的平臺和版本信息
platform:返回運(yùn)行瀏覽器的操作系統(tǒng)平臺
userAgent:返回由客戶機(jī)發(fā)送服務(wù)器的user-agent頭部的值
screen對象: window.screen.屬性 screen對象用于獲取用戶的屏幕信息。
availHeight:窗口可以使用的屏幕高度,單位像素;
availWidth:窗口可以使用的屏幕寬度,單位像素;
colorDepth:用戶瀏覽器表示的顏色位數(shù),通常為32位(每像素的位數(shù));
pixelDepth:用戶瀏覽器表示的顏色位數(shù),通常為32位(每像素的位數(shù))(IE不支持此屬性);
height:屏幕的高度,單位像素;
width:屏幕的寬度,單位像素;
屏幕分辨率的高和寬: window.screen 對象包含有關(guān)用戶屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的寬
注意:
1.單位以像素計(jì)。
2. window.screen 對象在編寫時(shí)可以不使用 window 這個(gè)前綴。
屏幕可用高和寬度:
1. screen.availWidth 屬性返回訪問者屏幕的寬度,以像素計(jì),減去界面特性,比如任務(wù)欄。
2. screen.availHeight 屬性返回訪問者屏幕的高度,以像素計(jì),減去界面特性,比如任務(wù)欄。
注意:
不同系統(tǒng)的任務(wù)欄默認(rèn)高度不一樣,及任務(wù)欄的位置可在屏幕上下左右任何位置,所以有可能可用寬度和高度不一樣。
文檔對象模型DOM(Document Object Model)定義訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。DOM 將HTML文檔呈現(xiàn)為帶有元素、
屬性和文本的樹結(jié)構(gòu)(節(jié)點(diǎn)樹)。
HTML文檔可以說由節(jié)點(diǎn)構(gòu)成的集合,DOM節(jié)點(diǎn)有:
1. 元素節(jié)點(diǎn):上圖中<html>、<body>、<p>等都是元素節(jié)點(diǎn),即標(biāo)簽。
2. 文本節(jié)點(diǎn):向用戶展示的內(nèi)容,如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 屬性節(jié)點(diǎn):元素屬性,如<a>標(biāo)簽的鏈接屬性。
節(jié)點(diǎn)屬性:
nodeName:返回一個(gè)字符串,起內(nèi)容是給定節(jié)點(diǎn)的名字
nodeType:返回一個(gè)整數(shù),這個(gè)數(shù)值代表給定節(jié)點(diǎn)的類型
nodeValue:返回給定節(jié)點(diǎn)的當(dāng)前值
遍歷節(jié)點(diǎn)樹:
childNodes:返回一個(gè)數(shù)組,這個(gè)數(shù)組由給定元素節(jié)點(diǎn)的子節(jié)點(diǎn)構(gòu)成
firstChild:返回第一個(gè)子節(jié)點(diǎn)
lastChild:返回最后一個(gè)子節(jié)點(diǎn)
parentNode:返回一個(gè)給定節(jié)點(diǎn)的父節(jié)點(diǎn)
nestSibling:返回給定節(jié)點(diǎn)的下一個(gè)子節(jié)點(diǎn)
previousSibling:返回給定節(jié)點(diǎn)的上一個(gè)子節(jié)點(diǎn)
DOM操作:
createElement(element):創(chuàng)建一個(gè)新的元素節(jié)點(diǎn)
createTextNode():創(chuàng)建一個(gè)包含給定文本的新文本節(jié)點(diǎn)
appendChild():指定節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)列表之后添加一個(gè)新的子節(jié)點(diǎn)
insertBefore():將一個(gè)給定節(jié)點(diǎn)插入到一個(gè)給定元素節(jié)點(diǎn)的給定子節(jié)點(diǎn)的前面
removeChild():從一個(gè)給定元素中刪除一個(gè)節(jié)點(diǎn)
replaceChild():把一個(gè)給定父元素里的一個(gè)子節(jié)點(diǎn)替換為另外一個(gè)節(jié)點(diǎn)
注:前兩個(gè)是document方法
document.getElementsByName(name) 返回帶有指定名稱的節(jié)點(diǎn)對象的集合。
document.getElementsByTagName(Tagname) 返回帶有指定標(biāo)簽名的節(jié)點(diǎn)對象的集合。返回元素的順序是它們在文檔中
的順序。
注:1. ID 是一個(gè)人的身份證號碼,是唯一的。所以通過getElementById獲取的是指定的一個(gè)人。
2. Name 是他的名字,可以重復(fù)。所以通過getElementsByName獲取名字相同的人集合。
3. TagName可看似某類,getElementsByTagName獲取相同類的人集合。
如獲取小孩這類人,getElementsByTagName("小孩")。
elementNode.getAttribute(name) 通過元素節(jié)點(diǎn)的屬性名稱獲取屬性的值。
elementNode.setAttribute(name,value) setAttribute() 方法增加一個(gè)指定名稱和值的新屬性,或者把一個(gè)
現(xiàn)有的屬性設(shè)定為指定的值。
節(jié)點(diǎn)屬性:
在文檔對象模型 (DOM) 中,每個(gè)節(jié)點(diǎn)都是一個(gè)對象。DOM 節(jié)點(diǎn)有三個(gè)重要的屬性 :
1. nodeName : 節(jié)點(diǎn)的名稱
2. nodeValue :節(jié)點(diǎn)的值
3. nodeType :節(jié)點(diǎn)的類型
一、nodeName 屬性: 節(jié)點(diǎn)的名稱,是只讀的。
1. 元素節(jié)點(diǎn)的 nodeName 與標(biāo)簽名相同
2. 屬性節(jié)點(diǎn)的 nodeName 是屬性的名稱
3. 文本節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #text
4. 文檔節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #document
二、nodeValue 屬性:節(jié)點(diǎn)的值
1. 元素節(jié)點(diǎn)的 nodeValue 是 undefined 或 null
2. 文本節(jié)點(diǎn)的 nodeValue 是文本自身
3. 屬性節(jié)點(diǎn)的 nodeValue 是屬性的值
三、nodeType 屬性: 節(jié)點(diǎn)的類型,是只讀的。以下常用的幾種結(jié)點(diǎn)類型:
元素類型 節(jié)點(diǎn)類型
元素 1
屬性 2
文本 3
注釋 8
文檔 9
訪問子節(jié)點(diǎn)childNodes:elementNode.childNodes 訪問選定元素節(jié)點(diǎn)下的所有子節(jié)點(diǎn)的列表,返回的值可以看作是
一個(gè)數(shù)組,他具有l(wèi)ength屬性。
訪問子節(jié)點(diǎn)的第一和最后項(xiàng)
一、firstChild 屬性返回‘childNodes’數(shù)組的第一個(gè)子節(jié)點(diǎn)。如果選定的節(jié)點(diǎn)沒有子節(jié)點(diǎn),則該屬性返回 NULL。
語法:
node.firstChild
說明:與elementNode.childNodes[0]是同樣的效果。
二、 lastChild 屬性返回‘childNodes’數(shù)組的最后一個(gè)子節(jié)點(diǎn)。如果選定的節(jié)點(diǎn)沒有子節(jié)點(diǎn),則該屬性返回 NULL。
語法:
node.lastChild
說明:與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。
訪問父節(jié)點(diǎn)parentNode:elementNode.parentNode 獲取指定節(jié)點(diǎn)的父節(jié)點(diǎn) 注意:父節(jié)點(diǎn)只能有一個(gè)。
訪問兄弟節(jié)點(diǎn):
1. nextSibling 屬性可返回某個(gè)節(jié)點(diǎn)之后緊跟的節(jié)點(diǎn)(處于同一樹層級中)。
語法:
nodeObject.nextSibling
說明:如果無此節(jié)點(diǎn),則該屬性返回 null。
2. previousSibling 屬性可返回某個(gè)節(jié)點(diǎn)之前緊跟的節(jié)點(diǎn)(處于同一樹層級中)。
語法:
nodeObject.previousSibling
說明:如果無此節(jié)點(diǎn),則該屬性返回 null。
注意: 兩個(gè)屬性獲取的是節(jié)點(diǎn)。IE 會忽略節(jié)點(diǎn)間生成的空白文本節(jié)點(diǎn)(例如,換行符號),而其它瀏覽器不會忽略。
解決問題方法:
判斷節(jié)點(diǎn)nodeType是否為1, 如是為元素節(jié)點(diǎn),跳過。
插入節(jié)點(diǎn)appendChild():appendChild(newnode) 在指定節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)列表之后添加一個(gè)新的子節(jié)點(diǎn)。
插入節(jié)點(diǎn)insertBefore():insertBefore(newnode,node); insertBefore() 方法可在已有的子節(jié)點(diǎn)前插入一個(gè)
新的子節(jié)點(diǎn)。
刪除節(jié)點(diǎn)removeChild()
removeChild() 方法從子節(jié)點(diǎn)列表中刪除某個(gè)節(jié)點(diǎn)。如刪除成功,此方法可返回被刪除的節(jié)點(diǎn),如失敗,則返回 NULL。
語法:nodeObject.removeChild(node)
參數(shù)node :必需,指定需要?jiǎng)h除的節(jié)點(diǎn)。
替換元素節(jié)點(diǎn)replaceChild()
replaceChild 實(shí)現(xiàn)子節(jié)點(diǎn)(對象)的替換。返回被替換對象的引用。
語法:node.replaceChild (newnode,oldnew )
參數(shù):newnode : 必需,用于替換 oldnew 的對象。
oldnew : 必需,被 newnode 替換的對象。
注意:
1. 當(dāng) oldnode 被替換時(shí),所有與之相關(guān)的屬性內(nèi)容都將被移除。
2. newnode 必須先被建立。
創(chuàng)建元素節(jié)點(diǎn)createElement
createElement()方法可創(chuàng)建元素節(jié)點(diǎn)。此方法可返回一個(gè) Element 對象。
語法:document.createElement(tagName)
參數(shù): tagName:字符串值,這個(gè)字符串用來指明創(chuàng)建元素的類型。
注意:要與appendChild() 或 insertBefore()方法聯(lián)合使用,將元素顯示在頁面中。
創(chuàng)建文本節(jié)點(diǎn)createTextNode
createTextNode() 方法創(chuàng)建新的文本節(jié)點(diǎn),返回新創(chuàng)建的 Text 節(jié)點(diǎn)。
語法:document.createTextNode(data)
參數(shù):data : 字符串值,可規(guī)定此節(jié)點(diǎn)的文本。
瀏覽器窗口可視區(qū)域大?。?獲得瀏覽器窗口的尺寸(瀏覽器的視口,不包括工具欄和滾動條)的方法:
一、對于IE9+、Chrome、Firefox、Opera 以及 Safari:
? window.innerHeight - 瀏覽器窗口的內(nèi)部高度
? window.innerWidth - 瀏覽器窗口的內(nèi)部寬度
二、對于 Internet Explorer 8、7、6、5:
? document.documentElement.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。
? document.documentElement.clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。
或者
Document對象的body屬性對應(yīng)HTML文檔的<body>標(biāo)簽
? document.body.clientHeight
? document.body.clientWidth
在不同瀏覽器都實(shí)用的 JavaScript 方案:
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;
網(wǎng)頁尺寸scrollHeight:
scrollHeight和scrollWidth,獲取網(wǎng)頁內(nèi)容高度和寬度。
一、針對IE、Opera:
scrollHeight 是網(wǎng)頁內(nèi)容實(shí)際高度,可以小于 clientHeight。
二、針對NS、FF:
scrollHeight 是網(wǎng)頁內(nèi)容高度,不過最小值是 clientHeight。也就是說網(wǎng)頁內(nèi)容實(shí)際高度小于 clientHeight 時(shí),scrollHeight 返回 clientHeight 。
三、瀏覽器兼容性
var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;
注意:區(qū)分大小寫
scrollHeight和scrollWidth還可獲取Dom元素中內(nèi)容實(shí)際占用的高度和寬度。
網(wǎng)頁尺寸offsetHeight:
offsetHeight和offsetWidth,獲取網(wǎng)頁內(nèi)容高度和寬度(包括滾動條等邊線,會隨窗口的顯示大小改變)。
一、值
offsetHeight = clientHeight + 滾動條 + 邊框。
二、瀏覽器兼容性
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;
innerHTML 屬性:
innerHTML 屬性用于獲取或替換 HTML 元素的內(nèi)容。
語法:Object.innerHTML
注意:
1.Object是獲取的元素對象,如通過document.getElementById("ID")獲取的元素。
2.注意書寫,innerHTML區(qū)分大小寫。
改變 HTML 樣式
HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。如何改變 HTML 元素的樣式呢?
語法:Object.style.property=new style;
注意:Object是獲取的元素對象,如通過document.getElementById("id")獲取的元素。
顯示和隱藏(display屬性):
網(wǎng)頁中經(jīng)常會看到顯示和隱藏的效果,可通過display屬性來設(shè)置。
語法:Object.style.display = value
注意:Object是獲取的元素對象,如通過document.getElementById("id")獲取的元素。
控制類名(className 屬性)
className 屬性設(shè)置或返回元素的class 屬性。
語法:object.className = classname
作用:
1.獲取元素的class 屬性
2. 為網(wǎng)頁內(nèi)的某個(gè)元素指定一個(gè)css樣式來更改該元素的外觀
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。