《javascript征途》學習筆記

時間 2019-12-01

原文原文鏈接

基礎
一、只有函數有做用域
二、若是在<script src>的src 中設置了src特性，則script元素包含的任意代碼就無效了。應該分開放到不一樣的script塊中。
三、外部js腳本文件和頁面內嵌的js代碼的執行順序是按它們在文檔中的位置決定的，而不是先執行內嵌腳本，後執行外部腳本文件。
四、建議經過外部文件形式導入js文件。
五、使用接口技術解決js文件函數重名的衝突。問題是若是封裝的接口也衝突了怎麼辦？定義接口的對象名也不可以相同，不然也會衝突。P46 這個例子沒運行起來。
六、 Js爲css設置樣式，是以html文件爲參考的，而不用考慮js文件的具體位置，而css文件是以它自己位置爲參考的。
七、瀏覽器是從上到下解析網頁源碼的。
八、接口的概念？
九、使用變量以前必須先聲明。儘可能少使用全局變量。
十、怎麼區分構造函數、類和通常的函數？在命名時構造函數和類名建議首字母大寫，而函數小寫開頭
十一、使用alert和confirm進行手動調試

第四章數據類型和變量
一、實詞和虛詞。實詞指標識符、關鍵字保留字、直接量等。虛詞指空白符、換行符、註釋等無心義的字符。實詞是區分大小寫的。
二、 Js只有三種數據類型：數值型（不區分浮點和整數，都是浮點型）、字符串型和數組型。null、undefined，number，string,Boolean是五種原始數據類型。
object
function是對象。是object的特殊狀況。
棧存儲值類型，堆存儲引用類型。
三、 alert(Boolean(1));//返回的是true。書上返回的是13。有誤
alert((a = 1,2,3,4));//4
alert(a=(1,2,3,4));//4
alert(Boolean(1));//true
a = 1,2,3,4;
alert(a);//1
   var a = 1,2,3,4;
alert(a);//null
四、 JS僅支持定義一維數組。不支持多維數組。可是能夠模擬多維數組。可是性能很差。
Var a = [[1,2,3],[4,5,6]];。數組能夠放入不一樣的任意類型的數據，包括function和表達式。
五、函數在js中是第一種類型（基類，父類），其餘類型繼承於function。Object也是由Function來實現的。這點很NB啊。
六、函數若是沒有返回值，責約定返回值是undefined。
七、函數是一個獨立的做用域，只能經過函數返回值讀取函數內部的數據。而構造函數是能夠經過this.屬性，獲取函數內部的屬性值。構造函數是定義對象的模板，就是類。
八、函數解析的機制：js解釋器在預編譯時就會把全部function語句聲明的函數處理，若是存在同名函數，則後面的函數體會覆蓋前面的函數體。而js解釋器只是對var語句聲明的變量名進行索引，變量的初始化值卻被忽略，直到執行期纔去爲變量讀取初始值。而對於function聲明的函數體，js解釋器不只對函數盟按變量標識符進行索引，並且對於函數體也提早處理。
第一：JavaScript時按<script></script>編譯,並執行的。
第二：JavaScript編譯時完成對變量的聲明，及函數處理。
第三：JavaScript後聲明的函數將會覆蓋前聲明的函數
九、處於同一個文檔中的js教本，都屬於同一個做用域：window。能夠互相通訊和調用。
十、 Constructor屬性。表示構造函數的屬性值，用來檢測數據類型。(10).constructor。返回number。
Js習慣：先聲明後讀寫，先賦值後運算。
變量的做用域:
一、局部變量都比全局變量的優先權高
二、內部局部變量比外層局部變量優先權高
三、變量都是對象的屬性。全局變量是window對象的屬性。
第五章
Delete
若是刪除內部對象的預約義成員和客戶端對象成員，使用var語句申明的變量也是不容許刪除的。
能夠刪除不存在的變量，返回true。
Delete操做是完全刪除所佔用的存儲空間。

Void運算符的優先級、void的運算結果返回undefined。

第七章
函數的做用域。
function和Function構造函數的做用域是不一樣的。Funtion有頂級做用域。而function是局部的。

