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

jQuery目前在Web前端開發(fā)所占的比重越來越高,在我們jQuery學(xué)習(xí)和開發(fā)的過程中都會去使用。jQuery幫我們解決了瀏覽器之間JS一些不兼容的地方和簡化了原生JS對DOM的操作。

//當(dāng)文檔完成加載完時觸發(fā),避免獲取dom對象時,dom對象還沒有加載

$(document).ready(function(){

//寫js語句或者jQuery函數(shù)

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

$(this).hide();

});

});

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

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

jQuery的事件和JS的事件基本相同,在使用的時候,去掉JS事件前面的on即可。

jQuery常用的事件:

load:當(dāng)文檔加載時運行腳本

blur:當(dāng)窗口失去焦點時運行腳本

focus:當(dāng)窗口獲得焦點時運行腳本

change:當(dāng)元素改變時運行腳本

submit:當(dāng)提交表單時運行腳本

keydown:當(dāng)按下按鍵時運行腳本

keypress:當(dāng)按下并松開按鍵時運行腳本

keyup:當(dāng)松開按鍵時運行腳本

click:當(dāng)單擊鼠標(biāo)時運行腳本

dblclick:當(dāng)雙擊鼠標(biāo)時運行腳本

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

mousemove:當(dāng)鼠標(biāo)指針移動時運行腳本

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

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

mouseup:當(dāng)松開鼠標(biāo)按鈕時運行腳本

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

4、jQuery常用的效果方法

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

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

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

$(selector).slideDown() – 通過調(diào)整高度來滑動顯示被選元素

$(selector).slideToggle() – 對被選元素進行滑動隱藏和滑動顯示的切換

$(selector).slideUp() – 通過調(diào)整高度來滑動隱藏被選元素

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

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

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

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

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

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

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

$(selector).children() – 返回被選元素的所有直接子元素??蛇x參數(shù)來過濾對子元素的搜索

$(selector).find() – 返回被選元素的后代元素,一路向下直到最后一個后代,可選參數(shù)來過濾對后后代元素的搜索

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

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

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

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

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

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

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

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

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

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

注:parent()、next()、prev()、first()、last()、eq()只返回一個元素。返回元素集合的函數(shù)都可以傳傳參數(shù)篩選,比如:parents()、siblings()、nextAll()、prevAll()、siblings()。

$(selector).each() 對對象進行迭代,為每個元素執(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() – 在被選元素的開頭插入內(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對CSS的操作

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

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

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

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

$(selector).toggleClass() – 對被選元素進行添加/刪除類的切換操作

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

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

6、jQuery其他知識點

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

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

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

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

$沖突的解決辦法

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

$.noConflict();

//自定義變量

var jq = $.noConflict();

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

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

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

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

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

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

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

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

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