Javascript的基礎知識

在全局做用域中定義的變量或者在局部做用域中沒有經過var聲明的變量，咱們都稱之爲全局變量。【以函數爲界進行定義】

1.變量的類型:

String:字符類型

Number：數字類型

Boolean:布爾類型

Undefined：未定義類型（一個變量有聲明但未賦值）

Null:空類型

Object：對象類型

流程結構：

順序結構、分支結構（if…else…/switch）、循環結構(for/while/do…while)

一、  函數

函數的做用：

代碼重用、模塊化編程【高內聚，低耦合】

將函數賦值給一個變量其實是將函數在棧區中的地址賦值給變量了

Function display(){}           // 函數的定義，在代碼段開闢一段連續的內存空間

Display:                                         // 函數的名稱，指向函數在內存中的首地址

Display():          // 函數的調用，是在內存中找到函數的首地址並執行連續的內存空間

函數在定義時不管有名仍是無名，在定義的時候都會返回函數在內存中的首地址---匿名函數

Arguments屬性

Arguments 是函數的參數數組列表，使用arguments 的時候無須指明函數的參數列表，在函數調用的時候能夠任意的填充，arguments是一個特殊的對象，功能和數組相似，但並非一個數組

三、做用域鏈

做用域：經過函數來進行劃分做用域

全局做用域：定義在函數外邊和在函數中沒有進行聲明的變量

局部做用域：定義在函數的內部的做用域

 

做用域的訪問

全局做用域能夠對全局變量進行訪問，在全局做用域中不能對局部變量進行訪問，在局部做用域中是能夠訪問全局變量的[閉包的緣由]

緣由：做用域的不一樣，當函數執行完畢之後會將內部的變量進行回收

注：做用域只是相對的，能夠在函數的內部定義函數，對該局部變量進行調用，可是在函數內部須要對該函數進行調用,若是沒有被調用則會被釋放,此局部變量相對於函數內部的函數來講就是全局變量，在函數內部是能夠訪問全局變量的

在javascript中函數內部的函數是被包含的關係，在內存中也是這樣存在的，當外部的函數被調用之後，若沒有調用內部的函數，那麼在執行完外部的函數之後，內部的函數將會被釋放，因此在全局做用域中是沒法對內部函數的調用的

在php中函數內部的函數與外部的函數在內存中是並行存放的，不存在誰包含誰，因此在外部是能夠正常的調用的

 

做用域鏈

在函數的內部，若是定義了一個沒有var聲明的變量，那麼系統會自動在當前的做用域尋找var的聲明語句,若是沒有找到那麼會繼續向上一級做用域中取尋找，若沒有找到那麼直至全局做用域，若是找到那麼就使用，沒有找到會本身在全局做用域中聲明該變量，這種鏈式的查詢就稱之爲做用域鏈

 

Script 代碼端的執行流程

①   讀入第一個代碼段

②   編譯[變量聲明、函數聲明、語法檢查、語義檢查、代碼優化、分析獲得代碼樹]

③   執行[變量賦值、函數的調用、代碼的執行]

④   讀入下一個代碼段….

編譯錯誤：變量聲明、函數聲明、語法檢查；

不管是編譯錯誤仍是執行錯誤都只會對當前的代碼段有影響，而不會對下一段代碼產生影響

函數的執行

當函數進入執行階段的時候會產生一個AO對象，一樣有編譯和執行階段

在執行的階段纔會對變量賦值，此時函數內部的變量尚未進行賦值，因此爲undefined

                       

四、數組

【數組的定義】

顯示建立：arr[n1,n2…]   隱式建立：new array(n1,n2…);/new array(size) àarr[]

【數組的遍歷】

For()

For…in…   For(var i in arr){arr[i]}

【數組相關的函數】

添加：

ArrayObject.push(e1,e2…)      在數組元素的尾部追加元素

ArrayObject.unshift(e1,e2)      在數組的尾部追加元素

ArrayObject.splice(index,howmany,e1,e2…)           在數組的之指定位置添加指定個數的的元素

刪除：

ArrayObject.pop()    刪除數組尾部的元素

arrayObject.shift()   刪除數組頭部的元素

arrayObject.splice(index,howmany) 刪除指定位置的指定長隊的元素

合併與截取

ArrayObject.slice(start[,end]) 截取從start到end結束的數組元素

ArrayObject.concat(array1,array2…)      數組的合併

連接操做：

arrayObject.join(separator)    把數組轉化爲字符串

stringObject.split(separator)  把字符串分割成數組元素

【下拉菜單的製做】

// 生成option對象

Var op = new Option(name,value);

// 將op對象添加到options對象集合中

對象.options.add(op);