函數的解析機制
Js解釋器是一段段分析和執行程序的。在同一段代碼中，function語句和函數直接量定義的函數結構總會被提取出來執行。只有當函數被解析和執行完畢以後，纔會按順序執行其它代碼。可是Function構造函數定義的函數並不是提早運行，而是在運行時動態地被執行。

函數的接收值個數沒有限制。函數的返回值只能有一個。若要返回多個數據，則用數組存儲。

函數的生命週期：
使用function語句聲明的函數被預先編譯，此時若是存在相同的函數名，則會按順序覆蓋。而函數直接量和構造函數定義的函數都屬於表達式函數，所以在代碼按行執行時，才被激活生命週期。

函數的形參經過length屬性來獲取。

Arguments對象。參數管理器
Arguments.length表示實參的個數。Arguments不是array對象，而是object對象，不能用for/in結構遍歷。

能夠經過arguments[i]下標動態改變實參的值。也能夠經過修改length動態增大或減少實參的個數。

Arguments.Callee能夠返回當前arugments對象所屬的函數的引用，等價於函數名。Arguments.Callee.length表示函數形參的個數。

This關鍵字
Undefined+undefined=NaN。多個undefined相加會返回NaN。
函數做用域和實例化函數this的做用域是不一樣的。實例化只值向當前函數的做用域，而函數調用對象的做用域則是window。

函數屬性的做用域：
函數體外定於的屬性能夠任意的訪問，能夠在函數體內或外部訪問，而函數內部定義的屬性在初始化狀態只能在函數體內部被調用。但若函數被調用後，則能夠在外部訪問函數內部定義的屬性。若屬性是函數，做用域也是同樣的。

Call和apply。Apply傳遞的是數組。
一、 Call和apply將函數轉換成方法傳遞給某個對象，只是臨時的，函數最終沒有做爲對象的方法存在，當函數被調用後，該對象方法會自動被註銷。
二、 Call和apply避免了資源浪費。

閉包:數據存儲的一種方式。在動態環境中，數據實時變化，爲了不前面的數據丟失，js提供了閉包來寄存動態數據。
特性：
自閉特性。外界沒法訪問閉包結構內部的數據。
包裹特性。

第八章
定義抽象對象的方法是經過構造函數來實現的。
Push()會添加新元素後返回數組長度。
建立對象時，存儲在變量中的只是引用指針，並非對象自己。刪除變量後，對象自己依然存在。
Js的垃圾回收機制，自動收集無用存儲單元，不須要專門銷燬無用對象以釋放內存。當對象沒有被任何變量引用時，js會自動偵測並把全部廢除的對象註銷。
當咱們把對象的全部引用變量都設置爲null時，能夠強制對象處於廢除狀態。並被回收。

當刪除對象屬性後，不是將屬性設爲undefined，而是真正從內存清除掉。

對象的做用域：
Js僅支持一種做用域，即公共做用域。對於js全部對象的全部屬性和方法來講都是公開的。
Js對象的結構封閉性不如函數結構。函數有本身的私有做用域。外界是沒法訪問的。

經過命名規則以區分私有做用域。O.x._a_=1;

靜態對象：static 聲明。Math和Global都是靜態對象。
Js不支持靜態做用域。

構造對象：就是構造函數。如Object、Date、Function。構造對象的首字母要大寫。
構造對象不能直接被引用。必須使用new來實例化。
alert(Point.name); //直接讀取構造對象的屬性
alert(p1.name); //可是不可以經過實例對象來讀取構造對象的屬性返回 undefined。這個name是構造對象在函數外定義的。若是是在函數內定義的則能夠訪問。
對於構造對象的屬性，實例對象是不能繼承的，所以也不可以經過實例對象來讀取構造對象的屬性，反過來，構造對象也不能讀取實例對象的屬性。
構造對象不能使用this關鍵字來讀去實例對象的屬性。
function Point(x,y){
    this.x = x;
    this.y = y;
this.z = z;
}
Point.name = "類屬性";
Point.money = "1203";
Point.saying = function(){
    alert(this.length); //返回值2
}
Point.saying();
var p = new Point();
alert(p.name);// 實例對象不能訪問構造對象的屬性。拋錯。

