JavaScript學(xué)習(xí)指南

1.1 JavaScript基礎(chǔ)概念：

JavaScript (ECMAScript) ：JavaScript 是腳本語言。JavaScript和ECMAScript通常被人用來表達(dá)相同的含義，但是JavaScript并不是這么一點(diǎn)含義，它是由ECMAScript 核心. DOM 文檔對(duì)象模型. BOM 瀏覽器對(duì)象模型 這三部分組成。瀏覽器會(huì)在讀取代碼時(shí)，逐行地執(zhí)行腳本代碼。而對(duì)于傳統(tǒng)編程來說，會(huì)在執(zhí)行前對(duì)所有代碼進(jìn)行編譯。

1.1.1 ECMAScript

組成部分：語法，類型，語句，關(guān)鍵字，保留字，操作符，對(duì)象。

1.1.2 DOM

文檔對(duì)象模型（DOM ， Document Object Model）是針對(duì)XML但是經(jīng)過拓展用于HTML的應(yīng)用程序編程接口。DOM把整個(gè)頁面

映射為一個(gè)多層節(jié)點(diǎn)結(jié)構(gòu)，開發(fā)人員借助DOM Api對(duì)節(jié)點(diǎn)進(jìn)行操作。

HTML DOM （文檔對(duì)象模型）

當(dāng)網(wǎng)頁被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁面的文檔對(duì)象模型（Document Object Model）。

HTML DOM 模型被構(gòu)造為對(duì)象的樹。

HTML DOM 樹:

image.png

通過可編程的對(duì)象模型，JavaScript 獲得了足夠的能力來創(chuàng)建動(dòng)態(tài)的 HTML。

· JavaScript 能夠改變頁面中的所有 HTML 元素

· JavaScript 能夠改變頁面中的所有 HTML 屬性

· JavaScript 能夠改變頁面中的所有 CSS 樣式

· JavaScript 能夠?qū)撁嬷械乃惺录龀龇磻?yīng)

1.1.3 BOM

瀏覽器對(duì)象模型（Browser Object Model）使用BOM控制瀏覽器顯示頁面意外的部分。

1.2 在HTML中使用JavaScript方式

1.2.1 javaScript腳本加載的位置

1 通過在網(wǎng)頁中加入<Script>…</Script>標(biāo)記JavaScript的開始和結(jié)束，將JavaScript代碼放到<Script>…</Script>之間

2 也可以引入一個(gè)外部的JavaScript文件，這個(gè)JavaScript文件一般以.js作為擴(kuò)展名

3 原則上，放在<head></head>之間。但視情況可以放在網(wǎng)頁的任何部分

4 一個(gè)頁面可以有幾個(gè)<Script>…</Script，不同部分的方法和變量，可以共享。

1.2.2 javaScript語句的注意點(diǎn)

（1）對(duì)大小寫敏感

（2）自動(dòng)忽略多余的空格

（3）在文本字符串中使用反斜杠對(duì)代碼行進(jìn)行換行

（4）單行注釋（//）多行注釋（/* */）

1.3 JavaScript基本語法：

1.3.1 變量：

什么是變量？

變量是用于存儲(chǔ)信息的容器

變量的聲明

語法：

var 變量名

變量名 = 值;

變量要先聲明再賦值

變量可以重復(fù)賦值

變量的命名規(guī)則

變量必須以字母開頭；

變量也能以$和_符號(hào)開頭（不過我們不推薦這么做）；

變量名稱對(duì)大小寫敏感（a和A是不同的變量)。

1.3.2 數(shù)據(jù)類型

typeof操作符：用于檢測(cè)給定變量的數(shù)據(jù)類型。

· undefined類型 只有一個(gè)特殊的值就是undefined，在使用var聲明變量但未初始化時(shí)，變量的值是undefined。

· null類型 只有一個(gè)特殊的值就是null，null值表示一個(gè)空對(duì)象指針，使用typeof操作符檢測(cè)null值會(huì)返回“object”。

· boolean類型 布爾值和布爾代數(shù)的表示完全一致，一個(gè)布爾值只有true、false兩種值，要么是true，要么是false，可以直接用true、false表示布爾值，也可以通過布爾運(yùn)算計(jì)算出來。boolean****類型的字面值****true****和****false****是區(qū)分大小寫的。

· number類型 JavaScript不區(qū)分整數(shù)和浮點(diǎn)數(shù)，統(tǒng)一用Number表示，以下都是合法的Number類型：

123; // 整數(shù)123

070; //八進(jìn)制的56

0xA; //十六進(jìn)制的10

0.456; // 浮點(diǎn)數(shù)0.456

1.2345e3; // 科學(xué)計(jì)數(shù)法表示1.2345x1000，等同于1234.5

-99; // 負(fù)數(shù)

NaN; // NaN表示Not a Number，當(dāng)無法計(jì)算結(jié)果時(shí)用NaN表示

Infinity; // Infinity表示無限大，當(dāng)數(shù)值超過了JavaScript的Number所能表示的最大值時(shí)，就表示為Infinity

· string類型 字符串是以單引號(hào)’或雙引號(hào)”括起來的任意文本，比如’abc’，”xyz”等等。請(qǐng)注意，”或”“本身只是一種表示方式，不是字符串的一部分，因此，字符串’abc’只有a，b，c這3個(gè)字符。 如果’本身也是一個(gè)字符，那就可以用”“括起來，比如”I’m OK”包含的字符是I，’，m，空格，O，K這6個(gè)字符。 如果字符串內(nèi)部既包含’又包含”怎么辦？可以用轉(zhuǎn)義字符\來標(biāo)識(shí)，比如：

'I\'m \"OK\"!';

表示的字符串內(nèi)容是：I’m “OK”! 轉(zhuǎn)義字符\可以轉(zhuǎn)義很多字符，比如\n表示換行，\t表示制表符，字符\本身也要轉(zhuǎn)義，所以\表示的字符就是\。

· object類型 創(chuàng)建object類型的實(shí)例并為其添加屬性和方法，就可以創(chuàng)建自定義對(duì)象。

對(duì)象：由花括號(hào)分隔，。在括號(hào)內(nèi)部，對(duì)象的屬性以名稱和值對(duì)的形式 (name : value) 來定義。屬性由逗號(hào)分隔

對(duì)象屬性有兩種尋址方式：

name=person.lastname;

name=person["lastname"];

1.3.3 類型轉(zhuǎn)換：

使用：Number（）、parseInt() 和parseFloat（） 做類型轉(zhuǎn)換

Number()強(qiáng)轉(zhuǎn)一個(gè)數(shù)值(包含整數(shù)和浮點(diǎn)數(shù))。

*parseInt()強(qiáng)轉(zhuǎn)整數(shù)，

*parseFloat（）強(qiáng)轉(zhuǎn)浮點(diǎn)數(shù)

函數(shù)isNaN()檢測(cè)參數(shù)是否不是一個(gè)數(shù)字。 is not a number

ECMAScript 中可用的 3 種強(qiáng)制類型轉(zhuǎn)換如下：

Boolean(value) - 把給定的值轉(zhuǎn)換成 Boolean 型；

Number(value) - 把給定的值轉(zhuǎn)換成數(shù)字（可以是整數(shù)或浮點(diǎn)數(shù)）；

String(value) - 把給定的值轉(zhuǎn)換成字符串；

1.3.4 運(yùn)算符

  1. 一元運(yùn)算符
  • delete：用于刪除對(duì)象中屬性的 如：delete o.name; //刪除o對(duì)象中的name屬性

void： void 運(yùn)算符對(duì)任何值返回 undefined。沒有返回值的函數(shù)真正返回的都是 undefined。

  • ++ --

一元加法和一元減法

  1. 位運(yùn)算符

位運(yùn)算 NOT ~

位運(yùn)算 AND &

位運(yùn)算 OR |

位運(yùn)算 XOR ^ (不同為1，相同則為0)

左移運(yùn)算 <<

右移運(yùn)算 >>

  1. 邏輯運(yùn)算符

邏輯 NOT ! 運(yùn)算符 非

邏輯 AND && 運(yùn)算符 與

邏輯 OR || 運(yùn)算符 或

  1. 乘性運(yùn)算符：*（ 乘） /(除) %（取模）求余

  2. 加性運(yùn)算符： + -

*其中+號(hào)具有兩重意思：字串連接和數(shù)值求和。

就是加號(hào)”+“兩側(cè)都是數(shù)值則求和，否則做字串連接

  1. 關(guān)系運(yùn)算符 > >= < <=

  2. 等性運(yùn)算符 == === != !==

  3. 條件運(yùn)算符 ? : (三元運(yùn)算符)

  4. 賦值運(yùn)算符 = += -= *= /= %= >>= <<=

10 逗號(hào)運(yùn)算符

