JS總結(jié)概要

1.JS事件


主要事件表

2.js內(nèi)置對象

2.1Date 日期對象

var d = new Date(2012, 10, 1);? //2012年10月1日

var d = new Date('Oct 1, 2012'); //2012年10月1日


Date對象中處理時間和日期的常用方法

2.2String字符串對象

stringObject.length;?返回該字符串的長度

toUpperCase() 方法來將字符串小寫字母轉(zhuǎn)換為大寫

toLowerCase()方法蜓席,將字符串所有大寫字母都變成小寫的字符串

charAt() 方法可返回指定位置的字符

stringObject.indexOf(substring, startpos)方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置才漆,如果要檢索的字符串值沒有出現(xiàn),則該方法返回 -1

stringObject.indexOf(substring, startpos)

stringObject.split(separator,limit)方法將字符串分割為字符串數(shù)組振亮,并返回此數(shù)組旨剥。

stringObject.split(separator,limit)

stringObject.substring(starPos,stopPos)方法用于提取字符串中介于兩個指定下標之間的字符

stringObject.substring(starPos,stopPos)

stringObject.substr(startPos,length)方法從字符串中提取從 startPos位置開始的指定數(shù)目的字符串。

stringObject.substr(startPos,length)

2.3Math對象

Math 對象屬性

Math.ceil(x)方法可對一個數(shù)進行向上取整。

Math.floor(x)方法可對一個數(shù)進行向下取整黍匾。

Math.round(x)方法可把一個數(shù)字四舍五入為最接近的整數(shù)。

Math.random()方法可返回介于 0 ~ 1(大于或等于 0 但小于 1 )之間的一個隨機數(shù)呛梆。

2.4Array數(shù)組對象

數(shù)組方法

3.BOM瀏覽器對象模型

3.1window對象

window對象方法

3.2History對象

window.history.length:返回瀏覽器歷史列表中的URL數(shù)量

History?對象方法

3.3Location對象

location用于獲取或設(shè)置窗體的URL锐涯,并且可以用于解析URL。

location?對象屬性
location對象屬性圖示:??
location?對象方法

3.4Navigator對象

Navigator 對象包含有關(guān)瀏覽器的信息填物,通常用于檢測瀏覽器與操作系統(tǒng)的版本纹腌。

Navigator 對象屬性

3.5screen對象

screen對象用于獲取用戶的屏幕信息

screen對象屬性

4.DOM文檔對象模型

4.1節(jié)點

遍歷節(jié)點樹
DOM操作

4.2獲取節(jié)點

獲取節(jié)點的方法

4.3獲取/設(shè)置節(jié)點的屬性

elementNode.getAttribute(name)通過元素節(jié)點的屬性名稱獲取屬性的值。

elementNode.setAttribute(name,value)方法增加一個指定名稱和值的新屬性滞磺,或者把一個現(xiàn)有的屬性設(shè)定為指定的值升薯。

4.4節(jié)點對象的屬性

在文檔對象模型 (DOM) 中,每個節(jié)點都是一個對象击困。DOM 節(jié)點有三個重要的屬性 :


節(jié)點的屬性

一涎劈、nodeName 屬性:?節(jié)點的名稱,是只讀的阅茶。

1.?元素節(jié)點的 nodeName 與標簽名相同

2.?屬性節(jié)點的 nodeName 是屬性的名稱

3.?文本節(jié)點的 nodeName 永遠是 #text

4.?文檔節(jié)點的 nodeName 永遠是 #document

二蛛枚、nodeValue 屬性:節(jié)點的值

1. 元素節(jié)點的 nodeValue 是?undefined 或 null

2. 文本節(jié)點的 nodeValue 是文本自身

3. 屬性節(jié)點的 nodeValue 是屬性的值

三、nodeType 屬性:?節(jié)點的類型脸哀,是只讀的蹦浦。以下常用的幾種結(jié)點類型:

元素類型?? ?節(jié)點類型

元素 ? ? ? ? ?1

屬性 ? ? ? ? ?2

文本 ? ? ? ? ?3

注釋 ? ? ? ? ?8

文檔 ? ? ? ? ?9

4.5訪問節(jié)點

子節(jié)點:

elementNode.childNodes訪問選定元素節(jié)點下的所有子節(jié)點的列表,返回的值可以看作是一個數(shù)組企蹭,他具有l(wèi)ength屬性白筹。

node.firstChild返回‘childNodes’數(shù)組的第一個子節(jié)點智末,與elementNode.childNodes[0]是同樣的效果。