function Point(x){
    this.x = x;
}
Point.saying = function(){ //構造對象的方法
    alert("類方法");
}
Point.saying(); //直接調用構造對象的方法

Point.saying = function(){
    alert(this.x);//不能經過this訪問實例對象的屬性
}
Point.saying(); //直接調用構造對象的方法返回undefined

實例對象
實例對象的屬性有兩種：
     第一種：從構造對象中繼承過來的，這種屬性每個實力屬性都有，可是他們擁有不一樣的副本。
第二種：本身建立的，這種屬性只有這個實例對象所獨有。

原型對象
就是構造函數的實例對象。它所包含的全部屬性和方法可以供構造函數的全部實例共享。（類繼承的實現），js叫原型繼承。
原型對象時在使用構造函數建立對象是同時實例化的一個對象，全部的對象都共同擁有這個對象的引用。
一般咱們在原型對象裏面定義實例對象公用的方法，這樣的好處是：
     第一：全部的對象都共有這樣一個方法實例，大大的節省的內存。
第二：當咱們想修改對象的方法是，只用修改原型對象的方法既能夠了，不用再麻煩的修改每個實例的方法。
若是原型屬性和實例對象自定義的屬性發生了命名衝突，則自定義的屬性會「覆蓋」原型屬性的內容。這時由他的工做機制所決定的，但並非真正的覆蓋。若是咱們刪除這個屬性，也是刪除的實例的屬性。
當js解釋器在檢索屬性時，會先檢查對象實例是否認義該屬性，沒有，則會檢查構造函數的原型對象是否具備這個屬性。屬性的繼承只發生在讀屬性值時，而在寫屬性時不會發生。

構造器
構造器是在Object類中定義的屬性，該屬性始終指向對象的構造函數。

對象的構造器屬性是經過原型對象繼承的，若是咱們刪除掉對象的原型，就能夠看到他會自動查找到上一層的構造器屬性。最終是要指向Ojbect的。

對於js內置對象來講，因爲它們的原型是隻讀的，用戶沒法修改，因此可使用constructor屬性來判斷內置對象的數據類型。

ToString ()、valueOf()方法。
hasOwnProperty 用來檢測一個對象的屬性是繼承屬性，仍是私有屬性。可是注意：若是是一個對象的繼承屬性則會返回false，可是對於這個對象的原型對象來講則會返回true
isPrototypeOf：判斷一個對象的原形對象。函數的原型對象能夠是Object.prototype，或者Function.prototype。

Global對象。是抽象類。JavaScript規定全部的對象和函數都不能獨立存在，換句話說，全部的函數都必須是某個對象的方法，全部的對象都必須是某個類的子類。

這就是全局對象，雖然是全局對象，可是global卻沒有方法調用全局的變量和方法。這些方法卻能夠本身直接執行。

因此global有點像名譽zhuxi。沒有實際的操控權利。
Date對象：
//獲取本地系統的當前時間。
var now = new Date();
alert(now); //返回當前時間對象，如"Wed Apr 29 15 :37: 55 UTC +0800 2009 "

//經過多選參數來建立指定的時間對象。此時，構造函數Date()的參數格式以下：
new Date(year, month, day, hours, minutes, seconds, ms)

//除了前兩個參數外（年和月）外，其餘全部參數都是可選的，其中月數參數從0開始，如0表示第1個月，11表示第12個月。
var d1 = new Date(2009,4,1);
alert(d1); //返回時間對象，如"Fri May 1 00: 00:00 UTC+ 0800 2009"
var d2 = new Date(2009,4,1,5,30,30);
alert(d2); //返回時間對象，如"Fri May 1 00: 00:00 UTC+ 0800 2009"

//經過一個時間格式的字符串來建立指定的時間對象。此時，月份是從1開始，而不是從0開始。
var d1 = new Date("2009/4/1 5:30:30");
alert(d1); //返回時間對象，如"Wed Apr 1 05 :30: 30 UTC +0800 2009"