用逗號(hào)運(yùn)算符可以在一條語句中執(zhí)行多個(gè)運(yùn)算。

var iNum1=1, iNum2=2, iNum3=3;

1.3.5 操作符

位操作符

32位二進(jìn)制表示整數(shù)，第32位為符號(hào)位

~ 按位非(NOT)

& 按位與(AND)

| 按位或(OR)

^ 按位異或(XOR)

<< 左移，不影響符號(hào)位

>> 有符號(hào)右移，保留符號(hào)位，不影響正負(fù)

<<< 無符號(hào)右移，連著符號(hào)位一起右移

關(guān)系操作符

操作符與C語言的語法基本類似，這里不詳細(xì)說明了。

1.3.6 語句

  1. for-in 精準(zhǔn)的迭代語句，可以用來枚舉對(duì)象的屬性
for(var propName in window){

 document.write(propName);

}

輸出BOM中 window對(duì)象的所有屬性

迭代前最好先檢測(cè)對(duì)象是否為null或undefined。(ECMAScript5中不執(zhí)行循環(huán)體,以前會(huì)報(bào)錯(cuò))

  1. label語句，給代碼添加標(biāo)簽

  2. break和continue語句(break跳出循環(huán)，直接執(zhí)行循環(huán)后的代碼。continue跳出當(dāng)前循環(huán)，接著進(jìn)入下一次循環(huán))

var num =0;

outer:

 for(var i=0;i<10;i++){

 for(var j=0;j<10;j++){

 if(i == 5 && j==5){

 continue outer;

 }

 num++;

 }

 }

alert(num); //95

  1. with語句(不建議使用，可讀性差)

  2. switch語句

var num = 15;

switch (true){ //輸出 Between 10 and 20，如果是false就輸出 Less than 0

 case num<0:

 alert("Less than 0");

 break;

 case num>=0&&num<=1:

 alert("Between 0 and 1");

 break;

 case num>10&&num<=20:

 alert("Between 10 and 20");

 break;

 default:

 alert("More than 20");

}

1.3.7 數(shù)組

JavaScript的Array可以包含任意數(shù)據(jù)類型，并通過索引來訪問每個(gè)元素。

要取得Array的長(zhǎng)度，直接訪問length屬性：

var arr = [1, 2, 3.14, 'Hello', null, true];

arr.length; // 6

這里要注意，直接給Array的length賦一個(gè)新的值會(huì)導(dǎo)致Array大小發(fā)生變化：

var arr = [1, 2, 3];

arr.length; // 3

arr.length = 6;

arr; // arr變?yōu)閇1, 2, 3, undefined, undefined, undefined]

arr.length = 2;

arr; // arr變?yōu)閇1, 2]

Array可以通過索引把對(duì)應(yīng)的元素修改為新的值，因此，對(duì)Array的索引進(jìn)行賦值會(huì)直接修改這個(gè)Array：

var arr = ['A', 'B', 'C'];

arr[1] = 99;

arr; // arr現(xiàn)在變?yōu)閇'A', 99, 'C']

請(qǐng)注意，如果通過索引賦值時(shí)，索引超過了范圍，同樣會(huì)引起Array大小的變化：

var arr = [1, 2, 3];

arr[5] = 'x';

arr; // arr變?yōu)閇1, 2, 3, undefined, undefined, 'x']

大多數(shù)其他編程語言不允許直接改變數(shù)組的大小，越界訪問索引會(huì)報(bào)錯(cuò)。然而，JavaScript的Array卻不會(huì)有任何錯(cuò)誤。在編寫代碼時(shí)，不建議直接修改Array的大小，訪問索引時(shí)要確保索引不會(huì)越界。

  • 轉(zhuǎn)換方法 所有對(duì)象都具有toLocaleString()，toString()，valueOf()方法。
· var colors = ["red", "blue", "green"]; //creates an array with three strings

· alert(colors.toString()); //red,blue,green

· alert(colors.valueOf()); //red,blue,green

· alert(colors); //red,blue,green

首先調(diào)用toString()方法，返回?cái)?shù)組的字符串表示。toLocaleString()方法經(jīng)常返回與toString()和valueOf()方法相同的值，但不同的是，調(diào)用的是每一項(xiàng)的toLocaleString()方法，而不是toString()。

 var person1 = {

 toLocaleString : function () {

 return "Nikolaos";

 },

 toString : function() {

 return "Nicholas";

 }

 };

 var person2 = {

 toLocaleString : function () {

 return "Grigorios";

 },

 toString : function() {

 return "Greg";

 }

 };

 var people = [person1, person2];

 alert(people); //Nicholas,Greg

 alert(people.toString()); //Nicholas,Greg

 alert(people.toLocaleString()); //Nikolaos,Grigorios
  • indexOf

與String類似，Array也可以通過indexOf()來搜索一個(gè)指定的元素的位置：

var arr = [10, 20, '30', 'xyz'];

arr.indexOf(10); // 元素10的索引為0

arr.indexOf(20); // 元素20的索引為1

arr.indexOf(30); // 元素30沒有找到，返回-1

arr.indexOf('30'); // 元素'30'的索引為2

數(shù)字****30****和字符串****’30’****是不同的元素。

  • slice

slice()就是對(duì)應(yīng)String的substring()版本，它截取Array的部分元素，然后返回一個(gè)新的Array：

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];

arr.slice(0, 3); // 從索引0開始，到索引3結(jié)束，但不包括索引3: ['A', 'B', 'C']

arr.slice(3); // 從索引3開始到結(jié)束: ['D', 'E', 'F', 'G']

注意到slice()的起止參數(shù)包括開始索引，不包括結(jié)束索引。

如果不給slice()傳遞任何參數(shù)，它就會(huì)從頭到尾截取所有元素。利用這一點(diǎn)，我們可以很容易地復(fù)制一個(gè)Array：

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];

var aCopy = arr.slice();

aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']

aCopy === arr; // false

在只有一個(gè)參數(shù)時(shí)，返回從該參數(shù)指定位置開始到當(dāng)前數(shù)組末尾的所有項(xiàng)，如果有兩個(gè)參數(shù)，返回起始和結(jié)束位置之間的一項(xiàng)（但不包括結(jié)束位置的項(xiàng)）。 slice(****）方法不會(huì)影響原始數(shù)組

 var colors = ["red", "green", "blue", "yellow", "purple"];

 var colors2 = colors.slice(1);

 var colors3 = colors.slice(1,4);

 alert(colors2); //green,blue,yellow,purple

 alert(colors3); //green,blue,yellow
  • push和pop

push()向Array的末尾添加若干元素，pop()則把Array的最后一個(gè)元素刪除掉：

var arr = [1, 2];

arr.push('A', 'B'); // 返回Array新的長(zhǎng)度: 4

arr; // [1, 2, 'A', 'B']

arr.pop(); // pop()返回'B'

arr; // [1, 2, 'A']

arr.pop(); arr.pop(); arr.pop(); // 連續(xù)pop 3次

arr; // []

arr.pop(); // 空數(shù)組繼續(xù)pop不會(huì)報(bào)錯(cuò)，而是返回undefined

arr; // []
  • unshift和shift

如果要往Array的頭部添加若干元素，使用unshift()方法，shift()方法則把Array的第一個(gè)元素刪掉：

var arr = [1, 2];

arr.unshift('A', 'B'); // 返回Array新的長(zhǎng)度: 4

arr; // ['A', 'B', 1, 2]

arr.shift(); // 'A'

arr; // ['B', 1, 2]

arr.shift(); arr.shift(); arr.shift(); // 連續(xù)shift 3次

arr; // []

arr.shift(); // 空數(shù)組繼續(xù)shift不會(huì)報(bào)錯(cuò)，而是返回undefined

arr; // []
  • unshift和shift

如果要往Array的頭部添加若干元素，使用unshift()方法，shift()方法則把Array的第一個(gè)元素刪掉：

var arr = [1, 2];

arr.unshift('A', 'B'); // 返回Array新的長(zhǎng)度: 4

arr; // ['A', 'B', 1, 2]

arr.shift(); // 'A'

arr; // ['B', 1, 2]

arr.shift(); arr.shift(); arr.shift(); // 連續(xù)shift 3次

arr; // []

arr.shift(); // 空數(shù)組繼續(xù)shift不會(huì)報(bào)錯(cuò)，而是返回undefined

arr; // []
  • sort

sort()可以對(duì)當(dāng)前Array進(jìn)行排序，它會(huì)直接修改當(dāng)前Array的元素位置，直接調(diào)用時(shí)，按照默認(rèn)順序排序：

var arr = ['B', 'C', 'A'];

arr.sort();

arr; // ['A', 'B', 'C']

比較函數(shù)

 function compare(value1, value2) {

 if (value1 < value2) {

 return -1;

 } else if (value1 > value2) {

 return 1;

 } else {

 return 0;

 }

 }

 var values = [0, 1, 5, 10, 15];

 values.sort(compare);

 alert(values); //0,1,5,10,15

降序排序

 function compare(value1, value2) {

 if (value1 < value2) {

 return 1;

 } else if (value1 > value2) {

 return -1;

 } else {

 return 0;

 }

 }

 var values = [0, 1, 5, 10, 15];

 values.sort(compare);

 alert(values); //15,10,5,1,0
  • reverse

reverse()把整個(gè)Array的元素反轉(zhuǎn)：

var arr = ['one', 'two', 'three'];

arr.reverse();

arr; // ['three', 'two', 'one']
  • splice

splice()方法是修改Array的“萬能方法”，它可以從指定的索引開始刪除若干元素，然后再從該位置添加若干元素： 1.刪除：指定2個(gè)參數(shù)：要?jiǎng)h除的第一項(xiàng)和要?jiǎng)h除的項(xiàng)數(shù)。 2.插入：提供3個(gè)參數(shù)：起始位置、要?jiǎng)h除的項(xiàng)數(shù)、要插入的項(xiàng)數(shù)。 3.替換：指定3個(gè)參數(shù)：起始位置、要?jiǎng)h除的項(xiàng)數(shù)、要插入的任意數(shù)量的項(xiàng)。

 var colors = ["red", "green", "blue"];

 var removed = colors.splice(0,1); //刪除第一項(xiàng)

 alert(colors);   //green,blue

 alert(removed); //red - 返回?cái)?shù)組中只包含一項(xiàng)

 removed = colors.splice(1, 0, "yellow", "orange"); //從位置1開始插入兩項(xiàng)

 alert(colors); //green,yellow,orange,blue

 alert(removed); //返回的是一個(gè)空數(shù)組

 removed = colors.splice(1, 1, "red", "purple"); //插入兩項(xiàng)，刪除一項(xiàng)

 alert(colors); //green,red,purple,orange,blue

 alert(removed); //yellow - 返回?cái)?shù)組中只包含一項(xiàng)
  • concat

