從屌絲到架構(gòu)師的飛越(JavaScript篇)-JavaScript BOM概述

一、介紹

這節(jié)課呢,我們來了解的是JavaScript BOM概述。

BOM 是 Browser Object Model,瀏覽器對象模型。

剛才說過 DOM 是為了操作文檔出現(xiàn)的接口,那 BOM 顧名思義其實就是為了控制瀏覽器的行為而出現(xiàn)的接口。

瀏覽器可以做什么呢?比如跳轉(zhuǎn)到另一個頁面、前進(jìn)、后退等等,程序還可能需要獲取屏幕的大小之類的參數(shù)。

所以 BOM 就是為了解決這些事情出現(xiàn)的接口。比如我們要讓瀏覽器跳轉(zhuǎn)到另一個頁面,只需要

location.;這個 location 就是 BOM 里的一個對象。

由于BOM的window包含了document,因此可以直接使用window對象的document屬性,通過document屬性就可以訪問、檢索、修改XHTML文檔內(nèi)容與結(jié)構(gòu)。因為document對象又是DOM(Document Object Model)模型的根節(jié)點。

可以說,BOM包含了DOM(對象),瀏覽器提供出來給予訪問的是BOM對象,從BOM對象再訪問到DOM對象,從而js可以操作瀏覽器以及瀏覽器讀取到的文檔。

二、知識點介紹

1、Window對象

2、Location對象

3、Document對象

4、Element對象

5、Table對象

三、上課對應(yīng)視頻的說明文檔

JavaScript的實現(xiàn)包括以下3個部分:

ECMAScript(核心)? 描述了JS的語法和基本對象。

文檔對象模型 (DOM)? ? 處理網(wǎng)頁內(nèi)容的方法和接口

瀏覽器對象模型(BOM)? ? 與瀏覽器交互的方法和接口

javascript 有三部分構(gòu)成,ECMAScript,DOM和BOM,根據(jù)宿主(瀏覽器)的不同,具體的表現(xiàn)形式也不盡相同,ie和其他的瀏覽器風(fēng)格迥異,IE 擴展了 BOM,加入了 ActiveXObject 類,可以通過 JavaScript 實例化 ActiveX 對象。

1)DOM 是 W3C 的標(biāo)準(zhǔn); [所有瀏覽器公共遵守的標(biāo)準(zhǔn)]

2)BOM 是 各個瀏覽器廠商根據(jù) DOM在各自瀏覽器上的實現(xiàn);[表現(xiàn)為不同瀏覽器定義有差別,實現(xiàn)方式不同]

3)window 是 BOM 對象,而非 js 對象;javacsript是通過訪問BOM(Browser Object Model)對象來訪問、控制、修改客戶端(瀏覽器)

ECMAScript擴展知識:

① ECMAScript是一個標(biāo)準(zhǔn),JS只是它的一個實現(xiàn),其他實現(xiàn)包括ActionScript。

② “ECMAScript可以為不同種類的宿主環(huán)境提供核心的腳本編程能力……”,即ECMAScript不與具體的宿主環(huán)境相綁定,如JS的宿主環(huán)境是瀏覽器,AS的宿主環(huán)境是Flash。

③ECMAScript描述了以下內(nèi)容:語法、類型、語句、關(guān)鍵字、保留字、運算符、對象。

DOM, DOCUMENT, BOM, WINDOW 區(qū)別

DOM 是為了操作文檔出現(xiàn)的 API,document 是其的一個對象;

BOM 是為了操作瀏覽器出現(xiàn)的 API,window 是其的一個對象。

BOM是瀏覽器對象模型,DOM是文檔對象模型,前者是對瀏覽器本身進(jìn)行操作,而后者是對瀏覽器(可看成容器)內(nèi)的內(nèi)容進(jìn)行操作

歸DOM管的:

