js

• js常用物件

ljs中的常見物件有以下幾個:

Boolean

Number

String 

Array 陣列

Date 日期

Math 數學

RegExp 正則

Global 全域性

1. Boolean

• Boolean物件描述

在 js中，布林值是一種基本的資料型別。Boolean 物件是一個將布林值打包的布林物件。Boolean 物件主要用於提供將布林值轉換成字串的 toString() 方法。

• Boolean物件建立

Boolean 物件表示兩個值："true" 或 "false"。

建立 Boolean 物件的語法：

new Boolean(value); //建構函式

Boolean(value); //轉換函式

• 引數

引數 value 由布林物件存放的值或者要轉換成布林值的值。

• 返回值

當作為一個建構函式（帶有運算子 new）呼叫時，Boolean() 將把它的引數轉換成一個布林值，並且返回一個包含該值的 Boolean 物件。

如果作為一個函式（不帶有運算子 new）呼叫時，Boolean() 只將把它的引數轉換成一個原始的布林值，並且返回這個值。

• 注意：

如果省略 value 引數，或者設定為 0、-0、null、""、false、undefined 或 NaN，則該物件設定為 false。否則設定為 true（即使 value 引數是字串 "false"）。

 

1. Number

• Number物件描述

在 js中，數字是一種基本的資料型別。js還支援 Number 物件，該物件是原始數值的包裝物件。在必要時，js會自動地在原始資料和物件之間轉換。

• Number物件建立

Number 物件是原始數值的包裝物件。

建立 Number 物件的語法：

new Number(value);//返回一個物件

Number(value);//返回一個值

• 引數

引數 value 是要建立的 Number 物件的數值，或是要轉換成數字的值。

• 返回值

當 Number() 和運算子 new 一起作為建構函式使用時，它返回一個新建立的 Number 物件。如果不用 new 運算子，把 Number() 作為一個函式來呼叫，它將把自己的引數轉換成一個原始的數值,並且返回這個值（如果轉換失敗，則返回 NaN）。

• 注意:

如果省略 value 引數，或者設定為null、""、”  ”、+0、-0、0、false，則返回0;引數為true則返回1;字串形式的數字,則返回為轉換後的數字,其餘的則為NaN.

 

1. String

• String 物件描述

字串是 js的一種基本的資料型別。String 物件的 length 屬性聲明瞭該字串中的字元數。String 類定義了大量操作字串的方法，例如從字串中提取字元或子串，或者檢索字元或子串。需要注意的是，js的字串是不可變的（immutable），String 類定義的方法都不能改變字串的內容。像 String.toUpperCase() 這樣的方法，返回的是全新的字串，而不是修改原始字串。

• String物件建立

String 物件用於處理文字（字串）。

建立 String 物件的語法：

new String(s);

String(s);

• 引數

引數 s 是要儲存在 String 物件中或轉換成原始字串的值。

• 返回值

當 String() 和運算子 new 一起作為建構函式使用時，它返回一個新建立的 String 物件，存放的是字串 s 或 s 的字串表示。

當不用 new 運算子呼叫 String() 時，它只把 s 轉換成原始的字串，並返回轉換後的值。

• 方法:

只列舉常用方法,其餘方法參考api

1. 獲取指定字元

charAt(索引) 返回在指定位置的字元。  

charCodeAt(索引) 返回在指定的位置的字元的 Unicode 編碼。

1. 獲取索引號

indexOf(檢索字串) 檢索字串。若找到則返回目標字元的索引,否則返回-1

lastIndexOf(檢索字串) 從後向前搜尋字串。返回目標字串最後出現位置的索引值,否則返回-1

1. 連線字串

concat(要連線的字串) 連線接字串

1. 擷取字串

substring(開始的索引,結束的索引) 提取字串中兩個指定的索引號之間的字元。

substr(開始的索引,個數) 從起始索引號提取字串中指定數目的字元。

slice(開始的位置,結束的位置) 提取字串的片斷，並在新的字串中返回被提取的部分.引數可以為負數.

1. 正則用到的方法(正則物件再講)

match() 找到一個或多個正在表示式的匹配。

replace() 替換與正則表示式匹配的子串。  

search() 檢索與正則表示式相匹配的值

split() 把字串分割為字串陣列。

 

1. Array

Array 物件用於在單個的變數中儲存多個值。

•  Array物件建立：

new Array();

new Array(size);

new Array(element0, element1, ..., elementn);

• 引數

引數 size 是期望的陣列元素個數。返回的陣列，length 欄位將被設為 size 的值。