concat()方法把當(dāng)前的Array和另一個(gè)Array連接起來，并返回一個(gè)新的Array：

var arr = ['A', 'B', 'C'];

var added = arr.concat([1, 2, 3]);

added; // ['A', 'B', 'C', 1, 2, 3]

arr; // ['A', 'B', 'C']

concat()****方法并沒有修改當(dāng)前****Array****，而是返回了一個(gè)新的****Array****。

實(shí)際上，concat()方法可以接收任意個(gè)元素和Array，并且自動(dòng)把Array拆開，然后全部添加到新的Array里：

var arr = ['A', 'B', 'C'];

arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]
  • join

join()方法是一個(gè)非常實(shí)用的方法，它把當(dāng)前Array的每個(gè)元素都用指定的字符串連接起來，然后返回連接后的字符串：

var arr = ['A', 'B', 'C', 1, 2, 3];

arr.join('-'); // 'A-B-C-1-2-3'

如果Array的元素不是字符串，將自動(dòng)轉(zhuǎn)換為字符串后再連接。

1.3.8 對(duì)象

屬性是與對(duì)象相關(guān)的值。

方法是能夠在對(duì)象上執(zhí)行的動(dòng)作。

（1）創(chuàng)建 javaScript對(duì)象

JavaScript 中的幾乎所有事務(wù)都是對(duì)象：字符串、數(shù)字、數(shù)組、日期、函數(shù)，等等。

你也可以創(chuàng)建自己的對(duì)象。

person=new Object(); person.firstname="Bill"; person.lastname="Gates"; person.age=56; person.eyecolor="blue";

(2)訪問對(duì)象的屬性

objectNamepropertyName

var message="Hello World!"; var x=message.length;

(3)訪問對(duì)象的方法

objectNamemethodNamevar message="Hello world!"; var x=message.toUpperCase();

Date對(duì)象：

創(chuàng)建方式：

 myDate = new Date();

日期起始值:1970年1月1日00:00:00

主要方法

getYear(): 返回年數(shù) setYear(): 設(shè)置年數(shù)

getMonth(): 返回月數(shù) setMonth():設(shè)置月數(shù)

getDate(): 返回日數(shù) setDate():設(shè)置日數(shù)

getDay(): 返回星期幾 setDay():設(shè)置星期數(shù)

getHours():返回小時(shí)數(shù) setHours():設(shè)置小時(shí)數(shù)

getMinutes():返回分鐘數(shù) setMintes():設(shè)置分鐘數(shù)

getSeconds():返回秒數(shù) setSeconds():設(shè)置秒數(shù)

getTime() : 返回毫秒數(shù) setTime() :設(shè)置毫秒數(shù)

1.3.9 異常

try 語句測(cè)試代碼塊的錯(cuò)誤。 catch 語句處理錯(cuò)誤。 throw 語句創(chuàng)建自定義錯(cuò)誤。

（****1****）****JavaScript 測(cè)試和捕捉 try 語句允許我們定義在執(zhí)行時(shí)進(jìn)行錯(cuò)誤測(cè)試的代碼塊。 catch 語句允許我們定義當(dāng) try 代碼塊發(fā)生錯(cuò)誤時(shí)，所執(zhí)行的代碼塊。 JavaScript 語句 try 和 catch 是成對(duì)出現(xiàn)的。 （****2****）****Throw 語句 throw 語句允許我們創(chuàng)建自定義錯(cuò)誤。 正確的技術(shù)術(shù)語是：創(chuàng)建或拋出異常（exception）。 如果把 throw 與 try 和 catch 一起使用，那么您能夠控制程序流，并生成自定義的錯(cuò)誤消息。

<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>

1.3.10 函數(shù)

（1）函數(shù)語法

function functionname()

{

這里是要執(zhí)行的代碼

}

（2）帶參數(shù)的函數(shù)

function myFunction(var1,var2)

{

這里是要執(zhí)行的代碼

}

（3）帶有返回值的函數(shù)

function myFunction()

{

var x=5;

return x;

}

若僅僅希望退出函數(shù)時(shí) ，也可使用 return 語句

function myFunction(a,b)

{

if (a>b)

{

return;

}

x=a+b

}

1.3.11 內(nèi)置函數(shù)

  1. Date：日期函數(shù)

屬性(1): constructor 所修立對(duì)象的函數(shù)參考 prototype能夠?yàn)閷?duì)象加進(jìn)的屬性和方法 辦法(43): getDay() 返回一周中的第幾天(0-6) getYear() 返回年份.2000年以前為2位,2000(包括)以后為4位 getFullYear()返回完全的4位年份數(shù) getMonth()返回月份數(shù)(0-11) getDate() 返回日(1-31) getHours() 返回小時(shí)數(shù)(0-23) getMinutes() 返回分鐘(0-59) getSeconds() 返回秒數(shù)(0-59) getMilliseconds() 返回毫秒(0-999) getUTCDay() 依據(jù)國(guó)際時(shí)間來得到如今是禮拜幾(0-6) getUTCFullYear() 根據(jù)邦際時(shí)間來失掉完全的年份 getUTCMonth()依據(jù)國(guó)際時(shí)間來得到月份(0-11) getUTCDate() 依據(jù)國(guó)際時(shí)間來失掉日(1-31) getUTCHours() 依據(jù)國(guó)際時(shí)間來失掉小時(shí)(0-23) getUTCMinutes() 根據(jù)邦際光陰來往歸分鐘(0-59) getUTCSeconds() 依據(jù)國(guó)際時(shí)間來返回秒(0-59) getUTCMilliseconds()依據(jù)國(guó)際時(shí)間來返回毫秒(0-999) getTime() 前往自1970年1月1號(hào)0:0:0到如今一同花來的毫秒數(shù) getTimezoneoffset()往歸時(shí)區(qū)偏偏差值,便格林威亂均勻時(shí)光(GMT)取運(yùn)轉(zhuǎn)足原的盤算機(jī)所處時(shí)區(qū)設(shè)置之間相差的分鐘數(shù)) parse(dateString) 返回正在Date字符串中自從1970年1月1日00:00:00以來的毫秒數(shù) setYear(yearInt)設(shè)置年份.2位數(shù)或4位數(shù) setFullYear(yearInt)設(shè)置年份.4位數(shù) setMonth(monthInt)設(shè)放月份(0-11) setDate(dateInt) 設(shè)置日(1-31) setHours(hourInt) 設(shè)置小時(shí)數(shù)(0-23) setMinutes(minInt) 設(shè)置分鐘數(shù)(0-59) setSeconds(secInt) 設(shè)放秒數(shù)(0-59) setMilliseconds(milliInt) 設(shè)放毫秒(0-999) setUTCFullYear(yearInt) 依據(jù)國(guó)際時(shí)間來設(shè)置年份 setUTCMonth(monthInt)依據(jù)國(guó)際時(shí)間來設(shè)置月(0-11) setUTCDate(dateInt) 依據(jù)國(guó)際時(shí)間來設(shè)置日(1-31) setUTCHours(hourInt) 依據(jù)國(guó)際時(shí)間來設(shè)置小時(shí) setUTCMinutes(minInt)依據(jù)國(guó)際時(shí)間來設(shè)置分鐘 setUTCSeconds(secInt)依據(jù)國(guó)際時(shí)間來設(shè)置秒 setUTCMilliseconds(milliInt)根據(jù)邦際時(shí)間來設(shè)置毫秒 setTime(timeInt)設(shè)置自1970年1月1日開端的時(shí)間.毫秒數(shù) toGMTString()依據(jù)格林威亂時(shí)光將Date對(duì)于象的日期(一個(gè)數(shù)值)改變成一個(gè)GMT光陰字符串,如:Weds,15 June l997 14:02:02 GMT toUTCString() 依據(jù)通用時(shí)間將一個(gè)Date對(duì)象的日期轉(zhuǎn)換為一個(gè)字符串 toLocaleString()把Date對(duì)象的日期(一個(gè)數(shù)值)改變成一個(gè)字符串,使用所在盤算機(jī)上配置使用的特定日期格局 toSource()顯示對(duì)象的源代碼 toString()將日期對(duì)象轉(zhuǎn)換為字符串 UTC(yyyy, mm, dd, hh, mm, ss, msec)往歸自格林威亂尺度光陰到指訂時(shí)光的差距,雙位為毫秒 valueOf()返回日期對(duì)象的本初值

