1、jQuery 介紹

什么是 jQuery ??

jQuery，顧名思義，也就是 JavaScript 和查詢（Query），它就是輔助 JavaScript 開(kāi)發(fā)的 js 類(lèi)庫(kù)。

jQuery 核心思想?。?！?

它的核心思想是 write less,do more(寫(xiě)得更少,做得更多)，所以它實(shí)現(xiàn)了很多瀏覽器的兼容問(wèn)題。

jQuery 流行程度?

jQuery 現(xiàn)在已經(jīng)成為最流行的 JavaScript 庫(kù)，在世界前 10000 個(gè)訪問(wèn)最多的網(wǎng)站中，有超過(guò) 55%在使用 jQuery

jQuery 好處！??！?

jQuery 是免費(fèi)、開(kāi)源的，jQuery 的語(yǔ)法設(shè)計(jì)可以使開(kāi)發(fā)更加便捷，例如操作文檔對(duì)象、選擇 DOM 元素、 制作動(dòng)畫(huà)效果、事件處理、使用 Ajax 以及其他功能

2、jQuery 的初體驗(yàn)?。。?span id="s0sssss00s" class="font-size-16">

需求：使用 jQuery 給一個(gè)按鈕綁定單擊事件?

常見(jiàn)問(wèn)題？

1、使用 jQuery 一定要引入 jQuery 庫(kù)嗎？

答案： 是，必須

2、jQuery 中的$到底是什么？

答案： 它是一個(gè)函數(shù)

3、怎么為按鈕添加點(diǎn)擊響應(yīng)函數(shù)的？

答案： 1、使用 jQuery 查詢到標(biāo)簽對(duì)象?

2、使用標(biāo)簽對(duì)象.click( function(){} );

3、jQuery 核心函數(shù)

$ 是 jQuery 的核心函數(shù)，能完成 jQuery 的很多功能。$()就是調(diào)用$這個(gè)函數(shù)

1、傳入?yún)?shù)為 [ 函數(shù) ] 時(shí)：?

表示頁(yè)面加載完成之后。相當(dāng)于 window.onload = function(){}

2、傳入?yún)?shù)為 [ HTML 字符串 ] 時(shí)：?

會(huì)對(duì)我們創(chuàng)建這個(gè) html 標(biāo)簽對(duì)象

3、傳入?yún)?shù)為 [ 選擇器字符串 ] 時(shí)：?

$(“#id 屬性值”); id 選擇器，根據(jù) id 查詢標(biāo)簽對(duì)象?

$(“標(biāo)簽名”); 標(biāo)簽名選擇器，根據(jù)指定的標(biāo)簽名查詢標(biāo)簽對(duì)象?

$(“.class 屬性值”); 類(lèi)型選擇器，可以根據(jù) class 屬性查詢標(biāo)簽對(duì)象

4、傳入?yún)?shù)為 [ DOM 對(duì)象 ] 時(shí)：?

會(huì)把這個(gè) dom 對(duì)象轉(zhuǎn)換為 jQuery 對(duì)象

4、jQuery 對(duì)象和 dom 對(duì)象區(qū)分

4.1、什么是 jQuery 對(duì)象，什么是 dom 對(duì)象

Dom 對(duì)象

1.通過(guò) getElementById()查詢出來(lái)的標(biāo)簽對(duì)象是 Dom 對(duì)象?

2.通過(guò) getElementsByName()查詢出來(lái)的標(biāo)簽對(duì)象是 Dom 對(duì)象?

3.通過(guò) getElementsByTagName()查詢出來(lái)的標(biāo)簽對(duì)象是 Dom 對(duì)象?

4.通過(guò) createElement() 方法創(chuàng)建的對(duì)象，是 Dom 對(duì)象

DOM 對(duì)象 alert 出來(lái)的效果是：[object HTML 標(biāo)簽名 Element]

jQuery 對(duì)象

1.通過(guò) JQuery 提供的 API 創(chuàng)建的對(duì)象，是 JQuery 對(duì)象?

2.通過(guò) JQuery 包裝的 Dom 對(duì)象，也是 JQuery 對(duì)象

3.通過(guò) JQuery 提供的 API 查詢到的對(duì)象，是 JQuery 對(duì)象

jQuery 對(duì)象 Alert 出來(lái)的效果是：[object Object]

4.2、問(wèn)題：jQuery 對(duì)象的本質(zhì)是什么？

jQuery 對(duì)象是 dom 對(duì)象的數(shù)組 + jQuery 提供的一系列功能函數(shù)。

4.3、jQuery 對(duì)象和 Dom 對(duì)象使用區(qū)別

jQuery 對(duì)象不能使用 DOM 對(duì)象的屬性和方法?

DOM 對(duì)象也不能使用 jQuery 對(duì)象的屬性和方法

4.4、Dom 對(duì)象和 jQuery 對(duì)象互轉(zhuǎn)

1、dom 對(duì)象轉(zhuǎn)化為 jQuery 對(duì)象（重點(diǎn)）

1、先有 DOM 對(duì)象?

2、$( DOM 對(duì)象 ) 就可以轉(zhuǎn)換成為 jQuery 對(duì)象

2、jQuery 對(duì)象轉(zhuǎn)為 dom 對(duì)象（重點(diǎn)）

1、先有 jQuery 對(duì)象?

