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