jQuery學(xué)習(xí)總結(jié)

jQuery目前在Web前端開(kāi)發(fā)所占的比重越來(lái)越高采幌,在我們jQuery學(xué)習(xí)和開(kāi)發(fā)的過(guò)程中都會(huì)去使用伴栓。jQuery幫我們解決了瀏覽器之間JS一些不兼容的地方和簡(jiǎn)化了原生JS對(duì)DOM的操作泞辐。

//當(dāng)文檔完成加載完時(shí)觸發(fā)陪拘,避免獲取dom對(duì)象時(shí)菜枷,dom對(duì)象還沒(méi)有加載

$(document).ready(function(){

//寫(xiě)js語(yǔ)句或者jQuery函數(shù)

$("p").click(function(){

$(this).hide();

});

});

3称鳞、jQuery常用的選擇器和事件涮较,和CSS的選擇器很相似。

$() – 使用CSS選擇器匹配元素

jQuery的事件和JS的事件基本相同冈止,在使用的時(shí)候狂票,去掉JS事件前面的on即可。

jQuery常用的事件:

load:當(dāng)文檔加載時(shí)運(yùn)行腳本

blur:當(dāng)窗口失去焦點(diǎn)時(shí)運(yùn)行腳本

focus:當(dāng)窗口獲得焦點(diǎn)時(shí)運(yùn)行腳本

change:當(dāng)元素改變時(shí)運(yùn)行腳本

submit:當(dāng)提交表單時(shí)運(yùn)行腳本

keydown:當(dāng)按下按鍵時(shí)運(yùn)行腳本

keypress:當(dāng)按下并松開(kāi)按鍵時(shí)運(yùn)行腳本

keyup:當(dāng)松開(kāi)按鍵時(shí)運(yùn)行腳本

click:當(dāng)單擊鼠標(biāo)時(shí)運(yùn)行腳本

dblclick:當(dāng)雙擊鼠標(biāo)時(shí)運(yùn)行腳本

mousedown:當(dāng)按下鼠標(biāo)按鈕時(shí)運(yùn)行腳本

mousemove:當(dāng)鼠標(biāo)指針移動(dòng)時(shí)運(yùn)行腳本

mouseout:當(dāng)鼠標(biāo)指針移出元素時(shí)運(yùn)行腳本

mouseover:當(dāng)鼠標(biāo)指針移至元素之上時(shí)運(yùn)行腳本

mouseup:當(dāng)松開(kāi)鼠標(biāo)按鈕時(shí)運(yùn)行腳本

abort:當(dāng)發(fā)生中止事件時(shí)運(yùn)行腳本

4熙暴、jQuery常用的效果方法

$(selector).hide() – 隱藏被選的元素

$(selector).show() – 顯示被選的元素

$(selector).toggle() – 對(duì)被選元素進(jìn)行隱藏和顯示的切換

$(selector).slideDown() – 通過(guò)調(diào)整高度來(lái)滑動(dòng)顯示被選元素

$(selector).slideToggle() – 對(duì)被選元素進(jìn)行滑動(dòng)隱藏和滑動(dòng)顯示的切換

$(selector).slideUp() – 通過(guò)調(diào)整高度來(lái)滑動(dòng)隱藏被選元素

$(selector).fadeIn() – 逐漸改變被選元素的不透明度闺属,從隱藏到可見(jiàn)

$(selector).fadeOut() – 逐漸改變被選元素的不透明度,從可見(jiàn)到隱藏

$(selector).fadeTo() – 把被選元素逐漸改變至給定的不透明度

$(selector).animate() – 對(duì)被選元素應(yīng)用“自定義”的動(dòng)畫(huà)

4周霉、jQuery常用的DOM元素操作方法

$(selector).parent() – 返回被選元素的直接父元素屋剑。

$(selector).parents() – 返回被選元素的所有祖先元素,它一路向上直到文檔的根元素 ()诗眨,可選參數(shù)來(lái)過(guò)濾對(duì)祖先元素的搜索

$(selector).children() – 返回被選元素的所有直接子元素唉匾。可選參數(shù)來(lái)過(guò)濾對(duì)子元素的搜索

