了解 jQuery

? ? + 是一個(gè)前端類庫（方法庫，工具庫）

? ? ? ? => jQuery 里面 95% 以上都是方法

? ? + 有人把 js 里面各種 DOM 操作都給你封裝好了

jQuery 的中文網(wǎng)站

? ? + http://jquery.cuishifeng.cn/

jQuery 的使用

? ? + 分成下載和使用? 下載后，在頁面里引入一個(gè) jquery.js或jqery.min.js 即可

? ? 當(dāng) jQuery 文件被引入以后

? ? ? ? + 我們的全局就會(huì)多了兩個(gè)變量

? ? ? ? + jQuery 向全局添加了兩個(gè)名字

? ? ? ? ? ? => $

? ? ? ? ? ? => jQuery

? ? ? ? + 這兩個(gè)名字無任何區(qū)別

jQuery 的優(yōu)點(diǎn)

? ? +無所不能的選擇器

? ? +無處不在的隱式迭代

? ? +無與倫比的鏈?zhǔn)骄幊?/p>

? ? +jQuery 號(hào)稱全兼容

jQuery 的選擇器

? ? + 選擇器就是用來幫我們獲取 DOM 元素的方法

? ? $('div')? ? 通過標(biāo)簽名獲取元素

? ? $('.box')? 通過類名獲取元素

? ? $('#box')? 通過id名獲取元素

? ? 還有 $('ul li'), $('ul>li:nth-child(n)')、等等? n可以為數(shù)字、odd、even

? ? 注：不管使用哪一種選擇器，獲取到的都是一個(gè)元素集合，只有id選擇器里面可能有一個(gè)元素

? ? 特殊選擇器

? ? 1. :first? 獲取第一個(gè)

? ? 2. :last? 獲取最后一個(gè)

? ? 3. :eq(n) 獲取索引為n的元素

? ? 4. :odd? ? 獲取所有索引為 奇數(shù) 的

? ? 5. :even? 獲取索引為 偶數(shù) 的

jQuery 的篩選器

? ? ? ? ? ? + 用在 jQuery 選擇的元素集合的后面

? ? ? ? ? ? + 都是方法，為了對(duì)已經(jīng)選擇的元素進(jìn)行二次篩選

? ? 篩選器：

? ? ? ? 1. first()? 篩選出來一個(gè)元素集合里面的第一個(gè)

? ? ? ? 2. last()? 篩選出來一個(gè)元素集合里面的最后一個(gè)

? ? ? ? 3. eq(n)? ? 篩選出來一個(gè)元素集合里面索引為 n 的那一個(gè)

? ? ? ? 4. next()? 篩選出元素的下一個(gè)兄弟元素

? ? ? ? 5. nextAll()篩選出元素后面的所有兄弟元素

? ? ? ? 6. nextUntil(選擇器)

? ? ? ? ? ? -如果后無參數(shù)，篩選出元素后面的所有兄弟元素

? ? ? ? ? ? -如果有參數(shù)，篩選出元素后面所有的兄弟元素直到選擇器元素為止,不包含選擇器元素

? ? ? ? 7. prev()? 篩選出元素的上一個(gè)兄弟元素

? ? ? ? 8. prevAll(選擇器)篩選出元素的上面的所有兄弟元素

? ? ? ? 9. prevUntil(選擇器)

? ? ? ? ? ? -如果后無參數(shù)，篩選出元素上面的所有兄弟元素

? ? ? ? ? ? -如果后有參數(shù)，篩選出元素上面所有的兄弟元素直到選擇器元素為止，不包含選擇器元素

? ? ? ? 10. parent() 拿到元素的父元素

? ? ? ? 11. parents()拿到所有祖先元素，直到 html 元素

? ? ? ? 12. parentsUntil(選擇器)

? ? ? ? ? ? ? ? -如果后無參數(shù)，拿到元素所有祖先元素

? ? ? ? ? ? ? ? -如果后有參數(shù)，篩選出元素所有祖先元素直到選擇器元素為止，不包含選擇器元素

? ? ? ? 13. children(選擇器)

? ? ? ? ? ? ? ? -如果后無參數(shù)，篩選出所有子級(jí)元素

? ? ? ? ? ? ? ? -如果后有參數(shù)，篩選出所有子元素里面符合條件選擇器條件的元素

