樣式篇

$(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.target
jQuery事件對象的屬性:
event.type：獲取事件的類型 event.pageX 和 event.pageY event.stopPropagation() 方法：阻止事件冒泡

?

轉載于:https://blog.51cto.com/kiujyhgt/1916714

總結

以上是生活随笔為你收集整理的jQuery 基础总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。