//經過傳遞一個毫秒數來建立指定的時間對象。這個毫秒數是距離1970年1月1日午夜(GMT時間)的毫秒數。
var d1 = new Date(1000000000000);
alert(d1); //返回時間對象，如"Sun Sep 9 09 :46 :40 UTC +0800 2001"

第九章數組
數組的定義有兩種方法：
1.使用new關鍵字，傳入參數。
2.使用數組直接量，在中括號中添加元素。
建議使用第二種方法由於效率高一些。
Js的數組的長度能夠任意伸縮，能夠存儲任意類型的數據內容。數組的下標能夠不連續。Js在初始化數組時，只有真正存儲在數組中的元素纔可以被分配到內存中。
數組中的元素能夠自由定義，例如若是隻定義1和100則在內存中實際額只存在這兩個元素。
因此在JavaScript中數組是否按順序並非那麼重要。
Array.length返回的不是數組存儲值的實際個數，而是當前數組的最大元素的個數。
數組和對象的一個區別就是：數組使用的是下標和具體的值相關聯，而對象中則使用的是特定的字符串。
交換兩個變量
var a = 10, b = 20; //變量初始化
//var temp = a; //定義臨時變量存儲a
//a = b; //把b的值賦值給a
//b = temp; //把臨時變量的值賦值給b
a = [b, b = a ][0]; //經過數組快速交換數據
定義數組的基本方法：
   第一步：定義函數名，經過一個或表達式首先判斷若是存在則直接使用若是不存在則定義。
   第二步：將第一的函數名付給Object，
Array.prototype._sum = Array.prototype.sum || //檢測是否存在同名方法
( Array.prototype.sum = function(){ //定義該方法
    var _n = 0; //臨時彙總變量
    for(var i in this){ //遍歷當前數組對象
        if( this[i] = parseFloat( this[i] ) ) _n += this[i]; //若是數組元素是數字，則進行累加
    };
    return _n; //返回累加的和
});
Object.prototype.sum = Array.prototype._sum //把數組臨時原型方法賦值給對象的原型方法sum()

var a = [1, 2, 3, 4, 5, 6, 7, 8, "9"]; //定義數組直接量
alert( a.sum() ); //返回45

第十章字符串
Js解釋器採用了引用的方法實現對字符串的操做。字符串數據被存儲到堆，而後把字符串的引用地址存儲在字符串變量中。同時爲了不錯誤操做，js解釋器強制約定字符串在堆存儲的數據是不可變的。至關於設置字符串在堆區存儲的數據是隻讀的。
js對字符串的複製，傳遞操做，僅是簡單的採用引用的方法，操做對象爲堆區字符串的地址，即複製和傳遞地址。可是一旦編輯字符串自己的值，則js就會把堆區的字符串讀取到棧區進行獨立操做。
字符串的比較是逐字節比較的。先把兩個變量的字符串讀取到棧區，而後逐字節比較，最後返回比較結果。
字符串的操做是結合了值操做和引用操做的。當申明一個字符串時會把它的真實值存放在堆區，而且設定了堆區的內容是不可改變的，而在棧去存放堆區的地址。因此當進行復制和傳遞操做時只是進行了地址的傳遞，可是一旦要對字符串進行修改時則會複製一份放到棧區。實際是對棧區的內容進行改變，因此操做以後咱們須要將這個值再次賦給引用，不然它會只是存放在棧區裏，等待垃圾回收。
對於字符串類型的語句或表達式，可使用靜態方法eval()來執行。
var s = "alert('love')";
eval(s);
var s = new String(); //建立一個空字符串對象，並賦值給變量s.object類型。
var s = String( 123456 ); //包裝字符串。String類型。
var s = String( 1, 2, 3, 4, 5, 6 ); //帶有多個參數，只處理第一個參數並把它轉換爲字符串返回。
fromCharCode能夠包含n個參數，參數表明字符的unicode編碼。返回對應編碼的字符的新字符串。
var a = [35835, 32773, 24744, 22909], b = [];//聲明一個字符編碼的數組
for( var i in a ){ //遍歷數組
    b.push( String.fromCharCode( a[i] ) ); //把每一個字符編碼都轉換爲字符串
}
alert( b ); //返回字符串"讀,者,您,好"
alert( b.join( "" ) ); //返回字符串"讀者您好"