? ? ? ? 14. siblings(選擇器)

? ? ? ? ? ? ? ? -如果后無參數(shù)，篩選出所有兄弟元素

? ? ? ? ? ? ? ? -如果后有參數(shù)，篩選出所有兄弟元素里面符合條件選擇器條件的元素

? ? ? ? 15. find(選擇器)

? ? ? ? ? ? ? ? -在元素集合里面的每一個(gè)元素中，查找后代元素

? ? ? ? ? ? ? ? -在一個(gè)元素的后代元素中查找對(duì)應(yīng)的選擇器的元素

? ? ? ? 16. index()

? ? ? ? ? ? ? ? -獲取到元素的索引位置

? ? ? ? ? ? ? ? -不是元素集合里面的第幾個(gè)

? ? ? ? ? ? ? ? -找到他是該父元素下的第幾個(gè)元素

? ? ? ? ? ? ? ? -拿到的是一個(gè)數(shù)字

jQuery 操作文本內(nèi)容

? ? + html()

? ? ? ? -一個(gè)讀寫的方法

? ? ? ? -不傳參數(shù)的時(shí)候，就是獲取元素內(nèi)部的超文本內(nèi)容

? ? ? ? -獲取的時(shí)候只能獲取元素集合里面的第一個(gè)元素的超文本內(nèi)容

? ? ? ? -傳一個(gè)參數(shù)的時(shí)候，就是設(shè)置元素集合里所有元素內(nèi)的超文本內(nèi)容

? ? + text()

? ? ? ? -一個(gè)讀寫的方法

? ? ? ? -不傳參數(shù)的時(shí)候，就是獲取元素集合內(nèi)所有內(nèi)部的文本內(nèi)容

? ? ? ? -傳一個(gè)參數(shù)的時(shí)候，就是設(shè)置元素集合里所有元素內(nèi)的文本內(nèi)容

? ? + val()

? ? ? ? -一個(gè)讀寫的方法，操作 Input 標(biāo)簽

? ? ? ? -不傳參數(shù)的時(shí)候就是獲取元素集合里面第一個(gè)標(biāo)簽的 value 值

? ? ? ? -傳一個(gè)參數(shù)的時(shí)候就是設(shè)置所有元素集合里面的標(biāo)簽的 value 值

jQuery 操作元素類名

? ? + addClass() 添加類名

? ? + removeClass() 移除類名

? ? + toggleClass() 切換類名（有就刪，無就加）

? ? + hasClass() 判斷有沒有某一個(gè)類名

jQuery 操作元素屬性

? ? + attr()

? ? ? ? -是一個(gè)讀寫的方法

? ? ? ? -attr(要讀取得屬性名)：傳遞一個(gè)參數(shù)得時(shí)候是讀取

? ? ? ? -attr(屬性名，屬性值)：傳遞兩個(gè)參數(shù)得時(shí)候就是設(shè)置

? ? ? ? -只獲取元素集合內(nèi)第一個(gè)元素的屬性

? ? + removeAttr()

? ? ? ? -專門用來移除屬性的，針對(duì)元素集合內(nèi)所有元素

? ? 注：所有屬性都會(huì)顯示在標(biāo)簽上（原生屬性和自定義屬性），不管屬性值是什么類型，都會(huì)變?yōu)樽址?/p>

? ? + prop() 和 removeProp()? ? 同 attr 的一套方法，使用方式一樣

? ? 注：設(shè)置的時(shí)候，原生屬性會(huì)顯示在標(biāo)簽上，非原生屬性，不會(huì)顯示在標(biāo)簽上，會(huì)存儲(chǔ)在DOM對(duì)象身上。? ? ? ?

? ? ? ? 存儲(chǔ)的是什么數(shù)據(jù)類型，獲取到就是什么數(shù)據(jù)類型

? ? ? ? 無法刪除原生屬性,如:(id，class，style)

? ? + data()?

? ? ? ? - 一個(gè)讀寫的方法

? ? ? ? - 創(chuàng)建的是自定義屬性

? ? ? ? -傳一個(gè)參數(shù)是讀取，兩參數(shù)是設(shè)置

? ? + removeData()

? ? ? ? - 刪除 data 設(shè)置的屬性