2.Math：數(shù)學(xué)函數(shù)

constructor 所樹立對(duì)象的函數(shù)參考 prototype可以為對(duì)于象參加的屬性和方式 E歐推常質(zhì),天然對(duì)數(shù)的頂(約等于2.718) LN2 2的天然對(duì)數(shù)(約即是0.693) LN10 10的天然對(duì)數(shù)(約等于2.302) LOG2E 以2為頂?shù)膃的對(duì)數(shù).(約等于1.442) LOG10E 以10為頂?shù)膃的對(duì)數(shù)(約等于0.434) PI ∏的值(約即是3.14159) SQRT1_2 1/2(0.5)的平方根(便l除以2的平方根,約即是o.707) SQRT2 2的平方根(約等于1.414) 方法: abs(x) 返回?cái)?shù)字的相對(duì)值 acos(x)返回?cái)?shù)字的反余弦值 asin(x)返回?cái)?shù)字的反正弦值 atan(x)返回位于-PI/2 和 PI/2 的反正切值 atan2(y,x)前往（x,y）位于 -PI 到 PI 之間的角度 ceil(x)返回 x 四舍五入后的最大整數(shù) cos(x)前往一個(gè)數(shù)字的余弦值 exp(x)返回 E^x 值 floor(x)返回 x 四舍五入后的最小整數(shù) log(x)返回底數(shù)為E的自然對(duì)數(shù) max(x,y)返回 x 和 y 之間較大的數(shù) min(x,y)返回 x 和 y 之間較小的數(shù) pow(x,y)返回 y^x 的值 random()返回位于 0 到 1 之間的隨機(jī)函數(shù) round(x)四舍五進(jìn)后與整 sin(x)返回?cái)?shù)字的正弦值 sqrt(x)返回?cái)?shù)字的平方根 tan(x)返回一個(gè)角度的正切值 toSource()顯示對(duì)象的流代碼 valueOf()返回?cái)?shù)教對(duì)象的本初值3.Number 屬性: MAX_VALUE The largest possible value a number in JavaScript can have 1.7976931348623157E+308 MIN_VALUE The smallest possible value a number in JavaScript can have 5E-324 NaN Equal to a value that is not a number. NEGATIVE_INFINITY A value that is less than MIN_VALUE. POSOTIVE_INFINITY A value that is greater than MAX_VALUE. prototype A static property of the Number object 方法: toString Returns a string representing the specified object valueOf() 返回?cái)?shù)教對(duì)象的本初值4.Boolean屬性: constructor 所樹立對(duì)象的函數(shù)參考 prototype可以為對(duì)象參加的屬性和方式 法子: toSource() 顯示對(duì)象的流代碼 toString()將布我值轉(zhuǎn)換為字符串,并且返回成果 valueOf()返回布我對(duì)象的原始值

  1. String ：字符函數(shù)

屬性: constructor 所樹立對(duì)象的函數(shù)參考 prototype可以為對(duì)于象參加的屬性和方式 length返回字符串的字符長(zhǎng)度 法子(20): anchor("name")用來把字符串轉(zhuǎn)換為HTML錨面標(biāo)志內(nèi)(<A NAME=>) big() 把字符串中的文本變成大字體(<BIG>) blink() 把字符串中的文本變成閃耀字體(<BLINK>) bold() 把字符串中的文本變成烏字體(<B>) fixed() 把字符串中的文本變成流動(dòng)間距字體,便電報(bào)情勢(shì)(<TT>) fontcolor(color)設(shè)置字符串中文本的色彩(<FONT COLOR=>) Fontsize(size) 把字符串中的文本變成指定大小(<FONTSIZE=>) italics() 把字符串中的白原變成斜字體(<I>) Link(url)用來把字符串轉(zhuǎn)換-HTML鏈交標(biāo)志中(<A HREF=>) small() 把字符串中的文本變成小字體(<SMALL>) strike() 把字符串中的文本變成劃掉字體(<STRIKE>) sub() 把字符串中的文本變成下標(biāo)(subscript)字體((SUB>) sup() 把字符串中的文本變成上標(biāo)(superscript)字體(<SUP>) charAt(index) 返回指定索引處的字符 charCodeAt(index)返回一個(gè)整數(shù),該整數(shù)表現(xiàn)String對(duì)象中指定位置處的字符的Unicode編碼 concat(string2)銜接兩條或少條字符串 fromCharCode(num1, num2, …,BB霜, numN)獲取指定的Unicode值并返回字符串 indexOf(searchString, startIndex)返回字符串中第一個(gè)呈現(xiàn)指定字符串的地位 lastlndexOf(searchString, startIndex)返回字符串中最后一個(gè)呈現(xiàn)指定字符串的地位 match(regex)在字符串中查覓指定值 replace(regex, newString)將字符串中的某些字符替代成其它字符 search(regex)針對(duì)某施行值對(duì)字符串入止查覓 slice(startIndex, endIndex)將部門字符抽出并在新的字符串中返回剩余局部 split(delimiter)將字符串分配為數(shù)組 substr(startIndex, length)從startIndex與,取length個(gè)字符 substring(startIndex, endIndex)從startIndex和endIndex之間的字符,沒有包含endIndex toLowerCase() 把字符串中的文本變成小寫 toUpperCase()把字符串中的白本變成大寫 toSource()顯示對(duì)象的源代碼 valueOf()返回字符串對(duì)象的原始值

4.Array ：數(shù)組函數(shù)

屬性: constructor 所修立對(duì)象的函數(shù)參考 prototype能夠?yàn)閷?duì)象加入的屬性和方法 index For an array created by a regular expression match, the zero-based index of the match in the string. input For an array created by a regular expression match, reflects the original string against which the regular expression was matched. length獲取數(shù)組元素的個(gè)數(shù),即最大下標(biāo)加1辦法(13):concat(array1,arrayn)將兩個(gè)或兩個(gè)以上的數(shù)組值銜接止來,合并后返回成果 join(string)將數(shù)組中元素合并為字符串,十月媽咪,string為分隔符.如省詳參數(shù)則直交合并,不再分隔 pop()移除數(shù)組中的最后一個(gè)元素并返回當(dāng)元素 push(value)在數(shù)組的終尾加上一個(gè)或多個(gè)元素,并且返回新的數(shù)組長(zhǎng)度值 reverse()倒置數(shù)組中元素的次序,反背排列 shift()移除數(shù)組中的第一個(gè)元素并返回當(dāng)元素 slice(start, deleteCount, [item1[, item2[,...[,itemN]]]])返從一個(gè)數(shù)組中移除一個(gè)或少個(gè)元素,假如必要,在所移除元素的地位上拔出新元素,返回所移除的元素 sort(compare Function)在已指定排序號(hào)的情形下,依照元素的字女次序排列,假如不是字符串類型則轉(zhuǎn)換成字符串再排序,返回排序后的數(shù)組 splice()為數(shù)組刪除并加加新的元素 toSource()顯示對(duì)象的源代碼 toString()將數(shù)組一切元素返回一個(gè)字符串,其間用逗號(hào)分隔 unshift(value)為數(shù)組的開端部門加上一個(gè)或者少個(gè)元葷,并且返回當(dāng)數(shù)組的新長(zhǎng)度 valueOf()返回?cái)?shù)組對(duì)象的原始值

