javascript基礎(chǔ)07

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)法
jsonjavascript 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中的breakcontinue

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。

JavaScriptnull表示 "什么都沒(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 3ES3,JavaScript的第三版,從 1999年開(kāi)始)。

ECMAScript 4(ES4)未通過(guò)。

ECMAScript 5ES52009年發(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)這樣的代碼,那么在JavaScriptjavascript:void(0)代表的是什么意思呢?

javascript:void(0)中最關(guān)鍵的是void關(guān)鍵字, voidJavaScript中非常重要的關(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)用

  1. 參數(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 
  1. 改變 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)onloadonunload事件

作用:
onloadonunload事件會(huì)在用戶進(jìn)入或離開(kāi)頁(yè)面時(shí)被觸發(fā)

onload 事件可用于檢測(cè)訪問(wèn)者的瀏覽器類(lèi)型瀏覽器版本,并基于這些信息來(lái)加載網(wǎng)頁(yè)的正確版本。

onloadonunload事件可用于處理 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í),JavaScriptHTML 標(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);
最后編輯于
?著作權(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)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

  • 第5章 引用類(lèi)型(返回首頁(yè)) 本章內(nèi)容 使用對(duì)象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類(lèi)型 使用基本類(lèi)型...
    大學(xué)一百閱讀 3,663評(píng)論 0 4
  • ??引用類(lèi)型的值(對(duì)象)是引用類(lèi)型的一個(gè)實(shí)例。 ??在 ECMAscript 中,引用類(lèi)型是一種數(shù)據(jù)結(jié)構(gòu),用于將數(shù)...
    霜天曉閱讀 1,208評(píng)論 0 1
  • 感賞兒子今天安排了學(xué)習(xí)。 感賞兒子對(duì)我說(shuō)的話,兒子說(shuō),你每天都不高興,出門(mén)也不高興,回來(lái)也不高興,我難過(guò)時(shí)需要你安...
    玲03閱讀 249評(píng)論 0 1
  • 1《愛(ài)情模樣》 干柴烈火情奔放, 水煮生米愛(ài)瘋狂。 柴盡火滅化作灰, 水濁飯稀泡成湯。 2《結(jié)婚模樣》 有車(chē)有房都...
    松風(fēng)入骨閱讀 809評(píng)論 41 45
  • 你是飛雪留給冬天的信箋 是寒風(fēng)留給春花的懸念 你是漂洋過(guò)海的白鴿堅(jiān)持的信念 是追尋時(shí)間的使者不停歇 你是夏夜的磅礴...
    酒夢(mèng)閱讀 1,014評(píng)論 44 48

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