第12章 BOM
BOM：瀏覽器對象模型。Browser Object Model
Bom對象包括：window,navigator,screen,history,location,document.
Window表明根節點，其它對象是window的屬性。它是全局做用域
Window對象定義的3我的機交互方法：alert，confirm，prompt。

var url = "http://www.css8.cn/";
var features = "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no";
document.write('<a href="http://www.baidu.com/" target="newW" >切換到百度首頁</a>');
var me = window.open (url, "newW", features);
setTimeout(function(){
    me.close();
},30000);

使用write 方法時會覆蓋掉前一個的內容。
Location.search 捕獲url查詢字符串信息。
第十三章 DOM
window.onload = function(){
var tag = document.getElementsByTagName("ul")[0];
var a = tag.childNodes;//獲取列表結果所包含的全部列表節點
alert(a[0].nodeName);//顯示第一個列表項的節點名稱
node.childNodes[0] = node.firstChild
    node.childNodes[node.childNodes.length-1] = node.lastChild
}
</script>
<ul>
    <li>D表示文檔，DOM的物質基礎</li>
    <li>O表示對象，DOM的思想基礎</li>
    <li>M表示模型，DOM的方法基礎</li>
</ul>

DOM把元素之間的空格也當成文本節點。這在XML中是同樣的。XML解析也是如此。
NodeType=1表示的是元素節點。
innerHTML返回元素包含的html信息內容。

第十四章事件驅動模型
我的認爲相似於as的事件機制。有父子元素冒泡和捕獲的概念。
document.write('<script type="text/javascript">'); 寫的js命令，必須放在<script></script>中。
4種事件處理模型：
一、0級基本事件模型
二、標準事件模型
三、IE事件模型
四、Nerscape4事件模型

JS不支持多線程。支持異步回調。相似於as的回調函數。一旦異步執行完，根據執行返回條件執行對應的回調函數。

Js的事件流機制：捕獲型和冒泡型。三個階段：捕獲階段、目標階段、冒泡階段。
從IE6開始，html元素能夠接受事件流。而這以前的版本是不行的。MOZILLA支持window對象。
<script language="javascript" type="text/javascript">
function f(a){
    alert(a);//p點擊時，FIREFOX的順序是P，HTML，BODY。IE的順序是P，BODY，HTML。
}
</script>
<html onclick="f('HTML')">
<body onclick="f('BODY')" bgcolor="#333333">
    <p onClick="f('P')">冒泡型事件</p>
</body>
</html>

DOM2.0支持冒泡型事件流和捕獲型事件流。可是規定捕獲型事件流先進行響應。默認狀況下，事件採用冒泡事件流，不採用捕獲事件流。在firefox能夠顯示設置是否使用捕獲型事件流。

通常來講事件處理函數都會有返回值，若是咱們設置返回值爲false就能夠禁止它的默認行爲。例如阻止超連接，阻止表單提交數據。

Event.srcElement。表示當前事件的源。利用該屬性能夠捕獲當前對象。可是DOM2不支持該屬性。在firefox瀏覽器要使用event.target。

alert(event.srcElement);//firefox:undefined,IE: object.firefox和 DOM2不支持srcElement屬性

<button id="btn">按    鈕</button>
<script language="javascript" type="text/javascript">
document.getElementById("btn").onclick = function(event){
    event = event || window.event; //兼容FF和IE瀏覽器的event參數模式
    var src = event.srcElement || event.target; //捕獲當前事件的對象句柄
    alert(src.innerHTML); //顯示當前對象所包含的HTML文本信息
}
</script>

This對象
一般狀況下this等於事件源對象。