5.齊局

屬性: Infinity 指定一個(gè)正負(fù)無限大的數(shù)值 NaN指定一個(gè) “非數(shù)字” 值 undefined指訂一個(gè)已被賦值的變質(zhì)法子:decodeURI() 為加稀的URI入止解碼 decodeURIComponent()為加稀的URI組件解碼 encodeURI()將字符串加密為URI encodeURIComponent() 將字符串加稀為URI組件 escape(string)加密一個(gè)字符串 ()使用escape()對(duì)一個(gè)字符串入止解碼 eval_r(string)斷定一個(gè)字符串并將其以足本代碼的情勢(shì)施行 isFinite(number)檢測(cè)一個(gè)值能否為一個(gè)有限數(shù)字,返回True或False isNaN(string) 檢測(cè)一個(gè)值能否沒有是一個(gè)有限數(shù)字 Number()將一個(gè)對(duì)象的值轉(zhuǎn)換為一個(gè)數(shù)字 parseFloat(string)將一個(gè)字符串解析為一個(gè)浮面數(shù)字 parseInt(string)將一個(gè)字符串解析為一個(gè)整數(shù),沒有是四舍五進(jìn)操做,而是切尾 String(object)將一個(gè)對(duì)象值轉(zhuǎn)換為一個(gè)字符串 number(object)

6.事情

屬性: a.窗心事件,只在body和frameset元素中才有效 onload頁里或者圖片加載完成時(shí) onunload用戶分開頁里時(shí) b.表雙元素事情,正在表雙元素中才有效 onchange框內(nèi)容轉(zhuǎn)變時(shí) onsubmit點(diǎn)打降接按鈕時(shí) onreset沉新點(diǎn)擊鼠標(biāo)按鍵時(shí) onselect白原被挑選時(shí) onblur元素失來焦點(diǎn)時(shí) onfocus該元素獲與焦面時(shí) c.鍵盤事情,base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里皆無效 onkeydown按下鍵盤按鍵時(shí) onkeypress按下或按住鍵盤按鍵時(shí) onkeyup擱啟鍵盤按鍵時(shí) d.正在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元葷里皆無效 onclick鼠標(biāo)點(diǎn)打一個(gè)對(duì)象時(shí) ondblclick鼠標(biāo)雙打一個(gè)對(duì)象時(shí) onmousedown鼠本被按下時(shí) onmousemove鼠標(biāo)被挪動(dòng)時(shí) onmouseout鼠本分開元葷時(shí) onmouseover鼠標(biāo)經(jīng)由元素時(shí) onmouseup開釋鼠本按鍵時(shí)

1.4 JavaScript常用技巧函數(shù)：

1.4.1 HTML的標(biāo)簽（節(jié)點(diǎn)）操作

document.write(""); //輸出的

document.getElementById("id名")； //獲取html頁面標(biāo)簽中，標(biāo)簽id屬性等于此值的對(duì)象。

如：var id = document.getElementById("hid"); //獲取id值為hid的標(biāo)簽對(duì)象

document.getElementsByTagName("標(biāo)簽名"); //獲取當(dāng)前文檔執(zhí)行的標(biāo)簽對(duì)象

1.4.2 HTML標(biāo)簽對(duì)象的操作：

標(biāo)簽對(duì)象.innerHTML="內(nèi)容"；//在標(biāo)簽對(duì)象內(nèi)放置指定內(nèi)容

標(biāo)簽對(duì)象.style.css屬性名="值" //改變標(biāo)簽對(duì)象的樣式。

示例：id.style.color="red";

注意：屬性名相當(dāng)于變量名,所以css屬性名中的減號(hào)要去掉，將后面的首字母大寫。

如：font-size（css）---> fontSize(JS屬性)

標(biāo)簽對(duì)象.value；

//獲取標(biāo)簽對(duì)象的value值

標(biāo)簽對(duì)象.value=”值“；//設(shè)置標(biāo)簽對(duì)象的value值

1.4.3 輸出內(nèi)容（document.write）

document.write()直接在網(wǎng)頁中輸出內(nèi)容。

第一種：輸出內(nèi)容用“”括起，直接輸出“”號(hào)內(nèi)的內(nèi)容。

document.write("I love JavaScript!");

第二種：通過變量，輸出內(nèi)容

var mystr = "hello world";

document.write(mysrt);//直接寫變量名，輸出變量存儲(chǔ)的內(nèi)容

第三種：輸出多項(xiàng)內(nèi)容，內(nèi)容之間用+號(hào)連接。

var mystr = "hello";

document.write(mystr + "I love Java Script");//多項(xiàng)內(nèi)容之間用+號(hào)連接

第四種:輸出HTML標(biāo)簽，并起作用，標(biāo)簽使用“”括起來。

var mystr="hello";

document.write(mystr+"<br>");//輸出hello后，輸出一個(gè)換行符

document.write("JavaScript");

1.4.4 警告（alert 消息對(duì)話框）

我們?cè)谠L問網(wǎng)站的時(shí)候，有時(shí)會(huì)突然彈出一個(gè)小窗口，上面寫著一段提示信息文字。如果你不點(diǎn)擊“確定”，就不能對(duì)網(wǎng)頁做任何操作，這個(gè)小窗口就是使用alert實(shí)現(xiàn)的。

語法：alert(字符串或變量);

var mynum = 30;

alert("hello!");

alert(mynum);

結(jié)果：按順序彈出消息框（alert彈出消息對(duì)話框包含一個(gè)確定按鈕）

注意:

1. 在點(diǎn)擊對(duì)話框"確定"按鈕前，不能進(jìn)行任何其它操作。

2. 消息對(duì)話框通?？梢杂糜谡{(diào)試程序。

3. alert輸出內(nèi)容，可以是字符串或變量，與document.write 相似

1.4.5 確認(rèn)選擇（confirm 消息對(duì)話框）

除了向用戶提供信息，我們還希望從用戶那里獲得信息。這里就用到了confirm 消息對(duì)話框。

confirm 消息對(duì)話框通常用于允許用戶做選擇的動(dòng)作，如：“你對(duì)嗎？”等。彈出對(duì)話框(包括一個(gè)確定按鈕和一個(gè)取消按鈕)。

語法：confirm(str);

參數(shù)說明：str:在消息對(duì)話框中要顯示的文本 返回值：Boolean值

返回值：

當(dāng)用戶點(diǎn)擊"確定"按鈕時(shí)，返回true

當(dāng)用戶點(diǎn)擊"取消"按鈕時(shí)，返回false

注: 通過返回值可以判斷用戶點(diǎn)擊了什么按鈕

<script type="text/javascript">

 var mymessage=confirm("你喜歡JavaScript嗎?");

 if(mymessage==true){

 document.write("很好,加油!");

 }else{

 document.write("JS功能強(qiáng)大，要學(xué)習(xí)噢!");

 }

</script>

1.4.6 提問（prompt 消息對(duì)話框）

有時(shí)候，不僅希望用戶回答Yes/No。而是希望得到更特定的響應(yīng)。這中情況我們可以利用prompt。

prompt彈出消息對(duì)話框,通常用于詢問一些需要與用戶交互的信息。彈出消息對(duì)話框（包含一個(gè)確定按鈕、取消按鈕與一個(gè)文本輸入框）。

語法：

prompt(str1,str2);

參數(shù)說明：

str1:要顯示在消息對(duì)話框中的文本，不可修改

str2:文本框中的內(nèi)容，可以修改

返回值：

1、點(diǎn)擊確定按鈕，文本框中的內(nèi)容將作為函數(shù)返回值

2、點(diǎn)擊取消按鈕，將返回null

function rec(){

 var score; //score變量，用來存儲(chǔ)用戶輸入的成績(jī)值。

 score = prompt("請(qǐng)輸入你的成績(jī)","90");

 if(score>=90){

 document.write("你很棒!");

 }else if(score>=75){

 document.write("不錯(cuò)吆!");

 }else if(score>=60){

 document.write("要加油!");

 }else{

 document.write("要努力了!");

 };

} ;

<script>

 var myName = prompt("輸入您的名字");

 if(myName != null && myName != ""){

 document.write("welcom to" + myName);

 }else{

 document.write("welcom to my friend");

 }

</script>

1.4.7 打開新窗口（window.open）

語法：

window.open([URL], [窗口名稱], [參數(shù)字符串])

參數(shù)說明:

URL：可選參數(shù)，在窗口中要顯示網(wǎng)頁的網(wǎng)址或路徑。如果省略這個(gè)參數(shù)，或者它的值是空字符串，那么窗口就不顯示任何文檔。

窗口名稱：可選參數(shù)，被打開窗口的名稱。

1.該名稱由字母、數(shù)字和下劃線字符組成。

2.窗口名稱：可選,該字符串是一個(gè)由逗號(hào)分隔的特征列表，聲明了被打開窗口的名稱?？梢允?_top"、"_blank"、"_selft"、"_parent"等。

_blank 在新窗口顯示目標(biāo)網(wǎng)頁

_selft 在當(dāng)前窗口顯示目標(biāo)網(wǎng)頁

_parent 框架網(wǎng)頁中當(dāng)前整個(gè)窗口位置顯示目標(biāo)網(wǎng)頁

_top 框架網(wǎng)頁中在上部窗口中顯示目標(biāo)網(wǎng)頁

3.相同 name 的窗口只能創(chuàng)建一個(gè)，要想創(chuàng)建多個(gè)窗口則 name 不能相同。

4.name 不能包含有空格。

參數(shù)字符串：可選參數(shù)，設(shè)置窗口參數(shù)，各參數(shù)用逗號(hào)隔開。

參數(shù)表：

top　　　　Number　　窗口頂部離開屏幕頂部的像素?cái)?shù)