$(selector).find() – 返回被選元素的后代元素匠楚,一路向下直到最后一個(gè)后代巍膘,可選參數(shù)來(lái)過(guò)濾對(duì)后后代元素的搜索

$(selector).siblings() – 返回被選元素的所有同胞元素。過(guò)濾對(duì)同胞元素的搜索芋簿。

$(selector).next() – 返回被選元素的下一個(gè)同胞元素峡懈。

$(selector).nextAll() – 返回匹配元素集合中每個(gè)元素之后的所有同輩元素,由選擇器進(jìn)行篩選(可選)与斤。

$(selector).prev() – 返回的是前面的同胞元素

$(selector).prevAll() – 返回匹配元素集合中每個(gè)元素之前的所有同輩元素肪康,由選擇器進(jìn)行篩選(可選)。

$(selector).first() – 將匹配元素集合縮減為集合中的第一個(gè)元素撩穿。

$(selector).last() – 將匹配元素集合縮減為集合中的最后一個(gè)元素磷支。

$(selector).eq() – 指定索引的新元素。

$(selector).get() – 獲得由選擇器指定的 DOM 元素食寡。

$(selector).index() – 返回指定元素相對(duì)于其他指定元素的 index 位置雾狈。

注:parent()、next()抵皱、prev()善榛、first()辩蛋、last()、eq()只返回一個(gè)元素移盆。返回元素集合的函數(shù)都可以傳傳參數(shù)篩選悼院,比如:parents()、siblings()咒循、nextAll()据途、prevAll()、siblings()剑鞍。

$(selector).each() 對(duì)對(duì)象進(jìn)行迭代昨凡,為每個(gè)元素執(zhí)行函數(shù)

$(selector).toArray() 以數(shù)組的形式返回 jQuery 選擇器匹配的元素

$(selector).size() 返回被 jQuery 選擇器匹配的元素的數(shù)量

$(selector).text() – 設(shè)置或返回所選元素的文本內(nèi)容

$(selector).html() – 設(shè)置或返回所選元素的內(nèi)容(包括 HTML 標(biāo)記)

$(selector).val() – 設(shè)置或返回表單字段的值

$(selector).append() – 在被選元素的結(jié)尾插入內(nèi)容

$(selector).prepend() – 在被選元素的開(kāi)頭插入內(nèi)容

$(selector).after() – 在被選元素之后插入內(nèi)容

$(selector).before() – 在被選元素之前插入內(nèi)容

$(selector).remove() – 刪除被選元素(及其子元素)

$(selector).empty() – 從被選元素中刪除子元素

$(selector).removeAttr() – 從所有匹配的元素中移除指定的屬性。

$(selector).clone() – 創(chuàng)建匹配元素集合的副本

$(selector).load() – 從服務(wù)器加載數(shù)據(jù)蚁署,然后把返回到 HTML 放入匹配元素

5便脊、jQuery對(duì)CSS的操作

$(selector).height() – 設(shè)置或返回匹配元素的高度。

$(selector).width() – 設(shè)置或返回匹配元素的寬度光戈。

$(selector).addClass() – 向被選元素添加一個(gè)或多個(gè)類(lèi)

$(selector).removeClass() – 從被選元素刪除一個(gè)或多個(gè)類(lèi)

$(selector).toggleClass() – 對(duì)被選元素進(jìn)行添加/刪除類(lèi)的切換操作

$(selector).css() – 設(shè)置或返回樣式屬性

$(selector).hasClass() 檢查匹配的元素是否擁有指定的類(lèi)哪痰。

6、jQuery其他知識(shí)點(diǎn)

$(selector).data() – 存儲(chǔ)與匹配元素相關(guān)的任意數(shù)據(jù)

$(selector).removeData() – 移除之前存放的數(shù)據(jù)

$(selector).serialize() – 將表單內(nèi)容序列化為字符串

$(selector).serializeArray() – 序列化表單元素久妆,返回 JSON 數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)

$沖突的解決辦法

//釋放$標(biāo)識(shí)符的控制晌杰,使用默認(rèn)的變量jQuery

$.noConflict();

//自定義變量

var jq = $.noConflict();

7、jQuery Ajax 操作函數(shù)

$.ajax() – 執(zhí)行Ajax異步請(qǐng)求

$.get() – 使用GET請(qǐng)求從服務(wù)器獲取數(shù)據(jù)