五、基本事件

1、基本事件

鼠標事件：click/blur/focus/load/mouseOver/mouseOut/mouseMove/mouseUp/mouseDown

鼠標事件的觸發順序爲：移動—懸浮—移動—離開

鍵盤事件：onkeydown/onkeyup

表單事件：onsubmit/onreset

其餘：onchange/onselect

二、 事件綁定的三種形式

行內綁定、動態綁定、事件的監聽

行內綁定：

函數在全局做用域沒有被誰調用的時候，此時的this指向的對象是window對象，當被對象進行調用的時候，此時的this就會指向當前所調用該函數的對象，即誰調用指向誰

 

動態綁定：

動態綁定就是獲取某個對象爲其添加一個事件，故動態綁定中函數內部的this就指向了該對象自己

 

3、事件的監聽：

爲同一個對象綁定多個/同一事件的處理程序，

IE下：

DOM對象.attachEvent(type,callback);

Type:事件類型 onclick

        

W3C下:

DOM對象.addEventListener(事件類型,callback,capture); 

Type:事件類型 click        --不帶on前綴

capture 捕獲模型/冒泡模型

區別：

①語法不一樣：IE使用attachEvent       W3C使用addEventListener

②參數不一樣:  W3c下擁有第三個參數,瀏覽器模型（捕獲與冒泡模型）

③事件類型不一樣：IE具備on前綴,W3C沒有on前綴

④觸發的順序是不一樣的:IE是倒序觸發，W3C是正序觸發

 

4、事件的移除

事件的移除前提是處理程序必須是有名程序，而匿名函數是不能被移除的

IE：

detachEvent(type,callback);

W3C：

RemoveEventListener(type,callbackName);

 

5、事件對象

在javascript代碼中,當事件發生時，系統會將一系列的相關值放入一個event對象中,咱們把這個對象就稱之爲’事件對象’，如鼠標的移動事件發生時，系統會將鼠標的橫縱座標放入事件的對象中

獲取事件對象

IE中：事件對象 = window.event

