JavaScript筆記

創建數組: var myarray = new Array();

數組都是變長的,也就是說即使指定了長度爲8,仍然可以將元素存儲在規定長度以外。

myarray.length; //獲得數組myarray的長度

JavaScript數組的length屬性是可變的

var arr=[98,76,54,56,76]; // 包含5個數值的數組

document.write(arr.length); //顯示數組的長度5

arr[15]=34;  //增加元素,使用索引爲15,賦值爲34

alert(arr.length); //顯示數組的長度16

 

 

函數調用

第一種情況:<script>標籤內調用。

第二種情況:HTML文件中調用,如通過點擊按鈕後調用定義好的函數。

<input type="button" value="click it" οnclick="add2()">

 

 

主要事件表:

 

 

 

 

 

 

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

 

 

 

 

 

String 字符串對象

定義字符串的方法就是直接賦值。var mystr = "I love JavaScript!"

訪問字符串對象的屬性length:

stringObject.length;

訪問字符串對象的方法:

使用 String 對象的 toUpperCase() 方法來將字符串小寫字母轉換爲大寫:

charAt() 方法可返回指定位置的字符。返回的字符是長度爲 的字符串。

indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。

split() 方法將字符串分割爲字符串數組,並返回此數組。

substring() 方法用於提取字符串中介於兩個指定下標之間的字符。

substr() 方法從字符串中提取從 startPos位置開始的指定數目的字符串。

 

 

Math對象


 

 

 

Array 數組對象

數組方法:

 

 

 

window對象

window對象是BOM的核心,window對象指當前的瀏覽器窗口。

window對象方法:

 

 

 

JavaScript 計時器

計時器方法:




History 對象

語法:

window.history.[屬性|方法]

注意:window可以省略。

History 對象屬性

 

History 對象方法

 

 

 

Location對象

location用於獲取或設置窗體的URL,並且可以用於解析URL

語法:

location.[屬性|方法]

location對象屬性圖示:

 

location 對象屬性:

 

location 對象方法:

 

 

 

Navigator對象

Navigator 對象包含有關瀏覽器的信息,通常用於檢測瀏覽器與操作系統的版本。

對象屬性:

 

 

 

screen對象

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

對象屬性:

 

 

 

認識DOM

文檔對象模型DOMDocument Object Model)定義訪問和處理HTML文檔的標準方法。DOM HTML文檔呈現爲帶有元素、屬性和文本的樹結構(節點樹)。


瀏覽器渲染引擎的基本渲染流程:解析HTML構建DOM樹,構建渲染樹,佈局渲染樹,繪製渲染樹

DOMReady實現策略:在頁面的DOM樹創建完成後即觸發,而無需等待其他資源的加載。

判斷元素節點,html和xml元素節點,節點的包含關係

 

HTML文檔可以說由節點構成的集合,DOM節點有:

1. 元素節點:上圖中<html><body><p>等都是元素節點,即標籤。

2. 文本節點:向用戶展示的內容,如<li>...</li>中的JavaScriptDOMCSS等文本。

3. 屬性節點:元素屬性,如<a>標籤的鏈接屬性href="http://www.imooc.com"

節點屬性:

 

遍歷節點樹:

 

 

 

getElementsByName()方法

注意:

1. 因爲文檔中的 name 屬性可能不唯一,所有 getElementsByName() 方法返回的是元素的數組,而不是一個元素。

2. 和數組類似也有length屬性,可以和訪問數組一樣的方法來訪問,從0開始。

 

getElementsByTagName()方法

說明:

1. Tagname是標籤的名稱,如paimg等標籤名。

2. 和數組類似也有length屬性,可以和訪問數組一樣的方法來訪問,所以從0開始。

 

getAttribute()方法

通過元素節點的屬性名稱獲取屬性的值。

語法:

elementNode.getAttribute(name)

 

說明:

1. elementNode:使用getElementById()getElementsByTagName()等方法,獲取到的元素節點。

2. name:要想查詢的元素節點的屬性名字

 

setAttribute()方法

setAttribute() 方法增加一個指定名稱和值的新屬性,或者把一個現有的屬性設定爲指定的值。

注意:

1.把指定的屬性設置爲指定的值。如果不存在具有指定名稱的屬性,該方法將創建一個新屬性。

2.類似於getAttribute()方法,setAttribute()方法只能通過元素節點對象調用的函數。

 

 

節點屬性

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

1. nodeName : 節點的名稱

2. nodeValue :節點的值

3. nodeType :節點的類型

一、nodeName 屬性節點的名稱,是隻讀的。

1. 元素節點的 nodeName 與標籤名相同
2. 屬性節點的 nodeName 是屬性的名稱
3. 文本節點的 nodeName 永遠是 #text
4. 文檔節點的 nodeName 永遠是 #document

二、nodeValue 屬性:節點的值

1. 元素節點的 nodeValue  undefined 或 null
2. 文本節點的 nodeValue 是文本自身
3. 屬性節點的 nodeValue 是屬性的值

三、nodeType 屬性: 節點的類型,是隻讀的。以下常用的幾種結點類型:

元素類型    節點類型
  元素          1
  屬性          2
  文本          3
  註釋          8
  文檔          9

 

 

訪問子結點childNodes

訪問選定元素節點下的所有子節點的列表,返回的值可以看作是一個數組,他具有length屬性。

 

插入節點appendChild()

在指定節點的最後一個子節點列表之後添加一個新的子節點。

 

插入節點insertBefore()

insertBefore() 方法可在已有的子節點前插入一個新的子節點。

語法:

insertBefore(newnode,node);

 

 

刪除節點removeChild()

removeChild() 方法從子節點列表中刪除某個節點。如刪除成功,此方法可返回被刪除的節點,如失敗,則返回 NULL

語法:

nodeObject.removeChild(node)

 

 

替換元素節點replaceChild()

replaceChild 實現子節點(對象)的替換。返回被替換對象的引用。 

語法:

node.replaceChild (newnode,oldnew ) 

 

 

創建元素節點createElement

createElement()方法可創建元素節點。此方法可返回一個 Element 對象。

語法:

document.createElement(tagName)

 

 

創建文本節點createTextNode

createTextNode() 方法創建新的文本節點,返回新創建的 Text 節點。

語法:

document.createTextNode(data)

參數:

data : 字符串值,可規定此節點的文本。

 

 

瀏覽器窗口可視區域大小

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

一、對於IE9+ChromeFirefoxOpera 以及 Safari

•  window.innerHeight - 瀏覽器窗口的內部高度

•  window.innerWidth - 瀏覽器窗口的內部寬度

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

var w= document.documentElement.clientWidth

      || document.body.clientWidth;

var h= document.documentElement.clientHeight

      || document.body.clientHeight;

 

 

網頁尺寸scrollHeight

scrollHeightscrollWidth,獲取網頁內容高度和寬度。

三、瀏覽器兼容性

var w=document.documentElement.scrollWidth

   || document.body.scrollWidth;

var h=document.documentElement.scrollHeight

   || document.body.scrollHeight;

 

 

網頁尺寸offsetHeight

offsetHeightoffsetWidth,獲取網頁內容高度和寬度(包括滾動條等邊線,會隨窗口的顯示大小改變)

一、值

offsetHeight = clientHeight + 滾動條 邊框。

二、瀏覽器兼容性

var w= document.documentElement.offsetWidth

    || document.body.offsetWidth;

var h= document.documentElement.offsetHeight

    || document.body.offsetHeight;

 

 

 

網頁捲去的距離與偏移量

scrollLeft:設置或獲取位於給定對象左邊界與窗口中目前可見內容的最左端之間的距離 ,即左邊灰色的內容。

scrollTop:設置或獲取位於對象最頂端與窗口中可見內容的最頂端之間的距離 ,即上邊灰色的內容。

offsetLeft:獲取指定對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置 

offsetTop:獲取指定對象相對於版面或由 offsetParent 屬性指定的父座標的計算頂端位置 。

注意:

1. 區分大小寫

2. offsetParent:佈局中設置postion屬性(RelativeAbsolutefixed)的父容器,從最近的父節點開始,一層層向上找,直到HTMLbody

 

 

 

 慕課網學習筆記

 

發佈了16 篇原創文章 · 獲贊 0 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章