最全JavaScript學習總結
- 小云云原創
- 2018-01-09 09:17:059196瀏覽
本文主要和大家分享JavaScript學習總結(一) ECMAScript、BOM、DOM（核心、瀏覽器物件模型與文件物件模型），JavaScript是一種解釋執行的腳本語言，是一種動態類型、弱型別、基於原型的語言，內建支援類型，它遵循ECMAScript標準。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，主要用來為HTML增加動態功能。
一、JavaScript簡介
JavaScript是一種解釋執行的腳本語言，是一種動態類型、弱型別、基於原型的語言，內建支援類型，它遵循ECMAScript標準。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，主要用來為HTML增加動態功能。
幾乎所有主流的語言都可以編譯為JavaScript，進而能夠在所有平台上的瀏覽器中執行，這也體現了JavaScript的強大性和在Web開發中的重要性。如Blade：一個Visual Studio擴展，可以將C#程式碼轉換為JavaScript，Ceylon：一個可編譯為JavaScript的、模組化的、靜態型別JVM語言。
JavaScript是一種可以同時在前端與背景運作的語言，如Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運作環境（類似Java或.NET）。 Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量且有效率。
1.1、javascript組成
ECMAScript，描述了該語言的語法和基本對象，如類型、運算、流程控制、物件導向、異常等。
文件物件模型（DOM），描述處理網頁內容的方法和介面。
瀏覽器物件模型（BOM），描述與瀏覽器互動的方法和介面。
JavaScript由物件組成，一切皆為物件。
1.2、JavaScript腳本語言特徵
a)、解釋型的腳本語言。 JavaScript是一種解釋型的腳本語言,C、C++等語言先編譯後執行,而JavaScript是在程式的運行過程中逐行進行解釋。
基於物件。 JavaScript是一種基於物件的腳本語言,它不僅可以創建物件,也能使用現有的物件。
b)、簡單。 JavaScript語言中採用的是弱類型的變數類型,對使用的資料類型未做出嚴格的要求,是基於Java基本語句和控制的腳本語言,其設計簡單緊湊。
c)、動態性。 JavaScript是一種採用事件驅動的腳本語言,它不需要經過Web伺服器就可以對使用者的輸入做出回應。造訪一個網頁時,滑鼠在網頁中進行滑鼠點擊或上下移、視窗移動等操作JavaScript都可直接對這些事件給予對應的回應。
d)、跨平台性。 JavaScript腳本語言不依賴作業系統,只需要瀏覽器的支援。因此一個JavaScript腳本在編寫後可以帶到任意機器上使用,前提上機器上的瀏覽器支 持JavaScript腳本語言,目前JavaScript已被大多數的瀏覽器所支援。
二、ECMAScript（JavaScript核心與語法）
2.1、ECMAScript定義
1)、ECMAScript是一個標準（歐洲電腦製造商協會），JavaScript只是它的一個實現，其他實現包括ActionScript（Flash腳本）
2)、ECMAScript可以為不同種類的宿主環境提供核心的腳本編程能力，即ECMAScript不與具體的宿主環境相綁定，如JavaScript的宿主環境是瀏覽器，AS的宿主環境是Flash。 、
3)、ECMAScript描述了以下內容：語法、型別、語句、關鍵字、保留字、運算子、物件等
2.2、資料型別
在JS中使用var關鍵字宣告變量，變數的類型會根據其所賦值來決定（動態類型）。 JS中資料型別分為原始資料型別（5種）和引用資料型別（Object型別）。
1）5種原始資料類型：Undefined、Null、Boolean、Number和String。需要注意的是JS中字串屬於原始資料類型。
2）typeof運算子：查看變數類型，對變數或值呼叫typeof運算子將傳回下列值之一：
undefined – 如果變數是Undefined 類型的
boolean – 如果變數是Boolean 類型的
number – 如果變數是Number 類型的
string – 如果變數是String 類型的
object – 如果變數是一種參考類型或Null 類型的
3）透過instanceof 運算子解決引用型別判斷問題
4）null 被認為是物件的佔位符，typeof運算子對於null值傳回「object」。
5）原始資料型別與引用資料型別變數在記憶體中的存放如下：
6）JS中對類型的定義：一組值的集合。如Boolean類型的值有兩個：true、false。 Undefined和Null 類型都只有一個值，分別是undefined和null。
Null 類型只有一個值，就是 null ； Undefined 類型也只有一個值，就是 undefined 。 null 和 undefined 都可以直接在 JavaScript 程式碼中使用字面量（literal）。
null 與物件參考有關係，表示為空或不存在的物件參考。當宣告一個變數卻沒有給它賦值的時候，它的值就是 undefined 。
undefined 的值會出現在如下情況：
從一個物件中取得某個屬性，如果該物件及其prototype 鏈中的物件都沒有該屬性的時候，該屬性的值為undefined 。
一個 function 如果沒有明確的透過 return 來傳回值給其呼叫者的話，其傳回值就是 undefined 。有一個特例就是在使用new的時候。
JavaScript 中的 function 可以宣告任意個形式參數，當該 function 實際被呼叫的時候，傳入的參數的個數如果小於宣告的形式參數，那麼多餘的形式參數的值為 undefined 。
範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//js对象
var user = {
name: "张学友",
address: "中国香港"
};
console.log(user.age); //访问对象中的属性，未定义
var i;
console.log(i); //变量未赋值
function f(n1){
console.log(n1);
}
var result=f(); //参数未赋值
console.log(result); //当函数没有返回值时为undefined
</script>
</body>
</html>結果：
關於null 和undefined 有一些有趣的特性：
如果對值為null 的變數使用typeof 運算子的話，得到的結果是object ；
而對undefined 的值使用typeof，得到的結果是undefined 。
如typeof null === "object" //true; typeof undefined === "undefined" //true null == undefined //true，但null !== undefined //true
#範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//js对象
var user = {
name: "张学友",
address: "中国香港"
};
console.log(typeof(user));
console.log(typeof(null));
console.log(typeof(undefined));
console.log(user.name);
console.log(user.age);
if(user.age){
console.log(user.age);
}else{
console.log("没有age属性");
}
//为false的情况
var i;
console.log(!!"");
console.log(!!0);
console.log(!!+0);
console.log(!!-0);
console.log(!!NaN);
console.log(!!null);
console.log(!!undefined);
console.log(typeof(i));
console.log(!!i);
console.log(false);
//是否不为数字,is Not a Number
console.log(isNaN("Five"));
console.log(isNaN("5"));
</script>
</body>
</html>結果：
7)、boolean類型的特殊性
8)、== 與===
JavaScript 中有兩個判斷值是否相等的運算符，== 與=== 。兩者相比，== 會做一定的型別轉換；而 === 不做型別轉換，所接受的相等條件更嚴格。
===比較時會比較類型
當然與之對應的就是!=與!==
盡量使用===而不使用==
console.log("5"==5); //true
console.log("5"===5); //false
console.log("5"!=5); //false
console.log("5"!==5); //true2.3、局部變數和全域變數
在函數中宣告的變數只能在函數中使用，當你退出函數時，變數就會被釋放，這種變數被稱為局部變數。因為每個局部變數只在各自的函數中有效，所以你可以在不同的函數中使用名稱相同的變數。
如果在函數之外宣告變量，那麼頁面中所有的函數都可以使用它。在全域變數被宣告後，它們就開始生效了。在網頁關閉後，變數才會失效。
注意：JS語言中，在程式碼區塊中宣告的變數屬於全域變數。
JavaScript是一種對資料類型變數要求不太嚴格的語言，所以不必聲明每個變數的類型，變數宣告儘管不是必須的，但在使用變數之前先進行宣告是一種好的習慣。可以使用 var 語句來進行變數宣告。如：var men = true; // men 中儲存的值為 Boolean 類型。
變數命名
JavaScript 是一種區分大小寫的語言，因此將變數命名為best和將其命名為Best是不一樣的。
另外，變數名稱的長度是任意的，但必須遵循以下規則：
1.第一個字元必須是一個字母（大小寫皆可）、或一個底線(_)或一個美元符($)。
2.後續的字元可以是字母、數字、底線或美元符。
3.變數名稱不能是保留字。
可以不使用var定義變量，但這樣定義的變數就是全域變數。
範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function a(){
var n1=1;
n2=2; //声明n2时未使用var，所以n2是全局变量，尽量避免
console.log(n1+","+n2);
}
a();
console.log(n2);
console.log(window.n2);
console.log(window.n1);
console.log(n1);
</script>
</body>
</html>結果：
2.4、陣列（Array）
①js中，陣列元素類型可以不一致。
②js中，陣列長度可以動態改變。
③接著上述程式碼，typeof arr 和 arr instanceof Array 分別輸出object和true。
console.log(typeof(names)); //object
console.log(names instanceof Array); //true
console.log("" instanceof String); //false 不是对象类型
console.log(true instanceof Boolean); //false陣列物件與方法
#Array 对数组的内部支持
Array.concat( ) 连接数组
Array.join( ) 将数组元素连接起来以构建一个字符串
Array.length 数组的大小
Array.pop( ) 删除并返回数组的最后一个元素
Array.push( ) 给数组添加元素
Array.reverse( ) 颠倒数组中元素的顺序
Array.shift( ) 将元素移出数组
Array.slice( ) 返回数组的一部分
Array.sort( ) 对数组元素进行排序
Array.splice( ) 插入、删除或替换数组的元素
Array.toLocaleString( ) 把数组转换成局部字符串
Array.toString( ) 将数组转换成一个字符串
Array.unshift( ) 在数组头部插入一个元素
2.4.1、创建
var arrayObj = new Array(); var arrayObj = new Array([size]); var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);
示例：
var array11 = new Array(); //空数组
var array12 = new Array(5); //指定长度，可越界
var array13 = new Array("a","b","c",1,2,3,true,false); //定义并赋值
var array14=[]; //空数组，语法糖
var array15=[1,2,3,"x","y"]; //定义并赋值2.4.2、访问与修改
var testGetArrValue=arrayObj[1];
arrayObj[1]= "值";
array12[8]="hello array12"; //赋值或修改
console.log(array12[8]); //取值
//遍历
for (var i = 0; i < array13.length; i++) {
console.log("arrayl3["+i+"]="+array13[i]);
}
//枚举
for(var i in array15){
console.log(i+"="+array15[i]); //此处的i是下标
}结果：
2.4.3、添加元素
将一个或多个新元素添加到数组未尾，并返回数组新长度
arrayObj. push([item1 [item2 [. . . [itemN ]]]]);
将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);
将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回被删除元素数组，deleteCount要删除的元素个数
arrayObj.splice(insertPos,deleteCount,[item1[, item2[, . . . [,itemN]]]])
示例代码：
//4.3、添加元素
var array31=[5,8];
//添加到末尾
array31.push(9);
var len=array31.push(10,11);
console.log("长度为："+len+"——"+array31);
//添加到开始
array31.unshift(4);
var len=array31.unshift(1,2,3);
console.log("长度为："+len+"——"+array31);
//添加到中间
var len=array31.splice(5,1,6,7); //从第5位开始插入，删除第5位后的1个元素，返回被删除元素
console.log("被删除："+len+"——"+array31);运行结果：
2.4.4、删除
移除最后一个元素并返回该元素值
arrayObj.pop();
移除最前一个元素并返回该元素值，数组中元素自动前移
arrayObj.shift();
删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素
arrayObj.splice(deletePos,deleteCount);
示例：
//4.4、删除
var array41=[1,2,3,4,5,6,7,8];
console.log("array41："+array41);
//删除最后一个元素，并返回
var e=array41.pop();
console.log("被删除："+e+"——"+array41);
//删除首部元素，并返回
var e=array41.shift();
console.log("被删除："+e+"——"+array41);
//删除指定位置与个数
var e=array41.splice(1,4); //从索引1开始删除4个
console.log("被删除："+e+"——"+array41);结果：
2.4.5、截取和合并
以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素
arrayObj.slice(start, [end]);
将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]);
示例：
//4.5、截取和合并
var array51=[1,2,3,4,5,6];
var array52=[7,8,9,0,"a","b","c"];
//截取，切片
var array53=array51.slice(2); //从第3个元素开始截取到最后
console.log("被截取："+array53+"——"+array51);
var array54=array51.slice(1,4); //从第3个元素开始截取到索引号为3的元素
console.log("被截取："+array54+"——"+array51);
//合并
var array55=array51.concat(array52,["d","e"],"f","g");
console.log("合并后："+array55);结果：
2.4.6、拷贝
返回数组的拷贝数组，注意是一个新的数组，不是指向
arrayObj.slice(0);
返回数组的拷贝数组，注意是一个新的数组，不是指向
arrayObj.concat();
因为数组是引用数据类型，直接赋值并没有达到真正实现拷贝，地址引用，我们需要的是深拷贝。
2.4.7、排序
反转元素（最前的排到最后、最后的排到最前），返回数组地址
arrayObj.reverse();
对数组元素排序，返回数组地址
arrayObj.sort();
arrayObj.sort(function(obj1,obj2){});
示例：
var array71=[4,5,6,1,2,3];
array71.sort();
console.log("排序后："+array71);
var array72=[{name:"tom",age:19},{name:"jack",age:20},{name:"lucy",age:18}];
array72.sort(function(user1,user2){
return user1.age<user2.age;
});
console.log("排序后：");
for(var i in array72) console.log(array72[i].name+"，"+array72[i].age);结果：
2.4.8、合并成字符
返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用 separator 隔开。
arrayObj.join(separator);
示例代码：
//4.8、合并成字符与将字符拆分成数组
var array81=[1,3,5,7,9];
var ids=array81.join(",");
console.log(ids);
//拆分成数组
var text="hello nodejs and angular";
var array82=text.split(" ");
console.log(array82);运行结果：
所有代码：
数组操作
2.5、正则表达式RegExp
RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
RegExp对象：该对象代表正则表达式，用于字符串匹配
① 两种RegExp对象创建方式：
方式一，new 一个RegExp对象：var regExp = new RegExp(“[a-zA-Z0-9]{3,8}”);
方式二，通过字面量赋值：var regExp = /^[a-zA-Z0-9]{3,8}$/;
② 正则表达式的具体写法使用时查询文档。
③ 常用方法：test(string)，返回true或false。
直接量语法
/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 物件。
拋出
SyntaxError - 如果 pattern 不是合法的正則表達式，或 attributes 含有 "g"、"i" 和 "m" 之外的字符，則拋出該異常。
TypeError - 如果 pattern 是 RegExp 對象，但沒有省略 attributes 參數，則拋出該例外。
修飾符
| 修飾符 | #描述 |
|---|---|
| #執行對大小寫不敏感的匹配。 | |
| 執行全域匹配（查找所有匹配而不是在找到第一個匹配後停止）。 | |
| 執行多行比對。 |
| 描述 | |
|---|---|
| #找出方括號之間的任何字元。 | |
| 找出任何不在方括號之間的字元。 | |
| 找出任何從 0 至 9 的數字。 | |
| 尋找任何從小寫 a 到小寫 z 的字元。 | |
| 尋找任何從大寫 A 到大寫 Z 的字元。 | |
| 尋找任何從大寫 A 到小寫 z 的字元。 | |
| 尋找給定集合內的任何字元。 | |
| 找出給定集合外的任何字元。 | |
| 尋找任何指定的選項。 |
| 描述 | |
|---|---|
| 尋找單個字符，除了換行和行結束符。 | |
| 找出單字字元。 | |
| 找出非單字字元。 | |
| 找出數字。 | |
| 尋找非數字字元。 | |
| 尋找空白字元。 | |
| 尋找非空白字元。 | |
| 符合單字邊界。 | |
| 符合非單字邊界。 | |
| 尋找 NUL 字元。 | |
| 尋找換行符號。 | |
| 尋找換頁符號。 | |
| 找回車符。 | |
| 尋找製表符。 | |
| 尋找垂直製表符。 | |
| 尋找以八進位數 xxx 規定的字元。 | |
| 找出以十六進位數 dd 規定的字元。 | |
| 找出以十六進位數 xxxx 規定的 Unicode 字元。 |
| 描述 | |||
|---|---|---|---|
| 符合任何包含至少一個n 的字串。 | |||
| 符合任何包含零個或多個 n 的字串。 | |||
| 符合任何包含零個或一個 n 的字串。 | |||
| 符合包含 X 個 n 的序列的字串。 | |||
| 符合包含 X 至 Y 個 n 的序列的字串。 | |||
| 符合包含至少 X 個 n 的序列的字串。 | |||
| 符合任何結尾為 n 的字串。 | |||
| 符合任何開頭為 n 的字串。 | |||
| 符合任何其後緊接指定字串 n 的字串。 | |||
| 符合任何其後沒有緊接指定字串 n 的字串。 | |||
| 属性 | 描述 | FF | IE |
|---|---|---|---|
| global | RegExp 对象是否具有标志 g。 | 1 | 4 |
| ignoreCase | RegExp 对象是否具有标志 i。 | 1 | 4 |
| lastIndex | 一个整数，标示开始下一次匹配的字符位置。 | 1 | 4 |
| multiline | RegExp 对象是否具有标志 m。 | 1 | 4 |
| source | 正则表达式的源文本。 | 1 | 4 |
RegExp 对象方法
| 方法 | 描述 | FF | IE |
|---|---|---|---|
| compile | 编译正则表达式。 | 1 | 4 |
| exec | 检索字符串中指定的值。返回找到的值，并确定其位置。 | 1 | 4 |
| test | 检索字符串中指定的值。返回 true 或 false。 | 1 | 4 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var reg1=/\d{2}/igm; //定义正则
var reg2=new RegExp("\D{2}","igm"); //定义正则
//验证邮政编码
var reg3=/^\d{6}$/igm;
console.log(reg3.test("519000")); //true
console.log(reg3.test("abc123")); //false
//查找同时出现3个字母的索引
var reg4=new RegExp("[A-Za-z]{3}","igm");
console.log(reg4.exec("ab1cd2efg3lw3sd032kjsdljkf23sdlk"));
//["efg", index: 6, input: "ab1cd2efg3lw3sd032kjsdljkf23sdlk"]
//身份证
//411081199004235955 41108119900423595x 41108119900423595X
//邮箱
//zhangguo123@qq.com zhangguo@sina.com.cn
</script>
</body>
</html>结果：
支持正则表达式的 String 对象的方法
| 方法 | 描述 | FF | IE |
|---|---|---|---|
| search | 检索与正则表达式相匹配的值。 | 1 | 4 |
| match | 找到一个或多个正则表达式的匹配。 | 1 | 4 |
| replace | 替换与正则表达式匹配的子串。 | 1 | 4 |
| split | 把字符串分割为字符串数组。 | 1 | 4 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var reg1=/\d{2}/igm;
console.log("kjds23sd9we23sdoi1we230we12sd".search(reg1)); //4 第一次匹配成功的索引
console.log("kjds23sd9we56sdoi1we780we98sd".match(reg1)); //["23", "56", "78", "98"]
//删除所有数字
console.log("kjds23sd9we56sdoi1we780we98sd".replace(/\d/igm,"")); //kjdssdwesdoiwewesd
//所有数字增加大括号，反向引用 $组号 括号用于分组
console.log("kjds23sd9we56sdoi1we780we98sd".replace(/(\d+)/igm,"\{$1\}")); //kjds{23}sd{9}we{56}sdoi{1}we{780}we{98}sd
//拆分
console.log("kjds23sd9we56sdoi1we780we98sd".split(/[w\d]+/)); //["kjds", "sd", "e", "sdoi", "e", "e", "sd"]
//ID (虚拟的)
//411081197104235955 411081198600423595x 41108119880423595X
//^\d{17}[xX0-9]{1}$
//Email
//zhangguo123@qq.com zhangguo@sina.com.cn
//\w+@\w+\.\w{2,5}(\.\w{2,5})?
</script>
</body>
</html>结果：
2.6、字符串对象String
字符串是 JavaScript 的一种基本的数据类型。
String 对象的 length 属性声明了该字符串中的字符数。
String 类定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符或子串。
需要注意的是，JavaScript 的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。
String 对象属性
| 属性 | 描述 |
|---|---|
| constructor | 对创建该对象的函数的引用 |
| length | 字符串的长度 |
| prototype | 允许您向对象添加属性和方法 |
String 物件方法
| 方法 | 描述 |
|---|---|
| #anchor() | 建立 HTML 錨。 |
| big() | 用大號字體顯示字串。 |
| blink() | 顯示閃爍字串。 |
| bold() | 使用粗體顯示字串。 |
| charAt() | 傳回指定位置的字元。 |
| charCodeAt() | 傳回指定的位置的字元的 Unicode 編碼。 |
| concat() | 連接字串。 |
| fixed() | 以打字機文字顯示字串。 |
| fontcolor() | 使用指定的顏色來顯示字串。 |
| fontsize() | 使用指定的尺寸來顯示字串。 |
| fromCharCode() | 從字元編碼建立一個字串。 |
| indexOf() | 檢索字串。 |
| italics() | 使用斜體顯示字串。 |
| lastIndexOf() | 從後向前搜尋字串。 |
| link() | 將字串顯示為連結。 |
| localeCompare() | 以本地特定的順序來比較兩個字串。 |
| match() | 找到一個或多個正規表示式的符合。 |
| replace() | 取代與正規表示式相符的子字串。 |
| search() | 檢索與正規表示式相符的值。 |
| slice() | 提取字串的片段，並在新的字串中傳回被提取的部分。 |
| small() | 使用小字號來顯示字串。 |
| split() | 把字串分割成字串陣列。 |
| strike() | 使用刪除線來顯示字串。 |
| sub() | 把字串顯示為下標。 |
| substr() | 從起始索引號擷取字串中指定數目的字元。 |
| substring() | 會擷取字串中兩個指定的索引號之間的字元。 |
| sup() | 把字串顯示為上標。 |
| toLocaleLowerCase() | 把字串轉換成小寫。 |
| toLocaleUpperCase() | 將字串轉換為大寫。 |
| toLowerCase() | 把字串轉換成小寫。 |
| toUpperCase() | 把字串轉換成大寫。 |
| toSource() | 代表物件的原始程式碼。 |
| toString() | 傳回字串。 |
| valueOf() | 傳回某個字串物件的原始值。 |
2.7、時間日期物件Date
Date 物件用於處理日期和時間。
建立Date 物件的語法：
var myDate=new Date();
註解：Date 物件會自動將目前日期和時間儲存為其初始值。
Date 物件屬性
| 屬性 | #描述 |
|---|---|
| constructor | 傳回對建立此物件的Date 函數的參考。 |
| prototype | 使您有能力為物件新增屬性和方法。 |
Date 物件方法
| #方法 | 描述 |
|---|---|
| Date() | 返回當日的日期和時間。 |
| getDate() | 從 Date 物件傳回一個月中的某一天 (1 ~ 31)。 |
| getDay() | 從 Date 物件傳回一週中的某一天 (0 ~ 6)。 |
| getMonth() | 從 Date 物件傳回月份 (0 ~ 11)。 |
| getFullYear() | 從 Date 物件以四位數傳回年份。 |
| getYear() | 請使用 getFullYear() 方法來取代。 |
| getHours() | 傳回 Date 物件的小時 (0 ~ 23)。 |
| getMinutes() | 返回 Date 物件的分鐘 (0 ~ 59)。 |
| getSeconds() | 傳回 Date 物件的秒數 (0 ~ 59)。 |
| getMilliseconds() | 傳回 Date 物件的毫秒(0 ~ 999)。 |
| getTime() | 傳回 1970 年 1 月 1 日至今的毫秒數。 |
| getTimezoneOffset() | 傳回本地時間與格林威治標準時間 (GMT) 的分鐘差。 |
| getUTCDate() | 根據世界時從 Date 物件返回月中的一天 (1 ~ 31)。 |
| getUTCDay() | 根據世界時從 Date 物件返回週中的一天 (0 ~ 6)。 |
| getUTCMonth() | 根據世界時從 Date 物件傳回月份 (0 ~ 11)。 |
| getUTCFullYear() | 根據世界時從 Date 物件傳回四位數的年份。 |
| getUTCHours() | 根據世界時傳回 Date 物件的小時 (0 ~ 23)。 |
| getUTCMinutes() | 根據世界時傳回 Date 物件的分鐘 (0 ~ 59)。 |
| getUTCSeconds() | 根據世界時傳回 Date 物件的秒鐘 (0 ~ 59)。 |
| getUTCMilliseconds() | 根據世界時傳回 Date 物件的毫秒(0 ~ 999)。 |
| parse() | 傳回1970年1月1日午夜到指定日期（字串）的毫秒數。 |
| setDate() | 設定 Date 物件中月的某一天 (1 ~ 31)。 |
| setMonth() | 設定 Date 物件中月份 (0 ~ 11)。 |
| setFullYear() | 設定 Date 物件中的年份（四位數字）。 |
| setYear() | 請使用 setFullYear() 方法來取代。 |
| setHours() | 設定 Date 物件中的小時 (0 ~ 23)。 |
| setMinutes() | 設定 Date 物件中的分鐘 (0 ~ 59)。 |
| setSeconds() | 設定 Date 物件中的秒鐘 (0 ~ 59)。 |
| setMilliseconds() | 設定 Date 物件中的毫秒 (0 ~ 999)。 |
| setTime() | 以毫秒設定 Date 物件。 |
| setUTCDate() | 根據世界時設定 Date 物件中月份的一天 (1 ~ 31)。 |
| setUTCMonth() | 根據世界時設定 Date 物件中的月份 (0 ~ 11)。 |
| setUTCFullYear() | 根據世界時設定 Date 物件中的年份（四位數字）。 |
| setUTCHours() | 根據世界時設定 Date 物件中的小時 (0 ~ 23)。 |
| setUTCMinutes() | 根據世界時設定 Date 物件中的分鐘 (0 ~ 59)。 |
| setUTCSeconds() | 根據世界時設定 Date 物件中的秒鐘 (0 ~ 59)。 |
| setUTCMilliseconds() | 根據世界時設定 Date 物件中的毫秒 (0 ~ 999)。 |
| toSource() | 傳回該物件的原始程式碼。 |
| toString() | 把 Date 物件轉換為字串。 |
| toTimeString() | 把 Date 物件的時間部分轉換為字串。 |
| toDateString() | 把 Date 物件的日期部分轉換為字串。 |
| toGMTString() | 請使用 toUTCString() 方法取代。 |
| toUTCString() | 根據世界時，把 Date 物件轉換為字串。 |
| toLocaleString() | 根據本機時間格式，把 Date 物件轉換為字串。 |
| toLocaleTimeString() | 根據本機時間格式，把 Date 物件的時間部分轉換成字串。 |
| toLocaleDateString() | 根據本機時間格式，把 Date 物件的日期部分轉換成字串。 |
| UTC() | 根據世界時傳回 1970 年 1 月 1 日 到指定日期的毫秒數。 |
| valueOf() | 傳回 Date 物件的原始值。 |
2.8、数学对象Math
Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。
var pi_value=Math.PI; var sqrt_value=Math.sqrt(15);
Math 对象属性
| 属性 | 描述 |
|---|---|
| E | 返回算术常量 e，即自然对数的底数（约等于2.718）。 |
| LN2 | 返回 2 的自然对数（约等于0.693）。 |
| LN10 | 返回 10 的自然对数（约等于2.302）。 |
| LOG2E | 返回以 2 为底的 e 的对数（约等于 1.414）。 |
| LOG10E | 返回以 10 为底的 e 的对数（约等于0.434）。 |
| PI | 返回圆周率（约等于3.14159）。 |
| SQRT1_2 | 返回返回 2 的平方根的倒数（约等于 0.707）。 |
| SQRT2 | 返回 2 的平方根（约等于 1.414）。 |
Math 对象方法
| 方法 | 描述 |
|---|---|
| abs(x) | 返回数的绝对值。 |
| acos(x) | 返回数的反余弦值。 |
| asin(x) | 返回数的反正弦值。 |
| atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 |
| atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。 |
| ceil(x) | 对数进行上舍入。 |
| cos(x) | 返回数的余弦。 |
| exp(x) | 返回 e 的指数。 |
| floor(x) | 对数进行下舍入。 |
| log(x) | 返回数的自然对数（底为e）。 |
| max(x,y) | 返回 x 和 y 中的最高值。 |
| min(x,y) | 返回 x 和 y 中的最低值。 |
| pow(x,y) | 返回 x 的 y 次幂。 |
| random() | 返回 0 ~ 1 之间的随机数。 |
| round(x) | 把数四舍五入为最接近的整数。 |
| sin(x) | 返回数的正弦。 |
| sqrt(x) | 返回数的平方根。 |
| tan(x) | 返回角的正切。 |
| toSource() | 返回该对象的源代码。 |
| valueOf() | 返回 Math 对象的原始值。 |
2.9、JavaScript 全域物件
全域屬性和函數可用於所有內建的 JavaScript 物件。
全域物件是預先定義的對象，作為 JavaScript 的全域函數和全域屬性的佔位符。透過使用全域對象，可以存取所有其他所有預先定義的對象、函數和屬性。全域物件不是任何物件的屬性，所以它沒有名稱。
在頂層 JavaScript 程式碼中，可以用關鍵字 this 引用全域物件。但通常不必用這種方式引用全域對象，因為全域對像是作用域鏈的頭，這意味著所有非限定性的變數和函數名稱都會作為該對象的屬性來查詢。例如，當JavaScript 程式碼引用 parseInt() 函數時，它引用的是全域物件的 parseInt 屬性。全域物件是作用域鏈的頭，也意味著在頂層 JavaScript 程式碼中宣告的所有變數都將成為全域物件的屬性。
全域物件只是一個對象，而不是類別。既沒有建構函數，也無法實例化一個新的全域物件。
在 JavaScript 程式碼嵌入一個特殊環境時，全域物件通常具有環境特定的屬性。實際上，ECMAScript 標準並沒有規定全域物件的類型，JavaScript 的實作或嵌入的 JavaScript 都可以把任意型別的物件當作全域對象，只要該物件定義了這裡列出的基本屬性和函數。例如，在允許透過 LiveConnect 或相關的技術來腳本化 Java 的 JavaScript 實作中，全域物件被賦予了這裡列出的 java 和 Package 屬性以及 getClass() 方法。而在客戶端 JavaScript 中，全域物件就是 Window 對象，表示允許 JavaScript 程式碼的 Web 瀏覽器視窗。
頂層函數（全域函數）
| 函數 | #描述 |
|---|---|
| decodeURI() | 解碼某個編碼的URI。 |
| decodeURIComponent() | 解碼一個編碼的 URI 元件。 |
| encodeURI() | 把字串編碼為 URI。 |
| encodeURIComponent() | 把字串編碼為 URI 元件。 |
| escape() | 對字串進行編碼。 |
| eval() | 計算 JavaScript 字串，並將它當作腳本程式碼來執行。 |
| getClass() | 傳回一個 JavaObject 的 JavaClass。 |
| isFinite() | 檢查某個值是否為有窮大的數。 |
| isNaN() | 檢查某個值是否是數字。 |
| Number() | 把物件的值轉換成數字。 |
| parseFloat() | 解析一個字串並傳回一個浮點數。 |
| parseInt() | 解析一個字串並傳回一個整數。 |
| String() | 把物件的值轉換成字串。 |
| unescape() | 對由 escape() 編碼的字串進行解碼。 |
頂層屬性（全域屬性）
| #方法 | ##描述||
|---|---|---|
| 代表正的無窮大的數值。 | ||
| 代表 java.* 套件層級的一個 JavaPackage。 | ||
| 指示某個值是不是數字值。 | ||
| 根 JavaPackage 物件。 | ||
| 指示未定義的值。 | ||
| 节点类型 | 描述 | |
|---|---|---|
| 1 | Element | 代表元素 |
| 2 | Attr | 代表属性 |
| 3 | Text | 代表元素或属性中的文本内容。 |
| 4 | CDATASection | 代表文档中的 CDATA 部分（不会由解析器解析的文本）。 |
| 5 | EntityReference | 代表实体引用。 |
| 6 | Entity | 代表实体。 |
| 7 | ProcessingInstruction | 代表处理指令。 |
| 8 | Comment | 代表注释。 |
| 9 | Document | 代表整个文档（DOM 树的根节点）。 |
| 10 | DocumentType | 向为文档定义的实体提供接口 |
| 11 | DocumentFragment | 代表轻量级的 Document 对象，能够容纳文档的某个部分 |
| 12 | Notation | 代表 DTD 中声明的符号。 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<p id="p1"></p>
<script type="text/javascript">
var p1 = document.getElementById("p1");
console.log(p1.nodeType); //结点类型 1 Element 代表元素
console.log(p1.nodeName); //p 结点名称
var id = p1.getAttributeNode("id"); //获得p1的属性结点id
console.log(id.nodeType); //2 Attr 代表属性
console.log(id.nodeName); //id 结点名称
</script>
</body>
</html>结果：
4.2、节点关系
| nodeType | 返回节点类型的数字值（1~12） |
| nodeName | 元素节点:标签名称(大写)、属性节点:属性名称、文本节点:#text、文档节点:#document |
| nodeValue | 文本节点:包含文本、属性节点:包含属性、元素节点和文档节点:null |
| parentNode | 父节点 |
| parentElement | 父节点标签元素 |
| childNodes | 所有子节点 |
| children | 第一层子节点 |
| firstChild | 第一个子节点，Node 对象形式 |
| firstElementChild | 第一个子标签元素 |
| lastChild | 最后一个子节点 |
| lastElementChild | 最后一个子标签元素 |
| previousSibling | 上一个兄弟节点 |
| previousElementSibling | 上一个兄弟标签元素 |
| nextSibling | 下一个兄弟节点 |
| nextElementSibling | 下一个兄弟标签元素 |
| childElementCount | 第一层子元素的个数(不包括文本节点和注释) |
| ownerDocument | 指向整个文档的文档节点 |
节点关系方法：
hasChildNodes() 包含一个或多个节点时返回true
contains() 如果是后代节点返回true
isSameNode()、isEqualNode() 传入节点与引用节点的引用为同一个对象返回true
compareDocumentPostion() 确定节点之间的各种关系
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<p id="p1">
<p id="p1">p1</p>
<p id="p2">p2</p>
<p id="p3">p3</p>
</p>
<script type="text/javascript">
var p1 = document.getElementById("p1");
console.log(p1.firstChild); //换行
console.log(p1.firstElementChild); //p1结点
var childs=p1.childNodes; //所有子节点
for(var i=0;i<childs.length;i++){
console.log(childs[i]);
}
console.log(p1.hasChildNodes());
</script>
</body>
</html>结果：
4.3、选择器
getElementById() |
一个参数:元素标签的ID |
| getElementsByTagName() | 一个参数:元素标签名 |
| getElementsByName() | 一个参数:name属性名 |
| getElementsByClassName() | 一个参数:包含一个或多个类名的字符串 |
classList |
返回所有类名的数组
|
| querySelector() | 接收CSS选择符，返回匹配到的第一个元素，没有则null |
| querySelectorAll() | 接收CSS选择符，返回一个数组，没有则返回[] |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
<style type="text/css">
.red {
color: red;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<p id="p1" class="c1 c2 red">
<p id="p1">p1</p>
<p id="p2">p2</p>
<p id="p3">p3</p>
</p>
<script type="text/javascript">
var ps = document.getElementsByTagName("p");
console.log(ps);
var p1 = document.querySelector("#p1");
console.log(p1.classList);
p1.classList.add("blue"); //增加新式
p1.classList.toggle("green"); //有就删除，没有就加
p1.classList.toggle("red");
console.log(p1.classList);
</script>
</body>
</html>结果：
4.4、样式操作方法style
| style.cssText | 可对style中的代码进行读写 |
| style.item() | 返回给定位置的CSS属性的名称 |
| style.length | style代码块中参数个数 |
| style.getPropertyValue() | 返回给定属性的字符串值 |
| style.getPropertyPriority() | 检测给定属性是否设置了!important，设置了返回"important";否则返回空字符串 |
| style.removeProperty() | 删除指定属性 |
| style.setProperty() | 设置属性，可三个参数:设置属性名，设置属性值，是否设置为"important"(可不写或写"") |
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
<style type="text/css">
.#p1{
background-color: red;
}
</style>
</head>
<body>
<p id="p1" class="c1 c2 red">
<p id="p1">p1</p>
<p id="p2">p2</p>
<p id="p3">p3</p>
</p>
<script type="text/javascript">
var p1=document.getElementById("p1");
p1.style.backgroundColor="lightgreen"; //background-color 去-变Camel命令
</script>
</body>
</html>结果：
4.5、元素节点ELEMENT
| nodeName | 访问元素的标签名 |
| tagName | 访问元素的标签名 |
| createElement() | 创建节点 |
| appendChild() | 末尾添加节点，并返回新增节点 |
| insertBefore() | 参照节点之前插入节点，两个参数：要插入的节点和参照节点 |
| insertAfter() | 参照节点之后插入节点，两个参数：要插入的节点和参照节点 |
| replaceChild() | 替换节点，两个参数：要插入的节点和要替换的节点(被移除) |
| removeChild() | 移除节点 |
| cloneNode() | 克隆，一个布尔值参数，true为深拷贝，false为浅拷贝 |
| importNode() | 从文档中复制一个节点，两个参数：要复制的节点和布尔值(是否复制子节点) |
| insertAdjacentHTML() |
插入文本，两个参数：插入的位置和要插入文本
|
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<script type="text/javascript">
var data = [{
id: 1,
name: "tom"
}, {
id: 2,
name: "rose"
}, {
id: 3,
name: "mark"
}, {
id: 4,
name: "jack"
}, {
id: 5,
"name": "lucy"
}];
var ul = document.createElement("ul");
for(var i = 0; i < data.length; i++) {
var li = document.createElement("li");
li.innerHTML = data[i].name;
var span=document.createElement("span");
span.innerText=" 删除";
span.setAttribute("data-id",data[i].id);
li.appendChild(span);
span.onclick=function(){
var id=this.getAttribute("data-id");
for(var i=0;i<data.length;i++){
if(data[i].id==id){
data.splice(i,1); //从data数组的第i位置开始删除1个元素
}
}
this.parentNode.parentNode.removeChild(this.parentNode);
console.log("还有："+data.length+"个对象"+JSON.stringify(data));
}
ul.appendChild(li);
}
document.body.appendChild(ul);
</script>
</body>
</html>结果：
4.6、属性节点attributes
attributes |
获取所有标签属性 |
| getAttribute() | 获取指定标签属性 |
| setAttribute() | 设置指定标签属 |
| removeAttribute() | 移除指定标签属 |
|
var s = document.createAttribute("age") s.nodeValue = "18" |
创建age属性 设置属性值为18 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<input id="txtName" type="text" />
<script>
var txtName=document.getElementById("txtName");
txtName.setAttribute("title","这是txtName"); //设置属性
console.log(txtName.getAttribute("title")); //获得属性
//创建一个属性
var placeholder=document.createAttribute("placeholder");
placeholder.nodeValue="请输入姓名"; //设置属性值
txtName.setAttributeNode(placeholder); //添加属性
</script>
</body>
</html>结果：
4.7、文本节点TEXT
| innerText | 所有的纯文本内容，包括子标签中的文本 |
| outerText | 与innerText类似 |
| innerHTML | 所有子节点(包括元素、注释和文本节点) |
| outerHTML | 返回自身节点与所有子节点 |
| textContent | 与innerText类似，返回的内容带样式 |
| data | 文本内容 |
| length | 文本长度 |
| createTextNode() | 创建文本 |
| normalize() | 删除文本与文本之间的空白 |
| splitText() | 分割 |
| appendData() | 追加 |
| deleteData(offset,count) | 从offset指定的位置开始删除count个字符 |
| insertData(offset,text) | 在offset指定的位置插入text |
| replaceData(offset,count,text) | 替换，从offset开始到offscount处的文本被text替换 |
| substringData(offset,count) | 提取从ffset开始到offscount处的文本 |
4.8、文档节点 Document
| document.documentElement | 代表页面中的100db36a723c770d327fc0aef2ce13b1元素 |
| document.body | 代表页面中的6c04bd5ca3fcae76e30b72ad730ca86d元素 |
| document.doctype | 代表1a309583e26acea4f04ca31122d8c535标签 |
| document.head | 代表页面中的93f0f5c25f18dab9d176bd4f6de5d30e元素 |
| document.title | 代表b2386ffb911b14667cb8f0f91ea547a7元素的文本，可修改 |
| document.URL | 当前页面的URL地址 |
| document.domain | 当前页面的域名 |
| document.charset | 当前页面使用的字符集 |
| document.defaultView | 返回当前 document对象所关联的 window 对象，没有返回 null |
| document.anchors | 文档中所有带name属性的3499910bf9dac5ae3c52d5ede7383485元素 |
| document.links | 文档中所有带href属性的3499910bf9dac5ae3c52d5ede7383485元素 |
| document.forms | 文档中所有的ff9c23ada1bcecdd1a0fb5d5a0f18437元素 |
| document.images | 文档中所有的a1f02c36ba31691bcfe87b2722de723b元素 |
| document.readyState | 两个值:loading(正在加载文档)、complete(已经加载完文档) |
| document.compatMode | 两个值：BackCompat：标准兼容模式关闭、CSS1Compat：标准兼容模式开启 |
|
write()、writeln()、 open()、close() |
write()文本原样输出到屏幕、writeln()输出后加换行符、 open()清空内容并打开新文档、close()关闭当前文档，下次写是新文档 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<script type="text/javascript">
console.log("标题" + document.title);
console.log("地址" + document.URL);
console.log("域名" + document.domain);
console.log("编码" + document.charset);
document.open
</script>
</body>
</html>结果：
五、学习资料
http://common.jb51.net/tag/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3JavaScript%E7%B3%BB%E5%88%97/1.htm
六、作业
6.1)、尽量多的输出javascript中为false的情况
6.2)、尽量多的输出javascript中为undefined的情况
6.3)、用示例说明未定义全局变量，特别是没有使用var关键字时
6.4)、请定对照“数组”一节的内容，练习数组定义与每一个已列出的数组方法
6.5)、请使用纯JavaScript（不允许使用任何三方库，如jQuery）完成下列功能：
要求：
全选、反选、子项全部选项时父项被选择
完成所有功能
鼠标移动到每一行上时高亮显示（js）
尽量使用弹出窗口完成增加、修改、详细功能
删除时提示
使用正则验证
封装代码，最终运行的代码只有一个对象，只对外暴露一个对象
越漂亮越好
6.6)、请写出以下两个正则表达式并使用两个文本框模拟用户提交数据时验证：
//身份证
//411081199004235955 41108119900423595x 41108119900423595X
//邮箱
//zhangguo123@qq.com zhangguo@sina.com.cn
6.7)、请写一个javascript方法getQuery(key)用于根据key获得url中的参值，如果不指定参数则返回一个数组返回所有参数，如：
url: http://127.0.0.1?id=1&name=tom
getQuery("id") 返回 1
getQuery() 返回[{key:id,value:1},{key:name,value:tom}]
//思考一个如果有多个想同的key时怎样处理相关推荐：
以上是最全JavaScript學習總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！