????????jQuery作為目前應(yīng)用比較廣泛的框架,也是早期的一款功能齊全,實(shí)用的框架,在剛剛問世之時深受眾多人的喜愛與追捧,雖然現(xiàn)如今jQuery顯露沒落之態(tài),但不可否認(rèn)他的強(qiáng)大,這里我就選取他的幾個重要功能來談?wù)劇?/p>
JQuery選擇器
????JQuery選擇器是我第一次接觸這款框架時便被其震撼的功能,簡單,粗暴,直接,畢竟,當(dāng)時受夠了原生選取dom節(jié)點(diǎn)的痛苦,所以,在一看到這個選擇器時,就喜歡上了這個框架,也由此開始了我對jQuery的探索之旅。
? ??????JQuery的選擇器有幾十種,常用的也有十幾種:
? ? ? ? ? ? 類選擇器:$(".class"),id選擇器:$("#id"),標(biāo)簽選擇器:$("tagName"),組合選擇器:$("image,div")
? ? ? ? ? ? 父子級選擇器:$("ui li"),偽類選擇器:$("div:hover"),$("div:active").
以上這些大概就是我們常用的選擇器,比起以前的document.getElementById("id")這么一大串的的東西,現(xiàn)在只要一個$加("")就可以實(shí)現(xiàn),真的是大大節(jié)省了我們的時間,將我們從繁重的冗余代碼中解放出來。
jQuery框架思想:jQuery是封裝很多底層的方法的一個框架,他的操作層面是dom層,也就是說,他做的一切都是基于dom的操作,他是以dom驅(qū)動的核心思想。所以說這也是jQuery這種類型的框架最終會被我們摒棄的原因,一個無法在數(shù)據(jù)層面去改變文本解構(gòu)的框架,逐漸會被數(shù)據(jù)驅(qū)動的框架所取代,就像 現(xiàn)在最火的三大框架:vue ,angular,react 這三者就是數(shù)據(jù)驅(qū)動的框架,通過數(shù)據(jù)的改變進(jìn)而改變dom結(jié)構(gòu),所謂的MVVM結(jié)構(gòu),模型-視圖,視圖-模型,相互影響。
AJAX
jQuery的ajax封裝了很多實(shí)現(xiàn)的方法,我用過了其他框架封裝的ajax之后,個人認(rèn)為jquery的ajax方法是最方便,最容易入手的,這里簡單講講:
? ? ? ? $.load()? load()方法簡而言之,就是異步加載遠(yuǎn)程的html文件,比較粗糙的一種異步手段,直接加載一段HTML代碼片段,并追加到dom結(jié)構(gòu)中
? ? ? ? load(url,[data],callback)? =>callback (responseText,textstatus,XMLHttpRequest){}
? ? ? ? $.ajax({ })??
$.ajax是jquery ajax方法最底層的實(shí)現(xiàn),所以自由度也比較高,這個方法只能有一個參數(shù):params
? ? params:{
? ??????url: 請求的地址
? ? ? ? type: 請求方式,get/post 默認(rèn)是get
????????data: 發(fā)送到服務(wù)器的數(shù)據(jù) GET自動附加在url后面,post 方式作為http消息的實(shí)體內(nèi)容發(fā)送給服務(wù)器,
????????datatype: 服務(wù)器預(yù)期返回的數(shù)據(jù)類型
????????"Content-Type":"application/json"; (數(shù)據(jù)編碼格式)
????????complete: 請求完成后調(diào)用的回調(diào)函數(shù)(成功或失敗均調(diào)用)
????????function(XMLHttpRequest,TextStatus){}
????????success:請求成功后的調(diào)用的回調(diào)函數(shù),
????????error: 請求失敗后調(diào)用的回調(diào)函數(shù)
????????global: 是否全局出發(fā)ajax事件,默認(rèn)為true
};
? ? ajax的get方式封裝的方法
$.get(
? ??????url: 請求的url地址
????????data: 發(fā)送到服務(wù)器中數(shù)據(jù)會作為QueryString附加到url中
????????type: 服務(wù)器返回的數(shù)據(jù)格式,包括xml,html,script,json,text,_default;(這里的type和$.ajax的Type不同,== dataType)
????????callback: 載入成功時回調(diào)函數(shù),自動將請求結(jié)果和請求狀態(tài)傳遞給該方法,success/error
);
還有 一些就是$.post(params);$.getScript;$.getJson()
跨域:
? ? ? ? 異步加載的最容易碰到的問題,jquery也提供了解決方法:JSONP
json? with padding? 在服務(wù)器端集成script函數(shù),并將標(biāo)簽返s回到客戶端,客戶端通過一個回調(diào)函數(shù)實(shí)現(xiàn)繞過瀏覽器的同源資源共享策略的機(jī)制,實(shí)現(xiàn)請求,完成訪問。
? ? ? ? 在$.ajax()的參數(shù)里加入? dataType : "jsonp",
?????????????????????????????????????????????????jsop : "callback"
????????????????????????????????????????????????jsonpCallback : function callback(){}