jQuery學習和知識點總結概括

時間 2019-12-13

原文原文鏈接

jQuery目前在Web前端開發所佔的比重愈來愈高，在咱們jQuery學習和開發的過程當中都會去使用。jQuery幫咱們解決了瀏覽器之間JS一些不兼容的地方和簡化了原生JS對DOM的操做。下面把PHP程序員雷雪松對jQuery的知識點總結和概括分享給你們。javascript

一、jQuery簡介
jQuery是一個實用的JavaScript庫。jQuery極大地簡化了JS對DOM的操做，實現一些經常使用的方法，jQuery還能夠鏈式操做。css

二、jQuery的基本用法html

//引入jQuery文件，能夠本地也能夠遠程
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
//當文檔完成加載完時觸發，避免獲取dom對象時，dom對象尚未加載
$(document).ready(function(){
//寫js語句或者jQuery函數
$("p").click(function(){
$(this).hide();
});
});
</script>

三、jQuery經常使用的選擇器和事件，和CSS的選擇器很類似。
$() – 使用CSS選擇器匹配元素
jQuery的事件和JS的事件基本相同，在使用的時候，去掉JS事件前面的on便可。
jQuery經常使用的事件：
load：當文檔加載時運行腳本
blur：當窗口失去焦點時運行腳本
focus：當窗口得到焦點時運行腳本
change：當元素改變時運行腳本
submit：當提交表單時運行腳本
keydown：當按下按鍵時運行腳本
keypress：當按下並鬆開按鍵時運行腳本
keyup：當鬆開按鍵時運行腳本
click：當單擊鼠標時運行腳本
dblclick：當雙擊鼠標時運行腳本
mousedown：當按下鼠標按鈕時運行腳本
mousemove：當鼠標指針移動時運行腳本
mouseout：當鼠標指針移出元素時運行腳本
mouseover：當鼠標指針移至元素之上時運行腳本
mouseup：當鬆開鼠標按鈕時運行腳本
abort：當發生停止事件時運行腳本前端

四、jQuery經常使用的效果方法
$(selector).hide() – 隱藏被選的元素
$(selector).show() – 顯示被選的元素
$(selector).toggle() – 對被選元素進行隱藏和顯示的切換
$(selector).slideDown() – 經過調整高度來滑動顯示被選元素
$(selector).slideToggle() – 對被選元素進行滑動隱藏和滑動顯示的切換
$(selector).slideUp() – 經過調整高度來滑動隱藏被選元素
$(selector).fadeIn() – 逐漸改變被選元素的不透明度，從隱藏到可見
$(selector).fadeOut() – 逐漸改變被選元素的不透明度，從可見到隱藏
$(selector).fadeTo() – 把被選元素逐漸改變至給定的不透明度
$(selector).animate() – 對被選元素應用「自定義」的動畫java

四、jQuery經常使用的DOM元素操做方法
$(selector).parent() – 返回被選元素的直接父元素。
$(selector).parents() – 返回被選元素的全部祖先元素，它一路向上直到文檔的根元素 (<html>)，可選參數來過濾對祖先元素的搜索
$(selector).children() – 返回被選元素的全部直接子元素。可選參數來過濾對子元素的搜索
$(selector).find() – 返回被選元素的後代元素，一路向下直到最後一個後代，可選參數來過濾對後後代元素的搜索
$(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()只返回一個元素。返回元素集合的函數均可以傳傳參數篩選，好比：parents()、siblings()、nextAll()、prevAll()、siblings()。程序員

$(selector).each() 對對象進行迭代，爲每一個元素執行函數
$(selector).toArray() 以數組的形式返回 jQuery 選擇器匹配的元素
$(selector).size() 返回被 jQuery 選擇器匹配的元素的數量ajax

$(selector).text() – 設置或返回所選元素的文本內容
$(selector).html() – 設置或返回所選元素的內容（包括 HTML 標記）
$(selector).val() – 設置或返回表單字段的值
$(selector).append() – 在被選元素的結尾插入內容
$(selector).prepend() – 在被選元素的開頭插入內容
$(selector).after() – 在被選元素以後插入內容
$(selector).before() – 在被選元素以前插入內容
$(selector).remove() – 刪除被選元素（及其子元素）
$(selector).empty() – 從被選元素中刪除子元素
$(selector).removeAttr() – 從全部匹配的元素中移除指定的屬性。
$(selector).clone() – 建立匹配元素集合的副本
$(selector).load() – 從服務器加載數據，而後把返回到 HTML 放入匹配元素數組

五、jQuery對CSS的操做
$(selector).height() – 設置或返回匹配元素的高度。
$(selector).width() – 設置或返回匹配元素的寬度。
$(selector).addClass() – 向被選元素添加一個或多個類
$(selector).removeClass() – 從被選元素刪除一個或多個類
$(selector).toggleClass() – 對被選元素進行添加/刪除類的切換操做
$(selector).css() – 設置或返回樣式屬性
$(selector).hasClass() 檢查匹配的元素是否擁有指定的類。瀏覽器

六、jQuery其餘知識點
$(selector).data() – 存儲與匹配元素相關的任意數據
$(selector).removeData() – 移除以前存放的數據
$(selector).serialize() – 將表單內容序列化爲字符串
$(selector).serializeArray() – 序列化表單元素，返回 JSON 數據結構數據服務器

$衝突的解決辦法

//釋放$標識符的控制，使用默認的變量jQuery
$.noConflict();
//自定義變量
var jq = $.noConflict();

七、jQuery Ajax 操做函數
$.ajax() – 執行Ajax異步請求
$.get() – 使用GET請求從服務器獲取數據
$.getJSON() – 使用GET從服務器請求JSON編碼數據
$.getScript() – 使用GET從服務器請求JavaScript文件並執行該文件
$.post() – 使用POST請求從服務器獲取數據

原文來源：http://www.leixuesong.cn/2496