left　　　　Number　　窗口左端離開屏幕左端的像素?cái)?shù)

width　　　　Number　　窗口的寬度

height　　　　Number　　窗口的高度

menubar　　　　yes,no　　窗口有沒有菜單

toolbar　　　　yes,no　　窗口有沒有工具條

scrollbars　　　　yes,no　　 窗口有沒有滾動(dòng)條

status　　　　　　yes,no　　 窗口有沒有狀態(tài)欄

<script type="text/javascript">

 window.open('http://','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')

1.4.8 關(guān)閉窗口（window.close）

close()關(guān)閉窗口

用法：

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

 <窗口對(duì)象>.close();//關(guān)閉指定的窗口

例如:關(guān)閉新建的窗口。

 <script type="text/javascript">

 var mywin=window.open('//www.jb51.net'); //將新打的窗口對(duì)象，存儲(chǔ)在變量mywin中

 mywin.close();

 </script>

1.4.9 innerHTML屬性

innerHTML屬性用于獲取或替換HTML元素的內(nèi)容。

語法：

Object.innerHTML

Object是獲取的元素對(duì)象，如通過document.getElementById("ID")獲取元素。

<h2 id="con">javascript</H2>

<script type="text/javascript">

　　var mychar=document.getElementById("con");

　　document.write("原標(biāo)題:"+mychar.innerHTML+"<br>"); //輸出原h(huán)2標(biāo)簽內(nèi)容

　　mychar.innerHTML="hello world"

　　document.write("修改后的標(biāo)題:"+mychar.innerHTML); //輸出修改后h2標(biāo)簽內(nèi)容

</script>

1.4.10 改變HTML樣式

語法：

Object.style.property=new style;

注意：Object是獲取的元素對(duì)象，如通過document.getElementById("id")獲取的元素

<h2 id="con">I love JavaScript</h2>

<script type="text/javascript">

 var mychar= document.getElementById("con");

 mychar.style.color="red";

 mychar.style.background="#ccc";

 mychar.style.width="300px";

</script>

1.4.11 顯示和隱藏（display屬性）

語法：

Object.style.display = value

value值：

none 此元素不會(huì)被顯示（及隱藏）

block 此元素將顯示為塊級(jí)元素（即顯示）

mychar.style.display = "block"

1.4.12 控制類名（className屬性）

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

語法：

object.className = classname

作用：

1、獲取元素的class屬性

2、為網(wǎng)頁內(nèi)的某個(gè)元素指定一個(gè)css樣式來更改該元素的外觀

p2.className = "two";

以上這篇Javascript基礎(chǔ)學(xué)習(xí)筆記(菜鳥必看篇)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

1.5 JavaScript 表單驗(yàn)證

JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對(duì)HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證

被JavaScript 驗(yàn)證的這些典型的表單數(shù)據(jù)有：

· 用戶是否已填寫表單中的必填項(xiàng)目？

· 用戶輸入的郵件地址是否合法？

· 用戶是否已輸入合法的日期？

· 用戶是否在數(shù)據(jù)域 (numeric field) 中輸入了文本？

1.5.1 利用onsubmit表單認(rèn)證

如下為一個(gè)javacript的一個(gè)重要功能應(yīng)用，利用onsubmit表單認(rèn)證

<html>

<head>

<script type="text/javascript">

fuvtion check(){

if(document.text.t.value==""){

alert("字符不能為空");

return false；

}

return true；

}

</script>

</head>

<body>

<from name="test" action="test.html" onsubmit ="return check()">

<input type="text" name="t">

<input type="submit" value="OK">

</body>

</html>

1.5.2 必填（或必選）項(xiàng)目

<html>

<head>

<script type="text/javascript">

function validate_required(field,alerttxt)

{

with (field)

{

if (value==null||value=="")

{alert(alerttxt);return false}

else {return true}

}

}

function validate_form(thisform)

{

with (thisform)

{

if (validate_required(email,"Email must be filled out!")==false)

{email.focus();return false}

}

}

</script>

</head>

<body>

<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">

Email: <input type="text" name="email" size="30">

<input type="submit" value="Submit">

</form>

</body>

</html>

1.5.3 E-mail驗(yàn)證

意思就是說，輸入的數(shù)據(jù)必須包含 @ 符號(hào)和點(diǎn)號(hào)(.)。同時(shí)，@ 不可以是郵件地址的首字符，并且 @ 之后需有至少一個(gè)點(diǎn)

<html>

<head>

<script type="text/javascript">

function validate_email(field,alerttxt)

{

with (field)

{

apos=value.indexOf("@")

dotpos=value.lastIndexOf(".")

if (apos<1||dotpos-apos<2)

{alert(alerttxt);return false}

else {return true}

}

}

function validate_form(thisform)

{

with (thisform)

{

if (validate_email(email,"Not a valid e-mail address!")==false)

{email.focus();return false}

}

}

</script>

</head>

<body>

<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">

Email: <input type="text" name="email" size="30">

<input type="submit" value="Submit">

</form>

</body>

</html>

說明：

with(field){};設(shè)定作用域

focus() 方法用于給予該元素焦點(diǎn)。這樣用戶不必點(diǎn)擊它，就能編輯顯示的文本了。

1.6 JavaScript事件處理：

1.6.1 使用一個(gè)匿名或回調(diào)函數(shù)添加事件

有三種方法加事件

第一種：

格式：

<tag on事件="事件處理程序" />

*第二種：

<script>

對(duì)象.on事件=事件處理程序

</script>

第三種：(火狐不兼容)

<script for="事件源ID" event="on事件">事件處理程序</script>

1.6.2 事件對(duì)象：

屬性：

1\. srcElement

2\. keyCode 鍵盤值

1.6.3 事件 event window.event

1\. srcElement 代表事件源對(duì)象

2\. keyCode 事件發(fā)生時(shí)的鍵盤碼 keypress , keydown keyup

3\. clientX, clientY 坐標(biāo)位置

4\. screenX, screenY

5\. returnValue

6\. cancelBubble;

//為頁面添加鼠標(biāo)右點(diǎn)擊事件

window.document.oncontextmenu=function(ent){

//兼容IE和火狐瀏覽器兼容

var event=ent || window.event;

//獲取事件坐標(biāo)位置

var x=event.clientX;

var y=event.clientY;

...

}

/*********************對(duì)象添加事件*******************/

function addEvent(obj,type,fun){

obj=$(obj);

if(obj.addEventListener){

obj.addEventListener(type,fun); //FF

return true;

}else if(obj.attachEvent){

return obj.attachEvent("on"+type,fun); //IE

}else{

return false;

};

};

/*********************對(duì)象刪除事件*******************/

function delEvent(obj,type,fun){

obj=$(obj);

if(obj.addEventListener){

obj.removeEventListener(type,fun);

return true;

}else if(obj.attachEvent){

obj.detachEvent("on"+type,fun);

return true;

}else{

return false;

};

};

document.getElementById("one").offsetHeight; //獲取one對(duì)應(yīng)對(duì)象的高度

obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。

obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。

obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。

obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。

document.all ? 'IE' : 'others'：在IE下document.all值為1，而其他瀏覽器下的值為0；

1.7 BOM

1.7.1 window對(duì)象

<button onclick="window.location=''">跳轉(zhuǎn)</button>

常用的屬性：

*document ：對(duì) Document 對(duì)象的只讀引用

*history

：對(duì) History 對(duì)象的只讀引用。

*location：用于窗口或框架的 Location 對(duì)象

Navigator： 對(duì) Navigator 對(duì)象的只讀引用

