4.jQuery

jQueryHelloWord體驗(yàn)

??

??

jQuery對(duì)象與DOM對(duì)象

??

DOM處理：

??

jQuery處理：

??

jQuery對(duì)象轉(zhuǎn)化成DOM對(duì)象

利用數(shù)組下標(biāo)的方式讀取到j(luò)Query中的DOM對(duì)象

??

通過jQuery自帶的get()方法

??

DOM對(duì)象轉(zhuǎn)化成jQuery對(duì)象

通過$(dom)方法將普通的dom對(duì)象加工成jQuery對(duì)象之后倍宾，我們就可以調(diào)用jQuery的方法了

??

jQuery選擇器之id選擇器

??

jQuery選擇器之類選擇器

??

類選擇器，相對(duì)id選擇器來說，效率相對(duì)會(huì)低一點(diǎn)效床，但是優(yōu)勢(shì)就是可以多選

jQuery選擇器之元素選擇器

??

jQuery選擇器之全選擇器（*選擇器）

??

??

jQuery選擇器之層級(jí)選擇器

選擇器中的層級(jí)選擇器就是用來處理這種關(guān)系

子元素? 后代元素? 兄弟元素? 相鄰元素

??

jQuery選擇器之基本篩選選擇器

??

??

??

??

jQuery選擇器之內(nèi)容篩選選擇器

??

??

??

??

jQuery選擇器之可見性篩選選擇器

??

??

jQuery選擇器之屬性篩選選擇器

??

??

??

jQuery選擇器之子元素篩選選擇器

??

??

??

jQuery選擇器之表單元素選擇器

??

16jQuery選擇器之表單對(duì)象屬性篩選選擇器

??

注意事項(xiàng)：

選擇器適用于復(fù)選框和單選框夫椭，對(duì)于下拉框元素, 使用 :selected 選擇器

2. 在某些瀏覽器中足删，選擇器:checked可能會(huì)錯(cuò)誤選取到<option>元素，所以保險(xiǎn)起見換用選擇器input:checked，確保只會(huì)選取<input>元素

??

??

17.jQuery選擇器之特殊選擇器this

??

??

??

18.jQuery的屬性與樣式之.attr()與.removeAttr()

attr()有4個(gè)表達(dá)式

??

removeAttr()刪除方法

??

注意的問題：

dom中有個(gè)概念的區(qū)分：Attribute和Property翻譯出來都是“屬性”衅疙，《js高級(jí)程序設(shè)計(jì)》書中翻譯為“特性”和“屬性”。簡(jiǎn)單理解鸳慈，Attribute就是dom節(jié)點(diǎn)自帶的屬性

例如：html中常用的id饱溢、class、title蝶涩、align等：

而Property是這個(gè)DOM元素作為對(duì)象理朋，其附加的內(nèi)容，例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法進(jìn)行取值或賦值等

??

19.jQuery的屬性與樣式之.html()及.text()

1.html()方法

??

2.text()方法

??

3.html與.text的異同:

??

??

20.jQuery的屬性與樣式之.val()

.val()方法

??

??

.html(),.text()和.val()的差異總結(jié)：?

.html(),.text(),.val()三種方法都是用來讀取選定元素的內(nèi)容绿聘；只不過.html()是用來讀取元素的html內(nèi)容（包括html標(biāo)簽），.text()用來讀取元素的純文本內(nèi)容次舌，包括其后代元素熄攘，.val()是用來讀取表單元素的"value"值。其中.html()和.text()方法不能使用在表單元素上,而.val()只能使用在表單元素上彼念；另外.html()方法使用在多個(gè)元素上時(shí)挪圾，只讀取第一個(gè)元素；.val()方法和.html()相同逐沙，如果其應(yīng)用在多個(gè)元素上時(shí)哲思，只能讀取第一個(gè)表單元素的"value"值，但是.text()和他們不一樣吩案，如果.text()應(yīng)用在多個(gè)元素上時(shí)棚赔，將會(huì)讀取所有選中元素的文本內(nèi)容。

2 .html(htmlString),.text(textString)和.val(value)三種方法都是用來替換選中元素的內(nèi)容徘郭，如果三個(gè)方法同時(shí)運(yùn)用在多個(gè)元素上時(shí)靠益，那么將會(huì)替換所有選中元素的內(nèi)容。

3 .html(),.text(),.val()都可以使用回調(diào)函數(shù)的返回值來動(dòng)態(tài)的改變多個(gè)元素的內(nèi)容残揉。

??

21.jQuery的屬性與樣式之增加樣式.addClass()

.addClass( className )方法

.addClass( className ) : 為每個(gè)匹配元素所要增加的一個(gè)或多個(gè)樣式名

.addClass( function(index, currentClass) ) : 這個(gè)函數(shù)返回一個(gè)或更多用空格隔開的要增加的樣式名

??

??

22.jQuery的屬性與樣式之刪除樣式.removeClass()

.removeClass( )方法

.removeClass( [className ] )：每個(gè)匹配元素移除的一個(gè)或多個(gè)用空格隔開的樣式名

.removeClass( function(index, class) ) ： 一個(gè)函數(shù)胧后，返回一個(gè)或多個(gè)將要被移除的樣式名

??

??

23.jQuery的屬性與樣式之切換樣式.toggleClass()

.toggleClass( )方法：在匹配的元素集合中的每個(gè)元素上添加或刪除一個(gè)或多個(gè)樣式類,取決于這個(gè)樣式類是否存在或值切換屬性。即：如果存在（不存在）就刪除（添加）一個(gè)類

.toggleClass( className )：在匹配的元素集合中的每個(gè)元素上用來切換的一個(gè)或多個(gè)（用空格隔開）樣式類名

.toggleClass( className, switch )：一個(gè)布爾值抱环，用于判斷樣式是否應(yīng)該被添加或移除

.toggleClass( [switch ] )：一個(gè)用來判斷樣式類添加還是移除的 布爾值

.toggleClass( function(index, class, switch) [, switch ] )：用來返回在匹配的元素集合中的每個(gè)元素上用來切換的樣式類名的一個(gè)函數(shù)壳快。接收元素的索引位置和元素舊的樣式類作為參數(shù)

??

??

24.jQuery的屬性與樣式之樣式操作.css()

??

??

??

25.jQuery的屬性與樣式之.css()與.addClass()設(shè)置樣式的區(qū)別

