版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
BOM和DOMJavaScript的組成BOMwindowBOM瀏覽器對象模型window對象window對象是JavaScript中的頂級對象所有定義在全局作用域中的變量、函數(shù)都會變成window對象的屬性和方法window對象下的屬性和方法調(diào)用的時候可以省略window系統(tǒng)對話框alert() //不同瀏覽器中的外觀是不一樣的confirm()//兼容不好prompt() //不推薦使用打開窗口window.open(url,target,param)url要打開的地址target新窗口的位置_blank
_self
_parent(父框架)param新窗口的一些設(shè)置返回值，新窗口的句柄window.close()關(guān)閉窗口新窗口.moveTo(5,5)
新窗口.moveBy()新窗口.resizeTo()
window.resizeBy()定時器循環(huán)執(zhí)行（等待時間過去之后執(zhí)行）var
timerId
=
setInterval(code,interval);clearInterval(timerId);間隔時間執(zhí)行，不是特別精確定時執(zhí)行（立刻執(zhí)行）var
timerId
=
setTimeout(code,interval);clearTimeout(timerId);location對象window.locationlocation相當(dāng)于瀏覽器地址欄可以將url解析成獨(dú)立的片段location對象的屬性hrefhash返回url中#后面的內(nèi)容，包含#host主機(jī)名，包括端口hostname主機(jī)名pathname
url中的路徑部分protocol協(xié)議一般是http、httpssearch 查詢字符串location對象的方法location.assign()改變?yōu)g覽器地址欄的地址，并記錄到歷史中設(shè)置location.href
就會調(diào)用assign()。一般使用location.href進(jìn)行頁面之間的跳轉(zhuǎn)location.replace() 替換瀏覽器地址欄的地址，不會記錄到歷史中l(wèi)ocation.reload()重新加載navigator對象window.navigator的一些屬性可以獲取客戶端的一些信息userAgent(系統(tǒng)，瀏覽器)platform(瀏覽器支持的系統(tǒng)，win/mac/linux)history對象歷史記錄管理后退history.back()history.go(-1)0是刷新前進(jìn)history.forward()history.go(1)什么是DOMDOM：文檔對象模型(Document
Object
Model)，又稱為文檔??模型。是一套操作HTML和XML文檔的API。DOM可以把HTML和XML描述為一個文檔??，樹上的每一個分支都可以視為一個對象，通過DOM可以添加、修改和移除文檔上的某一部分。DOMDOM的相關(guān)概念DOM就是把HTML視為一個層次結(jié)構(gòu)(樹形結(jié)構(gòu))的文檔文檔(Document)：就是指HTML或者XML文件節(jié)點(diǎn)(Node)：HTML文檔中的所有內(nèi)容都可以稱之為節(jié)點(diǎn)元素(Element)：HTML文檔中的標(biāo)簽可以稱為元素文檔元素(根元素)：文檔中的第一個元素，HTML文檔元素就是<html>文本節(jié)點(diǎn)屬性節(jié)點(diǎn)DOM的相關(guān)概念父節(jié)點(diǎn)parent子節(jié)點(diǎn)child兄弟節(jié)點(diǎn)silbingDOM的級別（了解）DOM0初級階段最初瀏覽器中為了方便檢索界面上的元素提供了非常方便的api，查詢頁面上的元素。實(shí)驗(yàn)性質(zhì)的api稱為DOM0document.form[0]document.images[0]隨著JavaScript的普及，不同了瀏覽器分別擴(kuò)展了JavaScript，此時程序員就苦逼了document.layers["d1"]
//Netscapedocument.all["d1"]
//IEDOM1規(guī)定了節(jié)點(diǎn)的類型Node為了統(tǒng)一瀏覽器之間的差異W3C制定了DOM1。比如獲取瀏覽器的元素，不同瀏覽器下都可以使用document.getElementById()DOM2DOM3DOM可以做什么找對象（元素）設(shè)置元素的屬性設(shè)置元素的樣式動態(tài)創(chuàng)建和刪除元素事件—觸發(fā)響應(yīng)事件源（事件的觸發(fā)者）事件名稱事件響應(yīng)程序DOM初體驗(yàn)1.切換圖片（a連接+圖片）2.顯示和隱藏盒子3.美女相冊獲取頁面元素DOMCore—可以用在任何DOM文檔中g(shù)etElementById()
//根據(jù)id屬性獲取一個DOM對象，區(qū)分大小寫，符合代碼規(guī)范getElementsByTagName()
//根據(jù)標(biāo)簽返回多個DOM對象HTML-DOM—僅僅能夠用在HTML文檔中g(shù)etElementsByName()HTML5中新增getElementsByClassName()DOM對象的屬性DOM對象的屬性和HTML的標(biāo)簽屬性幾乎是一致的src、title、className、href練習(xí)：切換圖片點(diǎn)擊按鈕隱藏顯示div關(guān)閉二維碼美女相冊DOM對象的屬性innerHTML—會把內(nèi)容解析到DOM樹上獲取標(biāo)簽之間的內(nèi)容設(shè)置標(biāo)簽之間的內(nèi)容innerText(FF中textContent)—會對內(nèi)容轉(zhuǎn)義獲取標(biāo)簽之間的內(nèi)容設(shè)置標(biāo)簽之間的內(nèi)容HTML轉(zhuǎn)移符" "‘ '& &< <//lessthan小于> >//greaterthan大于空格
? ©DOM對象的屬性表單元素的屬性type、value、checked、selected、disabled練習(xí)：點(diǎn)擊按鈕禁用文本框搜索文本框檢測用戶名是否是3-6位，密碼是否是6-8位，如果不滿足要求高亮顯示文本框設(shè)置下拉框中的選中項(xiàng)（水果）給文本框賦值，獲取文本框的值全選反選getAttribute和setAttributegetAttribute()setAttribute()removeAttribute()直接使用.屬性的方式不可以設(shè)置自定義屬性(IE除外)，getAttribute()什么時候都可以用，推薦使用練習(xí)：Tab切換節(jié)點(diǎn)的屬性nodeType 節(jié)點(diǎn)的類型1
元素節(jié)點(diǎn)2屬性節(jié)點(diǎn)3文本節(jié)點(diǎn)nodeName 節(jié)點(diǎn)的名稱(標(biāo)簽名稱)nodeValue 節(jié)點(diǎn)值元素節(jié)點(diǎn)的nodeValue始終是null節(jié)點(diǎn)的層次父節(jié)點(diǎn)parentNode子節(jié)點(diǎn)childNodes //IE8中會忽略空白節(jié)點(diǎn)children //返回元素節(jié)點(diǎn)
兄弟節(jié)點(diǎn)nextSiblingpreviousSibling第一個和最后一個子節(jié)點(diǎn)firstChildlastChild節(jié)點(diǎn)的層次結(jié)構(gòu)childElementCountfirstElementChildlastElementChildpreviousElementSiblingnextElementSibling各行變色設(shè)置樣式的兩種方式classNamestyle獲取樣式DOM的style屬性只能獲取標(biāo)簽中使用style設(shè)置的樣式，無法獲取嵌入或外部樣式style.cssText獲取style里面的字符串設(shè)置樣式無論設(shè)置還是獲取只能操作行內(nèi)式。1.樣式少的時候使用2.style是對象（其他大部分是字符串）3.值是字符串，沒有設(shè)置值是“”；4.命名規(guī)則，駝峰命名。和css不一樣5.設(shè)置了類樣式不能獲取。（只和行內(nèi)式交互，和內(nèi)嵌和外鏈無關(guān)）6.box.style.cssText=“字符串形式的樣式”；style常用屬性backgroundColorbackgroundImagecolorwidthheightborderopacity
(IE8以前filter:alpha(opacity=xx))注意DOM對象style的屬性和標(biāo)簽中style內(nèi)的值不一樣，因?yàn)樵贘S中-不能作為標(biāo)識符backgroundColor
DOM中background-color
CSS中練習(xí)改變div的大小和透明度當(dāng)前輸入的文本框高亮顯示高級隔行變色、高亮顯示百度皮膚（繼續(xù)下面PPT）顯示隱藏/關(guān)閉廣告/顯示二維碼（隱藏方法）提高層級隱藏顯示display元素隱藏后，不占位置，頁面上的元素會重新排列visibility元素隱藏后，占位置hiddenvisibleopacity、position位置positionlefttoprightbottomz-index動態(tài)創(chuàng)建元素的三種方式方式一：document.write()方式二：innerHTML方式三：createElement()
操作：appendChild()removeChild()insertBefore()replaceChild()案例動態(tài)創(chuàng)建列表，高亮顯示（四大美女）練習(xí)：祝愿墻選擇水果動態(tài)創(chuàng)建祝愿墻模擬百度搜索文本框動態(tài)創(chuàng)建在線人員列表動態(tài)創(chuàng)建表格方式1createElement()方式2rows(只讀，table和textarea能用)insertRow()(只有table能調(diào)用)deleteRow() (只有table能調(diào)用)cells (只讀，table和textarea能用)insertCell()(只有tr能調(diào)用)deleteCell()(只有tr能調(diào)用)什么是事件JavaScript是事件驅(qū)動的什么是事件？觸發(fā)-響應(yīng)事件的概念事件相關(guān)概念事件源：觸發(fā)事件的對象事件名稱：click、mouseover等事件處理程序：onclick、onmouseover等注冊事件使用onclick注冊多個事件處理程序
//注冊多個事件處理程序
functionaddEvent(element,event,fn){varoldfn=element[event];if(typeofoldfn!="function"){element[event]=fn;}else{element[event]=function(){oldfn();fn();}}}注冊事件的兩種方式onclickDOM0幾乎所有的瀏覽器都支持addEventListenerDOM2現(xiàn)代瀏覽器支持，IE9+可以給同一個事件注冊多個事件處理程序可以選擇捕獲或者冒泡IE9以前使用attachEvent移除事件的兩種方式element.onclick
=
null;removeEventListenerIE9以前detachEvent如果注冊的時候使用的是匿名函數(shù)，則無法移除給多個DOM對象注冊事件的話是使用命名函數(shù)還是匿名函數(shù)？比如給多個文本框注冊事件，獲取文本框的值注意事項(xiàng)innerHTML在清空內(nèi)容的時候和事件相關(guān)的地方addEventLisener和attachEvent區(qū)別：事件名稱的區(qū)別addEventLisener中第一個參數(shù)type是click、load，不帶onattachEvent中一個參數(shù)type是onclick、onloadthis的區(qū)別addEventLisener：事件處理程序會在當(dāng)前對象的作用域運(yùn)行，因此，時間處理程序的this就是當(dāng)前對象attachEvent：事件處理程序是在全局作用域下運(yùn)行因此this就是window事件冒泡btn.addEventListener("click",handle,false);最后一個參數(shù)為false-事件冒泡大多數(shù)瀏覽器都支持-推薦使用的方式事件捕獲btn.addEventListener("click",handle,true);最后一個參數(shù)為false-事件捕獲老版本的瀏覽器不支持-不推薦使用事件的三個階段捕獲階段1目標(biāo)階段2正在執(zhí)行當(dāng)前對象的事件處理程序冒泡階段3事件對象的獲取方式標(biāo)準(zhǔn)DOM的事件對象在事件處理程序中傳入事件對象IE中的事件對象window.event跨瀏覽器的解決方案event=event?event:window.event;事件對象獲取當(dāng)前對象(只讀)target 觸發(fā)事件的元素currentTarget 始終是當(dāng)前執(zhí)行事件處理程序的對象IE中對應(yīng)的屬性srcElement
==
target事件類型(只讀)type clic
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 【正版授權(quán)】 ISO/IEC 18046-5:2025 EN Information technology - Radio frequency identification device performance test methods - Part 5: Test methods for the environmental characteristics
- 2024食品工廠代加工冷鏈配送服務(wù)合同范本3篇
- 2024版無人機(jī)遙感監(jiān)測服務(wù)合同
- 2025年度水庫魚塘智能化養(yǎng)殖技術(shù)承包合同4篇
- 出資協(xié)議書范本
- 2024版鋁錠批發(fā)銷售協(xié)議樣本一
- 2025年度生態(tài)環(huán)保打井承包合同標(biāo)準(zhǔn)范本4篇
- 2025年度智慧家居產(chǎn)品銷售與售后服務(wù)合同3篇
- 2025年度住宅小區(qū)墻面公共藝術(shù)創(chuàng)作租賃合同標(biāo)的協(xié)議4篇
- 2025年度牙科專業(yè)人才培養(yǎng)與承包服務(wù)合同范本4篇
- IT硬件系統(tǒng)集成項(xiàng)目質(zhì)量管理方案
- 水下炸礁施工組織設(shè)計(jì)
- 《容幼穎悟》2020年江蘇泰州中考文言文閱讀真題（含答案與翻譯）
- 3dmin軟件3dmine教程基礎(chǔ)知識
- API520-安全閥計(jì)算PART1(中文版)
- 政府采購專家評審實(shí)務(wù)培訓(xùn)XXXX
- 2023年廣東省廣州地鐵城際鐵路崗位招聘筆試參考題庫附帶答案詳解
- 2023年一級健康管理師《基礎(chǔ)知識》考前沖刺題庫資料（含答案）
- 直流電機(jī)電樞繞組簡介
- GB/T 524-2007平型傳動帶
- GB/T 19889.5-2006聲學(xué)建筑和建筑構(gòu)件隔聲測量第5部分：外墻構(gòu)件和外墻空氣聲隔聲的現(xiàn)場測量
評論
0/150
提交評論