*parent： 返回父窗口。

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

Screen: 對(duì) Screen 對(duì)象的只讀引用

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

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

常用方法：

alert() 顯示帶有一段消息和一個(gè)確認(rèn)按鈕的警告框。

confirm() 顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對(duì)話框。

prompt() 顯示可提示用戶輸入的對(duì)話框。

close() 關(guān)閉瀏覽器窗口。

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

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

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

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

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

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

1.7.2 Navigator 對(duì)象

Navigator 對(duì)象包含的屬性描述了正在使用的瀏覽器。可以使用這些屬性進(jìn)行平臺(tái)專用的配置。

常用屬性：

with(document) {

write ("你的瀏覽器信息：<ul>");

write ("<li>代碼："+navigator.appCodeName+"</li>");

write ("<li>名稱："+navigator.appName+"</li>");

write ("<li>版本："+navigator.appVersion+"</li>");

write ("<li>語言："+navigator.language+"</li>");

write ("<li>編譯平臺(tái)："+navigator.platform+"</li>");

write ("<li>用戶表頭："+navigator.userAgent+"</li>");

write ("</ul>");

}

1.7.3 Screen 對(duì)象

Screen 對(duì)象包含有關(guān)客戶端顯示屏幕的信息

常用屬性：

document.write( "屏幕寬度："+screen.width+"px<br />" );

document.write( "屏幕高度："+screen.height+"px<br />" );

document.write( "屏幕可用寬度："+screen.availWidth+"px<br />" );

document.write( "屏幕可用高度："+screen.availHeight+"px" );

參考了解其他屬性信息獲取方式

網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth

網(wǎng)頁可見區(qū)域高： document.body.clientHeight

網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)

網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的高)

網(wǎng)頁正文全文寬： document.body.scrollWidth

網(wǎng)頁正文全文高： document.body.scrollHeight

網(wǎng)頁被卷去的高： document.body.scrollTop

網(wǎng)頁被卷去的左： document.body.scrollLeft

網(wǎng)頁正文部分上： window.screenTop

網(wǎng)頁正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的寬： window.screen.width

屏幕可用工作區(qū)高度： window.screen.availHeight

屏幕可用工作區(qū)寬度： window.screen.availWidth

1.7.4 History 對(duì)象

History 對(duì)象包含用戶（在瀏覽器窗口中）訪問過的 URL。

1.7.5 Location 對(duì)象

Location 對(duì)象包含有關(guān)當(dāng)前 URL 的信息。

//獲取頁面中第二form表單中，一個(gè)username輸入框的值（7種方式）

//alert(document.forms[1].username.value);

alert(document.myform.username.value);

//alert(document.forms.myform.username.value);

//alert(document.forms.item(1).username.value);

//alert(document.forms['myform'].username.value);

//alert(document['myform'].username.value);

//alert(document.forms.item('myform').username.value); //火狐不兼容

1.8 DOM

1.8.1 基本概念

HTML DOM 定義了訪問和操作HTML文檔的標(biāo)準(zhǔn)方法。

HTML DOM 把 HTML 文檔呈現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)（節(jié)點(diǎn)樹）。

DOM 被分為不同的部分：

1.Core DOM

定義了一套標(biāo)準(zhǔn)的針對(duì)任何結(jié)構(gòu)化文檔的對(duì)象

2.XML DOM

定義了一套標(biāo)準(zhǔn)的針對(duì) XML 文檔的對(duì)象

3.HTML DOM

定義了一套標(biāo)準(zhǔn)的針對(duì) HTML 文檔的對(duì)象。

節(jié)點(diǎn)：根據(jù) DOM，HTML 文檔中的每個(gè)成分都是一個(gè)節(jié)點(diǎn)。

DOM 是這樣規(guī)定的：

整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)

每個(gè) HTML 標(biāo)簽是一個(gè)元素節(jié)點(diǎn)

包含在 HTML 元素中的文本是文本節(jié)點(diǎn)

每一個(gè) HTML 屬性是一個(gè)屬性節(jié)點(diǎn)

注釋屬于注釋節(jié)點(diǎn)

節(jié)點(diǎn)彼此間都存在關(guān)系。

除文檔節(jié)點(diǎn)之外的每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn)。

大部分元素節(jié)點(diǎn)都有子節(jié)點(diǎn)。

當(dāng)節(jié)點(diǎn)分享同一個(gè)父節(jié)點(diǎn)時(shí)，它們就是同輩（同級(jí)節(jié)點(diǎn)）。

節(jié)點(diǎn)也可以擁有后代，后代指某個(gè)節(jié)點(diǎn)的所有子節(jié)點(diǎn)，或者這些子節(jié)點(diǎn)的子節(jié)點(diǎn)

節(jié)點(diǎn)也可以擁有先輩。先輩是某個(gè)節(jié)點(diǎn)的父節(jié)點(diǎn)，或者父節(jié)點(diǎn)的父節(jié)點(diǎn)

查找并訪問節(jié)點(diǎn)

你可通過若干種方法來查找您希望操作的元素：

通過使用 getElementById() 和 getElementsByTagName() 方法

通過使用一個(gè)元素節(jié)點(diǎn)的 parentNode、firstChild 以及 lastChild childNodes屬性

節(jié)點(diǎn)信息

每個(gè)節(jié)點(diǎn)都擁有包含著關(guān)于節(jié)點(diǎn)某些信息的屬性。這些屬性是：

nodeName（節(jié)點(diǎn)名稱）

nodeValue（節(jié)點(diǎn)值）

nodeType（節(jié)點(diǎn)類型）

nodeName 屬性含有某個(gè)節(jié)點(diǎn)的名稱。

元素節(jié)點(diǎn)的 nodeName 是標(biāo)簽名稱

屬性節(jié)點(diǎn)的 nodeName 是屬性名稱

文本節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #text

文檔節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #document

1.8.2 HTML DOM 對(duì)象參考

Document: 代表整個(gè) HTML 文檔，可被用來訪問頁面中的所有元素

常用集合屬性：forms

Anchor : 代表 <a> 元素

Area : 代表圖像映射中的 <area> 元素

Base : 代表 <base> 元素

Body : 代表 <body> 元素

Button : 代表 <button> 元素

Event : 代表某個(gè)事件的狀態(tài)

Form : 代表 <form> 元素

Frame : 代表 <frame> 元素

Frameset: 代表 <frameset> 元素

Iframe : 代表 <iframe> 元素

Image : 代表 <img> 元素

Input button : 代表 HTML 表單中的一個(gè)按鈕

Input checkbox

: 代表 HTML 表單中的復(fù)選框

Input file : 代表 HTML 表單中的文件上傳

Input hidden : 代表 HTML 表單中的隱藏域

Input password : 代表 HTML 表單中的密碼域

Input radio : 代表 HTML 表單中的單選按鈕

Input reset : 代表 HTML 表單中的重置按鈕

Input submit : 代表 HTML 表單中的確認(rèn)按鈕

Input text : 代表 HTML 表單中的文本輸入域（文本框）

Link : 代表 <link> 元素

Meta : 代表 <meta> 元素

Object : 代表 <Object> 元素

Option : 代表 <option> 元素

Select : 代表 HTML 表單中的選擇列表

Style : 代表單獨(dú)的樣式聲明

Table : 代表 <table> 元素

TableData : 代表 <td> 元素

TableRow : 代表 <tr> 元素

Textarea : 代表 <textarea> 元素

1.8.3 HTML的DOM

Object : 代表 <Object> 元素

Option : 代表 <option> 元素

Select : 代表 HTML 表單中的選擇列表

Style : 代表單獨(dú)的樣式聲明

Table : 代表 <table> 元素

TableData : 代表 <td> 元素

TableRow : 代表 <tr> 元素

Textarea : 代表 <textarea> 元素

1.9 XML的DOM

DOM （Document Object Model） 文檔對(duì)象模型

1.9.1 document 文檔 HTML XML 文件 （標(biāo)記語言)

<body>

<div>

<!-- -->

<a href="#">wwww</a>

</div>

</body>

節(jié)點(diǎn)：

將文檔想成一個(gè)倒樹， 每一個(gè)部分（根、元素、文本（內(nèi)容）， 屬性， 注釋）都是一節(jié)點(diǎn)。

根據(jù) DOM，HTML 文檔中的每個(gè)成分都是一個(gè)節(jié)點(diǎn)。

DOM 是這樣規(guī)定的：

1\. 整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)(根節(jié)點(diǎn))

2\. 每個(gè) HTML 標(biāo)簽是一個(gè)元素節(jié)點(diǎn)

3\. 包含在 HTML 元素中的文本是文本節(jié)點(diǎn)

4\. 每一個(gè) HTML 屬性是一個(gè)屬性節(jié)點(diǎn)