<button id="btn" onClick="this.style.background='red';">按    鈕</button>
<script language="javascript" type="text/javascript">
function btn1(){
    this.style.background = "red"; //並不是指向當前事件的目標對象.this指向window對象.
}
function btn2(event){
    event = event || window.event;
    var src = event.srcElement ? event.srcElement : event.target;
    src.style.background = "red"; //指向當前事件的目標對象
}
</script>
<button onClick="btn1();">按鈕 1</button>
<button onClick="btn2(event);">按鈕 2</button>

再看個例子
<button id="btn1">按鈕 1</button>
<button id="btn2">按鈕 2</button>
<script language="javascript" type="text/javascript">
var b1 = document.getElementsByTagName("button")[0];
var b2 = document.getElementsByTagName("button")[1];
b1.f = function(){
    this.style.background = "red"; //並不是指向按鈕1 按鈕1 點擊指向的是window,按鈕2點擊指向的是btn2.
}
b2.onclick = b1.f;
</script>

b2.onclick = function(){
    b1.f(); //指向按鈕1
}

這是由於函數的做用域形成的。
Js的函數老是運行在詞法做用域中，即函數老是在定義它們的做用域中運行，而不在調用它們的做用域中運行。

元素的事件處理函數的做用域是獨立的做用域，與局部做用域不一樣。
Js在引用變量值時，會根據做用域從內到外，從下到上檢索，做用域頂部是window對象。可是對於html元素的屬性的事件處理函數，它的做用域頂部是元素目標調用對象。

addEventListener()和removeEventListener()。在事件處理函數內部，this老是指向當前元素。
IE 7不支持DOM的addEventListener方法。

<p id="p">IE事件註冊</p>
<script language="javascript" type="text/javascript">
/*
註銷函數是不可以使用匿名函數，應爲這樣沒法真正的刪除這個綁定的函數。Firefox會把綁定和註銷的兩個結構相同的匿名函數視爲不一樣函數。
*/
var p = document.getElementById("p");
p.attachEvent("onclick", f);
p.detachEvent("onclick", f);
function f(){
    alert("p");
}
</script>
addEventListener()和removeEventListener()的第三個參數是否捕獲，必須一致。

var event = event || window.event; //標準化事件對象若是存在event則使用event，不存在則使用window.event

loading事件機制
<body onLoad="f1()">
<script language="javascript" type="text/javascript">
window.onload = f2;
function f1(){
    alert('<body onload="f1()">');
}
function f2(){
    alert('window.onload = f2;');
}
</script>
若是同時使用兩種方式定義load事件類型,會使用window對象註冊的事件處理函數覆蓋掉body元素定義的頁面初始化事件屬性。

window.onload = f1;
window.onload = f2;
以上寫法f1會被f2覆蓋掉。
window.addEventListener("load",f1,false); //爲load添加事件處理函數
window.addEventListener("load",f2,false); //爲load添加事件處理函數
這些寫法就不會覆蓋。兩個監聽都會執行。

DOMContentLoaded事件類型。
Load事件須要等到全部圖像所有載入完成以後纔會被觸發。而DOMContentLoaded事件會在頁面結構加載完畢後就能執行。先於load事件。IE7 不支持。

Onunload 和Beforeunload事件類型。關閉窗口以前的事件處理函數。

第十五章樣式
IE不支持DOM定義的style方法。
DOM的style定義方法
var box = document.getElementById("box");
box.style.setProperty("width","400px","");//第三個參數 priority表示是否爲屬性設置！important優先級命令。
IE的style定義方法
Box.style.width = 「400px」;

看下面的例子：
<style type="text/css">
#box {
    width:100px;
    height:100px;

    border:solid 50px blue;
}
</style>
<div id="box"></div>
<script language="javascript" type="text/javascript">
var box = document.getElementById("box");
alert(box.style.border);//返回空值。使用style樣式沒法訪問樣式表中的樣式屬性。css樣式信息並不是存儲在 style屬性中，而是存儲在css 類中。
</script>
和
<div id="box" style="width:100px; height:100px; border:solid 50px blue;"></div>
<script language="javascript" type="text/javascript">
var box = document.getElementById("box");
alert(box.getAttribute("style"));
</script>