??

??

26.jQuery的屬性與樣式之元素的數(shù)據(jù)存儲(chǔ)

jQuery提供的存儲(chǔ)接口

jQuery.data( element, key, value )? //靜態(tài)接口,存數(shù)據(jù)

jQuery.data( element, key )? //靜態(tài)接口,取數(shù)據(jù)

.data( key, value )?//實(shí)例接口,存數(shù)據(jù)

.data( key ) //實(shí)例接口,取數(shù)據(jù)

2個(gè)方法在使用上存取都是通一個(gè)接口，傳遞元素镇草，鍵值數(shù)據(jù)眶痰。在jQuery的官方文檔中，建議用.data()方法來代替陶夜。

同樣的也提供2個(gè)對(duì)應(yīng)的刪除接口凛驮，使用上與data方法其實(shí)是一致的，只不過是一個(gè)是增加一個(gè)是刪除罷了

jQuery.removeData( element [, name ] )

.removeData( [name ] )

參考右邊的代碼區(qū)域条辟，2個(gè)代碼段分別描述了靜態(tài)與實(shí)例data的使用

??

二黔夭、DOM操作

DOM創(chuàng)建節(jié)點(diǎn)及節(jié)點(diǎn)屬性

??

jQuery節(jié)點(diǎn)創(chuàng)建與屬性的處理

??

??

DOM內(nèi)部插入append()與appendTo()

??

append：這個(gè)操作與對(duì)指定的元素執(zhí)行原生的appendChild方法宏胯，將它們添加到文檔中的情況類似。

appendTo：實(shí)際上本姥，使用這個(gè)方法是顛倒了常規(guī)的$(A).append(B)的操作肩袍，即不是把B追加到A中，而是把A追加到B中婚惫。

append()前面是被插入的對(duì)象氛赐，后面是要在對(duì)象內(nèi)插入的元素內(nèi)容

appendTo()前面是要插入的元素內(nèi)容，而后面是被插入的對(duì)象

??

DOM外部插入after()與before()

??

??

DOM內(nèi)部插入prepend()與prependTo()

在元素內(nèi)部進(jìn)行操作的方法先舷，除了在被選元素的結(jié)尾（仍然在內(nèi)部）通過append與appendTo插入指定內(nèi)容外艰管，相應(yīng)的還可以在被選元素之前插入，jQuery提供的方法是prepend與prependTo

選擇器的描述：

??

這里總結(jié)下內(nèi)部操作四個(gè)方法的區(qū)別：

append()向每個(gè)匹配的元素內(nèi)部追加內(nèi)容

prepend()向每個(gè)匹配的元素內(nèi)部前置內(nèi)容

appendTo()把所有匹配的元素追加到另一個(gè)指定元素的集合中

prependTo()把所有匹配的元素前置到另一個(gè)指定的元素集合中

??

DOM外部插入insertAfter()與insertBefore()

??

before蒋川、after與insertBefore牲芋。insertAfter的除了目標(biāo)與位置的不同外，后面的不支持多參數(shù)處理

??

DOM節(jié)點(diǎn)刪除之empty()的基本用法

empty 顧名思義捺球，清空方法缸浦，但是與刪除又有點(diǎn)不一樣，因?yàn)樗灰瞥?指定元素中的所有子節(jié)點(diǎn)氮兵。這個(gè)方法不僅移除子元素（和其他后代元素）裂逐，同樣移除元素里的文本。因?yàn)槠唬鶕?jù)說明房维，元素里任何文本字符串都被看做是該元素的子節(jié)點(diǎn)秃症。請(qǐng)看下面的HTML：

<div class="hello"><p>慕課網(wǎng)</p></div>

如果我們通過empty方法移除里面div的所有元素叁执，它只是清空內(nèi)部的html代碼单匣，但是標(biāo)記仍然留在DOM中

//通過empty處理

$('.hello').empty()

//結(jié)果：

慕課網(wǎng)

??

DOM節(jié)點(diǎn)刪除之remove()的有參用法和無參用法

remove與empty一樣，都是移除元素的方法铃绒，但是remove會(huì)將元素自身移除鸽照，同時(shí)也會(huì)移除元素內(nèi)部的一切，包括綁定的事件及與該元素相關(guān)的jQuery數(shù)據(jù)颠悬。

remove比empty好用的地方就是可以傳遞一個(gè)選擇器表達(dá)式用來過濾將被移除的匹配元素集合矮燎，可以選擇性的刪除指定的節(jié)點(diǎn)

我們可以通過$()選擇一組相同的元素，然后通過remove（）傳遞篩選的規(guī)則赔癌，從而這樣處理

對(duì)比右邊的代碼區(qū)域诞外，我們可以通過類似于這樣處理

$("p").filter(":contains('3')").remove()

??

9. DOM節(jié)點(diǎn)刪除之empty和remove區(qū)別

empty方法

嚴(yán)格地講，empty()方法并不是刪除節(jié)點(diǎn)灾票，而是清空節(jié)點(diǎn)峡谊，它能清空元素中的所有后代節(jié)點(diǎn)

empty不能刪除自己本身這個(gè)節(jié)點(diǎn)

remove方法

該節(jié)點(diǎn)與該節(jié)點(diǎn)所包含的所有后代節(jié)點(diǎn)將同時(shí)被刪除

提供傳遞一個(gè)篩選的表達(dá)式，刪除指定合集中的元素

??

10.DOM節(jié)點(diǎn)刪除之保留數(shù)據(jù)的刪除操作detach()

希望臨時(shí)刪除頁面上的節(jié)點(diǎn)，但是又不希望節(jié)點(diǎn)上的數(shù)據(jù)與事件丟失既们，并且能在下一個(gè)時(shí)間段讓這個(gè)刪除的節(jié)點(diǎn)顯示到頁面濒析，這時(shí)候就可以使用detach方法來處理

("div").detach()這一句會(huì)移除對(duì)象，僅僅是顯示效果沒有了啥纸。但是內(nèi)存中還是存在

的号杏。當(dāng)你append之后，又重新回到了文檔流中斯棒。就又顯示出來了盾致。

當(dāng)然這里要特別注意，detach方法是JQuery特有的荣暮，所以它只能處理通過JQuery的方法綁定的事件或者數(shù)據(jù)

??