E區(qū)(就是你說的document啦。由web開發(fā)人員嘔心瀝血寫出來的一個文件夾,里面有index.html,CSS和JS什么鬼的,部署在服務(wù)器上,我們可以通過瀏覽器的地址欄輸入URL然后回車將這個document加載到本地,瀏覽,右鍵查看源代碼等。

歸BOM管的:

A區(qū)(瀏覽器的標(biāo)簽頁,地址欄,搜索欄,書簽欄,窗口放大還原關(guān)閉按鈕,菜單欄等等)

B區(qū)(瀏覽器的右鍵菜單)

C區(qū)(document加載時的狀態(tài)欄,顯示http狀態(tài)碼等)

D區(qū)(滾動條scroll bar)

1、Window對象

Window 對象是 JavaScript 層級中的頂層對象。

Window 對象代表一個瀏覽器窗口或一個框架。

Window 對象會在 <body> 或 <frameset> 每次出現(xiàn)時被自動創(chuàng)建。

1.1.1、對象屬性

1)成員對象屬性

window //窗戶自身, window=window.self 可使用全局屬性 window訪問 Window對象

document 對 Document 對象的只讀引用。請參閱 Document 對象。

history 對 History 對象的只讀引用。請參數(shù) History 對象。

location 用于窗口或框架的 Location 對象。請參閱 Location 對象。

screen 對 Screen 對象的只讀引用。請參數(shù) Screen 對象。

navigator 對 Navigator 對象的只讀引用。請參數(shù) Navigator 對象。

external.AddFavorite("地址","標(biāo)題" ) //把網(wǎng)站新增到保藏夾

2)基本屬性

屬性? 描述

closed? 返回窗口是否已被關(guān)閉。

defaultStatus? 設(shè)置或返回窗口狀態(tài)欄中的默認(rèn)文本。

innerheight 返回窗口的文檔顯示區(qū)的高度。

innerwidth? 返回窗口的文檔顯示區(qū)的寬度。

length? 設(shè)置或返回窗口中的框架數(shù)量。

name? ? 設(shè)置或返回窗口的名稱。

opener? 返回對創(chuàng)建此窗口的窗口的引用。

outerheight 返回窗口的外部高度。

outerwidth? 返回窗口的外部寬度。

pageXOffset 設(shè)置或返回當(dāng)前頁面相對于窗口顯示區(qū)左上角的 X 位置。

pageYOffset? ? 設(shè)置或返回當(dāng)前頁面相對于窗口顯示區(qū)左上角的 Y 位置。

parent? 返回父窗口。

self? ? 返回對當(dāng)前窗口的引用。等價于 Window 屬性。

window? window 屬性等價于 self 屬性,它包含了對窗口自身的引用。

status? 設(shè)置窗口狀態(tài)欄的文本。

top? ? 返回最頂層的先輩窗口。

screenLeft

screenTop

screenX

screenY 只讀整數(shù)。聲明了窗口的左上角在屏幕上的的 x 坐標(biāo)和 y 坐標(biāo)。IE、Safari 和 Opera 支持 screenLeft 和 screenTop,而 Firefox 和 Safari 支持 screenX 和 screenY。

1.1.2、對象方法

window.close(); //關(guān)閉窗口

window.alert("message"); //彈出一個具有OK按鈕的系統(tǒng)消息框,顯示指定的文本

window.confirm("Are you sure?"); //彈出一個具有OK和Cancel按鈕的詢問對話框,返回一個布爾值

window.prompt("What's your name?", "Default"); //提示用戶輸入信息,接受兩個參數(shù),即要顯示給用戶的文本和文本框中的默認(rèn)值,將文本框中的值作為函數(shù)值返回

window.setTimeout("alert('xxx')", 1000); //設(shè)置在指定的毫秒數(shù)后執(zhí)行指定的代碼,接受2個參數(shù),要執(zhí)行的代碼和等待的毫秒數(shù)

window.clearTimeout("ID"); //取消還未執(zhí)行的暫停,將暫停ID傳遞給它

window.setInterval(function, 1000); //無限次地每隔指定的時間段重復(fù)一次指定的代碼,參數(shù)同setTimeout()一樣

window.clearInterval("ID"); //取消時間間隔,將間隔ID傳遞給它

clearInterval() 取消由 setInterval() 設(shè)置的 timeout。