要訪問css類。可使用document.styleSheet集合來實現。該集合包包含了文檔中全部樣式表的引用。如style 的link和import的外部樣式表。和定義在本文檔中的style樣式。

DOM提供了cssRules集合，用來包含指定樣式表中全部的樣式。IE不支持。
<script language="javascript" type="text/javascript">
var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;//判斷瀏覽器的類型，是否支持cssRules。
alert(cssRules[0].style.border); //調用cssRules集合中的border屬性
</script>

CssRules或rules集合的style對象在調用css屬性時，使用的是js樣式屬性，不可以使用連字符，如cssRules[0].style.backgroundColor 不行，而必須使用cssRules[0].style.background-Color

若是同時存在css外部樣式表，又存在定義在文檔中的樣式屬性。按照它們的位置排列styleSheets數組的索引位置。
<link href="out.css" rel="stylesheet" type="text/css" media="all" />//styleSheets[0]
//styleSheets[1]
<style type="text/css">
#box { color:green; }
.red { color:red; }
.blue { color:blue; }
</style>

每一個css規則都包含有selectorText屬性，獲取指定樣式的選擇符。在IE中大寫顯示，Firefox小寫顯示。
alert(cssRules[2].selectorText);
alert(cssRules[2].style.color);

動態添加樣式insertRule和addRule
IE中支持addRule。FireFox支持insertRule
if(styleSheets.insertRule){ //判斷瀏覽器是否支持insertRule()方法
//使用insertRule()方法在文檔內部樣式表中增長一個p標籤選擇符的樣式，設置段落背景色爲紅色，字體顏色爲白色，補白爲一個字體大小。插入位置在樣式表的末尾，
   styleSheets.insertRule("p{color:#fff;padding:1em;}", index);
}else{ //若是哦瀏覽器不支持insertRule()方法
   styleSheets.addRule("P", "color:#fff;padding:1em;", index);
}

addRule的Index表示樣式插入的位置。默認是-1，表示在樣式表末尾。
insertRule的Index表示樣式插入的位置。默認是0，表示在樣式表末尾。必須設置。

訪問最終樣式
IE: currentStyle對象，包含了全部元素的style對象定義的屬性和任何未被覆蓋的css規則的style屬性。只有IE 支持。
alert("背景色："+p.currentStyle.backgroundColor+"\n字體顏色："+p.currentStyle.color);

DOM提供了getComputedStyle()方法。該方法須要在document.defaultView對象中訪問。
var p = document.getElementsByTagName("p")[0];

alert("背景色："+document.defaultView.getComputedStyle(p,null).backgroundColor+"\n字體顏色："+document.defaultView.getComputedStyle(p,null).color);

offsetWidth表示元素在頁面中的總寬度。
offsetHeight表示元素在頁面中的總高度。
可是當爲元素或者它的父元素定義了display:none，則offsetWidth和 offsetHeight都爲0。

不一樣瀏覽器下獲取style
function getStyle(e, n)
{
    if(e.style[n])
    {
        return e.style[n];
    }
    else if(e.currentStyle)
    {
        return e.currentStyle[n];
    }
    else if(document.defaultView && document.defaultView.getComputedStyle)
    {
        n = n.replace(/([A-Z])/g, "-$1");
        n = n.toLowerCase();
        var s = document.defaultView.getComputedStyle(e, null);
        if(s) return s.getPropertyValue(n);
    }
    else
    return null;
}

顯示和隱藏元素
css支持兩種:visibility和display。
Visibility：會保持元素在文檔流中的影響力，隱藏後元素的位置保持不變。屬性包括visible和hidden。
Display：爲none時，文檔的結構會發生變化。被隱藏的元素及其子元素就被刪除了。該元素再也不佔據文檔位置。後面的元素會上移佔據被刪除的元素的位置。

透明度：e.style.opacity = n / 100;

動畫：
var out = setInterval(f, 1000); //定義週期性執行的函數.
clearTimeout(out); //則清除週期性調用函數
setTimeout();//只能被執行一次。若是要循環執行，採用如下嵌套的方式。