? ? 注： 和元素的元素屬性沒有關(guān)系，就是在元素身上開辟一個(gè)地方，存儲(chǔ)一些數(shù)據(jù)，不會(huì)顯示在標(biāo)簽上

? ? ? ? 存儲(chǔ)的是什么類型，拿到的就是什么類型

jQuery 操作元素樣式

? ? + css()

? ? ? ? - 一個(gè)讀寫的屬性

? ? ? ? - 不同的操作需要不同的參數(shù)

? ? ? ? - css(要獲取的樣式名)

? ? ? ? ? ? => 獲取元素樣式，行內(nèi)和非行內(nèi)都能獲取

? ? ? ? - css(樣式名，樣式值)

? ? ? ? ? ? => 設(shè)置元素的樣式

? ? ? ? ? ? => 值得位置如果不帶單位，默認(rèn)為 px

? ? ? ? - css({

? ? ? ? ? ? 樣式名：樣式值，

? ? ? ? ? ? 樣式名：樣式值，

? ? ? ? ? ? ...

? ? ? ? ? ? })

? ? ? ? ? ? => 批量設(shè)置元素的樣式

jQuery 綁定事件

? ? + 給元素綁定一個(gè)事件

? ? + on() 方法是專門用來綁定事件的

? ? ? ? => jQuery 里面通用的事件綁定方式

? ? ? ? => 通過傳遞不同的參數(shù)來達(dá)到不同的效果

? ? ? ? on 方法的各種參數(shù)描述

? ? ? ? ? ? 1. on('事件類型'，事件處理函數(shù))

? ? ? ? ? ? ? ? => 給元素集合內(nèi)所有元素綁定一個(gè)事件

? ? ? ? ? ? 2. on('事件類型'，'事件委托'，事件處理函數(shù))

? ? ? ? ? ? ? ? => 把 事件委托 位置的元素的事件 委托給了前面的元素集合

? ? ? ? ? ? 3. on('事件類型'，'復(fù)雜數(shù)據(jù)類型'，事件處理函數(shù))

? ? ? ? ? ? ? ? => 給每一個(gè)元素綁定一個(gè)事件，復(fù)雜數(shù)據(jù)類型是觸發(fā)事件的時(shí)候傳遞的參數(shù)，在事件對(duì)象里面獲?。╡）

? ? ? ? ? ? 4.? on('事件類型'，'事件委托','任意數(shù)據(jù)類型'，事件處理函數(shù))

? ? ? ? ? ? ? ? => 做一個(gè)事件委托的形式，第三個(gè)參數(shù)位置的數(shù)據(jù)，是觸發(fā)事件的時(shí)候，可以傳遞進(jìn)去的數(shù)據(jù)

? ? ? ? ? ? 5.? on(對(duì)象)

? ? ? ? ? ? ? ? => 給一個(gè)函數(shù)綁定多個(gè)事件的方式

? ? + one() 方法是專門通過綁定一個(gè)只能執(zhí)行一次的方法

? ? ? ? => 傳遞的參數(shù)個(gè)數(shù)和意義和 on 方法一模一樣

? ? ? ? => 綁定上的事件只能執(zhí)行一次

? ? + off() 方法是專門用來解綁一個(gè)元素事件的

? ? ? ? => 有兩種使用方式

? ? ? ? => off('事件類型')? 給該事件類型所有事件處理函數(shù)解綁

? ? ? ? => off('事件類型',事件處理函數(shù)名)? 解綁指定事件處理函數(shù)

? ? ? ? => on 和 one 綁定的事件都可以移除

? ? + trigger() 方法是專門用來觸發(fā)事件的方法

? ? ? ? => 不通過點(diǎn)擊，通過代碼就能把事件觸發(fā)了

? ? ? ? => trigger('事件類型')? 把該元素的事件給觸發(fā)了

? ? + 常用事件

? ? ? ? => jQuery 把一些常用的事件直接做成了函數(shù)，如：click,mouseover,... ,直接使用就可以了

? ? ? ? => 使用click舉一個(gè)例子

? ? ? ? ? ? - click(事件處理函數(shù))

? ? ? ? ? ? - click(參數(shù)，事件處理函數(shù))? 參數(shù)：觸發(fā)事件時(shí)傳入事件對(duì)象里面的數(shù)據(jù)

