jQuery 選擇器雜談

????????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(){}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關(guān)注...
    前端進(jìn)階之旅閱讀 16,943評論 18 503
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計者無需花費(fèi)時間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,274評論 0 1
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計者無需花費(fèi)時間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,503評論 0 2
  • 第一章 入門 基本功能:訪問和操作 dom 元素,控制頁面樣式,對頁面的事件處理,與ajax完美結(jié)合,有豐富的插件...
    X_Arts閱讀 1,145評論 0 2
  • ——生活的智慧在于:不管面對什么人,都存在著一套相處之道,以保證人與人交往之間的尊重,以及對底線雷區(qū)的把控。而這相...
    lsyaly閱讀 494評論 0 0

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