clearTimeout() 取消由 setTimeout() 方法設(shè)置的 timeout。

createPopup() 創(chuàng)建一個 pop-up 窗口。

moveBy() 可相對窗口的當(dāng)前坐標(biāo)把它移動指定的像素。

moveTo() 把窗口的左上角移動到一個指定的坐標(biāo)。

open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。

print() 打印當(dāng)前窗口的內(nèi)容。

resizeBy() 按照指定的像素調(diào)整窗口的大小。

resizeTo() 把窗口的大小調(diào)整到指定的寬度和高度。

scrollBy() 按照指定的像素值來滾動內(nèi)容。

scrollTo() 把內(nèi)容滾動到指定的坐標(biāo)。

setInterval() 按照指定的周期(以毫秒計)來調(diào)用函數(shù)或計算表達(dá)式。

setTimeout(方法,秒數(shù)) 在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達(dá)式。

timeOutEvent = setTimeout("longPress('" + obj + "')",1500);定時器傳參數(shù)

擴展

① 如果文檔包含框架(frame 或 iframe 標(biāo)簽),瀏覽器會為 HTML 文檔創(chuàng)建一個 window 對象,并為每個框架創(chuàng)建一個額外的 window 對象。

② window.frames 返回窗口中所有命名的框架

③parent是父窗口(如果窗口是頂級窗口,那么parent==self==top)

top是最頂級父窗口(有的窗口中套了好幾層frameset或者iframe)

self是當(dāng)前窗口(等價window)

opener是用open方法打開當(dāng)前窗口的那個窗口

④與消息框有關(guān)的方法:alert(String)、confirm(String)、prompt(String)

⑤兩種定時器:setTimeout(code,latency) 和 setInterval(code,period)

注:setTimeout只執(zhí)行一次code,如果要多次調(diào)用,可以讓code自身再次調(diào)用setTimeout();setInteval()會不停地調(diào)用code,直到clearInterval()被調(diào)用。

myWindow=window.open('','','width=200,height=100')

myWindow.document.write("This is 'myWindow'")

<input type="button" value="Resize" onclick="myWindow.resizeTo(600,400);" />

<input type="button" value="moveUp" onclick="myWindow.moveBy(0,-5);" />

<input type="button" value="moveDown" onclick="myWindow.moveBy(0,5);" />

<input type="button" value="moveLeft" onclick="myWindow.moveBy(-5,0);" />

<input type="button" value="moveRight" onclick="myWindow.moveBy(5,0);" />

<input type="button" value="Resize" onclick="myWindow.resizeTo(600,400);" />

<input type="button" value="move" onclick="myWindow.moveTo(5,6);" />

<input type="button" value="move" onclick="myWindow.moveTo(-5,-6);" />

window.open("彈出窗口url","窗口名稱"," 窗口特征");

彈出固定大小窗口,并且無菜單欄等