? ? + hover()

? ? ? ? =>? jQuery 里面唯一一個(gè)很特殊的事件，表示一個(gè)鼠標(biāo)懸停的動(dòng)作

? ? ? ? => hover(鼠標(biāo)移入的時(shí)候觸發(fā)，鼠標(biāo)移出的時(shí)候觸發(fā)) 如果只寫一個(gè)函數(shù)參數(shù)，那么這兩次都會(huì)觸發(fā)這個(gè)函數(shù)?

jQuery 的節(jié)點(diǎn)操作

? ? + 創(chuàng)建節(jié)點(diǎn)? 對(duì)應(yīng)原生js中createElement()

? ? ? ? + 只有一個(gè)方法

? ? ? ? + $() 或 jQuery()

? ? ? ? ? ? -() 里面?zhèn)鬟f一個(gè) html 格式文本的時(shí)候就是創(chuàng)建節(jié)點(diǎn)（DOM 元素）

? ? ? ? ? ? -() 里面?zhèn)鬟f一個(gè)選擇器的時(shí)候，就是獲取頁面中的 DOM 元素

? ? + 插入節(jié)點(diǎn)? 對(duì)應(yīng)原生js中appendChild()

? ? ? ? + 內(nèi)部插入(父子關(guān)系)

? ? ? ? ? ? 1. append()

? ? ? ? ? ? ? ? => 頁面元素.append(要插入的元素)

? ? ? ? ? ? ? ? => 放在頁面元素的子元素位置，放在末尾

? ? ? ? ? ? 2. appendTo()

? ? ? ? ? ? ? ? => 要插入元素.append(頁面元素)

? ? ? ? ? ? ? ? => 跟上面append()用法相同，只是主語不同

? ? ? ? ? ? 3. prepend()

? ? ? ? ? ? ? ? => 頁面元素.prepend(要插入的元素)

? ? ? ? ? ? ? ? => 放在頁面元素的子元素位置，放在最前

? ? ? ? ? ? 4. perpendTo()

? ? ? ? ? ? ? ? => 要插入元素.prepend(頁面元素)

? ? ? ? ? ? ? ? => 跟上面prepend()用法相同，只是主語不同

? ? ? ? + 外部插入(兄弟關(guān)系)

? ? ? ? ? ? 1. after()

? ? ? ? ? ? ? ? => 頁面元素.after(要插入的元素)

? ? ? ? ? ? ? ? => 放在頁面元素的下一個(gè)兄弟元素位置

? ? ? ? ? ? 2. insertAfter()

? ? ? ? ? ? ? ? => 要插入元素.insertAfter(頁面元素)

? ? ? ? ? ? ? ? => 跟上面after()用法相同，只是主語不同

? ? ? ? ? ? 3. before()

? ? ? ? ? ? ? ? ? ? => 頁面元素.before(要插入的元素)

? ? ? ? ? ? ? ? ? ? => 放在頁面元素的上一個(gè)兄弟元素位置

? ? ? ? ? ? 4. insertBefore()

? ? ? ? ? ? ? ? => 要插入元素.insertBefore(頁面元素)

? ? ? ? ? ? ? ? => 跟上面before()用法相同，只是主語不同

? ? + 刪除節(jié)點(diǎn)? 對(duì)應(yīng)原生js中removeChild()

? ? ? ? 1. empty() 空

? ? ? ? ? ? => 頁面元素.empty()

? ? ? ? ? ? => 把頁面元素變成一個(gè)空標(biāo)簽

? ? ? ? 2. remove() 移除

? ? ? ? ? ? => 刪除自己

? ? + 替換節(jié)點(diǎn)? 對(duì)應(yīng)原生js中replaceChild()

? ? ? ? - 把頁面中某一個(gè)節(jié)點(diǎn)替換成其他節(jié)點(diǎn)

? ? ? ? ? ? 1. replaceWith()

? ? ? ? ? ? ? ? => 頁面元素.replaceWith(替換元素)

? ? ? ? ? ? ? ? => 用替換元素把頁面元素替換掉

? ? ? ? ? ? 2. replaceAll()

? ? ? ? ? ? ? ? => 替換元素.replaceAll(頁面元素)

? ? ? ? ? ? ? ? => 和replaceWith()用法一樣，只是換了主語