node.lastChild返回‘childNodes’數(shù)組的最后一個子節(jié)點徒河,與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果系馆。?

父節(jié)點:

elementNode.parentNode獲取指定節(jié)點的父節(jié)點(注意:父節(jié)點只能有一個

兄弟節(jié)點:

nodeObject.nextSibling可返回某個節(jié)點之后緊跟的節(jié)點(處于同一樹層級中)。

nodeObject.previousSibling 屬性可返回某個節(jié)點之前緊跟的節(jié)點(處于同一樹層級中)顽照。

注意: 兩個屬性獲取的是節(jié)點由蘑。Internet Explorer 會忽略節(jié)點間生成的空白文本節(jié)點(例如,換行符號)代兵,而其它瀏覽器不會忽略尼酿。

解決問題方法:

判斷節(jié)點nodeType是否為1, 如是為元素節(jié)點,跳過植影。

4.6創(chuàng)建元素節(jié)點

document.createElement(tagName)方法可創(chuàng)建元素節(jié)點裳擎。此方法可返回一個 Element 對象。tagName:字符串值思币,這個字符串用來指明創(chuàng)建元素的類型鹿响。

document.createTextNode(data)方法創(chuàng)建新的文本節(jié)點,返回新創(chuàng)建的 Text 節(jié)點谷饿。data :?字符串值惶我,可規(guī)定此節(jié)點的文本。

4.7插入節(jié)點

appendChild(newnode)在指定節(jié)點的最后一個子節(jié)點列表之后添加一個新的子節(jié)點博投。

insertBefore(newnode,node)方法可在已有的子節(jié)點前插入一個新的子節(jié)點绸贡。newnode:要插入的新節(jié)點。node:可選毅哗,指定此節(jié)點前插入節(jié)點听怕。

4.8刪除節(jié)點

nodeObject.removeChild(node)方法從子節(jié)點列表中刪除某個節(jié)點。如刪除成功黎做,此方法可返回被刪除的節(jié)點叉跛,如失敗,則返回 NULL蒸殿。node :必需筷厘,指定需要刪除的節(jié)點。

4.9替換節(jié)點

node.replaceChild (newnode,oldnew ) 實現(xiàn)子節(jié)點(對象)的替換宏所。返回被替換對象的引用酥艳。newnode : 必需,用于替換 oldnew 的對象爬骤。 oldnew : 必需充石,被 newnode 替換的對象。

4.10瀏覽器窗口可視區(qū)域大小

獲得瀏覽器窗口的尺寸(瀏覽器的視口霞玄,不包括工具欄和滾動條)的方法:

一骤铃、對于IE9+拉岁、Chrome、Firefox惰爬、Opera 以及 Safari:

?? window.innerHeight - 瀏覽器窗口的內(nèi)部高度

?? window.innerWidth - 瀏覽器窗口的內(nèi)部寬度

二喊暖、對于 Internet Explorer 8、7撕瞧、6陵叽、5:

?? document.documentElement.clientHeight表示HTML文檔所在窗口的當前高度。

?? document.documentElement.clientWidth表示HTML文檔所在窗口的當前寬度丛版。

或者

Document對象的body屬性對應HTML文檔的<body>標簽

?? document.body.clientHeight

?? document.body.clientWidth

在不同瀏覽器都實用的 JavaScript 方案:

var w= document.documentElement.clientWidth || document.body.clientWidth;

var h= document.documentElement.clientHeight|| document.body.clientHeight;

4.11網(wǎng)頁尺寸scrollHeight

scrollHeight和scrollWidth巩掺,獲取網(wǎng)頁內(nèi)容高度和寬度(不包括滾動條)。

一页畦、針對IE胖替、Opera:

scrollHeight 是網(wǎng)頁內(nèi)容實際高度,可以小于 clientHeight寇漫。

二刊殉、針對NS、FF:

scrollHeight 是網(wǎng)頁內(nèi)容高度州胳,不過最小值是 clientHeight。也就是說網(wǎng)頁內(nèi)容實際高度小于 clientHeight 時逸月,scrollHeight 返回 clientHeight 栓撞。

三、瀏覽器兼容性

var w=document.documentElement.scrollWidth || document.body.scrollWidth;

var h=document.documentElement.scrollHeight || document.body.scrollHeight;

注意:區(qū)分大小寫

scrollHeight和scrollWidth還可獲取Dom元素中內(nèi)容實際占用的高度和寬度碗硬。

4.12網(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;

4.13 網(wǎng)頁卷去的距離

scrollLeft:設(shè)置或獲取位于給定對象左邊界與窗口中目前可見內(nèi)容的最左端之間的距離?木人,即左邊灰色的內(nèi)容。

scrollTop:設(shè)置或獲取位于對象最頂端與窗口中可見內(nèi)容的最頂端之間的距離?冀偶,即上邊灰色的內(nèi)容醒第。

offsetLeft:獲取指定對象相對于版面或由?offsetParent?屬性指定的父坐標的計算左側(cè)位置?。

offsetTop:獲取指定對象相對于版面或由?offsetTop?屬性指定的父坐標的計算頂端位置 进鸠。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末稠曼,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子客年,更是在濱河造成了極大的恐慌霞幅,老刑警劉巖漠吻,帶你破解...
    沈念sama閱讀 212,222評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異司恳,居然都是意外死亡侥猩,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,455評論 3 385
  • 文/潘曉璐 我一進店門抵赢,熙熙樓的掌柜王于貴愁眉苦臉地迎上來欺劳,“玉大人,你說我怎么就攤上這事铅鲤』幔” “怎么了?”我有些...
    開封第一講書人閱讀 157,720評論 0 348
  • 文/不壞的土叔 我叫張陵邢享,是天一觀的道長鹏往。 經(jīng)常有香客問我,道長骇塘,這世上最難降的妖魔是什么伊履? 我笑而不...
    開封第一講書人閱讀 56,568評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮款违,結(jié)果婚禮上唐瀑,老公的妹妹穿的比我還像新娘。我一直安慰自己插爹,他們只是感情好哄辣,可當我...
    茶點故事閱讀 65,696評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著赠尾,像睡著了一般力穗。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上气嫁,一...
    開封第一講書人閱讀 49,879評論 1 290
  • 那天当窗,我揣著相機與錄音,去河邊找鬼寸宵。 笑死崖面,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的邓馒。 我是一名探鬼主播嘶朱,決...
    沈念sama閱讀 39,028評論 3 409
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼光酣!你這毒婦竟也來了疏遏?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,773評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎财异,沒想到半個月后倘零,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,220評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡戳寸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,550評論 2 327
  • 正文 我和宋清朗相戀三年呈驶,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片疫鹊。...
    茶點故事閱讀 38,697評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡袖瞻,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出拆吆,到底是詐尸還是另有隱情聋迎,我是刑警寧澤,帶...
    沈念sama閱讀 34,360評論 4 332
  • 正文 年R本政府宣布枣耀,位于F島的核電站霉晕,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏捞奕。R本人自食惡果不足惜牺堰,卻給世界環(huán)境...
    茶點故事閱讀 40,002評論 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望颅围。 院中可真熱鬧伟葫,春花似錦、人聲如沸谷浅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,782評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽一疯。三九已至,卻和暖如春夺姑,著一層夾襖步出監(jiān)牢的瞬間墩邀,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,010評論 1 266
  • 我被黑心中介騙來泰國打工盏浙, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留眉睹,地道東北人。 一個月前我還...
    沈念sama閱讀 46,433評論 2 360
  • 正文 我出身青樓废膘,卻偏偏與公主長得像竹海,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子丐黄,可洞房花燭夜當晚...
    茶點故事閱讀 43,587評論 2 350

推薦閱讀更多精彩內(nèi)容

  • 一斋配、JS前言 (1)認識JS 也許你已經(jīng)了解HTML標記(也稱為結(jié)構(gòu)),知道了CSS樣式(也稱為表示),會使用HT...
    凜0_0閱讀 2,755評論 0 8
  • ??DOM 1 級主要定義的是 HTML 和 XML 文檔的底層結(jié)構(gòu)。 ??DOM2 和 DOM3 級則在這個結(jié)構(gòu)...
    霜天曉閱讀 1,428評論 1 3
  • 一甩卓、事件 JavaScript 創(chuàng)建動態(tài)頁面鸠匀。事件是可以被 JavaScript 偵測到的行為。 網(wǎng)頁中的每個元素...
    大嘴蝸牛閱讀 642評論 0 2
  • 變量命名逾柿、聲明缀棍、賦值 1.必須以字母、下劃線或美元符號開頭机错,后面可以跟字母爬范、下劃線、美元符號和數(shù)字毡熏。2.變量名區(qū)分...
    wq04200閱讀 622評論 0 1
  • 個人博客:https://yeaseonzhang.github.io 花了半個多月的時間坦敌,終于又把“JS紅寶書”...
    Yeaseon閱讀 11,505評論 9 52