11.DOM節(jié)點(diǎn)刪除之detach()和remove()區(qū)別

remove：移除節(jié)點(diǎn)

無參數(shù)庭惜，移除自身整個(gè)節(jié)點(diǎn)以及該節(jié)點(diǎn)的內(nèi)部的所有節(jié)點(diǎn)，包括節(jié)點(diǎn)上事件與數(shù)據(jù)

有參數(shù)穗酥，移除篩選出的節(jié)點(diǎn)以及該節(jié)點(diǎn)的內(nèi)部的所有節(jié)點(diǎn)蜈块，包括節(jié)點(diǎn)上事件與數(shù)據(jù)

detach：移除節(jié)點(diǎn)

移除的處理與remove一致

與remove()不同的是，所有綁定的事件迷扇、附加的數(shù)據(jù)等都會(huì)保留下來

例如：$("p").detach()這一句會(huì)移除對(duì)象，僅僅是顯示效果沒有了爽哎。但是內(nèi)存中還是存在的蜓席。當(dāng)你append之后，又重新回到了文檔流中课锌。就又顯示出來了厨内。

12.DOM拷貝clone()

??

13.DOM替換replaceWith()和replaceAll()

.replaceWith( newContent )：用提供的內(nèi)容替換集合中所有匹配的元素并且返回被刪除元素的集合

替換第二段的節(jié)點(diǎn)與內(nèi)容

$("p:eq(1)").replaceWith('<a style="color:red">替換第二段的內(nèi)容</a>')

.replaceAll( target ) ：用集合的匹配元素替換每個(gè)目標(biāo)元素

.replaceAll()和.replaceWith()功能類似，但是目標(biāo)和源相反渺贤，用上述的HTML結(jié)構(gòu)雏胃，我們用replaceAll處理

$('<a style="color:red">替換第二段的內(nèi)容</a>').replaceAll('p:eq(1)')

總結(jié)：

.replaceAll()和.replaceWith()功能類似，主要是目標(biāo)和源的位置區(qū)別

.replaceWith()與.replaceAll() 方法會(huì)刪除與節(jié)點(diǎn)相關(guān)聯(lián)的所有數(shù)據(jù)和事件處理程序

.replaceWith()方法志鞍，和大部分其他jQuery方法一樣瞭亮，返回jQuery對(duì)象，所以可以和其他方法鏈接使用

.replaceWith()方法返回的jQuery對(duì)象引用的是替換前的節(jié)點(diǎn)固棚，而不是通過replaceWith/replaceAll方法替換后的節(jié)點(diǎn)

??

14.DOM包裹wrap()方法

wrap( wrappingElement )：在集合中匹配的每個(gè)元素周圍包裹一個(gè)HTML結(jié)構(gòu)

簡(jiǎn)單的看一段代碼：

<p>p元素</p>

給p元素增加一個(gè)div包裹

$('p').wrap('<div></div>')

最后的結(jié)構(gòu)统翩，p元素增加了一個(gè)父div的結(jié)構(gòu)

p元素

.wrap( function ) ：一個(gè)回調(diào)函數(shù)，返回用于包裹匹配元素的 HTML 內(nèi)容或 jQuery 對(duì)象

使用后的效果與直接傳遞參數(shù)是一樣此洲，只不過可以把代碼寫在函數(shù)體內(nèi)部厂汗，寫法不同而已

以第一個(gè)案例為例：

$('p').wrap(function() {

return '

})

注意：

.wrap()函數(shù)可以接受任何字符串或?qū)ο笪厥Γ梢詡鬟f給$()工廠函數(shù)來指定一個(gè)DOM結(jié)構(gòu)娶桦。這種結(jié)構(gòu)可以嵌套了好幾層深，但應(yīng)該只包含一個(gè)核心的元素。每個(gè)匹配的元素都會(huì)被這種結(jié)構(gòu)包裹衷畦。該方法返回原始的元素集栗涂，以便之后使用鏈?zhǔn)椒椒ā?/p>

15.DOM包裹unwrap()方法

jQuery提供了unwrap方法很方便的處理了這個(gè)問題

$('p').unwrap();

找到p元素，然后調(diào)用unwrap方法霎匈，這樣只會(huì)刪除父輩div元素了

??

DOM包裹wrapAll()方法

.wrapAll( wrappingElement )：給集合中匹配的元素增加一個(gè)外面包裹HTML結(jié)構(gòu)

簡(jiǎn)單的看一段代碼：

p元素

p元素

給所有p元素增加一個(gè)div包裹

$('p').wrapAll('<div></div>')

最后的結(jié)構(gòu)戴差，2個(gè)P元素都增加了一個(gè)父div的結(jié)構(gòu)

p元素

p元素

.wrapAll( function ) ：一個(gè)回調(diào)函數(shù)，返回用于包裹匹配元素的 HTML 內(nèi)容或 jQuery 對(duì)象

通過回調(diào)的方式可以單獨(dú)處理每一個(gè)元素

以上面案例為例铛嘱，

$('p').wrapAll(function() {

return '

})

以上的寫法的結(jié)果如下暖释，等同于warp的處理了

p元素

p元素

注意：

.wrapAll()函數(shù)可以接受任何字符串或?qū)ο螅梢詡鬟f給$()工廠函數(shù)來指定一個(gè)DOM結(jié)構(gòu)墨吓。這種結(jié)構(gòu)可以嵌套多層球匕，但是最內(nèi)層只能有一個(gè)元素。所有匹配元素將會(huì)被當(dāng)作是一個(gè)整體帖烘，在這個(gè)整體的外部用指定的 HTML 結(jié)構(gòu)進(jìn)行包裹亮曹。

??

DOM包裹wrapInner()方法

.wrapInner( wrappingElement )：給集合中匹配的元素的內(nèi)部，增加包裹的HTML結(jié)構(gòu)

聽起來有點(diǎn)繞秘症，可以用個(gè)簡(jiǎn)單的例子描述下照卦，簡(jiǎn)單的看一段代碼：

給所有元素增加一個(gè)p包裹

$('div').wrapInner('<p></p>')

最后的結(jié)構(gòu)，匹配的di元素的內(nèi)部元素被p給包裹了

p元素

p元素

.wrapInner( function ) ：允許我們用一個(gè)callback函數(shù)做參數(shù)乡摹，每次遇到匹配元素時(shí)役耕，該函數(shù)被執(zhí)行，返回一個(gè)DOM元素聪廉，jQuery對(duì)象瞬痘，或者HTML片段，用來包住匹配元素的內(nèi)容

