DOM
DOM查找方法
document.getElementById()
返回對擁有指定ID的第一個(gè)對象的引用
返回值:DOM對象
document.getElementsByTagName('tag')
返回對所有tag標(biāo)簽引用的集合
返回值:數(shù)組
設(shè)置元素樣式
ele.style.styleName=styleValue
設(shè)置ele元素的CSS樣式
ele.innerHTML
返回ele元素開始和結(jié)束標(biāo)簽之間的HTML
ele.innerHTML="html"
設(shè)置ele元素開始和結(jié)束標(biāo)簽之間的HTML內(nèi)容為html
獲取屬性
ele.getAttribute('attribute')
獲取ele元素的attribute屬性
獲取標(biāo)簽屬性語法: DOM對象.屬性 如p.id
自定義屬性必須通過getAttribute()得到
設(shè)置屬性
ele.setAttribute('attribute',value)
在ele元素上設(shè)置屬性
刪除屬性
ele.removeAttribute('attribute')
HTML事件
關(guān)于this的指向
在事件觸發(fā)的函數(shù)中,this是對該DOM對象的引用
DOM0級事件
ele.事件 = 執(zhí)行腳本
在DOM對象上綁定事件
執(zhí)行腳本可以是一個(gè)匿名函數(shù),也可以是一個(gè)函數(shù)的調(diào)用
鼠標(biāo)事件
onload 頁面加載時(shí)觸發(fā)
window.onload = function(){
//代碼
}
onclick 鼠標(biāo)點(diǎn)擊時(shí)觸發(fā)
onmouseover 鼠標(biāo)滑過時(shí)觸發(fā)
onmouseout 鼠標(biāo)離開時(shí)觸發(fā)
onfoucs 獲得焦點(diǎn)時(shí)觸發(fā)
onblur 失去焦點(diǎn)時(shí)觸發(fā)
onchange 域的內(nèi)容改變時(shí)觸發(fā)
onsubmit : 表單中的確認(rèn)按鈕被點(diǎn)擊時(shí)發(fā)生
onmousedown : 鼠標(biāo)按鈕在元素上按下時(shí)發(fā)生
onmousemove : 在鼠標(biāo)指針移動時(shí)發(fā)生
onmouseup : 在元素上松開鼠標(biāo)按鈕時(shí)觸發(fā)
onresize : 當(dāng)調(diào)整瀏覽器窗口的大小時(shí)觸發(fā)
window.onresize = function(){
console.log('我的尺寸被改變了');
}
onscroll : 拖動滾動條滾動時(shí)觸發(fā)
鍵盤事件
onkeydown : 在用戶按下一個(gè)鍵盤按鍵時(shí)發(fā)生
onkeypress : 在鍵盤按鍵被按下并釋放一個(gè)鍵時(shí)發(fā)生
onkeyup : 在鍵盤按鍵被松開時(shí)發(fā)生
keyCode : 返回onkeypress,onkeydown或onkeyup事件觸發(fā)的鍵的值的字符代碼,或鍵的代碼
document.onkeydown = function(event){
//event代表事件的狀態(tài),如觸發(fā)event對象的元素,鼠標(biāo)的位置及狀態(tài)等
console.log(event.keyCode);
}
<body>
<div>
<p>你還可以輸入<span><em id="count">30</em>30</span></p>
<div class="input">
<textarea name="" id="text" cols="70" rows="5"></textarea>
</div>
</div>
<script>
var text = document.getElementById('text');
var total = 30;
var count = document.getElementById('count');
document.onkeyup = function(){
var len = text.value.length;
console.log(len)
var allow = total - len;
count.innerHTML = allow;
}
</script>
</body>
BOM
window
window是瀏覽器的一個(gè)實(shí)例,在瀏覽器中,window對象有雙重角色,它既是通過JavaScript訪問瀏覽器窗口的一個(gè)接口,又是ECMAScript規(guī)定的Global對象.
window.username = 'greentea'; //var username = 'greentea'
window對象的方法
window.alert('content')
顯示帶有一段消息和一個(gè)確認(rèn)按鈕的警告框
window.confirm('message')
顯示一個(gè)帶有指定消息和OK及取消按鈕的對話框
返回值:如果用戶點(diǎn)擊確定,則confirm()返回true,否則返回false
window.prompt('text,defaultText')
參數(shù):
text:要在對話框中顯示的純文本
defaultText:默認(rèn)的輸入文本
返回值:如果用戶單擊提示框的取消按鈕,則返回null,如果單擊確定,則返回輸入字段當(dāng)前顯示的文本
var message = window.prompt('請輸入您的星座',"天蝎座");
window.open(pageURL,name,parameters)
打開一個(gè)新的瀏覽器窗口或查找一個(gè)已命名的窗口
參數(shù):
pageURL:子窗口路徑
name:子窗口句柄(name聲明了新窗口的名稱,方便后期通過name對子窗口進(jìn)行引用)
parameters:窗口參數(shù)(各參數(shù)用逗號分隔)
window.close
定時(shí)器
超時(shí)調(diào)用
setTimeout(code,millisec)
在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式
參數(shù):
1.code:要調(diào)用的函數(shù)或要執(zhí)行的JavaScript代碼串
2.millisec:在執(zhí)行代碼前需等待的毫秒數(shù)
說明:
setTimeout()只執(zhí)行code一次,如果要多次調(diào)用,可以讓code自身在此調(diào)用setTimeout()
清除超時(shí)調(diào)用
clearTimeout(id)
取消setTimeout()
參數(shù):
id:由setTimeout()返回的ID值,該值標(biāo)識要取消的延遲執(zhí)行代碼塊
//window.setTimeout('alert("hello")',2000);
var timeout1 = setTimeout(function(){
alert('hello');
},2000)
clearTimeout(timeout1);
間歇調(diào)用
setInterval(code,millisec)
每隔指定的時(shí)間執(zhí)行一次代碼
參數(shù):
1.code:要調(diào)用的函數(shù)或要執(zhí)行的JavaScript代碼串
2.millisec: 周期性 執(zhí)行或調(diào)用code之間的時(shí)間間隔,以毫秒計(jì)
清除間歇調(diào)用
clearInterval(id)
取消setInterval()
參數(shù):
id:由setInterval()返回的ID值,該值標(biāo)識要取消的延遲執(zhí)行代碼塊
var num = 1,
max = 10,
tiemer = null;
//每隔1秒鐘num遞增一次,直到num的值等于max清除
//間歇方法實(shí)現(xiàn)
timer = setInterval(function(){
console.log(num)
num++;
if (num > max) {
clearInterval(timer);
}
},1000)
//超時(shí)方法實(shí)現(xiàn)
function inCreamentNum(){
console.log(num);
num++;
if (num<=max) {
setTimeout(inCreamentNum,1000);
}else{
clearTimeout(timer);
}
}
timer = setTimeout(inCreamentNum,1000)
location
location對象提供了與當(dāng)前窗口中加載的文檔有關(guān)的信息,還提供了一些導(dǎo)航的功能,它既是window對象的屬性,也是document對象的屬性
location對象的屬性
location.href
返回當(dāng)前加載頁面的完整URL
location.hash
放回URL中的hash(#號后 跟0或多個(gè)字符),如果不包含則返回空字符串
<body>
<div class="box1" id="top"></div>
<div class="box2"></div>
<input type="button" value="back" id="btn">
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
location.hash = "#top";
}
</script>
</body>
location.host
返回服務(wù)器名稱和端口號(如果有)
location.hostname
返回不帶端口號的服務(wù)器名稱
location.pathname
返回URL中的目錄和(或)文件名
location.port
返回URL中指定的端口號,如果沒有,返回空字符串
location.protocol
返回頁面使用的協(xié)議
location.search
返回URL的查詢字符串,這個(gè)字符串以問號開頭
location對象的方法
位置操作
改變?yōu)g覽器位置的方法: location.href
location對象其他屬性也可以改變URL: location.hash location.search
location.replace()
location.replace(url)
重新定向URL
使用location.replace不會在歷史記錄中生成新記錄
setTimeout(function(){
//三種方法皆可
// location.;
// window.location = 'http://www.baidu.com';
location.replace('http://www.baidu.com');
},2000)
location.reload()
重新加載當(dāng)前顯示的頁面
說明:location.reload() 有可能從緩存中加載
location.reload(true) 從服務(wù)器重新加載
history
history對象保存了用戶在瀏覽器中訪問頁面的歷史記錄
history.back()
回到歷史記錄的上一步
相當(dāng)于使用了history.go(-1)
history.forward()
回到歷史記錄的下一步
相當(dāng)于使用了history.go(1)
screen
screen對象屬性
screen.availWidth
返回可用的屏幕寬度
screen.availHeight
返回可用的屏幕高度
補(bǔ)充
window.innerWidth
window.innerHeight
獲取窗口文檔顯示區(qū)的高度和寬度
Navigator
userAgent
用來識別瀏覽器名稱,版本,引擎以及操作系統(tǒng)等信息的內(nèi)容
var explorer = navigator.userAgent;
console.log(explorer);
//Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36