window.open("adv.html",""," height=380,width=320,toolbar=0,

scrollbars=0, location=0,status=0,menubar=0,resizable=0 ");

屬性名稱? ? 說? ? ? 明

height、width? ? 窗口文檔顯示區(qū)的高度、寬度。以像素計。

left、top? ? 窗口的x坐標(biāo)、y坐標(biāo)。以像素計

toolbar=yes | no? |1 | 0? ? 是否顯示瀏覽器的工具欄。黙認(rèn)是yes。

scrollbars=yes | no? |1 | 0 是否顯示滾動條。黙認(rèn)是yes。

location=yes | no? |1 | 0? 是否顯示地址地段。黙認(rèn)是yes。

status=yes | no? |1 | 0 是否添加狀態(tài)欄。黙認(rèn)是yes。

menubar=yes | no? |1 | 0? ? 是否顯示菜單欄。黙認(rèn)是yes。

resizable=yes | no? |1 | 0? 窗口是否可調(diào)節(jié)尺寸。黙認(rèn)是yes。

titlebar=yes | no? |1 | 0? 是否顯示標(biāo)題欄。黙認(rèn)是yes。

fullscreen=yes | no? |1 | 0 是否使用全屏模式顯示瀏覽器。黙認(rèn)是no。處于全屏模式的窗口必須同時處于劇院模式。

1.2、History對象

window.history.length //瀏覽過的頁面數(shù)

history.back() //在瀏覽歷史里后退一步

history.forward() //在瀏覽歷史里前進(jìn)一步

history.go(i) //到汗青詳細(xì)登記單的第i位

//i>0進(jìn)步,i<0撤退退卻

1.3、Screen對象

screen對象:用于獲取某些關(guān)于用戶屏幕的信息,也可用window.screen引用它

window.screen.width //屏幕寬度

window.screen.height //屏幕高度

window.screen.colorDepth //屏幕顏色深度

window.screen.availWidth //可用寬度(除去任務(wù)欄的高度)

window.screen.availHeight //可用高度(除去任務(wù)欄的高度)

1.4、Navigator對象

navigator`對象:包含大量有關(guān)Web瀏覽器的信息,在檢測瀏覽器及操作系統(tǒng)上非常有用

  window.navigator.appCodeName //瀏覽器代碼名

  window.navigator.appName //瀏覽器步伐名

  window.navigator.appMinorVersion //瀏覽器補釘版本

  window.navigator.cpuClass //cpu類型 x86

  window.navigator.platform //操作體系類型 win32

  window.navigator.plugins

  window.navigator.opsProfile

  window.navigator.userProfile

  window.navigator.systemLanguage //客戶體系語言 zh-cn簡體中文

  window.navigator.userLanguage //用戶語言,同上

  window.navigator.appVersion //瀏覽器版本(包括 體系版本)

  window.navigator.userAgent//用戶代理頭的字符串表示

  window.navigator.onLine //用戶否在線

  window.navigator.cookieEnabled //瀏覽器是否撐持cookie

  window.navigator.mimeTypes

2、Location對象

location對象:表示載入窗口的URL,也可用window.location引用它

location.href //當(dāng)前載入頁面的完整URL,如http://www.somewhere.com/pictures/index.htm

location.protocol //URL中使用的協(xié)議,即雙斜杠之前的部分,如http

location.host //服務(wù)器的名字,如www.wrox.com

location.hostname //通常等于host,有時會省略前面的www

location.port //URL聲明的請求的端口,默認(rèn)情況下,大多數(shù)URL沒有端口信息,如8080

location.pathname //URL中主機名后的部分,如/pictures/index.htm

location.search //執(zhí)行GET請求的URL中的問號后的部分,又稱查詢字符串,如?param=xxxx

location.hash //如果URL包含#,返回該符號之后的內(nèi)容,如#anchor1

location.assign("http:www.baidu.com"); //同location.href,新地址都會被加到瀏覽器的歷史棧中

location.replace("http:www.baidu.com"); //同assign(),但新地址不會被加到瀏覽器的歷史棧中,不能通過back和forward訪問

location.reload(true | false); //重新載入當(dāng)前頁面,為false時從瀏覽器緩存中重載,為true時從服務(wù)器端重載,默認(rèn)為false

document.location.reload(URL) //打開新的網(wǎng)頁

3、Document對象

HtmlDocument 為 Internet Explorer 的文檔對象提供托管包裝,該文檔對象也稱為 HTML 文檔對象模型 (DOM)。您可以通過 WebBrowser 控件的 Document 屬性獲取 HtmlDocument 的實例。

HTMLDocument 接口對 DOM Document 接口進(jìn)行了擴展,定義 HTML 專用的屬性和方法。

HTML 文檔中的 HTML 標(biāo)記可以相互嵌套。因此,HtmlDocument 表示一個文檔樹,其子級是 HtmlElement 類的實例。下面的代碼示例演示一個簡單的 HTML 文件。

HtmlDocument 表示 HTML 標(biāo)記內(nèi)的整個文檔。BODY、DIV、FORM 和 SPAN 標(biāo)記各由一個單獨的 HtmlElement 對象表示。

3.1、對象屬性

document.body//提供對 <body> 元素的直接訪問。對于定義了框架集的文檔,該屬性引用最外層的 <frameset>。

document.cookie 返回與當(dāng)前文檔有關(guān)的所有 cookie。

document.title //返回文檔標(biāo)題等價于HTML的title標(biāo)簽

document.domain 返回當(dāng)前文檔的域名。

document.URL //設(shè)置URL屬性從而在同一窗口打開另一網(wǎng)頁

document.referrer 返回載入當(dāng)前文檔的文檔的 URL。

document.lastModified 返回文檔被最后修改的日期和時間。

3.2、常用對象方法

document.write() //動態(tài)向頁面寫入內(nèi)容

document.writeln() 等同于 write() 方法,不同的是在每個表達(dá)式之后寫一個換行符。

document.createElement(<Tag>) //用指定標(biāo)簽類型創(chuàng)建一個新的element對象)

document.getElementById(ID) //獲得指定ID值的對象

document.getElementsByName(Name) //獲得指定Name值的對象

document.getElementsByTagName() 返回帶有指定標(biāo)簽名的對象集合。

3.3、body-主體子對象

document.body //指定文檔主體的開始和結(jié)束等價于body>/body>

document.body.bgColor //設(shè)置或獲取對象后面的背景顏色

document.body.link //未點擊過的鏈接顏色

document.body.alink //激活鏈接(焦點在此鏈接上)的顏色

document.body.vlink //已點擊過的鏈接顏色

document.body.text //文本色

document.body.innerText //設(shè)置body>…/body>之間的文本

document.body.innerHTML //設(shè)置body>…/body>之間的HTML代碼

document.body.topMargin //頁面上邊距

document.body.leftMargin //頁面左邊距

document.body.rightMargin //頁面右邊距

document.body.bottomMargin //頁面下邊距

document.body.background //背景圖片

document.body.appendChild(oTag) //動態(tài)生成一個HTML對象

Document子對象HTMLElement對象詳解

HTML DOM 節(jié)點

在 HTML DOM (文檔對象模型)中,每個部分都是節(jié)點:

1.文檔本身是文檔節(jié)點

2.所有 HTML 元素是元素節(jié)點

3.所有 HTML 屬性是屬性節(jié)點

4.HTML 元素內(nèi)的文本是文本節(jié)點

5.注釋是注釋節(jié)點

4、Element 對象

在 HTML DOM 中,Element 對象表示 HTML 元素。

Element 對象可以擁有類型為元素節(jié)點、文本節(jié)點、注釋節(jié)點的子節(jié)點。

NodeList 對象表示節(jié)點列表,比如 HTML 元素的子節(jié)點集合。

元素也可以擁有屬性。屬性是屬性節(jié)點

獲取

document.getElementById(ID) //獲得指定ID值的對象

document.getElementsByName(Name) //獲得指定Name值的對象

getElementsByTagName() 返回帶有指定標(biāo)簽名的對象集合。

屬性和方法

方法里有a,b的參數(shù)僅僅是為了加深說明,其他元素沒有a,b不代表是無參方法

Element.add(<class>)給元素添加指定的類

element.accessKey 設(shè)置或返回元素的快捷鍵。

element.appendChild() 向元素添加新的子節(jié)點,作為最后一個子節(jié)點。

element.attributes 返回元素屬性的集合。

element.childNodes 返回元素子節(jié)點的 NodeList。

element.className 設(shè)置或返回元素的 class 屬性。

element.clientHeight 返回元素的可見高度。

element.clientWidth 返回元素的可見寬度。

element.cloneNode() 克隆元素。

element.compareDocumentPosition() 比較兩個元素的文檔位置。

element.contentEditable 設(shè)置或返回元素的文本方向。

element.dir 設(shè)置或返回元素的文本方向。

element.firstChild 返回元素的首個子。

element.getAttribute() 返回元素節(jié)點的指定屬性值。

element.getAttributeNode() 返回指定的屬性節(jié)點。

element.getElementsByTagName() 返回?fù)碛兄付?biāo)簽名的所有子元素的集合。

element.getFeature() 返回實現(xiàn)了指定特性的 API 的某個對象。

element.getUserData() 返回關(guān)聯(lián)元素上鍵的對象。

Element.hidden獲取或設(shè)置hidden屬性的存在狀態(tài)

element.hasAttribute() 如果元素?fù)碛兄付▽傩?,則返回true,否則返回 false。

element.hasAttributes() 如果元素?fù)碛袑傩?,則返回 true,否則返回 false。

element.hasChildNodes() 如果元素?fù)碛凶庸?jié)點,則返回 true,否則 false。

element.id 設(shè)置或返回元素的 id。

element.innerHTML 設(shè)置或返回元素的內(nèi)容。

element.insertBefore(<a>,<b>) 在指定的已有的子節(jié)點之前插入新節(jié)點。A插到b前

element.isContentEditable 設(shè)置或返回元素的內(nèi)容。

element.isDefaultNamespace() 如果指定的 namespaceURI 是默認(rèn)的,則返回 true,否則返回 false。

element.isEqualNode(<a>) 檢查a元素是否與當(dāng)前元素相等。

element.isSameNode(a) 檢查指定元素是否就是當(dāng)前元素.

element.isSupported() 如果元素支持指定特性,則返回 true。

element.lang 設(shè)置或返回元素的語言代碼。

element.lastChild 返回元素的最后一個子元素。

element.namespaceURI 返回元素的 namespace URI。

element.nextSibling 返回當(dāng)前元素之后的兄弟元素

element.nodeName 返回元素的名稱。

element.nodeType 返回元素的節(jié)點類型。

element.nodeValue 設(shè)置或返回元素值。

element.normalize() 合并元素中相鄰的文本節(jié)點,并移除空的文本節(jié)點。

element.offsetHeight 返回元素的高度。

element.offsetWidth 返回元素的寬度。

element.offsetLeft 返回元素的水平偏移位置。

element.offsetParent 返回元素的偏移容器。

element.offsetTop 返回元素的垂直偏移位置。

element.ownerDocument 返回元素的根元素(文檔對象)。

element.parentNode 返回元素的父節(jié)點。

element.previousSibling 返回當(dāng)前元素之前的兄弟元素

Element.remove(<class>) 從元素移除指定的類

element.removeAttribute() 從元素中移除指定屬性。

element.removeAttributeNode() 移除指定的屬性節(jié)點,并返回被移除的節(jié)點。

element.removeChild(a) 從元素中移除子節(jié)點。

element.replaceChild(a,b) 替換元素中的子節(jié)點。

element.scrollHeight 返回元素的整體高度。

element.scrollLeft 返回元素左邊緣與視圖之間的距離。

element.scrollTop 返回元素上邊緣與視圖之間的距離。

element.scrollWidth 返回元素的整體寬度。

element.setAttribute() 把指定屬性設(shè)置或更改為指定值。

element.setAttributeNode() 設(shè)置或更改指定屬性節(jié)點。

element.setIdAttribute()

element.setIdAttributeNode()

element.setUserData() 把對象關(guān)聯(lián)到元素上的鍵。

element.style 設(shè)置或返回元素的 style 屬性。

Element.toggle(<class>)如果類不存在就添加它存在就移除它

element.tabIndex 設(shè)置或返回元素的 tab 鍵控制次序。

element.tagName 返回元素的標(biāo)簽名。

element.textContent 設(shè)置或返回節(jié)點及其后代的文本內(nèi)容。

element.title 設(shè)置或返回元素的 title 屬性。

element.toString() 把元素轉(zhuǎn)換為字符串。

nodelist.item() 返回 NodeList 中位于指定下標(biāo)的節(jié)點。

nodelist.length 返回 NodeList 中的節(jié)點數(shù)。

contentWindow 屬性? ? 如果文檔里有iframe屬性利用此屬性可以返回iframe的內(nèi)容

1490072898345358625.jpg 1490072918339853569.jpg 1490072931218635674.jpg

1490072941526335126.jpg 1490072950580851309.jpg

圖片在窗口中滾動:

<style type="text/css">

#tu{

position:absolute;

top:0;

left:0;

background-image:url(image/qiu.png);

width:171px;

height:170px;

}

</style>

<script type="text/javascript">

var x=0;

var y=0;

var wayx=0;

var wayy=0;

function move1(){

var sp=7;

var w=document.documentElement.clientWidth;

var h=document.documentElement.clientHeight;

//判斷是否走到了最右

if(x+sp+171>w){

wayx=1;

}

//判斷是否走到了最左

if(x-sp<0){

wayx=0;

}

if(y+sp+170>h){

wayy=1;

}

if(y-sp<0){

wayy=0;

}?

if(wayy==0)

y+=sp;

else

y-=sp;

if(wayx==0)

x+=sp;

else

x-=sp;

document.getElementById("tu").style.left=x+"px";

document.getElementById("tu").style.top=y+"px";

}

setInterval("move1()","30");

</script>

</head>

<body>

<div id="tu">

</div>

</body>

圖片跟隨:

<style type="text/css">

#guang{

position:absolute;

background-image:url(290009.jpg);

width:817px;

height:508px;

top:80px;

left:50px;

}

#cha{

background-image:url(1490072898345358625.jpg);

width:200px;

height:88px;

float:right;

}

</style>

<script type="text/javascript">

var top=80;

function gen(){

var h=document.documentElement.scrollTop;

document.getElementById("guang").style.top=h+80+"px";

//document.getElementById("msg").innerHTML=h;

}

function guan(){

document.getElementById("guang").style.display="none";?

}

window.onscroll=gen;

</script>

</head>

<body>

<div id="guang">

<div id="cha" onclick="guan()">

</div>

</div>

<img src="1490072898345358625.jpg"/>

</body>

事件監(jiān)聽方法單講

element.addEventListener(event, function, useCapture)

參數(shù)? 描述

event? 必須。字符串,指定事件名。

注意: 不要使用 "on" 前綴。 例如,使用 "click" ,而不是使用 "onclick"。

提示: 所有 HTML DOM 事件,可以查看我們完整的 HTML DOM Event 對象參考手冊。

function? ? 必須。指定要事件觸發(fā)時執(zhí)行的函數(shù)。

當(dāng)事件對象會作為第一個參數(shù)傳入函數(shù)。 事件對象的類型取決于特定的事件。例如, "click" 事件屬于 MouseEvent(鼠標(biāo)事件) 對象。

useCapture? 可選。布爾值,指定事件是否在捕獲或冒泡階段執(zhí)行。

可能值:

true - 事件句柄在捕獲階段執(zhí)行

false- false- 默認(rèn)。事件句柄在冒泡階段執(zhí)行

5、Table 對象詳解

5.1、Table 對象集合

集合? 描述

cells[] 返回包含表格中所有單元格的一個數(shù)組。

rows[]? 返回包含表格中所有行的一個數(shù)組。

tBodies[]? 返回包含表格中所有 tbody 的一個數(shù)組。

rows 集合返回表格中所有行(TableRow 對象)的一個數(shù)組,該集合包括 <thead>、<tfoot> 和 <tbody> 中定義的所有行

5.2、TableRow 對象

TableRow 對象代表一個 HTML 表格行。

在 HTML 文檔中 <tr> 標(biāo)簽每出現(xiàn)一次,一個 TableRow 對象就會被創(chuàng)建。

cells 集合返回表格中所有 <td> 或 <th> 元素。

5.3、TableCell 對象

TableCell 對象代表一個 HTML 表格單元格。

在一個 HTML 文檔中 <td> 標(biāo)簽每出現(xiàn)一次,一個 TableCell 對象就會被創(chuàng)建

5.4、Table 對象方法

方法? 描述

createCaption() 為表格創(chuàng)建一個 caption 元素。

createTFoot()? 在表格中創(chuàng)建一個空的 tFoot 元素。

createTHead()? 在表格中創(chuàng)建一個空的 tHead 元素。

deleteCaption() 從表格刪除 caption 元素以及其內(nèi)容。

deleteRow()? ? 從表格刪除一行。

deleteTFoot()? 從表格刪除 tFoot 元素及其內(nèi)容。

deleteTHead()? 從表格刪除 tHead 元素及其內(nèi)容。

insertRow() 在表格中插入一個新行。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容