以上面案例為例板熊，

$('div').wrapInner(function() {

return '';

})

以上的寫法的結(jié)果如下框全，等同于第一種處理了

p元素

p元素

注意：

當(dāng)通過一個(gè)選擇器字符串傳遞給.wrapInner() 函數(shù)，其參數(shù)應(yīng)該是格式正確的

HTML干签，并且 HTML 標(biāo)簽應(yīng)該是被正確關(guān)閉的津辩。

??

18.jQuery遍歷之children()方法

.children(selector) 方法是返回匹配元素集合中每個(gè)元素的所有子元素（僅兒子輩，這里可以理解為就是父親-兒子的關(guān)系）

理解節(jié)點(diǎn)查找關(guān)系：

代碼如果是$("div").children()筒严，那么意味著只能找到ul丹泉，因?yàn)閐iv與ul是父子關(guān)系，li與div是祖輩關(guān)系鸭蛙，因此無法找到摹恨。

children()無參數(shù)

允許我們通過在DOM樹中對(duì)這些元素的直接子元素進(jìn)行搜索，并且構(gòu)造一個(gè)新的匹配元素的jQuery對(duì)象

注意：jQuery是一個(gè)合集對(duì)象娶视，所以通過children是匹配合集中每一給元素的

第一級(jí)子元素

.children()方法選擇性地接受同一類型選擇器表達(dá)式

$("div").children(".selected")

同樣的也是因?yàn)閖Query是合集對(duì)象晒哄，可能需要對(duì)這個(gè)合集對(duì)象進(jìn)行一定的篩選睁宰，找出目標(biāo)元素，所以允許傳一個(gè)選擇器的表達(dá)式

??

19.jQuery遍歷之find()方法

children是父子關(guān)系查找寝凌，find是后代關(guān)系（包含父子關(guān)系）

.find()方法要注意的知識(shí)點(diǎn)：

find是遍歷當(dāng)前元素集合中每個(gè)元素的后代柒傻。只要符合，不管是兒子輩较木，孫子輩都可以红符。

與其他的樹遍歷方法不同，選擇器表達(dá)式對(duì)于 .find() 是必需的參數(shù)伐债。如果我們需要實(shí)現(xiàn)對(duì)所有后代元素的取回预侯，可以傳遞通配選擇器 '*'。

find只在后代中遍歷峰锁，不包括自己萎馅。

選擇器 context 是由 .find() 方法實(shí)現(xiàn)的；因此虹蒋，$('.item-ii').find('li') 等價(jià)于 $('li', '.item-ii')(找到類名為item-ii的標(biāo)簽下的li標(biāo)簽)糜芳。

注意重點(diǎn)：

.find()和.children()方法是相似的1.children只查找第一級(jí)的子節(jié)點(diǎn)2.find查

找范圍包括子節(jié)點(diǎn)的所有后代節(jié)點(diǎn)

??

20.jQuery遍歷之parent()方法

因?yàn)槭歉冈兀@個(gè)方法只會(huì)向上查找一級(jí)

理解節(jié)點(diǎn)查找關(guān)系：

查找ul的父元素div, $(ul).parent()魄衅，就是這樣簡(jiǎn)單的表達(dá)

parent()無參數(shù)

parent()方法允許我們能夠在DOM樹中搜索到這些元素的父級(jí)元素峭竣，從有序的向上匹配元素，并根據(jù)匹配的元素創(chuàng)建一個(gè)新的 jQuery 對(duì)象

注意：jQuery是一個(gè)合集對(duì)象晃虫，所以通過parent是匹配合集中每一個(gè)元素的父元素

parent()方法選擇性地接受同一型選擇器表達(dá)式

同樣的也是因?yàn)閖Query是合集對(duì)象邪驮，可能需要對(duì)這個(gè)合集對(duì)象進(jìn)行一定的篩選，找出目標(biāo)元素傲茄，所以允許傳一個(gè)選擇器的表達(dá)式

??

21.jQuery遍歷之parents()方法

如果想快速查找合集里面的每一個(gè)元素的所有祖輩元素，此時(shí)可以用parents()方法

parents()無參數(shù)

parents()方法允許我們能夠在DOM樹中搜索到這些元素的祖先元素沮榜，從有序的向上匹配元素盘榨，并根據(jù)匹配的元素創(chuàng)建一個(gè)新的 jQuery 對(duì)象;

返回的元素秩序是從離他們最近的父級(jí)元素開始的

注意：jQuery是一個(gè)合集對(duì)象，所以通過parent是匹配合集中所有元素的祖輩元素

parents()方法選擇性地接受同一型選擇器表達(dá)式

同樣的也是因?yàn)閖Query是合集對(duì)象蟆融，可能需要對(duì)這個(gè)合集對(duì)象進(jìn)行一定的篩選

草巡，找出目標(biāo)元素，所以允許傳一個(gè)選擇器的表達(dá)式

注意事項(xiàng)：

1 .parents()和.parent()方法是相似的型酥，但后者只是進(jìn)行了一個(gè)單級(jí)的DOM樹查找

2? $( "html" ).parent()方法返回一個(gè)包含document的集合山憨，而$( "html" )

.parents()返回一個(gè)空集合。

??

22.jQuery遍歷之closest()方法

closest()方法接受一個(gè)匹配元素的選擇器字符串

從元素本身開始弥喉，在DOM 樹上逐級(jí)向上級(jí)元素匹配郁竟，并返回最先匹配的祖先元素

例如：在div元素中，往上查找所有的li元素由境，可以這樣表達(dá)

$("div").closet("li')

注意：jQuery是一個(gè)合集對(duì)象棚亩，所以通過closest是匹配合集中每一個(gè)元素的祖先元素

closest()方法給定的jQuery集合或元素來過濾元素

同樣的也是因?yàn)閖Query是合集對(duì)象蓖议，可能需要對(duì)這個(gè)合集對(duì)象進(jìn)行一定的篩選，找出目標(biāo)元素讥蟆，所以允許傳一個(gè)jQuery的對(duì)象

注意事項(xiàng)：在使用的時(shí)候需要特別注意下