? ? + 克隆節(jié)點(diǎn)? 對(duì)應(yīng)原生js中cloneNode()

? ? ? ? - 復(fù)制一份一模一樣的元素

? ? ? ? ? ? 1.clone()

? ? ? ? ? ? ? ? => 專門用來克隆節(jié)點(diǎn)的

? ? ? ? ? ? ? ? => 頁面元素.clone()

? ? ? ? ? ? ? ? => 返回值：就是克隆出來的元素結(jié)合，集合里面有一個(gè)元素，就是克隆好的節(jié)點(diǎn)

? ? ? ? ? ? ? ? => 會(huì)克隆子節(jié)點(diǎn)

? ? ? ? ? ? ? ? => 接收兩個(gè)參數(shù)

? ? ? ? ? ? ? ? ? ? - clone(布爾值，布爾值)

? ? ? ? ? ? ? ? ? ? - 第一個(gè)參數(shù)：默認(rèn)值是 false，表示是否克隆元素的事件

? ? ? ? ? ? ? ? ? ? - 第二個(gè)參數(shù)：默認(rèn)值是 false，表示是否克隆子節(jié)點(diǎn)的事件

? ? ? ? ? ? ? ? ? ? -注：當(dāng)?shù)谝粋€(gè)參數(shù)為false時(shí)，第二個(gè)參數(shù)沒有意義

jQuery 獲取元素尺寸

? ? + 尺寸：元素占地面積

? ? 1. width() 和 height()

? ? ? ? => 獲取元素的 content 區(qū)域的尺寸，不管盒模型如何

? ? 2. innerWidth() 和 innerHeight()

? ? ? ? => 獲取元素的 content + padding 區(qū)域的尺寸

? ? 3. outerWidth() 和 outerHeight()

? ? ? ? => 獲取元素 content + padding + border 區(qū)域的尺寸

? ? 4. outerWidth(true) 和 outerHeight(true)

? ? ? ? => 獲取元素 content + padding + border + margin 區(qū)域的尺寸

jQuery 獲取元素位置

? ? - 獲取元素相對(duì)于誰的位置關(guān)系

? ? 1. offset()? 偏移量

? ? ? ? => 是一個(gè)讀寫得屬性

? ? ? ? => 讀取

? ? ? ? ? ? -> 不傳遞參數(shù)就是讀取

? ? ? ? ? ? -> 讀到的元素相對(duì)于頁面的位置關(guān)系

? ? ? ? ? ? -> 返回值是一個(gè)對(duì)象 {left:xxx,top:xxx}

? ? ? ? => 寫入

? ? ? ? ? ? -> 傳遞一個(gè)對(duì)象就是寫入 {left:xxx,top:xxx}

? ? ? ? ? ? -> 絕對(duì)寫入（不管原來位置如何，以修改后的為標(biāo)準(zhǔn)）

? ? 2. position()? 定位

? ? ? ? => 只讀的方法

? ? ? ? ? ? -元素相對(duì)于定位父級(jí)的位置關(guān)系

? ? ? ? ? ? -得到的也是一個(gè)對(duì)象 {left:xxx,top:xxx}

jQuery 獲取卷去的尺寸

? ? + scrollTop()

? ? ? ? => 原生 js 里面 document.documentElement.scrollTop

? ? ? ? => 讀寫的方法

? ? ? ? => 不傳遞參數(shù)的時(shí)候就是設(shè)置卷去的高度

? ? ? ? => 傳遞一個(gè)參數(shù)的時(shí)候就是設(shè)置卷去的高度

? ? + scrollLeft()

? ? ? ? => 原生 js 里面 document.documentElement.scrollLeft

? ? ? ? => 讀寫的方法

? ? ? ? => 不傳遞參數(shù)的時(shí)候就是設(shè)置卷去的寬度

? ? ? ? => 傳遞一個(gè)參數(shù)的時(shí)候就是設(shè)置卷去的寬度

? ? 注：設(shè)置的時(shí)候不會(huì)滾動(dòng)回去而是直接跳回到設(shè)置的高度（寬度）

jQuery 的方法

? ? + ready 的方法

? ? ? ? -類似于 window.onload 事件

? ? ? ? ? ? -> 會(huì)在頁面所有資源加載完畢后執(zhí)行