引數 element ..., elementn 是引數列表。當使用這些引數來呼叫建構函式 Array() 時，新建立的陣列的元素就會被初始化為這些值。它的 length 欄位也會被設定為引數的個數。

• 返回值

返回新建立並被初始化了的陣列。

如果呼叫建構函式 Array() 時沒有使用引數，那麼返回的陣列為空，length 欄位為 0。

當呼叫建構函式時只傳遞給它一個數字引數，該建構函式將返回具有指定個數、元素為 undefined 的陣列。

當其他引數呼叫 Array() 時，該建構函式將用引數指定的值初始化陣列。

當把建構函式作為函式呼叫，不使用 new 運算子時，它的行為與使用 new 運算子呼叫它時的行為完全一樣。

• 方法

只列舉常用方法,其餘方法參考api

1. 列印陣列

join(指定分隔符) 把陣列的所有元素通過指定的分隔符進行分隔,以字串形式輸出。

1. 連結陣列

concat() 連線兩個或更多的值或陣列，並返回結果

1. 對結構操作

reverse() 顛倒陣列中元素的順序。

sort() 對陣列的元素進行排序

 

1. 對內容操作

pop() 刪除並返回陣列的最後一個元素

push() 向陣列的末尾新增一個或更多元素，並返回新的長度。

shift() 刪除並返回陣列的第一個元素

unshift() 向陣列的開頭新增一個或更多元素，並返回新的長度。

1. Date

• Date 物件描述

Date 物件用於處理日期和時間。

• 建立 Date 物件的語法：

var myDate=new Date();

• 注意

Date 物件會自動把當前日期和時間儲存為其初始值。

• 方法

只列舉常用方法,其餘方法參考api

getFullYear() 從 Date 物件以四位數字返回年份。

getMonth() 從 Date 物件返回月份 (0 ~ 11)。

getDate() 從 Date 物件返回一個月中的某一天 (1 ~ 31)。

 

getHours() 返回 Date 物件的小時 (0 ~ 23)。

getMinutes() 返回 Date 物件的分鐘 (0 ~ 59)。

getSeconds() 返回 Date 物件的秒數 (0 ~ 59)。

 

getTime() 返回 1970 年 1 月 1 日至今的毫秒數。

toLocaleString() 根據本地時間格式，把 Date 物件轉換為字串。

 

1. Math

• Math物件語法

Math 物件用於執行數學任務。直接使用 Math 的屬性和方法的語法：

var pi_value=Math.PI;

var sqrt_value=Math.sqrt(15);

• 注意

Math 物件並不像 Date 和 String 那樣是物件的類，因此沒有建構函式 Math()，像 Math.sin() 這樣的函式只是函式，不是某個物件的方法。您無需建立它，通過把 Math 作為物件使用就可以呼叫其所有屬性和方法。

• 方法

只列舉常用方法,其餘方法參考api

ceil(x) 對數進行上舍入。

floor(x) 對數進行下舍入。

round(x) 把數四捨五入為最接近的整數。

random() 返回 0 ~ 1 之間的隨機數。

 

1. RegExp

• RegExp物件描述

RegExp 物件表示正則表示式，它是對字串執行模式匹配的強大工具。

• RegExp物件建立:

直接量語法

/pattern/attributes

建立 RegExp 物件的語法：

new RegExp(pattern, attributes);

• 引數

引數 pattern 是一個字串，指定了正則表示式的模式或其他正則表示式。

引數 attributes 是一個可選的字串，包含屬性 "g"、"i" 和 "m"，分別用於指定全域性匹配、區分大小寫的匹配和多行匹配。ECMAScript 標準化之前，不支援 m 屬性。如果 pattern 是正則表示式，而不是字串，則必須省略該引數。

• 返回值

一個新的 RegExp 物件，具有指定的模式和標誌。如果引數 pattern 是正則表示式而不是字串，那麼 RegExp() 建構函式將用與指定的 RegExp 相同的模式和標誌建立一個新的 RegExp 物件。

如果不用 new 運算子，而將 RegExp() 作為函式呼叫，那麼它的行為與用 new 運算子呼叫時一樣，只是當 pattern是正則表示式時，它只返回 pattern，而不再建立一個新的 RegExp 物件。

• 方法:

RegExp 物件方法

test 檢索字串中指定的值。返回 true 或 false。

compile 編譯正則表示式。

exec 檢索字串中指定的值。返回找到的值，並確定其位置。

支援正則表示式的 String 物件的方法