粗看.parents()和.closest()是有點(diǎn)相似的勒虾，都是往上遍歷祖輩元素，但是兩者還是有區(qū)別的瘸彤，否則就沒有存在的意義了

起始位置不同：.closest開始于當(dāng)前元素 .parents開始于父元素

遍歷的目標(biāo)不同：.closest要找到指定的目標(biāo)修然，.parents遍歷到文檔根元素，closest向上查找质况，直到找到一個(gè)匹配的就停止查找愕宋，parents一直查找到根元素，并將匹配的元素加入集合

結(jié)果不同：.closest返回的是包含零個(gè)或一個(gè)元素的jquery對(duì)象拯杠，parents返回的是包含零個(gè)或一個(gè)或多個(gè)元素的jquery對(duì)象

??

23.jQuery遍歷之next()方法

jQuery是一個(gè)合集對(duì)象掏婶，如果想快速查找指定元素集合中每一個(gè)元素緊鄰的后面同輩元素的元素集合，此時(shí)可以用next()方法

next()無參數(shù)

允許我們找遍元素集合中緊跟著這些元素的直接兄弟元素潭陪，并根據(jù)匹配的元素創(chuàng)建一個(gè)新的 jQuery 對(duì)象雄妥。

注意：jQuery是一個(gè)合集對(duì)象，所以通過next匹配合集中每一個(gè)元素的下一個(gè)兄弟元素

next()方法選擇性地接受同一類型選擇器表達(dá)式

同樣的也是因?yàn)閖Query是合集對(duì)象依溯，可能需要對(duì)這個(gè)合集對(duì)象進(jìn)行一定的篩選老厌，找出目標(biāo)元素，所以允許傳一個(gè)選擇器的表達(dá)式

具體的操作黎炉，請(qǐng)參考右邊的代碼

??

24.jQuery遍歷之prev()方法

如果想快速查找指定元素集合中每一個(gè)元素緊鄰的前面同輩元素的元素集合枝秤，此時(shí)可以用prev()方法

rev()無參數(shù)

取得一個(gè)包含匹配的元素集合中每一個(gè)元素緊鄰的前一個(gè)同輩元素的元素集合

注意：jQuery是一個(gè)合集對(duì)象，所以通過prev是匹配合集中每一個(gè)元素的上一個(gè)兄弟元素

prev()方法選擇性地接受同一類型選擇器表達(dá)式

同樣的也是因?yàn)閖Query是合集對(duì)象慷嗜，可能需要對(duì)這個(gè)合集對(duì)象進(jìn)行一定的篩選淀弹，找出目標(biāo)元素，所以允許傳一個(gè)選擇器的表達(dá)式

25jQuery遍歷之siblings()

如果想快速查找指定元素集合中每一個(gè)元素的同輩元素庆械，此時(shí)可以用siblings()方法

理解節(jié)點(diǎn)查找關(guān)系：如下藍(lán)色的class="item-2"的li元素薇溃，紅色的節(jié)點(diǎn)就是它的siblings兄弟節(jié)點(diǎn)

??

siblings()無參數(shù)

取得一個(gè)包含匹配的元素集合中每一個(gè)元素的同輩元素的元素集合

注意：jQuery是一個(gè)合集對(duì)象，所以通過siblings是匹配合集中每一個(gè)元素的同輩元素

siblings()方法選擇性地接受同一類型選擇器表達(dá)式

同樣的也是因?yàn)閖Query是合集對(duì)象缭乘，可能需要對(duì)這個(gè)合集對(duì)象進(jìn)行一定的篩選沐序，找出目標(biāo)元素，所以允許傳一個(gè)選擇器的表達(dá)式

??

26.jQuery遍歷之a(chǎn)dd()方法

jQuery為此提供add方法堕绩，用來創(chuàng)建一個(gè)新的jQuery對(duì)象 策幼，元素添加到匹配的元素集合中

.add()的參數(shù)可以幾乎接受任何的$()，包括一個(gè)jQuery選擇器表達(dá)式奴紧，DOM元素

特姐，或HTML片段引用。

簡(jiǎn)單的看一個(gè)案例：

處理一：傳遞選擇器

$('li').add('p')

處理二：傳遞dom元素

$('li').add(document.getElementsByTagName('p')[0])

還有一種方式黍氮，就是動(dòng)態(tài)創(chuàng)建P標(biāo)簽加入到合集到逊，然后插入到指定的位置铣口，但是這樣就改變?cè)氐谋旧淼呐帕辛?/p>

$('li').add('<p>新的p元素</p>').appendTo(目標(biāo)位置)

具體的操作，請(qǐng)參考右邊的代碼

??

27.jQuery遍歷之each()

