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ù)