? ? ? ? -ready()

? ? ? ? ? ? -> 會(huì)在頁面 html 結(jié)構(gòu)加載完畢后執(zhí)行

? ? ? ? -也叫做jQuery 的入口函數(shù)

? ? ? ? -有一個(gè)簡寫函數(shù)

? ? ? ? ? ? -> $(function(){})

? ? + each() 方法

? ? ? ? -類似于 forEach() 方法

? ? ? ? -jQuery 的元素集合，是一個(gè) jQuery 數(shù)組，不是 數(shù)組，不能用數(shù)組的各種方法

jQuery 里面的動(dòng)畫 -> (都為元素集合的方法)

? ? + 讓元素出現(xiàn)不同的移動(dòng)，改變

? ? ? ? => transition 過渡動(dòng)畫

? ? ? ? => animation 幀動(dòng)畫

? ? + 標(biāo)準(zhǔn)動(dòng)畫

? ? ? ? - 參數(shù)全都是選填

? ? ? ? 1. show() 顯示

? ? ? ? ? ? => 語法：show(時(shí)間，運(yùn)動(dòng)曲線，運(yùn)動(dòng)結(jié)束的函數(shù))

? ? ? ? 2. hide() 隱藏

? ? ? ? ? ? => 語法：hide(時(shí)間，運(yùn)動(dòng)曲線，運(yùn)動(dòng)結(jié)束的函數(shù))

? ? ? ? 2. toggle() 切換（如果是顯示就隱藏，如果是隱藏就顯示）

? ? ? ? ? ? => 語法：toggle(時(shí)間，運(yùn)動(dòng)曲線，運(yùn)動(dòng)結(jié)束的函數(shù))

? ? + 折疊動(dòng)畫

? ? ? ? - 參數(shù)全都是選填

? ? ? ? 1. slideDown() 下滑顯示

? ? ? ? ? ? => 語法：slideDown(時(shí)間，運(yùn)動(dòng)曲線，運(yùn)動(dòng)結(jié)束的函數(shù))

? ? ? ? 2. slideUp() 上滑隱藏

? ? ? ? ? ? => 語法：slideUp(時(shí)間，運(yùn)動(dòng)曲線，運(yùn)動(dòng)結(jié)束的函數(shù))

? ? ? ? 3. slideToggle() 切換滑動(dòng)顯示和隱藏

? ? ? ? ? ? => 語法：slideToggle(時(shí)間，運(yùn)動(dòng)曲線，運(yùn)動(dòng)結(jié)束的函數(shù))

? ? + 漸隱漸顯動(dòng)畫

? ? ? ? - 前三個(gè)語法同上，參數(shù)都有默認(rèn)值

? ? ? ? 1. fadeIn()? 漸漸的顯示

? ? ? ? 2. fadeOut()? 漸漸的消失

? ? ? ? 3. fadeToggle() 漸漸的切換顯示和消失

? ? ? ? 4. fadeTo()

? ? ? ? ? ? => 語法：slideToggle(時(shí)間，指定透明度（eg:0.6)，運(yùn)動(dòng)曲線，運(yùn)動(dòng)結(jié)束的函數(shù))

? ? + 綜合動(dòng)畫

? ? ? ? 1. animate()

? ? ? ? ? ? => 基本上大部分的css樣式都可以動(dòng)畫

? ? ? ? ? ? => transform 不行，顏色不行

? ? ? ? ? ? => 語法：animate({},時(shí)間，運(yùn)動(dòng)曲線，運(yùn)動(dòng)結(jié)束函數(shù))

? ? ? ? ? ? ? ? - {}里面就是你要運(yùn)動(dòng)的css樣式，例如 height,left,borderRadius

? ? + 停止動(dòng)畫

? ? ? ? -讓當(dāng)前的動(dòng)畫結(jié)束

? ? ? ? -因?yàn)閖Query的動(dòng)畫你一直點(diǎn)，他就一直觸發(fā)，如果你點(diǎn)擊10次，它就會(huì)執(zhí)行10次，直至10次全部完畢才結(jié)束

? ? ? ? 1. stop() 運(yùn)動(dòng)到哪里，停止到哪里

? ? ? ? 2. finish() 運(yùn)動(dòng)到哪里，停止到動(dòng)畫完成的位置