.each() 方法就是一個(gè)for循環(huán)的迭代器觉壶，它會(huì)迭代jQuery對(duì)象合集中的每一個(gè)DOM元素脑题。每次回調(diào)函數(shù)執(zhí)行時(shí)，會(huì)傳遞當(dāng)前循環(huán)次數(shù)作為參數(shù)(從0開始計(jì)數(shù)

所以大體上了解3個(gè)重點(diǎn)：

each是一個(gè)for循環(huán)的包裝迭代器

each通過回調(diào)的方式處理铜靶，并且會(huì)有2個(gè)固定的實(shí)參叔遂，索引與元素

each回調(diào)方法中的this指向當(dāng)前迭代的dom元素

看一個(gè)簡(jiǎn)單的案例

開始迭代li，循環(huán)2次

$("li").each(function(index, element) {

index 索引 0,1

element是對(duì)應(yīng)的li節(jié)點(diǎn) li,li

this 指向的是li

})

這樣可以在循環(huán)體會(huì)做一些邏輯操作了争剿，如果需要提前退出已艰，可以以通過返回 false以便在回調(diào)函數(shù)內(nèi)中止循環(huán)

??

jQuery基礎(chǔ)(三)—事件篇

jQuery鼠標(biāo)事件之click與dbclick事件

jQuery提供了兩個(gè)方法一個(gè)是click方法用于監(jiān)聽用戶單擊操作，另一個(gè)方法是dbclick方法用于監(jiān)聽用戶雙擊操作蚕苇。

dbclick與click事件不同的是：

click事件觸發(fā)需要以下幾點(diǎn)：

click事件其實(shí)是由mousedown與mouseup 2個(gè)動(dòng)作構(gòu)成哩掺，所以點(diǎn)擊的動(dòng)作只有在松手后才觸發(fā)

PS:mousedown和mouseup下一節(jié)會(huì)講到

dbclick事件觸發(fā)需要以下幾點(diǎn)：

dbclick又是由2個(gè)click疊加而來的，所以dbclick事件只有在滿足以下條件的情況下才能被觸發(fā)

鼠標(biāo)指針在元素里面時(shí)點(diǎn)擊涩笤。

鼠標(biāo)指針在元素里面時(shí)釋放嚼吞。

鼠標(biāo)指針在元素里面時(shí)再次點(diǎn)擊，點(diǎn)擊間隔時(shí)間蹬碧，是系統(tǒng)而定舱禽。

鼠標(biāo)指針在元素里面時(shí)再次釋放。

注意：在同一元素上同時(shí)綁定 click 和 dbclick 事件是不可取的恩沽。各個(gè)瀏覽器事件觸發(fā)的順序是不同的誊稚，一些瀏覽器在dbclick之前接受兩個(gè) click 事件 ，而一些瀏覽器只接受一個(gè) click 事件罗心。用戶往往可通過不同的操作系統(tǒng)和瀏覽器配置雙擊靈敏度

??

??

??

jQuery鼠標(biāo)事件之mousedown與mouseup事件

mousedown事件觸發(fā)需要以下幾點(diǎn)：

mousedown強(qiáng)調(diào)是按下觸發(fā)

如果在一個(gè)元素按住了鼠標(biāo)不放里伯，并且拖動(dòng)鼠標(biāo)離開這個(gè)元素，并釋放鼠標(biāo)鍵渤闷，這仍然是算作mousedown事件

任何鼠標(biāo)按鈕被按下時(shí)都能觸發(fā)mousedown事件

用event 對(duì)象的which區(qū)別按鍵俏脊，敲擊鼠標(biāo)左鍵which的值是1，敲擊鼠標(biāo)中鍵which的值是2肤晓，敲擊鼠標(biāo)右鍵which的值是3

mouseup事件觸發(fā)需要以下幾點(diǎn)：

mouseup強(qiáng)調(diào)是松手觸發(fā)，與mousedown是相反的

mouseup與mousedown組合起來就是click事件

如果用戶在一個(gè)元素上按下鼠標(biāo)按鍵认然，并且拖動(dòng)鼠標(biāo)離開這個(gè)元素补憾，然后釋放鼠標(biāo)鍵，這仍然是算作mouseup事件

任何鼠標(biāo)按鈕松手時(shí)都能觸發(fā)mouseup事件

用event 對(duì)象的which區(qū)別按鍵卷员，敲擊鼠標(biāo)左鍵which的值是1盈匾，敲擊鼠標(biāo)中鍵which的值是2，敲擊鼠標(biāo)右鍵which的值是3

另外需要注意的是：

click與mousedown的區(qū)別：

click事件其實(shí)是由mousedown于mouseup 2個(gè)動(dòng)作構(gòu)成毕骡，所以點(diǎn)擊的動(dòng)作只有在松手后才觸發(fā)

??

??

jQuery鼠標(biāo)事件之mousemove事件

mousemove事件觸發(fā)需要以下幾點(diǎn)：

mousemove事件是當(dāng)鼠標(biāo)指針移動(dòng)時(shí)觸發(fā)的削饵，即使是一個(gè)像素

如果處理器做任何重大的處理岩瘦，或者如果該事件存在多個(gè)處理函數(shù)，這可能造成瀏覽器的嚴(yán)重的性能問題

??

??

jQuery鼠標(biāo)事件之mouseover與mouseout事件

方法一：$ele.mouseover()

綁定$ele元素窿撬，不帶任何參數(shù)一般是用來指定觸發(fā)一個(gè)事件启昧，用的比較少

$("ele").mouseover(function(){

alert('觸發(fā)指定事件')

})

$("#test").click(function(){

$("ele").mouseover()? //指定觸發(fā)事件

});

方法二：$ele.mouseover( handler(eventObject) )

綁定$ele元素，每次$ele元素觸發(fā)點(diǎn)擊操作會(huì)執(zhí)行回調(diào) handler函數(shù)

這樣可以針對(duì)事件的反饋?zhàn)龊芏嗖僮髁?/p>

$("#test").mouseover(function() {

//this指向 div元素

});

方法三：$ele.mouseover( [eventData ], handler(eventObject) )

使用與方法二一致劈伴，不過可以接受一個(gè)數(shù)據(jù)參數(shù)密末，這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題

$("#test").mouseover(11111,function(e) {

//this指向 div元素

//e.data? => 11111 傳遞數(shù)據(jù)

});

具體使用可以參考右邊的代碼

jQuery鼠標(biāo)事件之mouseenter與mouseleave事件

mouseenter事件和mouseover的區(qū)別

關(guān)鍵點(diǎn)就是：冒泡的方式處理問題

簡(jiǎn)單的例子：

mouseover為例：

<div class="aaron2">? ? <p>鼠標(biāo)離開此區(qū)域觸發(fā)mouseleave事件</p></div>

如果在p元素與div元素都綁定mouseover事件，鼠標(biāo)在離開p元素跛璧，但是沒有離開div元素的時(shí)候严里，觸發(fā)的結(jié)果:

p元素響應(yīng)事件

div元素響應(yīng)事件

這里的問題是div為什么會(huì)被觸發(fā)？ 原因就是事件冒泡的問題追城，p元素觸發(fā)了mouseover刹碾，他會(huì)一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就會(huì)被觸發(fā)

所以在這種情況下面座柱，jQuery推薦我們使用 mouseenter事件

mouseenter事件只會(huì)在綁定它的元素上被調(diào)用迷帜，而不會(huì)在后代節(jié)點(diǎn)上被觸發(fā)

jQuery鼠標(biāo)事件之hover事件

在元素上移進(jìn)移出切換其換色，一般通過2個(gè)事件配合就可以達(dá)到辆布，這里用mouseenter與mouseleave瞬矩，這樣可以避免冒泡問題

$(ele).mouseenter(function(){

$(this).css("background", '#bbffaa');

})

$(ele).mouseleave(function(){

$(this).css("background", 'red');

})

這樣目的是達(dá)到了，代碼稍微有點(diǎn)多锋玲，對(duì)于這樣的簡(jiǎn)單邏輯jQuery直接提供了一個(gè)hover方法景用，可以便捷處理

