1.HTML DOM (Document Object Model)
document.getElementById("some id"): 這樣的document就是DOM對(duì)象
JavaScript 能夠改變?nèi)我?HTML 元素的大多數(shù)屬性
*注意:
html - dom - document
瀏覽器 - bom - window
2.match()函數(shù)
match() 方法可在字符串內(nèi)檢索指定的值,或找到一個(gè)或多個(gè)正則表達(dá)式的匹配。
語(yǔ)法:
stringObject.match(searchvalue) :必需。規(guī)定要檢索的字符串值。
stringObject.match(regexp):必需。規(guī)定要匹配的模式的 RegExp 對(duì)象。如果該參數(shù)不是 RegExp 對(duì)象,則需要首先把它傳遞給 RegExp 構(gòu)造函數(shù),將其轉(zhuǎn)換為 RegExp 對(duì)象
我們可以使用全局匹配的正則表達(dá)式來(lái)檢索字符串中的所有數(shù)字:
<script type="text/javascript">
var str="1 plus 2 equal 3"
document.write(str.match(/\d+/g))
</script>
3.Date()函數(shù)
Date()在js中直接調(diào)用結(jié)果:Sun Oct 09 2016 14:37:15 GMT+0800 (CST)
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDay();
alert("今天是"+year+"年"+month+"月"+day+"日");
4.js對(duì)象:
{firstName:"John", lastName:"Doe", age:40, eyeColor:"blue"}
*注意: notation:n. 符號(hào);樂(lè)譜;注釋;記號(hào)法
json: javascript object notation
5.數(shù)據(jù)類(lèi)型
JavaScript 有多種數(shù)據(jù)類(lèi)型:數(shù)字,字符串,數(shù)組,對(duì)象等等
*注意:
16 + "你好" => "16你好"
5.JavaScript 使用Unicode字符集。
Unicode覆蓋了所有的字符,包含標(biāo)點(diǎn)等字符。
JavaScript 中,常見(jiàn)的是駝峰法的命名規(guī)則,如 lastName (而不是lastname)。
6.innerHTML與innerText 區(qū)別:
1)innerHTML:
也就是從對(duì)象的起始位置到終止位置的全部?jī)?nèi)容,包括Html標(biāo)簽。
2)innerText:
從起始位置到終止位置的內(nèi)容, 但它去除Html標(biāo)簽
<div id="test">
<span style="color:red">test1</span> test2
</div>
獲取id=test節(jié)點(diǎn):
它的innerHTML就是:<span style="color:red">test1</span>test2
它的innerText是:test1test2
*注意:
innerHTML是符合W3C標(biāo)準(zhǔn)的屬性,而innerText只適用于IE瀏覽器,因此,盡可能地去使用innerHTML,而少用
innerText,如果要輸出不含HTML標(biāo)簽的內(nèi)容,可以使用innerHTML取得包含HTML標(biāo)簽的內(nèi)容后,再用正則表達(dá)式去除HTML標(biāo)簽,下面是一個(gè)簡(jiǎn)單的符合W3C標(biāo)準(zhǔn)的示例:
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">去除HTML標(biāo)簽后的文本</a>
7.對(duì)代碼行進(jìn)行折行
document.write("你好 \ 是加爾!");
*注意:JavaScript 是腳本語(yǔ)言。瀏覽器會(huì)在讀取代碼時(shí),逐行地執(zhí)行腳本代碼。而對(duì)于傳統(tǒng)編程來(lái)說(shuō),會(huì)在執(zhí)行前對(duì)所有代碼進(jìn)行編譯。
8.聲明
var carname;
在計(jì)算機(jī)程序中,經(jīng)常會(huì)聲明無(wú)值的變量。未使用值來(lái)聲明的變量,其值實(shí)際上是 undefined。
在執(zhí)行過(guò)以下語(yǔ)句后,變量carname的值將是 undefined:
var carname="Volvo";
var carname; // 在以下兩條語(yǔ)句執(zhí)行后,變量 carname 的值依然是 "Volvo":
9.JavaScript 對(duì)象
對(duì)象由花括號(hào)分隔。在括號(hào)內(nèi)部,對(duì)象的屬性以名稱和值對(duì)的形式 (name : value) 來(lái)定義。屬性由逗號(hào)分隔:
eg:var person={firstname:"John", lastname:"Doe", id:5566};
var person={
firstname : "John",
lastname : "Doe",
id : 5566
};
對(duì)象屬性有兩種尋址方式:
name=person.lastname;
name=person["lastname"];
*注意:鍵加""雙引號(hào)也可以的
var person={
firstname : "John",
"lastname" : "Doe",
id : 5566
};
10.Undefined 和 Null區(qū)別
Undefined 這個(gè)值表示變量不含有值。
可以通過(guò)將變量的值設(shè)置為 null 來(lái)清空變量。
cars = null
person = null
之后alert(cars) 結(jié)果為null,注意不是undefined
11.聲明變量類(lèi)型
當(dāng)您聲明新變量時(shí),可以使用關(guān)鍵詞 "new" 來(lái)聲明其類(lèi)型:
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
JavaScript 變量均為對(duì)象。當(dāng)您聲明一個(gè)變量時(shí),就創(chuàng)建了一個(gè)新的對(duì)象。
12.js的對(duì)象
1)鍵值對(duì),對(duì)象屬性
可以說(shuō) "JavaScript 對(duì)象是變量的容器"。
我們通常認(rèn)為 "JavaScript 對(duì)象是鍵值對(duì)的容器"。
鍵值對(duì)在 JavaScript對(duì)象通常稱為 對(duì)象屬性。
對(duì)象鍵值對(duì)的寫(xiě)法類(lèi)似于:
PHP 中的關(guān)聯(lián)數(shù)組
Python 中的字典
C 語(yǔ)言中的哈希表
2)對(duì)象方法
對(duì)象的方法定義了一個(gè)函數(shù),并作為對(duì)象的屬性存儲(chǔ)。
對(duì)象方法通過(guò)添加 () 調(diào)用 (作為一個(gè)函數(shù))。
name = person.fullName(); // person.fullName() 調(diào)用person對(duì)象的方法,返回的值賦值給了name
JavaScript對(duì)象是屬性和方法的容器
在微信小程序中:
wx.request({
url:"http://www.xxxx",
method:'GET',
data:{},
header:{
'Accept':'application/json'
},
success:function(res){
that.setData({
images:res.data
})
}
})
// wx.request(); 調(diào)用函數(shù).傳入的是 js對(duì)象 {}
*注意:
函數(shù)屬性作為一個(gè)方法訪問(wèn)與函數(shù)屬性作為一個(gè)屬性訪問(wèn)。
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName(); // 方法訪問(wèn)
document.getElementById("demo").innerHTML = person.fullName;
13.JavaScript 變量的生存期
JavaScript 變量的生命期從它們被聲明的時(shí)間開(kāi)始。
局部變量會(huì)在函數(shù)運(yùn)行以后被刪除。
全局變量會(huì)在頁(yè)面關(guān)閉后被刪除。
14.向未聲明的 JavaScript 變量分配值
如果您把值賦給尚未聲明的變量,該變量將被自動(dòng)作為全局變量聲明。
carname="Volvo";
將聲明一個(gè)全局變量 carname,即使它在函數(shù)內(nèi)執(zhí)行。
函數(shù)參數(shù)只在函數(shù)內(nèi)起作用,是局部變量。
15.html中的全局變量
在html中,全局變量是window對(duì)象:所有數(shù)據(jù)變量都屬于window對(duì)象
function myFunction() {
carName = "Volvo";
}
myFunction();
//此處可使用 window.carName
注意:要先執(zhí)行myFunction()之后才能使用全局變量carName
16.js事件
HTML 事件是發(fā)生在HTML 元素上的事情。
當(dāng)在HTML 頁(yè)面中使用 JavaScript時(shí), JavaScript可以觸發(fā)這些事件。
HTML 事件可以是瀏覽器行為,也可以是用戶行為。
常見(jiàn)的html事件:
onchange:HTML 元素改變
onclick:用戶點(diǎn)擊 HTML 元素
onmouseover:用戶在一個(gè)HTML元素上移動(dòng)鼠標(biāo)
onmouseout:用戶從一個(gè)HTML元素上移開(kāi)鼠標(biāo)
onkeydown:用戶按下鍵盤(pán)按鍵
onload:瀏覽器已完成頁(yè)面的加載
17.js字符串
var answer = "He is called 'Johnny'";
1)alert(answer[13]) ; // '
2)answer.length
3)特殊字符
在 JavaScript 中,字符串寫(xiě)在單引號(hào)或雙引號(hào)來(lái)中。
"We are the so-called "Vikings" from the north."
如何解決以上的問(wèn)題呢?可以使用反斜杠 () 來(lái)轉(zhuǎn)義 "Vikings" 字符串中的雙引號(hào),如下:
"We are the so-called \"Vikings\" from the north."
特殊字符的轉(zhuǎn)義:
\' 單引號(hào)
\" 雙引號(hào)
\\ 反斜杠
\n 換行
\r 回車(chē)
\t tab(制表符)
\b 退格符
\f 換頁(yè)符
18.字符串可以是對(duì)象
通常,JavaScript 字符串是原始值,可以使用字符創(chuàng)建:var firstName = "John"
但我們也可以使用 new 關(guān)鍵字將字符串定義為一個(gè)對(duì)象:var firstName = new String("John")
不要?jiǎng)?chuàng)建String對(duì)象。它會(huì)拖慢執(zhí)行速度,并可能產(chǎn)生其他副作用:
var x = "John";
var y = new String("John");
(x === y) // is false because x is a string and y is an object.
1)字符串屬性
constructor 返回創(chuàng)建字符串屬性屬性的函數(shù)
length 返回字符串的長(zhǎng)度
prototype 允許您向?qū)ο筇砑訉傩院头椒?/p>
2)字符串方法
charAt() 返回指定索引位置的字符 charCodeAt() 返回指定索引位置字符的 Unicode 值 concat() 連接兩個(gè)或多個(gè)字符串,返回連接后的字符串 fromCharCode() 將字符轉(zhuǎn)換為 Unicode 值 indexOf() 返回字符串中檢索指定字符第一次出現(xiàn)的位置 lastIndexOf() 返回字符串中檢索指定字符最后一次出現(xiàn)的位置 localeCompare() 用本地特定的順序來(lái)比較兩個(gè)字符串 match() 找到一個(gè)或多個(gè)正則表達(dá)式的匹配 replace() 替換與正則表達(dá)式匹配的子串 search() 檢索與正則表達(dá)式相匹配的值 slice() 提取字符串的片斷,并在新的字符串中返回被提取的部分 split() 把字符串分割為子字符串?dāng)?shù)組 substr() 從起始索引號(hào)提取字符串中指定數(shù)目的字符 substring() 提取字符串中兩個(gè)指定的索引號(hào)之間的字符 toLocaleLowerCase() 根據(jù)主機(jī)的語(yǔ)言環(huán)境把字符串轉(zhuǎn)換為小寫(xiě),只有幾種語(yǔ)言(如土耳其語(yǔ))具有地方特有的大小寫(xiě)映射 toLocaleUpperCase() 根據(jù)主機(jī)的語(yǔ)言環(huán)境把字符串轉(zhuǎn)換為大寫(xiě),只有幾種語(yǔ)言(如土耳其語(yǔ))具有地方特有的大小寫(xiě)映射 toLowerCase() 把字符串轉(zhuǎn)換為小寫(xiě) toString() 返回字符串對(duì)象值 toUpperCase() 把字符串轉(zhuǎn)換為大寫(xiě) trim() 移除字符串首尾空白 valueOf() 返回某個(gè)字符串對(duì)象的原始值
19.js中的break與continue
break 語(yǔ)句可用于跳出循環(huán)。
break 語(yǔ)句跳出循環(huán)后,會(huì)繼續(xù)執(zhí)行該循環(huán)之后的代碼(如果有的話):
continue 語(yǔ)句中斷循環(huán)中的迭代,如果出現(xiàn)了指定的條件,然后繼續(xù)循環(huán)中的下一個(gè)迭代。 該例子跳過(guò)了值 3:
eg:
for (i=0;i<=10;i++)
{
if (i==3) continue;
x=x + "The number is " + i + "<br>";
}
20.JavaScript typeof, null, 和 undefined
數(shù)組是一種特殊的對(duì)象類(lèi)型。 因此 typeof [1,2,3,4]返回object。
在 JavaScript中 null表示 "什么都沒(méi)有"。
用typeof檢測(cè) null返回是object。
可以設(shè)置為 null 來(lái)清空對(duì)象:
var person = null;
可以設(shè)置為 undefined 來(lái)清空對(duì)象:
var person = undefined;
在 JavaScript 中, undefined 是一個(gè)沒(méi)有設(shè)置值的變量。
typeof 一個(gè)沒(méi)有值的變量會(huì)返回 undefined。
Undefined和Null的區(qū)別:
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
請(qǐng)注意:
NaN 的數(shù)據(jù)類(lèi)型是 number
數(shù)組(Array)的數(shù)據(jù)類(lèi)型是 object
日期(Date)的數(shù)據(jù)類(lèi)型為 object
null 的數(shù)據(jù)類(lèi)型是 object
未定義變量的數(shù)據(jù)類(lèi)型為 undefined
21.JavaScript 類(lèi)型轉(zhuǎn)換
Number() 轉(zhuǎn)換為數(shù)字, String() 轉(zhuǎn)換為字符串, Boolean() 轉(zhuǎn)化為布爾值。
22.JavaScript 數(shù)據(jù)類(lèi)型
在 JavaScript 中有 5 中不同的數(shù)據(jù)類(lèi)型:
string
number
boolean
object
function
3 種對(duì)象類(lèi)型:
Object
Date
Array
2 個(gè)不包含任何值的數(shù)據(jù)類(lèi)型:
null
undefined
23.JavaScript 類(lèi)型轉(zhuǎn)換
1)將數(shù)字轉(zhuǎn)換為字符串
String(x) // 將變量 x 轉(zhuǎn)換為字符串并返回
String(123) // 將數(shù)字 123 轉(zhuǎn)換為字符串并返回
String(100 + 23) // 將數(shù)字表達(dá)式轉(zhuǎn)換為字符串并返回
x.toString()
(123).toString()
(100 + 23).toString()
2)將布爾值轉(zhuǎn)換為字符串
全局方法 String() 可以將布爾值轉(zhuǎn)換為字符串。
String(false) // 返回 "false"
String(true) // 返回 "true"
Boolean 方法 toString() 也有相同的效果。
false.toString() // 返回 "false"
true.toString() // 返回 "true"
3)將日期轉(zhuǎn)換為字符串
全局方法 String() 可以將日期轉(zhuǎn)換為字符串。
String(Date()) // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
Date 方法 toString() 也有相同的效果。
Date().toString() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
4)將字符串轉(zhuǎn)換為數(shù)字
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN
5)將布爾值轉(zhuǎn)換為數(shù)字
Number(false) // 返回 0
Number(true) // 返回 1
*注意:獲得時(shí)間戳
d = new Date();
d.getTime() // 返回 1404568027739
6)自動(dòng)轉(zhuǎn)換類(lèi)型 Type Conversion
5 + null // 返回 5 because null is converted to 0
"5" + null // 返回"5null" because null is converted to "null"
"5" + 1 // 返回 "51" because 1 is converted to "1"
"5" - 1 // 返回 4 because "5" is converted to 5
7)自動(dòng)轉(zhuǎn)換為字符串
document.getElementById("demo").innerHTML = myVar;
// if myVar = {name:"Fjohn"} // toString 轉(zhuǎn)換為 "[object Object]"
// if myVar = [1,2,3,4] // toString 轉(zhuǎn)換為 "1,2,3,4"
// if myVar = new Date() // toString 轉(zhuǎn)換為 "Fri Jul 18 2014 09:08:55 GMT+0200"
// if myVar = 123 // toString 轉(zhuǎn)換為 "123"
// if myVar = true // toString 轉(zhuǎn)換為 "true"
// if myVar = false // toString 轉(zhuǎn)換為 "false"
24.js正則表達(dá)式
Regular Expression: 有規(guī)律的 表達(dá)式
簡(jiǎn)寫(xiě)為:regex, regexp,RE
作用:使用單個(gè)字符串來(lái)描述、匹配一系列符合某個(gè)句法規(guī)則的字符串搜索模式。
搜索模式可用于文本搜索和文本替換。
1)什么是正則表達(dá)式?
正則表達(dá)式是由一個(gè)字符序列形成的搜索模式。
當(dāng)你在文本中搜索數(shù)據(jù)是,你可以用搜索模式來(lái)描述你要查詢的內(nèi)容。
正則表達(dá)式可以是一個(gè)簡(jiǎn)單的字符,或一個(gè)更復(fù)雜的模式。
正則表達(dá)式可用于所有文本搜索和文本替換的操作。
2)語(yǔ)法:
/pattern/modifiers; // pattern:模式 modifier:修飾語(yǔ)
eg:
var patt = /shouce.ren/i
/shouce.ren/i 是一個(gè)正則表達(dá)式。
shouce.ren 是一個(gè)模式 (用于檢索)。
i 是一個(gè)修飾符 (搜索不區(qū)分大小寫(xiě))。
3)使用字符串方法
在 JavaScript中,正則表達(dá)式通常用于兩個(gè)字符串方法 : search() 和 replace()。
search() 方法 用于檢索字符串中指定的子字符串,或檢索與正則表達(dá)式相匹配的子字符串,并返回子串的起始位置。
replace()方法 用于在字符串中用一些字符替換另一些字符,或替換一個(gè)與正則表達(dá)式匹配的子串。
實(shí)例:
var str = "Visit shouce.ren";
var n = str.search(/shouce.ren/i); // 輸出的n 為6
var str = "Visit shouce.ren!";
var n = str.search("shouce.ren"); // n => 6
var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "shouce.ren"); // res => shouce.ren
作用:
正則表達(dá)式參數(shù)可用在以上方法中 (替代字符串參數(shù))。
正則表達(dá)式使得搜索功能更加強(qiáng)大(如實(shí)例中不區(qū)分大小寫(xiě))。
4)正則表達(dá)式修飾符
修飾符 可以在全局搜索中不區(qū)分大小寫(xiě):
i 執(zhí)行對(duì)大小寫(xiě)不敏感的匹配。
g 執(zhí)行全局匹配(查找所有匹配而非在找到第一個(gè)匹配后停止)。
m 執(zhí)行多行匹配。
5)正則表達(dá)式模式
方括號(hào)用于查找某個(gè)范圍內(nèi)的字符:
[abc] 查找方括號(hào)之間的任何字符。
[0-9] 查找任何從 0 至 9 的數(shù)字。
(x|y) 查找任何以 | 分隔的選項(xiàng)。
元字符是擁有特殊含義的字符:
\d 查找數(shù)字。
\s 查找空白字符。
\b 匹配單詞邊界。
\uxxxx 查找以十六進(jìn)制數(shù) xxxx 規(guī)定的 Unicode 字符。
量詞:
n+ 匹配任何包含至少一個(gè) n 的字符串。
n* 匹配任何包含零個(gè)或多個(gè) n 的字符串。
n? 匹配任何包含零個(gè)或一個(gè) n 的字符串。
6)使用 RegExp 對(duì)象
在JavaScript中,RegExp對(duì)象是一個(gè)預(yù)定義了屬性和方法的正則表達(dá)式對(duì)象。
a.使用test()
test()方法是一個(gè)正則表達(dá)式方法。
test()方法用于檢測(cè)一個(gè)字符串是否匹配某個(gè)模式,如果字符串中含有匹配的文本,則返回 true,否則返回 false。
var patt = /e/;
patt.test("The best things in life are free!");
b.使用exec()
exec() 方法是一個(gè)正則表達(dá)式方法。
exec()方法用于檢索字符串中的正則表達(dá)式的匹配。
該函數(shù)返回一個(gè)數(shù)組,其中存放匹配的結(jié)果。如果未找到匹配,則返回值為 null。
eg:
/e/.exec("the best things"); // 含有e: 返回 "e"
25.js表單驗(yàn)證
JavaScript 可用來(lái)在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。表單數(shù)據(jù)經(jīng)常需要使用 JavaScript 來(lái)驗(yàn)證其正確性:
1)必填(或者必選)項(xiàng)目
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
2)Email驗(yàn)證:
function validateForm(){
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
alert("Not a valid e-mail address");
return false;
}
}
26.js標(biāo)準(zhǔn)
所有的現(xiàn)代瀏覽器完全支持 ECMAScript 3(ES3,JavaScript的第三版,從 1999年開(kāi)始)。
ECMAScript 4(ES4)未通過(guò)。
ECMAScript 5(ES5,2009年發(fā)布),是 JavaScript最新的官方版本。
隨著時(shí)間的推移,我們開(kāi)始看到,所有的現(xiàn)代瀏覽器已經(jīng)完全支持ES5。
27.javaScript JSON
JSON是用于存儲(chǔ)和傳輸數(shù)據(jù)的格式。
JSON 通常用于服務(wù)端向網(wǎng)頁(yè)傳遞數(shù)據(jù) 。
1)什么是JSON?
JSON英文全稱 JavaScript Object Notation
JSON 是一種輕量級(jí)的數(shù)據(jù)交換格式。
JSON是獨(dú)立的語(yǔ)言 。
JSON易于理解。
*注意:JSON 使用 JavaScript 語(yǔ)法,但是 JSON格式僅僅是一個(gè)文本。
文本可以被任何編程語(yǔ)言讀取及作為數(shù)據(jù)格式傳遞。
eg:
{"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}
2)JSON 格式化后為 JavaScript 對(duì)象
JSON格式在語(yǔ)法上與創(chuàng)建 JavaScript 對(duì)象代碼是相同的。
由于它們很相似,所以 JavaScript 程序可以很容易的將JSON數(shù)據(jù)轉(zhuǎn)換為 JavaScript 對(duì)象。
3)JSON 語(yǔ)法規(guī)則
數(shù)據(jù)為 鍵/值 對(duì)。
數(shù)據(jù)由逗號(hào)分隔。
大括號(hào)保存對(duì)象
方括號(hào)保存數(shù)組
4)JSON 字符串轉(zhuǎn)換為JavaScript 對(duì)象
通常我們從服務(wù)器中讀取 JSON數(shù)據(jù),并在網(wǎng)頁(yè)中顯示數(shù)據(jù)。
eg:
創(chuàng)建 JavaScript 字符串,字符傳為 JSON格式的數(shù)據(jù):
var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
使用 JavaScript 內(nèi)置函數(shù) JSON.parse() 將字符串轉(zhuǎn)換為 JavaScript 對(duì)象:
var obj = JSON.parse(text); // 將json格式字符串轉(zhuǎn)為js對(duì)象
28.javascript:void(0)含義
我們經(jīng)常會(huì)使用到 javascript:void(0)這樣的代碼,那么在JavaScript中 javascript:void(0)代表的是什么意思呢?
javascript:void(0)中最關(guān)鍵的是void關(guān)鍵字, void 是 JavaScript中非常重要的關(guān)鍵字,該操作符指定要計(jì)算一個(gè)表達(dá)式但是不返回值。
eg:
<a href="javascript:void(0)">單擊此處什么也不會(huì)發(fā)生</a>
<head>
<script type="text/javascript">
function getValue(){
var a,b,c;
a = void ( b = 5, c = 7 );
document.write('a = ' + a + ' b = ' + b +' c = ' + c );
}
</script>
</head>
// 輸出結(jié)果: a=undefined b = 5 c = 7 。void(); ()里面計(jì)算一個(gè)表達(dá)式,但是不返回值
1)href="#"與href="javascript:void(0)"的區(qū)別
# 包含了一個(gè)位置信息,默認(rèn)的錨是#top 也就是網(wǎng)頁(yè)的上端。
而javascript:void(0), 僅僅表示一個(gè)死鏈接。
在頁(yè)面很長(zhǎng)的時(shí)候會(huì)使用 # 來(lái)定位頁(yè)面的具體位置,格式為:# + id。
eg:
<a href="javascript:void(0);">點(diǎn)我沒(méi)有反應(yīng)的!</a>
<a href="#pos">點(diǎn)我定位到指定位置!</a>
<br><br><br> <p id="pos">尾部定位點(diǎn)</p>
29.函數(shù)
1)匿名函數(shù)
var x = function (a, b) {return a * b}; // 匿名函數(shù)聲明
var z = x(4, 3); // 函數(shù)調(diào)用
2)Function() 構(gòu)造函數(shù)
函數(shù)同樣可以通過(guò)內(nèi)置的 JavaScript 函數(shù)構(gòu)造器(Function())定義。
var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3); // 函數(shù)調(diào)用
*注意:在 JavaScript 中,很多時(shí)候,你需要避免使用 new 關(guān)鍵字。所以建議一般不適用new關(guān)鍵字去創(chuàng)建
3)函數(shù)提升 Hoisting
參考:http://www.jb51.net/article/30719.htm
在js中:與c語(yǔ)言不一樣,c語(yǔ)言有塊級(jí)作用域,js卻沒(méi)有,因?yàn)?code>JavaScript是函數(shù)級(jí)作用域(function-level scope)
這和C系語(yǔ)言是完全不同的。塊,就像if語(yǔ)句,并不會(huì)創(chuàng)建一個(gè)新的作用域。只有函數(shù)才會(huì)創(chuàng)建新的作用域。
C,C++,C#或是Java 塊級(jí)作用域。
var x = 1;
console.log(x); // 1
if (true) {
var x = 2;
console.log(x); //2
}
console.log(x);// 2
因?yàn)?code>JavaScript函數(shù)的靈活性,對(duì)于這個(gè)問(wèn)題我們有一個(gè)解決方案。如果你必須在函數(shù)中創(chuàng)建一個(gè)臨時(shí)的作用域,請(qǐng)像下面這樣做:
function foo() {
var x = 1;
if (x) {
(function () {
var x = 2;
// some other code
}());
}
// x is still 1.
}
開(kāi)辟臨時(shí)作用域:
(function(){ })
這種方面確實(shí)非常靈活,它使用在任何需要?jiǎng)?chuàng)建一個(gè)臨時(shí)作用域的地方,不僅僅是某個(gè)塊中。但是,我強(qiáng)烈建議多花點(diǎn)時(shí)間好好理解下JavaScript scoping。它實(shí)在是非常強(qiáng)力,而且它也是我最喜歡的語(yǔ)言特性之一。如果你很好的理解了scoping,理解hoisting將會(huì)更加容易。
function myFunction(a, b){
return a *b;
}
var text = myFunction.toString();
1)js中提升,有變量提升和函數(shù)提升
var v='Hello World';
(function(){
var v;
alert(v); // 結(jié)果是undefined
v='I love you';
})()
可見(jiàn)js中的作用域是以函數(shù)為邊界的
函數(shù)的寫(xiě)法: 一種是函數(shù)表達(dá)式,另外一種是函數(shù)聲明方式
*注意:js沒(méi)有塊級(jí)作用域的概念
變量提升與js的預(yù)編譯有關(guān)
js預(yù)編譯時(shí)會(huì)先在當(dāng)前作用域中找到var聲明的變量分配空間,賦值為undefined,如果找不到就會(huì)到下一級(jí)作用域中找
解析器在向執(zhí)行環(huán)境中加載數(shù)據(jù)時(shí),對(duì)函數(shù)聲明和函數(shù)表達(dá)式并非一視同仁。
解析器會(huì)率先讀取函數(shù)聲明,并使其在執(zhí)行任何代碼之前可用(可以訪問(wèn));至于函數(shù)表達(dá)式,則必須等到解析器執(zhí)行到它所在的代碼行,才會(huì)真正被解釋執(zhí)行。
*注意:
參考:http://www.cnblogs.com/Wayou/p/javascript_arguments_passing_with_reference.html
1.匿名函數(shù)無(wú)法在聲明前調(diào)用
- 參數(shù)變更影響到函數(shù)外部
當(dāng)傳遞給函數(shù)的參數(shù)是一個(gè)數(shù)組或?qū)ο髸r(shí),在函數(shù)體內(nèi)對(duì)這個(gè)傳入的參數(shù)的更改會(huì)影響到函數(shù)體外的原傳入值。
一般說(shuō)來(lái),對(duì)參數(shù)的更改不會(huì)影響到原來(lái)變量的值,更改只在函數(shù)體內(nèi)起作用:
但情況有所不同,當(dāng)傳入的參數(shù)是數(shù)組、對(duì)象時(shí),在函數(shù)體內(nèi)對(duì)參數(shù)所做的更改會(huì)反映到原變量上。
3.使用arguments來(lái)接收個(gè)數(shù)未定的參數(shù)
eg:這個(gè)是函數(shù)聲明
alert(sum(10,10));
function sum(num1,num2)
{
return num1+num2;
}
以上代碼完全可以正確執(zhí)行,因?yàn)樵诖a開(kāi)始執(zhí)行之前,解析器就已經(jīng)通過(guò)一個(gè)名為函數(shù)聲明提升(function declaration hoisting)的過(guò)程,讀取并將函數(shù)聲明添加到執(zhí)行環(huán)境中。對(duì)代碼求值時(shí),JavaScript引擎在第一遍會(huì)聲明函數(shù)并將它們放到源代碼樹(shù)的頂部。所以,即使聲明函數(shù)的代碼在調(diào)用它的代碼后面,JavaScript引擎也能把函數(shù)聲明提升到頂部。如果像下面的例子所示,把上面的函數(shù)聲明改為等價(jià)的函數(shù)表達(dá)式,就會(huì)在執(zhí)行的時(shí)候出現(xiàn)錯(cuò)誤。
這個(gè)是函數(shù)表達(dá)式,函數(shù)表達(dá)式不會(huì)提升函數(shù)
alert(sum(10,10)); // 報(bào)錯(cuò)
var sum=function(num1,num2)
{
return num1+num2;
};
try{
以上代碼會(huì)在運(yùn)行的時(shí)候出現(xiàn)錯(cuò)誤,原因在于函數(shù)位于一個(gè)初始化語(yǔ)句中,而不是一個(gè)函數(shù)聲明。換句話講,在執(zhí)行到函數(shù)所在的語(yǔ)句之前,變量sum中不會(huì)保存有對(duì)函數(shù)的引用;而且,由于第一行代碼就會(huì)導(dǎo)致“unexpected identifier”(意外標(biāo)識(shí)符)錯(cuò)誤,實(shí)際上也不會(huì)執(zhí)行到下一行。
try,catch的使用:
}catch(e){
alert(e);
}
4)自調(diào)用函數(shù)
函數(shù)表達(dá)式可以 "自調(diào)用"。
自調(diào)用表達(dá)式會(huì)自動(dòng)調(diào)用。
如果表達(dá)式后面緊跟 (),則會(huì)自動(dòng)調(diào)用。
Y不能自調(diào)用聲明的函數(shù)。
通過(guò)添加括號(hào),來(lái)說(shuō)明它是一個(gè)函數(shù)表達(dá)式:
實(shí)例:
(function(){
var x = 'hellow!'; // 我將會(huì)自動(dòng)調(diào)用自己
})();
語(yǔ)法:
( // 自動(dòng)調(diào)用函數(shù) )()
5)函數(shù)是對(duì)象
eg:
function(a, b){
return arguments.length; // 返回收到參數(shù)個(gè)數(shù)
}
6)函數(shù)默認(rèn)參數(shù)
如果函數(shù)在調(diào)用時(shí)缺少參數(shù),參數(shù)會(huì)默認(rèn)設(shè)置為: undefined
有時(shí)這是可以接受的,但是建議最好為參數(shù)設(shè)置一個(gè)默認(rèn)值:
eg:
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
}
或者,更簡(jiǎn)單的方式:
function myFunction(x, y) {
y = y || 0; // 如果y已經(jīng)定義 , y || 返回 y, 因?yàn)?y 是 true, 否則返回 0, 因?yàn)?undefined 為 false。
}
7)函數(shù)的Arguments對(duì)象
JavaScript 函數(shù)有個(gè)內(nèi)置的對(duì)象 arguments 對(duì)象.
argument 對(duì)象包含了函數(shù)調(diào)用的參數(shù)數(shù)組。
如果函數(shù)調(diào)用時(shí)設(shè)置了過(guò)多的參數(shù),參數(shù)將無(wú)法被引用,因?yàn)闊o(wú)法找到對(duì)應(yīng)的參數(shù)名。 只能使用arguments對(duì)象來(lái)調(diào)用
通過(guò)這種方式你可以很方便的找到最后一個(gè)參數(shù)的值:
eg:
x = findMax(1, 123, 500, 115, 44, 88);
function findMax() {
var i, max = 0;
for (i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
8)通過(guò)值傳遞參數(shù)
在函數(shù)中調(diào)用的參數(shù)是函數(shù)的參數(shù)。
如果函數(shù)修改參數(shù)的值,將不會(huì)修改參數(shù)的初始值(在函數(shù)外定義)。
函數(shù)參數(shù)的改變不會(huì)影響函數(shù)外部的變量(局部變量)。
9)通過(guò)對(duì)象傳遞參數(shù)
在JavaScript中,可以引用對(duì)象的值。
因此我們?cè)诤瘮?shù)內(nèi)部修改對(duì)象的屬性就會(huì)修改其初始的值。
修改對(duì)象屬性可作用于函數(shù)外部(全局變量)。
10)函數(shù)的調(diào)用
JavaScript 函數(shù)有 4 種調(diào)用方式。
每種方式的不同方式在于 this 的初始化。
a)作為一個(gè)函數(shù)調(diào)用
實(shí)例
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); // myFunction(10, 2) 返回 20
以上函數(shù)不屬于任何對(duì)象。但是在 JavaScript中它始終是默認(rèn)的全局對(duì)象。
在 HTML 中默認(rèn)的全局對(duì)象是 HTML頁(yè)面本身,所以函數(shù)是屬于HTML 頁(yè)面。
在瀏覽器中的頁(yè)面對(duì)象是瀏覽器窗口(window 對(duì)象)。以上函數(shù)會(huì)自動(dòng)變?yōu)?window 對(duì)象的函數(shù)。
myFunction() 和 window.myFunction()是一樣的:
全局對(duì)象:
當(dāng)函數(shù)沒(méi)有被自身的對(duì)象調(diào)用是, this 的值就會(huì)變成全局對(duì)象。
在 web 瀏覽器中全局對(duì)象是瀏覽器窗口(window對(duì)象)。
該實(shí)例返回 this的值是 window對(duì)象:
function myFunction() {
return this;
}
myFunction(); // 返回 window 對(duì)象
函數(shù)作為全局對(duì)象調(diào)用,會(huì)使 this 的值成為全局對(duì)象。
使用 window對(duì)象作為一個(gè)變量容易造成程序崩潰。
b)函數(shù)作為方法調(diào)用
在 JavaScript 中你可以將函數(shù)定義為對(duì)象的方法
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // 返回 "John Doe"
*注意:這里,方法和函數(shù)的區(qū)別
c)使用構(gòu)造函數(shù)調(diào)用函數(shù)
function myFunction(){
this.fir = arguments[0];
this.sec = arguments[1];
}
var my = new myFunction("a", "b");
alert(my.fir);
*注意:
構(gòu)造函數(shù)中 this 關(guān)鍵字沒(méi)有任何的值。
this 的值在函數(shù)調(diào)用時(shí)實(shí)例化對(duì)象(new object)時(shí)創(chuàng)建。
d)作為函數(shù)方法調(diào)用函數(shù)
在 JavaScript 中, 函數(shù)是對(duì)象。JavaScript函數(shù)有它的屬性和方法。
call() 和 apply() 是預(yù)定義的函數(shù)方法。 兩個(gè)方法可用于調(diào)用函數(shù),兩個(gè)方法的第一個(gè)參數(shù)必須是對(duì)象本身。
例子1:
function myFunction(a, b) {
return a * b;
}
myFunction.call(myObject, 10, 2); // 返回 20
例子2:
function myFunction(a, b) {
return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray); // 返回 20
11)js閉包
JavaScript變量可以是局部變量或全局變量。
私有變量可以用到閉包。
*注意:變量聲明是如果不使用 var 關(guān)鍵字,那么它就是一個(gè)全局變量,即便它在函數(shù)內(nèi)定義。
JavaScript內(nèi)嵌函數(shù)
所有函數(shù)都能訪問(wèn)全局變量。
實(shí)際上,在 JavaScript中,所有函數(shù)都能訪問(wèn)它們上一層的作用域。
JavaScript 支持嵌套函數(shù)。嵌套函數(shù)可以訪問(wèn)上一層的函數(shù)變量。
JavaScript 閉包
函數(shù)自我調(diào)用 該函數(shù)會(huì)做什么?
eg:
var add = (function () {
var counter = 0;
return function () {
return counter += 1;
}
})();
add();
add();
add();
// 計(jì)數(shù)器為 3
變量add指定了函數(shù)自我調(diào)用的返回字值。
自我調(diào)用函數(shù)只執(zhí)行一次。設(shè)置計(jì)數(shù)器為 0。并返回函數(shù)表達(dá)式。
add變量可以作為一個(gè)函數(shù)使用。非常棒的部分是它可以訪問(wèn)函數(shù)上一層作用域的計(jì)數(shù)器。
這個(gè)叫作JavaScript 閉包。它使得函數(shù)擁有私有變量變成可能。
計(jì)數(shù)器受匿名函數(shù)的作用域保護(hù),只能通過(guò) add 方法修改。
*注意:函數(shù)自調(diào)用和閉包的區(qū)別
30.HTML DOM
通過(guò) HTML DOM,可訪問(wèn) JavaScript HTML 文檔的所有元素。
當(dāng)網(wǎng)頁(yè)被加載時(shí),瀏覽器會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型(Document Object Model)。
通過(guò)可編程的對(duì)象模型,JavaScript獲得了足夠的能力來(lái)創(chuàng)建動(dòng)態(tài)的HTML。
JavaScript 能夠改變頁(yè)面中的所有 HTML 元素
JavaScript 能夠改變頁(yè)面中的所有 HTML 屬性
JavaScript 能夠改變頁(yè)面中的所有 CSS 樣式
JavaScript 能夠?qū)?yè)面中的所有事件做出反應(yīng)
1)查找HTML元素
var x=document.getElementById("intro");
如果找到該元素,則該方法將以對(duì)象(在 x中)的形式返回該元素。
如果未找到該元素,則 x 將包含 null。
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
var x=document.getElementsByClassName("intro"); // 返回的一個(gè)數(shù)組,class = intro的數(shù)組
2)改變HTML輸出流
document.write(Date());
絕對(duì)不要在文檔加載完成之后使用document.write()。這會(huì)覆蓋該文檔。
3)改變 HTML 內(nèi)容
document.getElementById(id).innerHTML=new HTML
-
改變 HTML 屬性
document.getElementById(id).attribute=new value
eg:document.getElementById("img").src = "landscape.jpg";
5)改變css
document.getElementById(id).style.property=new style
eg:
document.getElementById("p2").style.color="blue";
31.html dom事件
HTML DOM 使 JavaScript有能力對(duì) HTML事件做出反應(yīng)。
onclick=JavaScript
類(lèi)型:
當(dāng)用戶點(diǎn)擊鼠標(biāo)時(shí)
當(dāng)網(wǎng)頁(yè)已加載時(shí)
當(dāng)圖像已加載時(shí)
當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)
當(dāng)輸入字段被改變時(shí)
當(dāng)提交 HTML 表單時(shí)
當(dāng)用戶觸發(fā)按鍵時(shí)
實(shí)例:
<h1 onclick="this.innerHTML='Ooops!'">點(diǎn)擊文本!</h1>
*注意:onclick屬性不適用以下元素:<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。
1)onload 和 onunload事件
作用:
onload 和 onunload事件會(huì)在用戶進(jìn)入或離開(kāi)頁(yè)面時(shí)被觸發(fā)
onload 事件可用于檢測(cè)訪問(wèn)者的瀏覽器類(lèi)型和瀏覽器版本,并基于這些信息來(lái)加載網(wǎng)頁(yè)的正確版本。
onload 和 onunload事件可用于處理 cookie。
2)<input> 的 onchange事件
3)onmouseover 和 onmouseout 事件
4)onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及onclick構(gòu)成了鼠標(biāo)點(diǎn)擊事件的所有部分。首先當(dāng)點(diǎn)擊鼠標(biāo)按鈕時(shí),會(huì)觸發(fā) onmousedown事件,當(dāng)釋放鼠標(biāo)按鈕時(shí),會(huì)觸發(fā) onmouseup事件,最后,當(dāng)完成鼠標(biāo)點(diǎn)擊時(shí),會(huì)觸發(fā) onclick 事件。
32.HTML DOM EventListener
當(dāng)用戶點(diǎn)擊按鈕時(shí)觸發(fā)監(jiān)聽(tīng)事件:
document.getElementById("myBtn").addEventListener("click", displayDate);
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不會(huì)覆蓋已存在的事件句柄。
你可以向一個(gè)元素添加多個(gè)事件句柄。
你可以向同個(gè)元素添加多個(gè)同類(lèi)型的事件句柄,如:兩個(gè) "click" 事件。
你可以向任何DOM 對(duì)象添加事件監(jiān)聽(tīng),不僅僅是HTML 元素。如: window對(duì)象。
當(dāng)你使用 addEventListener() 方法時(shí),JavaScript從 HTML 標(biāo)記中分離開(kāi)來(lái),可讀性更強(qiáng), 在沒(méi)有控制HTML標(biāo)記時(shí)也可以添加事件監(jiān)聽(tīng)。
可以使用 removeEventListener()方法來(lái)移除事件的監(jiān)聽(tīng)。
1)語(yǔ)法:
element.addEventListener(event, function, useCapture);
第一個(gè)參數(shù)是事件的類(lèi)型 (如 "click" 或"mousedown").
第二個(gè)參數(shù)是事件觸發(fā)后調(diào)用的函數(shù)。
第三個(gè)參數(shù)是個(gè)布爾值用于描述事件是冒泡還是捕獲。該參數(shù)是可選的。
*注意:不要使用 "on"前綴。 例如,使用"click",而不是使用 "onclick"。
2)事件冒泡或事件捕獲?
事件傳遞有兩種方式:冒泡與捕獲。
事件傳遞定義了元素事件觸發(fā)的順序。 如果你將 <p>元素插入到 <div> 元素中,用戶點(diǎn)擊 <p>元素, 哪個(gè)元素的 "click" 事件先被觸發(fā)呢?
在 冒泡中,內(nèi)部元素的事件會(huì)先被觸發(fā),然后再觸發(fā)外部元素,即: <p> 元素的點(diǎn)擊事件先觸發(fā),然后會(huì)觸發(fā) <div> 元素的點(diǎn)擊事件。
在 捕獲 中,外部元素的事件會(huì)先被觸發(fā),然后才會(huì)觸發(fā)內(nèi)部元素的事件,即: <div> 元素的點(diǎn)擊事件先觸發(fā) ,然后再觸發(fā) <p>元素的點(diǎn)擊事件。
默認(rèn)值為false, 即冒泡傳遞,當(dāng)值為 true時(shí), 事件使用捕獲傳遞。
捕獲傳遞:
document.getElementById("myDiv").addEventListener("click", myFunction, true);
3)瀏覽器支持
var x = document.getElementById("myBtn");
if (x.addEventListener) { // 所有主流瀏覽器,除了 IE 8 及更早版本
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早版本
x.attachEvent("onclick", myFunction);
}
33.HTML DOM 元素(節(jié)點(diǎn))
1)給自己增加子節(jié)點(diǎn),刪除子節(jié)點(diǎn)
appendChild()
removeChild()
eg:
var child=document.getElementById("p1");
child.parentNode.removeChild(child);