split() 把字串分割為字串陣列。

replace() 替換與正則表示式匹配的子串。

match() 找到一個或多個正在表示式的匹配。

search() 檢索與正則表示式相匹配的值

 

1. Global

頂層的函式:

編碼:

encodeURI() 把字串編碼為 URI。

decodeURI() 解碼某個編碼的 URI。

encodeURIComponent() 把字串編碼為 URI 元件。

decodeURIComponent() 解碼一個編碼的 URI 元件。

強轉

Number() 把物件的值轉換為數字。

String() 把物件的值轉換為字串。

數字處理

parseFloat() 解析一個字串並返回一個浮點數。

parseInt() 解析一個字串並返回一個整數。

eval執行函式

eval() 將函式引數字串，當成js程式執行

 

• 函式

建立函式

在ECMAScript中函式有以下幾種建立方式

第一種:

function 函式名稱(引數列表){

函式體;

}

第二種:

var 函式名稱=function(引數列表){

函式體;

}

第三種:

var 函式名稱=new Function(引數列表,函式體);//注意,引數和函式體用引號引起來

呼叫函式

函式可以通過其名字加上括號中的引數進行呼叫。

 

注意:

呼叫函式的時候引數個數可以不一樣.

javascript中有一個特殊的物件arguments,我們可以通過它來獲取所有函式中的引數.

 

函式返回值:

對於javascript來說，我們不必須在建立函式時，來宣告其返回值型別，無返回值也不需要使用void來宣告,但是，如果一個函式要想返回結果，我們在函式中必須使用return來返回結果,return後面的語句不再執行.如果函式無明確的返回值，或呼叫了沒有引數的 return 語句，那麼它真正返回的值是 undefined。

• 事件

事件通常與函式配合使用，這樣我們可以通過發生的事件來驅動函式執行.

常見事件:

onblur 元素失去焦點

onfocus 元素獲得焦點

 

onclick 滑鼠點選某個物件

ondblclick 滑鼠雙擊某個物件

 

onmousedown 某個滑鼠按鍵被按下

onmouseup 某個滑鼠按鍵被鬆開

onmousemove 滑鼠被移動  

onmouseout 滑鼠從某元素移開  

onmouseover 滑鼠被移到某元素之上  

 

 

onkeydown 某個鍵盤的鍵被按下  

onkeypress 某個鍵盤的鍵被按下或按住  

onkeyup 某個鍵盤的鍵被鬆開

 

onselect 文字被選定

onchange 使用者改變域的內容

onsubmit 提交按鈕被點選

 

onload 某個頁面或影象被完成載入

 

事件繫結

在javascript中事件經常與函式一起使用，那麼我們介紹一下怎樣將一個事件與函式繫結到一起，簡單說，就是某個事件被觸發後，函式如果被呼叫。

1.html事件屬性

<input type=”button”  value=”點選” onclick="dianJi()"/>

2.html dom分配事件

<script>

document.getElementById("myBtn").onclick=ddianJi;

</script>

 

阻止預設事件(相容所有瀏覽器)

if(event&&event.stopPropagation){

event.preventDefault();

}else{

window.event.returnValue = false;

}

阻止事件傳播(相容所有瀏覽器)

if(event&&event.stopPropagation){

event.stopPropagation();//firefox

}else{

window.event.cancelBubble = true;//ie

}

• BOM

介紹

IE 3.0 和 Netscape Navigator 3.0 提供了一種特性 - BOM（瀏覽器物件模型），可以對瀏覽器視窗進行訪問和操作。使用 BOM，開發者可以移動視窗、改變狀態列中的文字以及執行其他與頁面內容不直接相關的動作。使 BOM 獨樹一幟且又常常令人懷疑的地方在於，它只是 JavaScript 的一個部分，沒有任何相關的標準。

BOM 主要處理瀏覽器視窗和框架，不過通常瀏覽器特定的 JavaScript 擴充套件都被看做 BOM 的一部分。這些擴充套件包括：

1. 彈出新的瀏覽器視窗
2. 移動、關閉瀏覽器視窗以及調整視窗大小
3. 提供 Web 瀏覽器詳細資訊的定位物件
4. 提供使用者螢幕解析度詳細資訊的螢幕物件
5. 對 cookie 的支援
6. IE 擴充套件了 BOM，加入了 ActiveXObject 類，可以通過 JavaScript 例項化 ActiveX 物件,由於沒有相關的 BOM 標準，每種瀏覽器都有自己的 BOM 實現。有一些事實上的標準，如具有一個視窗物件和一個導航物件，不過每種瀏覽器可以為這些物件或其他物件定義自己的屬性和方法。

 