W3C:  DOM對象.事件 = function(event){//獲取對象的事件event.pageX}

獲取鍵盤的鍵值：keyCode   offsetX/offsetY clientX/clientY  pageX/pageY(獲取鼠標的位置)

ScreenX/screenY 爲鼠標在屏幕上的距離從屏幕的左上角定位

PageX/pageY 從document的左上角開始定位，頁面會很長

clientX/clientY 從瀏覽器的顯示區域的左上角定位，固定不變的點

offsetX/offsetY  IE中是從顯示區域的邊界定位，有border則出現負值，當在點擊觸發某個事件的時候顯示出該鼠標的座標

 

 

 

六、系統類

一、string字符串類

Length：獲取字符串的長度

Indexof(string):返回參數在字符串中的位置

Substr(num1,num2): 截取指定長度的字符串

ToLowerCase(): 返回小寫字符串

ToUpperCase():  返回大寫字符串

Replace(str1,str2): 使用str2替換str1

 

二、  Date 日期和時間類

getYear() ：返回年份（有兼容性問題）

getFullYear() ：返回完全年份

getMonth() ：返回月份（0-11）

getDate() ：返回當月的第幾天（1-31）

getDay() ：返回星期幾（0-6） 0：星期天

getHours() ：返回小時數

getMinutes() ：返回分鐘數

getSeconds() ：返回秒數

getMilliseconds() ：返回毫秒數

getTime() ：返回當前時間的時間戳

new Date()       // 獲取一個時間對象，經過以上的函數來獲取相應的時間，必須在有日期對象的時候才能獲取

 

三、  Math 數學對象

ceil(數值) ：返回大於或等於該數的最小整數

floor(數值) ：返回小於或等於該數的最大整數

min(數值1,數值2) ：返回最小數

max(數值1,數值2) ：返回最大數

pow(數值1,數值2) ：返回數值1的數值2次方  2的次方4

random() ：返回0-1之間的隨機數

round(數值) ：返回四捨五入後的結果

sqrt(數值) ：返回平方根  4開平方根2

 

七、自定義類

在js中沒有顯示的建立對象class的語句，可是能夠經過隱式的來建立對象

語法：

建立一個類：function person(){}

實例化一個對象：var p1 = new person();

 

爲何要建立對象? 爲了跟多的保存數據

在javascript代碼中，一切都是對象，在JavaScript代碼中，是不存在變量和函數這種說法的，由於全部的變量和函數都是以屬性的形式添加到window下的,因此person()至關於window.person();

 

屬性定義

P1.name=’xiaoming’;      p1[‘name’]=’xiaoming’

 

屬性調用

P1.name                   p1[‘name’]

 

js中數據的存儲的形式

值類型數據存儲在棧中，對象存儲在堆區中

對象的賦值時地址的傳遞

 

js中的三大關鍵詞

typeof:判斷變量的數據類型

instanceof：判斷當前對象是不是某個類的實例

constructor: 返回當前對象的構造函數

 

函數內部的this指向

function person(){}            // 類

var p1 = new person()     

默認狀況下，沒有實例化對象時，此時person函數(類)是由window對象進行調用，因此內部的this對象指向全局window對象

當實例化對象後，person函數內部的this指向了對象，故誰調用了函數，函數內部的this就指向了誰

在函數的內部也可使用this來添加屬性，如this.age 當誰調用該對象時內部的屬性和方法將會被該對象繼承

在全局做用域中也存在一個this指向了window對象

在函數形參不會影響實參（值的傳遞），可是對象類型是引用傳遞

 

遍歷對象屬性

for...in...            for(var i in p1){p[i]}            //在for...in...中遍歷時須要[],使用 . 會當作屬性

 

自定義對象的刪除

delete p1.age

 

成員方法的定義

實質：將函數的首地址賦值給成員的屬性，經過訪問成員屬性來達到訪問成員方法

function person(p_name,p_age){             // 類

         this.name=p_name;

         this.age = p_age;                                 // 誰調用指向誰

         this.speak=function(){                        // 將函數的首地址賦值給speak屬性

         this.name                                              // this 就指向了該對象的屬性

}

}

八、JSON

含義：JSON是一組無序的屬性的集合，JSON主要用於大批量數據傳輸與存儲，是一種通用的數據傳輸格式,用於JS中

語法：var json對象={‘屬性1’:值1,’屬性2’:值2....}   // 文本要使用引號

調用：json對象.屬性      json對象[‘屬性’]

使用json對象保存大批量數據，能夠放在數組中

// 此時一個{}就當作一個數組中的值，下標爲0

var person = [{‘name’:’xiao’},{‘name’:’ming’},{}]

使用for...in...來進行遍歷

for(var i in person){person[i].name}

 

在php中使用json_encode將數組轉化爲json數據,使用json_decode將json對象轉化爲數組

 

九、原型鏈

原型對象:當系統加載構造函數時，系統會自動生成一個原型對象

即建立一個函數(類)的時候,在這個構造器中存在一個prototype屬性會執行person這樣一個原型對象，而在原型對象中存在一個constructor 屬性指向了構造對象

當person構造器的實例訪問一個不存在的屬性和方法時，系統會自動到當前的構造器的原型對象中去尋找

應用:若是發現類中缺乏某個方法或方法,而不想更改源代碼,能夠在原型對象中添加屬性和方法 person.prototype.email = ‘xm@sohu.com’

 

原型對象是由stdclass?基類產生,產生的時間爲實例化一個新的p1對象的時候,將會產生該類的原型對象，此時的原型對象將會執行，類名.prototype = new Object(); ????????

 

原型對象的意義：當person構造器的實例p1訪問一個不存在的屬性或方法時，系統會在當前的person構造器中的原型對象中去尋找，若是找不到，將會繼續向上一級尋找，知道Object原型對象，咱們把這種鏈式查詢關係就稱之爲‘原型鏈’

 

十、Object類

object類是全部類的基類(父類),var obj = new Object(),不管是自定義對象仍是系統對象都會繼承Object類中全部的屬性和方法,

原型繼承：

因爲person原型對象與object構造器是實例化關係，因此person原型對象會自動繼承Object類中全部的屬性和方法,因爲原型對象的關係，當p1對象訪問一個不存在屬性和方法時，系統會自動到當前的構造器的原型對象中去尋找,因此p1對象能夠繼承object中的全部屬性和方法，這種繼承就稱之爲’原型繼承’;

 

十一、靜態屬性和方法

在javascript中的靜態屬性的添加

靜態屬性：類名 . 屬性

靜態方法：類名 . 屬性 = function(){}

十二、函數的閉包

閉包的含義：在函數外是不能直接使用函數內的變量或者是函數，做用域的緣由[javascript具備垃圾回收機制]，可是在函數的外部又須要使用函數內部的函數或者是變量，能夠利用內部函數去引用內部的變量,而後return fun 該函數名，將該函數的地址傳遞給變量，使用可變變量進行函數的調用,

function fun(){

         var i = 0;

         function fn(){

                   alert(‘i++’);

}

return fn;

}

var test = fun();

test();

test();

 

在類中的實際使用

function fun(){

         this.getName(){

                   alert(‘a’);

}

}

var p = new fun();

p.getName();

能夠進行連續的調用，讓變量長期的處於內存當中,而不會被釋放,一樣變量也將會改變值

 

閉包的做用：經過全局做用域能夠訪問局部變量,讓局部變量一直駐留在計算機的內存中；雖然閉包有不少好處，可是不建議常用閉包，可能會產生內存泄露

 

1三、私有屬性的定義

一、私有屬性的定義

function person(){

         this.屬性;                  // 公有屬性

         var 屬性;                  // 私有屬性

}

 

1四、apply和call

使用apply和call方法，能夠改變this的指向

 

經過call或apply方法來進行調用公共函數

call(thisObj[arg1[,arg2]])

apply(thisObj[arg1[,arg2]])

 

經過原型繼承的方式來實現類的繼承

類 . prototype = new Object()

 

1五、正則對象

建立對象：

顯示建立：new regExp(‘正則表達式’,’匹配模式’);              

隱式建立：var reg = /正則表達式/匹配模式

 

匹配模式

g:global    全局匹配

i: ignore   忽略大小寫

 

正則對象相關方法！！！

reg = /表達式/g;

test(): 判斷在正則模式下是否含有某個字符串                   reg.test(str)

exec(): 返回指定模式下的字符串                                    reg.exec(str)

 

string類下方法！！！

reg = /表達式/g;

string.search(reg);           返回指定模式下字符串出現的位置

string.match(reg);            返回指定模式下匹配的字符串，返回數組

string.replace(reg);          將指定模式下的字符串替換爲須要的字符串

string.split(reg);                按指定模式的字符串來分割字符串

 

子表達式|捕獲|反向引用

子表達式：在正則中使用()括起來的內容就成爲子表達式

捕獲：子表達式中的內容會被js捕獲，放入相同的相應緩衝區中

反向引用：在正則的表達式中能夠經過\n(n爲第幾個括號)的形式來實行對括號中內容的引用

 

exec()方法的遍歷

exec()方法只能返回第一次的匹配結果，可使用while循環進行遍歷

 

正則表達式的使用心法

一、查什麼

二、查多少

三、怎麼查

 

1、查什麼

\w: 查找[A-Za-z0-9_ ]包括下劃線的任何單詞字符

\d : 查找[0-9]中的數字

\w 能夠匹配字符串中全部的單個的字符

\w\w 能夠匹配字符串中2個連續的字符

\d 同理

[abc]: 查找[]內的全部字符，在不指定個數的時候只匹配單個全部字符，指定時爲連續的abc

[a-z]:  查找[]內的全部字符，在不指定的時候會匹配全部的單個字符,指定時爲多個連續字符

[^a-z]: 取反

\W  \D ：取非

小結：當在使用以上的字符的時候只會匹配單個的字符

 

2、查多少(連續)

*：查找0或多個

+：查找1或多個

?：查找0個或1個

{m,n}：查找至少m個最多n個

{m}:    查找肯定的m個

{m,}    查找至少m個

 

3、貪婪匹配

在正則表達式下默認的是貪婪匹配,按照匹配規則匹配最多的符合狀況的字符串

http://www.baidu.com/hind/index.php

/h.*\//               在貪婪模式下將會匹配到http:/ 和 hind/

/h.*?\//             在非貪婪模式下將會匹配到 http:/

小結：? 添加的位置將會影響匹配的多少，所以?能夠限制匹配

 

四、 從哪查

^ : 輸入的開始位置

$ : 輸入的結束位置                /^ abc $/

\b: 匹配一個單詞邊界         

\B: 匹配一個非單詞邊界   

\b 遇到空格或單詞的開頭或單詞的結尾(匹配一個單詞後空格的位置),\B \b書寫的順序將決定了匹配的內容

 

五、 轉譯符

轉譯符主要是轉譯在[]內或者單個的字符，須要對其進行匹配

須要轉譯的有: * + ? . \ / ( ) [ ] { } ^ $  ([] 表示一個範圍須要轉譯)

 

六、 匹配符

| 表明多重匹配,匹配不一樣規則的內容        /love(php|linux)/

 

七、 特殊用法

我在學習網站,你在學習書法

(?=)  正向預查   

/我在學習(?=網站)/                 // 匹配是’網站’ 前的字符串

(!=)  反向預查

/我在學習(!=網站)/                  // 匹配不是’網站’前的字符串

(?:)  輸出內容,但不捕獲(一般配合子表達式使用)

/?:(網站|書法)/                          // 匹配到內容但不捕獲

 

手機號的匹配：/^1[34578]\d{9}$/        從1開始 匹配[34578]的一個字符 後接9位數字

郵箱驗證：              /^\w+([\.-]\w+)*@\w+([\.-]\w+)*(\.\w{2,3})+$/

結巴程序將代碼

 

1六、BOM模型

定義：當咱們打開某一Web應用程序時，系統會自動生成一個模型，該模型的最頂級對象就是Window對象，咱們把這個模型就稱之爲「BOM模型」。

 

window 對象

alert(message)                                   // 彈出窗口

confirm(message)                              // 確認窗口（經常使用於刪除）

open(url[，name[，features]])      // 建立新窗口（經常使用於OA系統）

close()                                                    // 關閉窗口

print()                                                    // 打印

scrollTo(x,y) ：絕對滾動()               // 滾動到窗口的什麼位置(返回頂)

setTimeout(表達式，毫秒)            // 定時器

clearTimeout(定時器對象)             // 清除定時器

 

Navigator 瀏覽器對象

appCodeName                           // 瀏覽器內核名稱

appName                                    // 瀏覽器名稱

appVersion                                  // 瀏覽器的版本

platform                                      // 操做系統信息

online                                           // 是否脫機工做

cookieEnabled                             // cookie是否可用

userAgent                                    // 判斷瀏覽器的代理信息

 

Screen 屏幕對象

 

availHeight                                 // 可用高度

availWidth                                    // 可用寬度

colorDepth                                 // 顏色色深

height                                         // 顯示器高度

width                                             // 顯示器寬度

 

Location 對象

host                                                //獲取主機信息

port                                                //獲取端口信息

href                                                // 獲取當前頁面的url

pathname                                     //獲取路徑信息

protocol                                       //獲取請求協議（http/https）

search                                          //獲取查詢參數（問號後面的內容）

assign(url)                                   //跳轉到指定的url

 

1七、JSONP

原因：因爲Ajax技術因爲受到瀏覽器的限制,該方法不容許跨域通訊

同源策略：阻止從一個域上加載的腳原本獲取或操做另外一個域上的文檔屬性,也就是說數據的請求只能是在當前的域下進行操做,瀏覽器會隔離其餘域的數據或操做

解決辦法：藉助<scritpt src=’’></script> 標籤來進行跨域請求數據，返回的數據放在script標籤中，藉助callback()函數來處理返回的函數

源碼實現的方式：

一、JS原生代碼的實現請求

var script = document.createElement(‘script’);        // 生成一個script標籤

script.src = ‘http://localhost/index.php?fn=callback’ //爲script添加一個屬性,傳遞fn回調函數

document.getElementsByTagName(‘head’)[0].appendChild(script)     //將script添加到head中

 

二、script 來處理數據

<script>

         function callback(msg){   // 處理從index.php返回的數據 }

</script>

 

三、  index.php 接口返回jsonp形式的數據

咱們在作接口的時候,若是是JSONP形式的，則爲：

<?php

$fn = $_GET[‘fn’]；

$data = array();

$data = json_encode($data);

echo $fn.」(‘$data’)」;

 

jquery直接請求jsonp的方法

1、$.ajax({type,url,datatype,success});

$.ajax({

         type:’get’,

         url:’http://localhost/index.php’

         datatype:’jsonp’,

         jsonp:’fn’,                                             // 設置jsonp的屬性

         success:function(msg){

                   alert(typeof msg);                      // msg爲string對象

}

});

2、$.get(url,data,callback);

$.get(

’http://localhost/index.php?fn=?’,

[data],

function(msg){                             //msg的類型爲string對象

                           //函數體

},

‘jsonp’

);

3、$.getJSON(url,data,callback)

$.getJSON(

         url:’http://localhost/index.php?fn=callback’，

         data:

         function(msg){                                      //msg的類型爲string對象

                   // 函數體

}

);

 

底層ajax實現JSONP的請求

 

 

JSON.parse() 與 eval(‘(‘+msg+’)’) 區別

//msg的類型爲string對象 使用JSON.parse(msg)來進行json解析，

JSON.parse()之能夠解析json格式的數據，而且會對要解析的字符串進行格式檢查

若是格式不正確則不進行解析,而eval((‘+msg+’))則能夠解析任何字符串，eval是不安全的。

 

1八、Ajax原生

ajax的定義：是一種web技術,在不跳轉而刷新頁面的時候,能夠經過js的事件向web服務器發送一個請求,服務器在將數據處理後能夠返回多種格式的數據,如：string,json,xml,web頁面經過數據來處理相應的業務的處理。

注：若是返回的是XML數據須要加header(‘content-type:text/xml’)

 

Ajax對象的建立

W3C:  Xhr = new XMLHttpRequest()              // Xhr 爲新建的Ajax對象

Ie:    Xhr = new ActiveXObject(‘Microsoft.XMLHTTP’);

 

Ajax的使用步驟

1建立ajax對象(經過try{return new XMLHttpRequest()}catch(e){}異常機制來解決兼容性問題)

設置回調函數 xhr.onreadystatechange=function(){

四、 判斷與執行

Xhr.status==200&&Xhr.readyStatus==4

}

二、xhr.open(‘get’,’?.php’)                                 //初始化ajax對象指定請求方式和get請求

三、xhr.setRequestHeader (‘content-type’,’application/x-www-form-urlencoded’)    //post請求

若是沒有設置head頭信息,服務將收不到數據

四、發送信息xhr.send(null)            //get請求發送的參數帶在url後,post參數組裝後send發送

 

在IE瀏覽器下緩存的解決

A、隨機數 

B、時間戳 

C、經過設置緩存文件的最後修改時間(在某段時間內第二次請求某個頁面時服務器會檢查文件的最後的修改時間,來判斷文件是否存在於客戶端中)

setRequestHeader(‘If-modifiy-since’，‘0’)                      //需設在open後

D、在服務器端設置

Heaer(‘Cache-control:no-cache; must-revalidate’);                //無緩存必須從響應

緩存的好處:減小對放武器的請求次數,加快響應時間

 

Ajax得到服務器返回的數據有xml json string

Xhr.responseText                                 //string格式

Xhr.responseXML                                //xml 格式服務器端要使用header(‘content-type:text/xml’)

eval(‘(‘+ Xhr.responseText +’)’)      // json格式

1九、Ajax中的XML和JSON

釋義：可擴展的標記語言,主要用於數據的存儲和傳輸（完成大批量數據的傳輸,超過兩條）

XML

PHP和JS中xml的解析的區別

PHP: 在php中爲非標準的DOM模型 à 將值存儲在最後的子節點中(聚簇型)

JS: 在js中爲標準的DOM模型 à 將值存儲在其餘的節點(索引型)

 

標準DOM模型

PHP DOM模型: 主要實現數據的增、刪、改功能

PHP SimpleXML模型: 主要實現數據的查詢功能

方法一:

PHP DOM模型解析查詢

$dom=new DOMDocument(‘1.0’,’utf-8’);                                   //面

$dom->load($str);

$nd=$dom->getElementsByTagName(「TagName」);              //串

$value=$nd->item(0)->nodeValue                                                 //點

方法二:

PHP SimpleXml模型解析查詢

$xml=simplexml_load_string($str);

$first = $xml->first;                                       // first/second爲標籤

$second= $xml->second;                           

方法三:

Xpath指令查詢

建立一個simpleXml模型使用Xpath指令來進行查詢

 

非標準DOM模型

JS(Ajax)中的解析xml數據(標準型)

var xml=xmlHttp.responseXML;               // js中接收返回的xml數據

nodevalue=xml.getElementsByTagName(「TagName」). node[0].childNodes[0].nodeValue;

注:childNodes 中包含該節點下全部的子節點

 

若是服務器端想要返回xml數據則必須設置

header(‘content-type:text/xml;charset=utf-8’)

 

 

JSON

json是一組無序屬性的集合,在Javascript中能夠經過{}來表示這組集合,它是Object類實例

定義:  var json = [{ },{ },{ },{ }...]

實際應用:

在實際的開發中,儘管服務器返回的是json格式的數據,可是ajax中並不能識別爲string類型,

因此須要經過JSON.parse(string) 或者是 eval(‘(‘+string+’)’) 來進行轉換,建議使用parse();

json的調用：

一維：{‘a’:1,’b’:2,’c’:3...}                           json.a      json.b

二維: [{ },{ },{ },...]                                使用for...in... for(var i in json){ json[i].e }

 

20、Jquery

jquery就是JS的一個類庫,封裝了不少的功能,節省開發週期

 

 

基本選擇器

#id:          id選擇器                                                                           $(‘#id’)

.class:       class屬性選擇器                                                            $(‘.cls’)

Element: 標籤選擇器                                                                     $(‘span’)

E1,E2,E3...: 羣組選擇器,匹配全部符合條件的標籤           $(‘input,p,span’)

 

層級選擇器

ancetor descendant:        匹配當前元素的全部後代元素     $(‘form input’)

parent > child: 匹配當前元素的全部子元素                          $(‘form>input’)

prev + next :    匹配當前元素的近鄰的下一個元素           $(‘label + input’)

prev~siblings:  匹配當前元素後的所用指定的同級兄弟元素  $(‘ul~li’) $(‘form~input’)

 

簡單選擇器

:first       匹配第一個元素                                                             $(‘li:first’)

:last        匹配最後一個元素

:even       匹配全部的偶數元素                                                    $(‘tr:even’)

:odd        匹配全部的奇數元素                                                    $(‘tr:odd’)

:eq(index)匹配索引等於index的元素,默認索引從0開始 $(‘tr:eq(1)’)

:gt(index) 匹配索引大於

:lt(index) 

:not(selectot)  匹配出指定選擇器之外的元素

 

內容選擇器

:contains(text) 匹配內容包含text的元素           $(‘div:contains(‘lucky’)’)

:empty               匹配內容爲空的元素                     $(‘td:empty’)

:has(selector)  匹配具備指定選擇器的元素       $(‘div:has(‘p’)’)

:parent              匹配具備子元素的元素(內容不爲空的子元素) $(‘td:parent’)

 

可見性選擇器

:hidden   匹配全部隱藏元素,包含隱藏表單和display:none的元素        $(‘form:hidden’)

:visible      匹配全部可見的元素                                                                            

 

屬性選擇器

[attribute]  匹配指定屬性的元素 $(‘div[id]’)

[attribute=value]  匹配指定某個指定屬性值的元素  $(「input[name=’name’]」)

另:

!= 不等於  

^= 以特定的值開始       // 多個name屬性值開始

$= 以某些值結束的       // 有點像正則

*= 包含某些值               

[selector1],[selector2]..  // 同時匹配具備多個屬性的元素 $(input[‘id’][name=’pwd’])

 

子選擇器

:nth-child(index/even/odd) 從1算起,根據(索引/偶數/奇數)匹配子元素 $(「ul li:nth-child(2)」)

:first-child  匹配第一個子元素 $(‘ul li:first-child’)

:last-child            匹配最後一個子元素 $(‘ul li:last-child’)

:only-child  若是當前是惟一一個子元素則匹配

 

表單選擇器

:input 匹配全部的表單選擇器---匹配全部的選擇器包括<select><textarea> $(:input)

input 只能匹配帶有input的表單元素,只是簡單的表單選擇器

:text  匹配全部的文本框(非密碼框)同checkbox同樣是將值保存在:text變量中,須要進行變量輸出

:checkbox  匹配全部的複選框             $(:checkbox)

 

表單對象選擇器

:enabled  匹配全部可用的表單元素

:disabled 匹配全部不可用的表單元素

:checked 匹配全部選中的元素                            $(「input:checked」)

:selected 匹配全部下拉選中的元素                  $(「input:selected」)

 

另:disabled = ‘true’與readonly=’readonly’區別

disabled 是不能在php頁面中進行接收的,而readonly是能夠實現接收的

 

2一、JQ對象與DOM對象

 

JQ對象與DOM對象之間的轉換

DOM對象 = Jq對象[index]                      var dom = $(jq)[0]

JQ對象 =   $(DOM對象)         var jq = $(DOM)

 

2二、JQ對象對屬性的操做

普通屬性的操做

attr(name)              獲取對象

attr(key,value)         設置屬性的值

attr(properties)        爲元素設置多個屬性,properties必須爲json對象

attr(key,fn)                經過函數的返回值,來設置元素的屬性

removeAttr(name)  移除某個屬性

 

Class屬性操做

addClass(class)     爲元素添加Class屬性

removeClass(class)  移除元素的Class樣式

toggleClass(class)   切換Class的屬性,存在則移除,反之

hasClass(class)                    判斷元素是否具備某個class樣式

 

Css操做

css(name)                  獲取css的樣式

css(name,value)       設置css屬性值

css(properties)         同時爲元素設置多個css樣式 json格式

 

offset位置操做

offset()              獲取元素的位置信息,返回json對象,包含left和top兩個屬性

offset({top:x,left:y});        設置對象的位置

 

尺寸操做

width():             獲取元素的寬度

width(value)     設置元素的寬度

height()             獲取元素的高度

height(value) 設置元素的高度

 

文本/值

html()    獲取元素的值,雙標籤內的值以及html內容,瀏覽器能夠將其解析

html(val)  設置元素的值

 

val()           獲取表單元素的值

val(val)  設置表單元素的值

 

text()    獲取元素的值

text(val)  設置元素的值,獲取全部的文本值,存在html標籤也不能解析

 

2三、事件的編程

在DOM中頁面的載入是經過window.onload,在JQ中是經過$(document).ready(fn)的方式來進行載入頁面,window.onload方法是等待當前的頁面全部的資源(images,js,css)加載完畢再執行,而ready是當內存中的DOM樹已經造成後,自動執行,可能外部的資源沒有加載完成或失敗就會執行

 

JQ中經常使用的編程

經常使用事件：

blur(fn) ：                 當失去焦點時觸發

change(fn) ：          當狀態改變時觸發

click(fn) ：                當單擊時觸發

dblclick(fn) ：          當雙擊時觸發

focus(fn) ：              當得到焦點時觸發

鍵盤

keydown(fn) ：       鍵盤按下時觸發

keyup(fn) ：             鍵盤彈起時觸發

keypress(fn) ：       鍵盤按下時觸發                       // 不能獲取功能鍵的值

load(fn) ：                功能與ready方法相似,當頁面載入時觸發

unload(fn) ：           當頁面關閉時觸發

鼠標

mousedown(fn) ：鼠標按下時觸發

mouseup(fn) ：  鼠標彈起時觸發

mousemove(fn) ：鼠標移動時觸發

mouseover(fn) ：鼠標懸浮時觸發

mouseout(fn) ：鼠標離開時觸發

窗口

resize(fn) ：當瀏覽器窗口大小改變時觸發

scroll(fn) ：當滾動條滾動時觸發

select(fn) ：當表單文本選中時觸發

submit(fn) ：當表單提交時觸發

 

2四、JQ經常使用方法

hover(over,out)                  // 鼠標的懸浮與離開

toggle(fn1,fn2...)               //  輪換點擊事件

bind(type,[data],fn)          // 爲事件綁定相關的事件處理程序

bind({type:fn1,type:fn2..})       // 爲事件綁定多個事件處理程序

one(type,[data],fn)                   // 爲元素綁定一次觸發程序

unbind(type)                                // 移除某個事件,無名函數也是能夠的

 

原生JS代碼中this的指向

行內綁定時,函數內部的this指向window對象,誰調用指向誰

動態綁定時其內部的this指向DOM對象

事件的監聽中this具備兼容性的問題 IE指向window對象,W3C指向當前的DOM對象

 

JQ中this的指向

在jq中不管是IE仍是W3C瀏覽器,事件的綁定時,其內部的this都指向了當前要操做的DOM對象,須要使用JQ中的方法的時候將須要進行轉化爲JQ對象

 

2五、事件的冒泡

所謂的事件的冒泡就是事件的響應就像水泡同樣從底層的對象一層層上升至頂層對象,這個過程就叫作事件的冒泡

IE下冒泡的禁止：window.enent.cancelBubble = true;

W3C下冒泡的禁止: envent.stopPropagation();

 

默認行爲的阻止：

IE: window.event.returnValue = false;

W3C: event.preventDefault();

 

2六、JQ中的動畫效果

show([speed[,callback]])                   //顯示/動畫效果顯示

hide([speed[,callback]])                     //隱藏/動畫效果隱藏

 

toggle() :                                              //顯示與隱藏/開關

toggle(switch)                                      //顯示與隱藏  值爲true/false

toggle(speed[,callback])

 

 

slideDown(speed[,callback])             // 向下滑動

slideUp(speed[,callback])                 

slideToggle(speed[,callback])

 

fadeIn(speed[,callback])

fadeOut(speed[,callback])                 //淡出

fadeTo()                                                  // 能夠設置透明度

 

animate(parames[,speed])               // 自定義動畫,必須設置position才能爲其定位

 

2七、jq的擴展機制

在實際的開發中,若是發現JQ中沒有封裝咱們須要到功能,咱們能夠jq的插件機制來實現拓展  jQuery.fn.extend(object) 或 $.fn.extend(object) object參數要求是一個json對象

其誰調用內部的this就會指向誰

語法:

$.fn.extend({

         fn1.function(){ this },

         fn2.functon(){ this }

});

 

<script> $().fn()1 </script>

 

each的使用

jq對象的本質是一個DOM對象的集合,這個集合能夠經過數組的形式進行表示，能夠經過

each 對這個集合進行遍歷

$().each(function(i,item){

         i:每次遍歷的時候會將索引元素的下標放置於i中

         item:每次遍歷的元素放置於item中,因爲JQ就是一個DOM對象故item就是DOM對象

})

 

2八、JQ中的Ajax的使用

 

底層的實現

$.ajax({

         type:’get/post’,

         url:’localhost’,

         cache:fasle,

         data:string

         datatype:json/xml/text

         success:function(msg){

                   // xml的解析

                   $(msg).find(‘field’).text();

                   //Json的解析

                   $(msg).field                        // 單條數據

                   $(msg).each(function(i,item){

                            item.field

});

}

});

 

高級實現

$.get(type,data,callback);

$.post(type,data,callback);

 

區別

高級實現與底層實現的區別在與發送的data數據類型不同

底層:  string

高級:  string,json

 

注意: 在xml/json/text中返回的是DOM對象,而返回爲JSONP時爲string須要轉換爲對象

詳見: jsonp