2、jQuery 對(duì)象[下標(biāo)]取出相應(yīng)的 DOM 對(duì)象

5、jQuery 選擇器（重點(diǎn)）

5.1、基本選擇器（重點(diǎn)）

#ID 選擇器：根據(jù) id 查找標(biāo)簽對(duì)象

.class 選擇器：根據(jù) class 查找標(biāo)簽對(duì)象?

element 選擇器：根據(jù)標(biāo)簽名查找標(biāo)簽對(duì)象?

* 選擇器：表示任意的，所有的元素?

selector1，selector2 組合選擇器：合并選擇器 1，選擇器 2 的結(jié)果并返回

5.2、層級(jí)選擇器（重點(diǎn)）

ancestor descendant 后代選擇器 ：在給定的祖先元素下匹配所有的后代元素

parent > child 子元素選擇器：在給定的父元素下匹配所有的子元素?

prev + next 相鄰元素選擇器：匹配所有緊接在 prev 元素后的 next 元素?

prev ~ sibings 之后的兄弟元素選擇器：匹配 prev 元素之后的所有 siblings 元素

5.3、過(guò)濾選擇器

基本過(guò)濾器：

:first 獲取第一個(gè)元素?

:last 獲取最后個(gè)元素

:not(selector) 去除所有與給定選擇器匹配的元素?

:even 匹配所有索引值為偶數(shù)的元素，從 0 開(kāi)始計(jì)數(shù)?

:odd 匹配所有索引值為奇數(shù)的元素，從 0 開(kāi)始計(jì)數(shù)?

:eq(index) 匹配一個(gè)給定索引值的元素?

:gt(index) 匹配所有大于給定索引值的元素?

:lt(index) 匹配所有小于給定索引值的元素?

:header 匹配如 h1, h2, h3 之類(lèi)的標(biāo)題元素?

:animated 匹配所有正在執(zhí)行動(dòng)畫(huà)效果的元素

內(nèi)容過(guò)濾器：

:contains(text) 匹配包含給定文本的元素?

:empty 匹配所有不包含子元素或者文本的空元素?

:parent 匹配含有子元素或者文本的元素?

:has(selector) 匹配含有選擇器所匹配的元素的元素

屬性過(guò)濾器：

[attribute] 匹配包含給定屬性的元素。

[attribute=value] 匹配給定的屬性是某個(gè)特定值的元素?

[attribute!=value] 匹配所有不含有指定的屬性，或者屬性不等于特定值的元素。

[attribute^=value] 匹配給定的屬性是以某些值開(kāi)始的元素?

[attribute$=value] 匹配給定的屬性是以某些值結(jié)尾的元素?

[attribute*=value] 匹配給定的屬性是以包含某些值的元素?

[attrSel1][attrSel2][attrSelN] 復(fù)合屬性選擇器，需要同時(shí)滿足多個(gè)條件時(shí)使用。

表單過(guò)濾器:

:input 匹配所有 input, textarea, select 和 button 元素?

:text 匹配所有 文本輸入框?

:password 匹配所有的密碼輸入框?

:radio 匹配所有的單選框

:checkbox 匹配所有的復(fù)選框?

:submit 匹配所有提交按鈕?

:image 匹配所有 img 標(biāo)簽?

:reset 匹配所有重置按鈕?

:button 匹配所有 input type=button <button>按鈕?

:file 匹配所有 input type=file 文件上傳?

:hidden 匹配所有不可見(jiàn)元素 display:none 或 input type=hidden

表單對(duì)象屬性過(guò)濾器：

:enabled 匹配所有可用元素?

:disabled 匹配所有不可用元素?

:checked 匹配所有選中的單選，復(fù)選，和下拉列表中選中的 option 標(biāo)簽對(duì)象?

:selected 匹配所有選中的 option

6、jQuery 元素篩選

eq() 獲取給定索引的元素????[功能跟?:eq()?一樣?]

first() 獲取第一個(gè)元素????[功能跟?:first?一樣]?

last() 獲取最后一個(gè)元素????[功能跟?:last?一樣?]

filter(exp) 留下匹配的元素?

is(exp) 判斷是否匹配給定的選擇器，只要有一個(gè)匹配就返回，true?

has(exp) 返回包含有匹配選擇器的元素的元素????[功能跟?:has?一樣?]

not(exp) 刪除匹配選擇器的元素????[功能跟?:not?一樣?]

children(exp) 返回匹配給定選擇器的子元素????[功能跟?parent>child?一樣?]

find(exp) 返回匹配給定選擇器的后代元素????[功能跟?parent>child?一樣?]

next() 返回當(dāng)前元素的下一個(gè)兄弟元素????[功能跟?prev + next?功能一樣?]

nextAll() 返回當(dāng)前元素后面所有的兄弟元素????[功能跟?prev ~ siblings?功能一樣?]

nextUntil() 返回當(dāng)前元素到指定匹配的元素為止的后面元素?

parent() 返回父元素?

prev(exp) 返回當(dāng)前元素的上一個(gè)兄弟元素?

prevAll() 返回當(dāng)前元素前面所有的兄弟元素?

prevUnit(exp) 返回當(dāng)前元素到指定匹配的元素為止的前面元素?

siblings(exp) 返回所有兄弟元素?

add() 把 add 匹配的選擇器的元素添加到當(dāng)前 jquery 對(duì)象中