BOM的五個物件:Window History Location Navigator Screen 

1. Window

Window 物件表示瀏覽器中開啟的視窗,所有瀏覽器都支援該物件

如果文件包含框架（frame 或 iframe 標籤），瀏覽器會為 HTML 文件建立一個 window 物件，併為每個框架建立一個額外的 window 物件

常用屬性:

top 最頂層的先輩視窗。

parent 父視窗。

self 自己

opener 返回對建立此視窗的視窗的引用。

 

常用方法:

1. 訊息框

alert("文字") ，警告框

confirm("文字")，確認框

如果使用者點選確認，那麼返回值為 true。

如果使用者點選取消，那麼返回值為 false。

prompt("文字","預設值")，提示框。

如果使用者點選確認，那麼返回值為輸入的值。

如果使用者點選取消，那麼返回值為 null。

1. 定時器

setInterval(程式碼或者函式,間隔時間) 按照指定的週期（以毫秒計）來呼叫函式或計算表示式。

clearInterval() 取消由 setInterval() 設定的 timeout。

setTimeout(程式碼或者函式,間隔時間) 在指定的毫秒數後呼叫函式或計算表示式。

clearTimeout() 取消由 setTimeout() 方法設定的 timeout。

注意:引數如果是函式的,兩種寫法,

1. 直接寫函式名,不帶括弧,例如setInterval(show,1000);
2. 用引號引起來函式名加擴花,例如setInterval(“show()”,1000);

1. 窗體

window.open(URL,name,features,replace) 開啟一個新的瀏覽器視窗或查詢一個已命名的視窗

 

 

1. History

History 物件包含使用者（在瀏覽器視窗中）訪問過的 URL。

History 物件是 window 物件的一部分，可通過 window.history 屬性對其進行訪問。

常用方法:

back() 載入 history 列表中的前一個 URL。

forward() 載入 history 列表中的下一個 URL。

go() 載入 history 列表中的某個具體頁面。

 

1. Location

Location 物件包含有關當前 URL 的資訊。

Location 物件是 Window 物件的一個部分，可通過 window.location 屬性來訪問。

對於Location物件，我們只需要掌握href這個屬性就可以，它的作用是設定或返回完整的URL。

 

 

• DOM

DOM（文件物件模型）是 HTML 和 XML 的應用程式介面（API）。DOM 將把整個頁面規劃成由節點層級構成的文件。HTML 或 XML 頁面的每個部分都是一個節點的衍生物。

什麼是DOM

1. DOM 是 W3C（全球資訊網聯盟） 的推薦標準。
2. DOM 定義了所有文件元素的物件和屬性，以及訪問它們的方法（介面）。
3. DOM 定義了訪問諸如 XML 和 XHTML 文件的標準。
4. “W3C 文件物件模型（DOM）是一個使程式和指令碼有能力動態地訪問和更新文件的內容、結構以及樣式的平臺和語言中立的介面。”
5. W3C DOM 被分為 3 個不同的部分/級別（parts / levels）：

核心 DOM，用於任何結構化文件的標準模型

XML DOM，用於 XML 文件的標準模型

HTML DOM，用於 HTML 文件的標準模型

 

HTML DOM 定義了訪問和操作HTML文件的標準方法。

HTML DOM 把 HTML 文件呈現為帶有元素、屬性和文字的樹結構（節點樹）。

 

 

 

XML DOM與HTML DOM的關係

XML DOM 定義了訪問和處理 XML 文件的標準方法

HTML文件格式 符合XML語法標準，所以可以使用XML DOM API

在XML DOM每個元素 都會被解析為一個節點Node，而常用的節點型別又分為

元素節點  Element

屬性節點  Attribute

文字節點  Text

文件節點  Document

HTML DOM定義了針對 HTML文件的物件,可以說是一套更加適用於js技術開發 的API

HTML DOM是對XML DOM的擴充套件

進行 JavaScript DOM開發 可以同時使用 XML DOM和 HTML DOM

 

常用的方法:

getElementById    <xxx id="...">

getElementsByTagName   <xxx>

getElementsByName  <xxx name="...">

getElementsByClassName()  <xxx class="...">

常用的屬性:

innerHtml 獲取元素內容的最簡單方法是使用 innerHTML 屬性。innerHTML 屬性對於獲取或替換 HTML 元素的內容很有用。