5\. 注釋屬于注釋節(jié)點(diǎn)

1.9.2 父、子和同級(jí)節(jié)點(diǎn)

節(jié)點(diǎn)樹中的節(jié)點(diǎn)彼此之間都有等級(jí)關(guān)系。

父、子和同級(jí)節(jié)點(diǎn)用于描述這種關(guān)系。父節(jié)點(diǎn)擁有子節(jié)點(diǎn)，位于相同層級(jí)上的子節(jié)點(diǎn)稱為同級(jí)節(jié)點(diǎn)（兄弟或姐妹）。

1\. 在節(jié)點(diǎn)樹中，頂端的節(jié)點(diǎn)成為根節(jié)點(diǎn)

2\. 根節(jié)點(diǎn)之外的每個(gè)節(jié)點(diǎn)都有一個(gè)父節(jié)點(diǎn)

3\. 節(jié)點(diǎn)可以有任何數(shù)量的子節(jié)點(diǎn)

4\. 葉子是沒有子節(jié)點(diǎn)的節(jié)點(diǎn)

5\. 同級(jí)節(jié)點(diǎn)是擁有相同父節(jié)點(diǎn)的節(jié)點(diǎn)

只要知道一個(gè)節(jié)點(diǎn)， 按關(guān)系找到其它節(jié)點(diǎn)

父節(jié)點(diǎn)： parentNode

子節(jié)點(diǎn)（第一個(gè)， 最后一個(gè)） childNodes firstChild lastChild

同胞（同輩）節(jié)點(diǎn) （上一個(gè)， 下一個(gè)）nextSibling previousSibling

1.9.3 獲取節(jié)點(diǎn)的方式：

array getElementsByTagName("節(jié)點(diǎn)名"); //獲取所對(duì)應(yīng)節(jié)點(diǎn)名（所有），返回的是數(shù)組

object getElementById("id名"); //獲取id名的唯一節(jié)點(diǎn)對(duì)象

示例：(找節(jié)點(diǎn))

document.getElementsByTagName("li"); //所有所有l(wèi)i節(jié)點(diǎn)

document.getElementById("lid"); //獲取id值為lid的唯一節(jié)點(diǎn)

document.getElementById("uid").getElementsByTagName("li");

//獲取id值為uid中所有l(wèi)i子節(jié)點(diǎn)

document.getElementsByTagName("ul")[0].getElementsByTagName("li");

//獲取第一個(gè)ul節(jié)點(diǎn)中所有l(wèi)i子節(jié)點(diǎn)

獲取到的標(biāo)記名(多個(gè))、 id（唯一）、 name（多個(gè)）

1.9.4 每個(gè)節(jié)點(diǎn)中的內(nèi)容

節(jié)點(diǎn)類型nodeType、節(jié)點(diǎn)名nodeName，節(jié)點(diǎn)值nodeValue

節(jié)點(diǎn)名nodeName：

nodeName 是只讀的

元素節(jié)點(diǎn)的 nodeName 與標(biāo)簽名相同

屬性節(jié)點(diǎn)的 nodeName 是屬性的名稱

文本節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #text

文檔節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #document

節(jié)點(diǎn)值nodeValue

元素節(jié)點(diǎn)的 nodeValue 是 undefined

文本節(jié)點(diǎn)的 nodeValue 是文本自身

屬性節(jié)點(diǎn)的 nodeValue 是屬性的值

nodeType（節(jié)點(diǎn)類型）

元素類型

節(jié)點(diǎn)類型

元素 1

屬性 2

文本 3

注釋 8

文檔 9

1.9.5 Object 對(duì)象 （HTML元素 轉(zhuǎn)成的對(duì)象(js對(duì)象)）

注意： 如果使用js操作HTML文檔， 就需要選將HTML文檔結(jié)構(gòu)轉(zhuǎn)成Js對(duì)象

a. 操作屬性:

nodeName（節(jié)點(diǎn)名稱）

nodeValue（節(jié)點(diǎn)值）

nodeType（節(jié)點(diǎn)類型）

其他屬性：（針對(duì)于節(jié)點(diǎn)）

childNodes 返回節(jié)點(diǎn)到子節(jié)點(diǎn)的節(jié)點(diǎn)列表。

firstChild 返回節(jié)點(diǎn)的首個(gè)子節(jié)點(diǎn)。

lastChild 返回節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)。

nextSibling 返回節(jié)點(diǎn)之后緊跟的同級(jí)節(jié)點(diǎn)。

previousSibling 屬性可返回某節(jié)點(diǎn)之前緊跟的節(jié)點(diǎn)（處于同一樹層級(jí)）

parentNode 返回節(jié)點(diǎn)的父節(jié)點(diǎn)。

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

b. 操作內(nèi)容

innerText(IE) textContent(FF) //獲取的是顯示的內(nèi)容，不包含HTML標(biāo)簽

innerHTML //獲取的是顯示的內(nèi)容，會(huì)包含HTML

outerText

outerHTML

表單

value

c. 操作樣式

aobj.style.backgroundColor="red";

aobj.style.fontSize="3cm";

className

aobj.className="test";

aobj.className+=" demo";

aobj.className="";

e. 操作節(jié)點(diǎn)：

appendChild()

向節(jié)點(diǎn)的子節(jié)點(diǎn)列表的結(jié)尾添加新的子節(jié)點(diǎn)。

cloneNode()

復(fù)制節(jié)點(diǎn)。

removeChild()

刪除（并返回）當(dāng)前節(jié)點(diǎn)的指定子節(jié)點(diǎn)。

replaceChild()

用新節(jié)點(diǎn)替換一個(gè)子節(jié)點(diǎn)。

hasAttributes() 判斷當(dāng)前節(jié)點(diǎn)是否擁有屬性。

hasChildNodes() 判斷當(dāng)前節(jié)點(diǎn)是否擁有子節(jié)點(diǎn)。

insertBefore() 在指定的子節(jié)點(diǎn)前插入新的子節(jié)點(diǎn)。

f. 創(chuàng)建節(jié)點(diǎn)：

* createElement() 創(chuàng)建元素節(jié)點(diǎn)

createAttribute() 來創(chuàng)建屬性節(jié)點(diǎn) 可以：元素節(jié)點(diǎn).屬性名=值；

createTextNode() 來創(chuàng)建新的文本節(jié)點(diǎn) 可以：元素節(jié)點(diǎn).innerHTML=文本內(nèi)容；

有了以上三點(diǎn)的操作之前先轉(zhuǎn)成對(duì)象

轉(zhuǎn)成對(duì)象的兩種形式：

1. 標(biāo)記名(多個(gè))、 id（唯一）、 name（多個(gè)）

document中的三個(gè)方法

var objs=document.getElementsByTagName("div"); //獲取多個(gè)

var objs=document.getElementById("one");

//獲取一個(gè)

var objs=document.getElementsByName("two");

1.10 Ajax

var xmlhttp;

1.10.1 創(chuàng)建請(qǐng)求對(duì)象

if(window.XMLHttpRequest){

// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}else{

// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

1.10.2 設(shè)置回調(diào)函數(shù)（監(jiān)聽）

xmlhttp.onreadystatechange=函數(shù)名；

或

xmlhttp.onreadystatechange=function(){

函數(shù)體。。。

}

1.10.3 初始化：

xmlhttp.open("GET","gethint.php?q="+str,true); //異步以get方式發(fā)送到gethint.php

1.10.4 發(fā)送：

xmlhttp.send();

其中：xmlhttp請(qǐng)求對(duì)象：

**屬性：

*readyState //請(qǐng)求狀態(tài)：0,1,2,3,4

*responseText//響應(yīng)內(nèi)容

responseXML //xml響應(yīng)對(duì)象

*status

//瀏覽器響應(yīng)狀態(tài)：200正常， 404 請(qǐng)求地址不存在 ,,

statusText //狀態(tài)內(nèi)容

*onreadystatechange //回調(diào)函數(shù)屬性

方法：

abort() //取消當(dāng)前響應(yīng)，關(guān)閉連接并且結(jié)束任何未決的網(wǎng)絡(luò)活動(dòng)。

getAllResponseHeaders() //把 HTTP 響應(yīng)頭部作為未解析的字符串返回。

getResponseHeader() //返回指定的 HTTP 響應(yīng)頭部的值

*open()

//初始化 HTTP 請(qǐng)求參數(shù)

*send() //發(fā)送 HTTP 請(qǐng)求，使用傳遞給 open() 方法的參數(shù)

*setRequestHeader() //向一個(gè)打開但未發(fā)送的請(qǐng)求設(shè)置或添加一個(gè) HTTP 請(qǐng)求。

模擬POST提交代碼：

xmlhttp.open("POST","ajax_test.php",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Bill&lname=Gates");
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

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