var t = document.getElementsByTagName("input")[0];
var i = 1;
function f(){
    var out = setTimeout( //定義延遲執行的方法
    function(){ //延遲執行函數
        t.value = i ++ ; //遞加數字
        f(); //調用包含setTimeout()方法的函數
    }, 1000); //設置每秒執行一次調用
    if(i > 10){ //若是超過10次，則清除執行，並彈出提示信息
        clearTimeout(out);
        alert("10秒鐘已到");
    }
}
f(); //調用函數

第十六章 COOKIE
 有效期 expires屬性
 可見性 path domain屬性
 安全性 secure屬性
以上都是cookie屬性，而不是js屬性。
Name：惟一的。不區分大小寫。
Value:cookie信息。不超過4KB
Domain:
Path: 有效訪問路徑。Path=/。表示cookie信息將會與服務器根目錄下全部網頁相關聯
Expires:失效日期
Secure：boolean。True表示安全方式傳遞。

Cookie字符串是一對名值對。

Cookie的封裝：

function cookie(name, value, options)
{
    if (typeof value != 'undefined')
    {
        options = options ||
        {
        }
        ;
        if (value === null)
        {
            value = '';
            options.expires = - 1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString))
        {
            var date;
            if (typeof options.expires == 'number')
            {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            }
            else
            {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString();
        }
        var path = options.path ? '; path=' + options.path : '';
        var domain = options.domain ? '; domain=' + options.domain : '';
        var secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    }
    else
    {
        var cookieValue = null;
        if (document.cookie && document.cookie != '')
        {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i ++ )
            {
                var cookie = (cookies[i] || "").replace( /^\s+|\s+$/g, "" );
                if (cookie.substring(0, name.length + 1) == (name + '='))
                {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
}

第十七章 xml和json
XML ：區分元素節點和文本節點。屬性節點。

推薦使用JSON。
Json的數據結構基於對象和數組來構建。
對象：名值對。{「string1」:」value1」, 「string2」:」value2」}
數組：

第十八章AJAX
注意：客戶端和服務器端的編碼要一致。
JSON 異步通訊協議 XMLHttpRequest 是 ajax異步交互的核心插件。和frame只能在同域中通訊。
JSONP : JSON with Padding。可以經過在當前文檔中生成腳本標記（script），來調用垮域腳本時使用的約定。
JSONP格式的數據就是把JSON數據做爲參數傳遞給callback並傳回。

ActiveXObject
XMLHRttpRequest。
encodeURIComponent() 函數可把字符串做爲 URI 組件進行編碼。

第十九章 OOP
Object，Function，Array，是內置的類。可是並不該該稱爲構造函數。咱們在實例化的時候，會實例類的構造函數，可是類並不等於構造函數。

構造函數沒有返回值，可是在js中構造函書能夠返回一個對象值。構造函書內部並無創造對象，而是使用this代替。This是新建立對象的引用指針。

原型模式
當在構造函書中定義prototype屬性後，任何實例化的對象都擁有prototype屬性所定義的屬性。而實例化的對象不能經過prototype屬性定義原型。
Js的內置對象都是構造函數結構體，所以都擁有prototype屬性。

Prototype屬性也是一個引用對象的指針，它值向一個隱形的對象，該對象存儲着構造函書全部的原型屬性。至關於基因庫。一旦某個對象的屬性被改動，則全部其餘實例對象的屬性也會變化。

構造函數屬性和原型屬性混合模式是ECMAScript的推薦標準。
function Book(title,pages){
    this.title = title;
    this.pages = pages;
    Book.prototype.what = function(){
        alert(this.title +this.pages);
    };
}

動態原型模式
function Book(title,pages){
    this.title = title;
    this.pages = pages;
    if(typeof Book.isLock == "undefined"){
        Book.prototype.what = function(){
            alert(this.title +this.pages);
        };
        Book.isLock = true;
    }
}

修改原型屬性，全部實例的原型值都會發生改變。
這章太複雜拉。能夠單獨寫一本書出來了。

第20章
函數是第一型。表示。 javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。