??

jQuery鼠標(biāo)事件之focusin事件

??

??

jQuery鼠標(biāo)事件之focusout事件

當(dāng)一個(gè)元素，或者其內(nèi)部任何一個(gè)元素失去焦點(diǎn)的時(shí)候惭蹂，比如input元素伞插，用戶在點(diǎn)擊失去焦的時(shí)候，如果開發(fā)者需要捕獲這個(gè)動(dòng)作盾碗，jQuery提供了一個(gè)focusout事件

jQuery表單事件之blur與focus事件

focusin事件與focusout事件媚污，同樣用于處理表單焦點(diǎn)的事件還有blur與focus事件

它們之間的本質(zhì)區(qū)別:

是否支持冒泡處理

div是input的父元素，當(dāng)它包含的元素input觸發(fā)了focus事件時(shí)廷雅，它就產(chǎn)生了focusin()事件耗美。

focus()在元素本身產(chǎn)生，focusin()在元素包含的元素中產(chǎn)生

blur與focusout也亦是如此

jQuery表單事件之change事件

<input>元素航缀，<textarea>和<select>元素的值都是可以發(fā)生改變的商架，開發(fā)者可以通過change事件去監(jiān)聽這些改變的動(dòng)作

input元素

監(jiān)聽value值的變化，當(dāng)有改變時(shí)芥玉，失去焦點(diǎn)后觸發(fā)change事件蛇摸。對(duì)于單選按鈕和復(fù)選框，當(dāng)用戶用鼠標(biāo)做出選擇時(shí)灿巧，該事件立即觸發(fā)赶袄。

select元素

對(duì)于下拉選擇框揽涮，當(dāng)用戶用鼠標(biāo)作出選擇時(shí)，該事件立即觸發(fā)

textarea元素

多行文本輸入框饿肺，當(dāng)有改變時(shí)蒋困，失去焦點(diǎn)后觸發(fā)change事件

change事件很簡(jiǎn)單，無非就是注意下觸發(fā)的先后行為

jQuery表單事件之select事件

當(dāng) textarea 或文本類型的 input 元素中的文本被選擇時(shí)唬格，會(huì)發(fā)生 select 事件家破。

??

??

jQuery表單事件之submit事件

通過在<form>元素上綁定submit事件，開發(fā)者可以監(jiān)聽到用戶的提交表單的的行為

具體能觸發(fā)submit事件的行為：

<input type="submit">

<input type="image">

<button type="submit">

當(dāng)某些表單元素獲取焦點(diǎn)時(shí)购岗，敲擊Enter（回車鍵）

上述這些操作下汰聋，都可以截獲submit事件。

這里需要特別注意：

form元素是有默認(rèn)提交表單的行為喊积，如果通過submit處理的話烹困，需要禁止瀏覽器的這

個(gè)默認(rèn)行為傳統(tǒng)的方式是調(diào)用事件對(duì)象? e.preventDefault() 來處理，

jQuery中可以直接在函數(shù)中最后結(jié)尾return false即可

jQuery處理如下：