$.getJSON() – 使用GET從服務(wù)器請(qǐng)求JSON編碼數(shù)據(jù)

$.getScript() – 使用GET從服務(wù)器請(qǐng)求JavaScript文件并執(zhí)行該文件

$.post() – 使用POST請(qǐng)求從服務(wù)器獲取數(shù)據(jù)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末筷弦,一起剝皮案震驚了整個(gè)濱河市肋演,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌烂琴,老刑警劉巖爹殊,帶你破解...
    沈念sama閱讀 218,546評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異奸绷,居然都是意外死亡梗夸,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,224評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)号醉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)反症,“玉大人,你說(shuō)我怎么就攤上這事畔派∏Π” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,911評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵父虑,是天一觀的道長(zhǎng)该酗。 經(jīng)常有香客問(wèn)我,道長(zhǎng)士嚎,這世上最難降的妖魔是什么呜魄? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,737評(píng)論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮莱衩,結(jié)果婚禮上爵嗅,老公的妹妹穿的比我還像新娘。我一直安慰自己笨蚁,他們只是感情好睹晒,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,753評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著括细,像睡著了一般伪很。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上奋单,一...
    開(kāi)封第一講書(shū)人閱讀 51,598評(píng)論 1 305
  • 那天锉试,我揣著相機(jī)與錄音,去河邊找鬼览濒。 笑死呆盖,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的贷笛。 我是一名探鬼主播应又,決...
    沈念sama閱讀 40,338評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼乏苦!你這毒婦竟也來(lái)了株扛?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,249評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤汇荐,失蹤者是張志新(化名)和其女友劉穎洞就,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體拢驾,經(jīng)...
    沈念sama閱讀 45,696評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡奖磁,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,888評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了繁疤。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片咖为。...
    茶點(diǎn)故事閱讀 40,013評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖稠腊,靈堂內(nèi)的尸體忽然破棺而出躁染,到底是詐尸還是另有隱情,我是刑警寧澤架忌,帶...
    沈念sama閱讀 35,731評(píng)論 5 346
  • 正文 年R本政府宣布吞彤,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏饰恕。R本人自食惡果不足惜挠羔,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,348評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望埋嵌。 院中可真熱鬧破加,春花似錦、人聲如沸雹嗦。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,929評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)了罪。三九已至锭环,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間泊藕,已是汗流浹背辅辩。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,048評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留吱七,地道東北人汽久。 一個(gè)月前我還...
    沈念sama閱讀 48,203評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像踊餐,于是被迫代替她去往敵國(guó)和親景醇。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,960評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • jQuery目前在Web前端開(kāi)發(fā)所占的比重越來(lái)越高吝岭,在我們jQuery學(xué)習(xí)和開(kāi)發(fā)的過(guò)程中都會(huì)去使用三痰。jQuery幫...
    一直以來(lái)都很好閱讀 267評(píng)論 0 1
  • 在jQuery中,主要的DOM操作分為以下幾類(lèi): 一窜管、查找節(jié)點(diǎn) 1散劫、查找元素節(jié)點(diǎn) 2、查找屬性節(jié)點(diǎn)利用jQuery...
    McRay閱讀 445評(píng)論 0 0
  • 一幕帆、DOM的加載 在javascript中获搏,我們一般是使用window.onload方法,在頁(yè)面加載完畢后失乾,瀏覽器...
    McRay閱讀 314評(píng)論 0 1
  • jQuery選擇器這一塊常熙,我大致用下面這張圖片進(jìn)行了歸納,分為兩個(gè)塊碱茁,一塊是jQuery選擇器的優(yōu)勢(shì)裸卫,另外一塊,重...
    McRay閱讀 217評(píng)論 0 0
  • 一纽竣、簡(jiǎn)介 游戲數(shù)據(jù)主要分兩大類(lèi)墓贿,一是留存茧泪,二是付費(fèi)。通過(guò)常規(guī)數(shù)據(jù)來(lái)監(jiān)控游戲運(yùn)營(yíng)狀態(tài)聋袋,通過(guò)細(xì)化數(shù)據(jù)輔助決策队伟。 常規(guī)數(shù)...
    葉萱草閱讀 4,528評(píng)論 1 15