jQuery 基礎總結

樣式篇

$(document).ready 的意思是等頁面的文檔（document）中的節點都加載完畢後，在執行後續的代碼;

jQuery對象轉化成DOM對象：
jQuery是一個類數組對象，DOM對象就是一個單獨的DOM元素。
jQuery自帶的get()方法：轉換爲DOM對象

DOM對象轉化成jQuery對象：$

基本選擇器：id選擇器 類選擇器 元素選擇器

層級選擇器： 
子選擇器：$('div > p') 選擇全部div元素裏面的第一個子元素P
後代選擇器：$('div p').css("border", "1px groove red");
相鄰兄弟選擇器：(".prev+div")選取prev後面的第一個的div兄弟節點一般相鄰選擇器：(".prev+div")選取prev後面的第一個的div兄弟節點通常相鄰選擇器：(".prev ~ div")選取prev後面的全部的div兄弟節點

基本篩選器
:first/:last/:even/:odd 注意jQuery合集都是從0開始索引 :even偶數 :odd奇數
:eq/:gt/:lt   :gt大於 :lt小於

內容篩選器
:contains/:has       （contains查找包含「指定文本」的元素，has查找包含「指定元素」的元素）
:parent/:empty

可見性篩選選擇器
:visible/:hidden

隱藏
1.CSS display的值是none。
2.type="hidden"的表單元素。
3.寬度和高度都顯式設置爲0。
4.一個祖先元素是隱藏的，該元素是不會在頁面上顯示
5.CSS visibility的值是hidden
6.CSS opacity的指是0                 5.6兩種被認爲是可見的，由於他們仍然佔用空間佈局

屬性篩選選擇器
[att=val]、[att]、[att|=val]、[att~=val] [att^=val]、[att*=val]、[att$=val]、[att!=val]

在這麼多屬性選擇器中[attr="value"]和[attr*="value"]是最實用的
[attr="value"]能幫咱們定位不一樣類型的元素，特別是表單form元素的操做，好比說input[type="text"],input[type="checkbox"]等
[attr*="value"]能在網站中幫助咱們匹配不一樣類型的文件

子元素篩選選擇器
:first-child、:last-child、:only-child、:nth-child、:nth-last-child

表單元素選擇器
input、text、password、radio、checkbox、submit、p_w_picpath、reset、button、file

表單對象屬性篩選選擇器
enabled、disabled checked、selected(option)

特殊選擇器this

.attr() .removeAttr()
1.attr(傳入屬性名)：獲取屬性的值
2.attr(屬性名, 屬性值)：設置屬性的值
3.attr(屬性名,函數值)：設置屬性的函數值
4.attr(attributes)：給指定元素設置多個屬性值，即：{屬性名一: 「屬性值一」 , 屬性名二: 「屬性值二」 , … … }

.html() .text() .val()
.html處理的是元素內容，.text處理的是文本內容,.val()是用來處理表單

.addClss():添加一個樣式類名到元素上
.removeClass():刪除樣式
.toggleClass():結合上面兩點

樣式操做.css()
獲取：
.css( propertyName ) ：獲取匹配元素集合中的第一個元素的樣式屬性的計算值
.css( propertyNames )：傳遞一組數組，返回一個對象結果
設置：
.css(propertyName, value )：設置CSS
.css( propertyName, function )：能夠傳入一個回調函數，返回取到對應的值進行處理
.css( properties )：能夠傳一個對象，同時設置多個樣式

 

回到頂部(go to top)

DOM篇

jQuery節點建立
:$("<div id='test' class='aaron'>我是文本節點</div>")

DOM節點插入
內部插入append()與appendTo()
:目標的位置不一樣

經過before與after添加元素（內容在後，元素在前）
:before,在匹配元素以前增長多參數、after,在匹配元素以前增長多參數

經過prepend與prependTo添加元素（目標位置不一樣）
：prepend()向每一個匹配的元素內部前置內容；append()向每一個匹配的元素內部追加內容

經過insertBefore與insertAfter添加元素（內容在前，元素在後）

DOM節點刪除
經過empty移除元素
：移除內容，可是id，class屬性沒有刪除

經過remove移除元素
: 移除內容和屬性

保留數據的刪除操做detach()

DOM拷貝clone()
//clone處理一：("div").clone()//只克隆了結構，事件丟失//clone處理二：("div").clone()//只克隆告終構，事件丟失//clone處理二：("div").clone(true) //結構、事件與數據都克隆

DOM替換replaceWith()和replaceAll()：
replaceWith:內容在後面 replaceAll相反

DOM包裹wrap()方法:增長一個父元素
unwrap()：與wrap()相反
wrapAll()方法：給集合中的元素分別包裹
wrapInner()方法：能夠理解成增長一個內元素

jquery遍歷
children方法()：尋找第一級子元素
find方法()：尋找後代元素

parent方法()：向上查找一級
parents方法():向上查找多級找到符合條件的多個
closest()方法:向上查找多級找到最近的那個

next()方法：緊鄰的後面同輩元素的元素集合
prev()方法：緊鄰的前面同輩元素的元素集合
siblings()：每個元素緊鄰的前面後面同輩元素

add()方法：往jQuery合集中添加一新的元素

each():
$("li").each(function(index, element) {
}):index是索引 △：從0開始；element:是對應的節點

 

回到頂部(go to top)

事件篇

①鼠標事件
<div id="test">點擊觸發<div>
$("#text").click(11111,function(e) {
//this指向 div元素
//e.date => 11111 傳遞數據
});

click與dbclick事件

mousedown與mouseup事件：兩個合成click事件

mousemove事件

mouseover與mouseout事件
mouseenter與mouseleave事件:和上一種的區別冒泡的方式處理問題（不支持冒泡）
hover事件：mouseenter事件和mouseleave事件合起來

②表單事件
focusin事件：當一個元素或內部任何一個元素得到焦點的時候
focusout事件：當一個元素，或者其內部任何一個元素失去焦點的時候

focus與blur事件：不支持冒泡，focusin與focusout支持冒泡

change事件：能夠監聽<input> <select> <textarea>改變的動做

select事件：只用於<input>元素與<textarea>元素

submit事件：（例如：驗證表單輸入的正確性，若是錯誤就阻止提交，重新輸入）
return false; //阻止提交

keydown()與keyup()事件:鍵盤按下與鬆手

on()的多事件綁定:
多個事件綁定同一個函數:("#elem").on("mouseover mouseout",function(){ }); 多個事件綁定不一樣函數("#elem").on("mouseover mouseout",function(){ }); 多個事件綁定不一樣函數("#elem").on({
mouseover:function(){}, 
mouseout:function(){},
});

on()的高級用法:委託機制 $("div").on("click","p",fn)

卸載事件off()方法jQuery事件對象:event.targetjQuery事件對象的屬性:event.type：獲取事件的類型 event.pageX 和 event.pageY event.stopPropagation() 方法：阻止事件冒泡