$("#target").submit(function(data) {? ? return false;

//阻止默認(rèn)行為乾吻，提交表單});

??

jQuery鍵盤事件之keydown()與keyup()事件

注意：

keydown是在鍵盤按下就會(huì)觸發(fā)

keyup是在鍵盤松手就會(huì)觸發(fā)

理論上它可以綁定到任何元素髓梅，但keydown/keyup事件只是發(fā)送到具有焦點(diǎn)的元素上，不同的瀏覽器中绎签，可獲得焦點(diǎn)的元素略有不同枯饿，但是表單元素總是能獲取焦點(diǎn)，所以對(duì)于此事件類型表單元素是最合適的诡必。

??

14. jQuery鍵盤事件之keypress()事件

eypress事件與keydown和keyup的主要區(qū)別

只能捕獲單個(gè)字符奢方，不能捕獲組合鍵

無法響應(yīng)系統(tǒng)功能鍵（如delete，backspace）

不區(qū)分小鍵盤和主鍵盤的數(shù)字字符

總而言之爸舒，

KeyPress主要用來接收字母蟋字、數(shù)字等ANSI字符，而 KeyDown 和 KeyUP 事件過程可以處理任何不被 KeyPress 識(shí)別的擊鍵扭勉。諸如：功能鍵（F1-F12）鹊奖、編輯鍵、定位鍵以及任何這些鍵和鍵盤換檔鍵的組合等涂炎。

15.on()的多事件綁定

基本用法：.on( events ,[ selector ] ,[ data ] )

最常見的給元素綁定一個(gè)點(diǎn)擊事件忠聚，對(duì)比一下快捷方式與on方式的不同

$("#elem").click(function(){})? //快捷方式

$("#elem").on('click',function(){}) //on方式

最大的不同點(diǎn)就是on是可以自定義事件名，當(dāng)然不僅僅只是如何唱捣，繼續(xù)往下看

多個(gè)事件綁定同一個(gè)函數(shù)

$("#elem").on("mouseover mouseout",function(){ });

通過空格分離两蟀，傳遞不同的事件名，可以同時(shí)綁定多個(gè)事件

多個(gè)事件綁定不同函數(shù)

$("#elem").on({

mouseover:function(){},

mouseout:function(){}

});

通過空格分離爷光，傳遞不同的事件名，可以同時(shí)綁定多個(gè)事件澎粟，每一個(gè)事件執(zhí)行自己的回調(diào)方法

將數(shù)據(jù)傳遞到處理程序

function greet( event ) {

alert( "Hello " + event.data.name ); //Hello 慕課網(wǎng)

}

$( "button" ).on( "click", {

name: "慕課網(wǎng)"

}, greet );

可以通過第二參數(shù)（對(duì)象）蛀序，當(dāng)一個(gè)事件被觸發(fā)時(shí)欢瞪，要傳遞給事件處理函數(shù)的

??

??

??

16.on()的高級(jí)用法

委托機(jī)制

.on( events ,[ selector ] ,[ data ], handler(eventObject) )

在on的第二參數(shù)中提供了一個(gè)selector選擇器，簡(jiǎn)單的來描述下

參考下面3層結(jié)構(gòu)

目標(biāo)節(jié)點(diǎn) //點(diǎn)擊在這個(gè)元素上

給出如下代碼：

$("div").on("click","p",fn)

事件綁定在最上層div元素上徐裸，當(dāng)用戶觸發(fā)在a元素上遣鼓，事件將往上冒泡，一直會(huì)冒泡在div元素上重贺。如果提供了第二參數(shù)骑祟，那么事件在往上冒泡的過程中遇到了選擇器匹配的元素，將會(huì)觸發(fā)事件回調(diào)函數(shù)

??

17.卸載事件off()方法

通過.on()綁定的事件處理程序

通過.off() 方法移除該綁定

根據(jù)on綁定事件的一些特性气笙，off方法也可以通過相應(yīng)的傳遞組合的事件名次企，名字空間，選擇器或處理函數(shù)來移除綁定在元素上指定的事件處理函數(shù)潜圃。當(dāng)有多個(gè)過濾參數(shù)時(shí)缸棵，只有與這些參數(shù)完全匹配的事件處理函數(shù)才會(huì)被移除

綁定2個(gè)事件

$("elem").on("mousedown mouseup",fn)

刪除一個(gè)事件

$("elem").off("mousedown")

刪除所有事件

$("elem").off("mousedown mouseup")

快捷方式刪除所有事件，這里不需要傳遞事件名了谭期，節(jié)點(diǎn)上綁定的所有事件講全部銷毀

$("elem").off()

??

??

jQuery事件對(duì)象的作用

event.target

target 屬性可以是注冊(cè)事件時(shí)的元素堵第，或者它的子元素。通常用于比較 event.target 和 this 來確定事件是不是由于冒泡而觸發(fā)的隧出。經(jīng)常用于事件冒泡時(shí)處理事件委托

簡(jiǎn)單來說：event.target代表當(dāng)前觸發(fā)事件的元素踏志，可以通過當(dāng)前元素對(duì)象的一系列屬性來判斷是不是我們想要的元素

??

jQuery事件對(duì)象的屬性和方法

event.type：獲取事件的類型

觸發(fā)元素的事件類型

$("a").click(function(event) {

alert(event.type); // "click"事件

});

event.pageX 和 event.pageY：獲取鼠標(biāo)當(dāng)前相對(duì)于頁面的坐標(biāo)

通過這2個(gè)屬性，可以確定元素在當(dāng)前頁面的坐標(biāo)值胀瞪，鼠標(biāo)相對(duì)于文檔的左邊緣的位置（左邊）與 （頂邊）的距離针余，簡(jiǎn)單來說是從頁面左上角開始,即是以頁面為參考點(diǎn),不隨滑動(dòng)條移動(dòng)而變化

event.preventDefault() 方法：阻止默認(rèn)行為

這個(gè)用的特別多，在執(zhí)行這個(gè)方法后赏廓，如果點(diǎn)擊一個(gè)鏈接（a標(biāo)簽）涵紊，瀏覽器不會(huì)跳轉(zhuǎn)到新的 URL 去了。我們可以用 event.isDefaultPrevented() 來確定這個(gè)方法是否(在那個(gè)事件對(duì)象上)被調(diào)用過了

event.stopPropagation() 方法：阻止事件冒泡

事件是可以冒泡的幔摸，為防止事件冒泡到DOM樹上摸柄，也就是不觸發(fā)的任何前輩元素上的事件處理函數(shù)

event.which：獲取在鼠標(biāo)單擊時(shí)，單擊的是鼠標(biāo)的哪個(gè)鍵

event.which 將 event.keyCode 和 event.charCode 標(biāo)準(zhǔn)化了既忆。event.which也將正秤拥恚化的按鈕按下(mousedown 和 mouseupevents)么鹤，左鍵報(bào)告1，中間鍵報(bào)告2，右鍵報(bào)告3

event.currentTarget : 在事件冒泡過程中的當(dāng)前DOM元素

冒泡前的當(dāng)前觸發(fā)事件的DOM對(duì)象, 等同于this.

this和event.target的區(qū)別：

js中事件是會(huì)冒泡的愕乎，所以this是可以變化的，但event.target不會(huì)變化屹电，它永遠(yuǎn)是直接接受事件的目標(biāo)DOM元素骤星；

.this和event.target都是dom對(duì)象

如果要使用jquey中的方法可以將他們轉(zhuǎn)換為jquery對(duì)象。比如this和$(this)的使用、event.target和$(event.target)的使用绘雁；

jQuery自定義事件之trigger事件

.trigger是什么橡疼？

簡(jiǎn)單來講就是：根據(jù)綁定到匹配元素的給定的事件類型執(zhí)行所有的處理程序和行為

trigger除了能夠觸發(fā)瀏覽器事件，同時(shí)還支持自定義事件庐舟，并且自定義時(shí)間還支持傳遞參數(shù)

$('#elem').on('Aaron', function(event,arg1,arg2) {??alert

("自觸自定義時(shí)間")?});$('#elem').trigger('Aaron',['參數(shù)1','參數(shù)2'])

trigger觸發(fā)瀏覽器事件與自定義事件區(qū)別欣除？

自定義事件對(duì)象，是jQuery模擬原生實(shí)現(xiàn)的

自定義事件可以傳遞參數(shù)

??

jQuery自定義事件之triggerHandler事件

若要觸發(fā)通過 jQuery 綁定的事件處理函數(shù)挪略，而不觸發(fā)原生的事件历帚，使用.triggerHandler() 來代替

triggerHandler與trigger的用法是一樣的，重點(diǎn)看不同之處：

triggerHandler不會(huì)觸發(fā)瀏覽器的默認(rèn)行為杠娱，.triggerHandler( "submit" )將不會(huì)調(diào)用表單上的.submit()

.trigger() 會(huì)影響所有與 jQuery 對(duì)象相匹配的元素挽牢，而 .triggerHandler() 僅影響第一個(gè)匹配到的元素

使用 .triggerHandler() 觸發(fā)的事件，并不會(huì)在 DOM 樹中向上冒泡墨辛。 如果它們不是由目標(biāo)元素直接觸發(fā)的卓研，那么它就不會(huì)進(jìn)行任何處理

與普通的方法返回 jQuery 對(duì)象(這樣就能夠使用鏈?zhǔn)接梅?相反，.triggerHandler() 返回最后一個(gè)處理的事件的返回值睹簇。如果沒有觸發(fā)任何事件奏赘，會(huì)返回 undefined