了解 jQuery
? ? + 是一個前端類庫（方法庫滨嘱，工具庫）
? ? ? ? => jQuery 里面 95% 以上都是方法
? ? + 有人把 js 里面各種 DOM 操作都給你封裝好了
jQuery 的中文網(wǎng)站
? ? + http://jquery.cuishifeng.cn/
jQuery 的使用
? ? + 分成下載和使用? 下載后捌刮，在頁面里引入一個 jquery.js或jqery.min.js 即可
? ? 當(dāng) jQuery 文件被引入以后
? ? ? ? + 我們的全局就會多了兩個變量
? ? ? ? + jQuery 向全局添加了兩個名字
? ? ? ? ? ? => $
? ? ? ? ? ? => jQuery
? ? ? ? + 這兩個名字無任何區(qū)別
jQuery 的優(yōu)點(diǎn)
? ? +無所不能的選擇器
? ? +無處不在的隱式迭代
? ? +無與倫比的鏈?zhǔn)骄幊?/p>
? ? +jQuery 號稱全兼容
jQuery 的選擇器
? ? + 選擇器就是用來幫我們獲取 DOM 元素的方法
? ? $('div')? ? 通過標(biāo)簽名獲取元素
? ? $('.box')? 通過類名獲取元素
? ? $('#box')? 通過id名獲取元素
? ? 還有 $('ul li'), $('ul>li:nth-child(n)')茂附、等等? n可以為數(shù)字、odd抚太、even
? ? 注：不管使用哪一種選擇器塘幅，獲取到的都是一個元素集合，只有id選擇器里面可能有一個元素
? ? 特殊選擇器
? ? 1. :first? 獲取第一個
? ? 2. :last? 獲取最后一個
? ? 3. :eq(n) 獲取索引為n的元素
? ? 4. :odd? ? 獲取所有索引為 奇數(shù) 的
? ? 5. :even? 獲取索引為 偶數(shù) 的
jQuery 的篩選器
? ? ? ? ? ? + 用在 jQuery 選擇的元素集合的后面
? ? ? ? ? ? + 都是方法凭舶，為了對已經(jīng)選擇的元素進(jìn)行二次篩選
? ? 篩選器：
? ? ? ? 1. first()? 篩選出來一個元素集合里面的第一個
? ? ? ? 2. last()? 篩選出來一個元素集合里面的最后一個
? ? ? ? 3. eq(n)? ? 篩選出來一個元素集合里面索引為 n 的那一個
? ? ? ? 4. next()? 篩選出元素的下一個兄弟元素
? ? ? ? 5. nextAll()篩選出元素后面的所有兄弟元素
? ? ? ? 6. nextUntil(選擇器)
? ? ? ? ? ? -如果后無參數(shù)晌块，篩選出元素后面的所有兄弟元素
? ? ? ? ? ? -如果有參數(shù)，篩選出元素后面所有的兄弟元素直到選擇器元素為止,不包含選擇器元素
? ? ? ? 7. prev()? 篩選出元素的上一個兄弟元素
? ? ? ? 8. prevAll(選擇器)篩選出元素的上面的所有兄弟元素
? ? ? ? 9. prevUntil(選擇器)
? ? ? ? ? ? -如果后無參數(shù)帅霜，篩選出元素上面的所有兄弟元素
? ? ? ? ? ? -如果后有參數(shù)，篩選出元素上面所有的兄弟元素直到選擇器元素為止呼伸，不包含選擇器元素
? ? ? ? 10. parent() 拿到元素的父元素
? ? ? ? 11. parents()拿到所有祖先元素身冀，直到 html 元素
? ? ? ? 12. parentsUntil(選擇器)
? ? ? ? ? ? ? ? -如果后無參數(shù)，拿到元素所有祖先元素
? ? ? ? ? ? ? ? -如果后有參數(shù)括享，篩選出元素所有祖先元素直到選擇器元素為止搂根，不包含選擇器元素
? ? ? ? 13. children(選擇器)
? ? ? ? ? ? ? ? -如果后無參數(shù)，篩選出所有子級元素
? ? ? ? ? ? ? ? -如果后有參數(shù)铃辖，篩選出所有子元素里面符合條件選擇器條件的元素
? ? ? ? 14. siblings(選擇器)
? ? ? ? ? ? ? ? -如果后無參數(shù)剩愧，篩選出所有兄弟元素
? ? ? ? ? ? ? ? -如果后有參數(shù)，篩選出所有兄弟元素里面符合條件選擇器條件的元素
? ? ? ? 15. find(選擇器)
? ? ? ? ? ? ? ? -在元素集合里面的每一個元素中娇斩，查找后代元素
? ? ? ? ? ? ? ? -在一個元素的后代元素中查找對應(yīng)的選擇器的元素
? ? ? ? 16. index()
? ? ? ? ? ? ? ? -獲取到元素的索引位置
? ? ? ? ? ? ? ? -不是元素集合里面的第幾個
? ? ? ? ? ? ? ? -找到他是該父元素下的第幾個元素
? ? ? ? ? ? ? ? -拿到的是一個數(shù)字
jQuery 操作文本內(nèi)容
? ? + html()
? ? ? ? -一個讀寫的方法
? ? ? ? -不傳參數(shù)的時候仁卷，就是獲取元素內(nèi)部的超文本內(nèi)容
? ? ? ? -獲取的時候只能獲取元素集合里面的第一個元素的超文本內(nèi)容
? ? ? ? -傳一個參數(shù)的時候，就是設(shè)置元素集合里所有元素內(nèi)的超文本內(nèi)容
? ? + text()
? ? ? ? -一個讀寫的方法
? ? ? ? -不傳參數(shù)的時候犬第，就是獲取元素集合內(nèi)所有內(nèi)部的文本內(nèi)容
? ? ? ? -傳一個參數(shù)的時候锦积，就是設(shè)置元素集合里所有元素內(nèi)的文本內(nèi)容
? ? + val()
? ? ? ? -一個讀寫的方法，操作 Input 標(biāo)簽
? ? ? ? -不傳參數(shù)的時候就是獲取元素集合里面第一個標(biāo)簽的 value 值
? ? ? ? -傳一個參數(shù)的時候就是設(shè)置所有元素集合里面的標(biāo)簽的 value 值
jQuery 操作元素類名
? ? + addClass() 添加類名
? ? + removeClass() 移除類名
? ? + toggleClass() 切換類名（有就刪歉嗓，無就加）
? ? + hasClass() 判斷有沒有某一個類名
jQuery 操作元素屬性
? ? + attr()
? ? ? ? -是一個讀寫的方法
? ? ? ? -attr(要讀取得屬性名)：傳遞一個參數(shù)得時候是讀取
? ? ? ? -attr(屬性名丰介，屬性值)：傳遞兩個參數(shù)得時候就是設(shè)置
? ? ? ? -只獲取元素集合內(nèi)第一個元素的屬性
? ? + removeAttr()
? ? ? ? -專門用來移除屬性的，針對元素集合內(nèi)所有元素
? ? 注：所有屬性都會顯示在標(biāo)簽上（原生屬性和自定義屬性），不管屬性值是什么類型哮幢，都會變?yōu)樽址?/p>
? ? + prop() 和 removeProp()? ? 同 attr 的一套方法带膀，使用方式一樣
? ? 注：設(shè)置的時候，原生屬性會顯示在標(biāo)簽上橙垢，非原生屬性垛叨，不會顯示在標(biāo)簽上，會存儲在DOM對象身上钢悲。? ? ? ?
? ? ? ? 存儲的是什么數(shù)據(jù)類型点额，獲取到就是什么數(shù)據(jù)類型
? ? ? ? 無法刪除原生屬性,如:(id，class莺琳，style)
? ? + data()?
? ? ? ? - 一個讀寫的方法
? ? ? ? - 創(chuàng)建的是自定義屬性
? ? ? ? -傳一個參數(shù)是讀取还棱，兩參數(shù)是設(shè)置
? ? + removeData()
? ? ? ? - 刪除 data 設(shè)置的屬性
? ? 注： 和元素的元素屬性沒有關(guān)系，就是在元素身上開辟一個地方惭等，存儲一些數(shù)據(jù)珍手，不會顯示在標(biāo)簽上
? ? ? ? 存儲的是什么類型，拿到的就是什么類型
jQuery 操作元素樣式
? ? + css()
? ? ? ? - 一個讀寫的屬性
? ? ? ? - 不同的操作需要不同的參數(shù)
? ? ? ? - css(要獲取的樣式名)
? ? ? ? ? ? => 獲取元素樣式辞做，行內(nèi)和非行內(nèi)都能獲取
? ? ? ? - css(樣式名琳要，樣式值)
? ? ? ? ? ? => 設(shè)置元素的樣式
? ? ? ? ? ? => 值得位置如果不帶單位，默認(rèn)為 px
? ? ? ? - css({
? ? ? ? ? ? 樣式名：樣式值秤茅，
? ? ? ? ? ? 樣式名：樣式值稚补，
? ? ? ? ? ? ...
? ? ? ? ? ? })
? ? ? ? ? ? => 批量設(shè)置元素的樣式
jQuery 綁定事件
? ? + 給元素綁定一個事件
? ? + on() 方法是專門用來綁定事件的
? ? ? ? => jQuery 里面通用的事件綁定方式
? ? ? ? => 通過傳遞不同的參數(shù)來達(dá)到不同的效果
? ? ? ? on 方法的各種參數(shù)描述
? ? ? ? ? ? 1. on('事件類型'，事件處理函數(shù))
? ? ? ? ? ? ? ? => 給元素集合內(nèi)所有元素綁定一個事件
? ? ? ? ? ? 2. on('事件類型'框喳，'事件委托'课幕，事件處理函數(shù))
? ? ? ? ? ? ? ? => 把 事件委托 位置的元素的事件 委托給了前面的元素集合
? ? ? ? ? ? 3. on('事件類型'，'復(fù)雜數(shù)據(jù)類型'五垮，事件處理函數(shù))
? ? ? ? ? ? ? ? => 給每一個元素綁定一個事件乍惊，復(fù)雜數(shù)據(jù)類型是觸發(fā)事件的時候傳遞的參數(shù)，在事件對象里面獲确耪獭（e）
? ? ? ? ? ? 4.? on('事件類型'润绎，'事件委托','任意數(shù)據(jù)類型'，事件處理函數(shù))
? ? ? ? ? ? ? ? => 做一個事件委托的形式诞挨，第三個參數(shù)位置的數(shù)據(jù)莉撇，是觸發(fā)事件的時候，可以傳遞進(jìn)去的數(shù)據(jù)
? ? ? ? ? ? 5.? on(對象)
? ? ? ? ? ? ? ? => 給一個函數(shù)綁定多個事件的方式
? ? + one() 方法是專門通過綁定一個只能執(zhí)行一次的方法
? ? ? ? => 傳遞的參數(shù)個數(shù)和意義和 on 方法一模一樣
? ? ? ? => 綁定上的事件只能執(zhí)行一次
? ? + off() 方法是專門用來解綁一個元素事件的
? ? ? ? => 有兩種使用方式
? ? ? ? => off('事件類型')? 給該事件類型所有事件處理函數(shù)解綁
? ? ? ? => off('事件類型',事件處理函數(shù)名)? 解綁指定事件處理函數(shù)
? ? ? ? => on 和 one 綁定的事件都可以移除
? ? + trigger() 方法是專門用來觸發(fā)事件的方法
? ? ? ? => 不通過點(diǎn)擊亭姥，通過代碼就能把事件觸發(fā)了
? ? ? ? => trigger('事件類型')? 把該元素的事件給觸發(fā)了
? ? + 常用事件
? ? ? ? => jQuery 把一些常用的事件直接做成了函數(shù)稼钩，如：click,mouseover,... ,直接使用就可以了
? ? ? ? => 使用click舉一個例子
? ? ? ? ? ? - click(事件處理函數(shù))
? ? ? ? ? ? - click(參數(shù)，事件處理函數(shù))? 參數(shù)：觸發(fā)事件時傳入事件對象里面的數(shù)據(jù)
? ? + hover()
? ? ? ? =>? jQuery 里面唯一一個很特殊的事件达罗，表示一個鼠標(biāo)懸停的動作
? ? ? ? => hover(鼠標(biāo)移入的時候觸發(fā)坝撑，鼠標(biāo)移出的時候觸發(fā)) 如果只寫一個函數(shù)參數(shù)静秆，那么這兩次都會觸發(fā)這個函數(shù)?
jQuery 的節(jié)點(diǎn)操作
? ? + 創(chuàng)建節(jié)點(diǎn)? 對應(yīng)原生js中createElement()
? ? ? ? + 只有一個方法
? ? ? ? + $() 或 jQuery()
? ? ? ? ? ? -() 里面?zhèn)鬟f一個 html 格式文本的時候就是創(chuàng)建節(jié)點(diǎn)（DOM 元素）
? ? ? ? ? ? -() 里面?zhèn)鬟f一個選擇器的時候，就是獲取頁面中的 DOM 元素
? ? + 插入節(jié)點(diǎn)? 對應(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(要插入的元素)
? ? ? ? ? ? ? ? => 放在頁面元素的下一個兄弟元素位置
? ? ? ? ? ? 2. insertAfter()
? ? ? ? ? ? ? ? => 要插入元素.insertAfter(頁面元素)
? ? ? ? ? ? ? ? => 跟上面after()用法相同殊橙，只是主語不同
? ? ? ? ? ? 3. before()
? ? ? ? ? ? ? ? ? ? => 頁面元素.before(要插入的元素)
? ? ? ? ? ? ? ? ? ? => 放在頁面元素的上一個兄弟元素位置
? ? ? ? ? ? 4. insertBefore()
? ? ? ? ? ? ? ? => 要插入元素.insertBefore(頁面元素)
? ? ? ? ? ? ? ? => 跟上面before()用法相同，只是主語不同
? ? + 刪除節(jié)點(diǎn)? 對應(yīng)原生js中removeChild()
? ? ? ? 1. empty() 空
? ? ? ? ? ? => 頁面元素.empty()
? ? ? ? ? ? => 把頁面元素變成一個空標(biāo)簽
? ? ? ? 2. remove() 移除
? ? ? ? ? ? => 刪除自己
? ? + 替換節(jié)點(diǎn)? 對應(yīng)原生js中replaceChild()
? ? ? ? - 把頁面中某一個節(jié)點(diǎn)替換成其他節(jié)點(diǎn)
? ? ? ? ? ? 1. replaceWith()
? ? ? ? ? ? ? ? => 頁面元素.replaceWith(替換元素)
? ? ? ? ? ? ? ? => 用替換元素把頁面元素替換掉
? ? ? ? ? ? 2. replaceAll()
? ? ? ? ? ? ? ? => 替換元素.replaceAll(頁面元素)
? ? ? ? ? ? ? ? => 和replaceWith()用法一樣狱从，只是換了主語
? ? + 克隆節(jié)點(diǎn)? 對應(yīng)原生js中cloneNode()
? ? ? ? - 復(fù)制一份一模一樣的元素
? ? ? ? ? ? 1.clone()
? ? ? ? ? ? ? ? => 專門用來克隆節(jié)點(diǎn)的
? ? ? ? ? ? ? ? => 頁面元素.clone()
? ? ? ? ? ? ? ? => 返回值：就是克隆出來的元素結(jié)合膨蛮，集合里面有一個元素，就是克隆好的節(jié)點(diǎn)
? ? ? ? ? ? ? ? => 會克隆子節(jié)點(diǎn)
? ? ? ? ? ? ? ? => 接收兩個參數(shù)
? ? ? ? ? ? ? ? ? ? - clone(布爾值季研，布爾值)
? ? ? ? ? ? ? ? ? ? - 第一個參數(shù)：默認(rèn)值是 false敞葛，表示是否克隆元素的事件
? ? ? ? ? ? ? ? ? ? - 第二個參數(shù)：默認(rèn)值是 false，表示是否克隆子節(jié)點(diǎn)的事件
? ? ? ? ? ? ? ? ? ? -注：當(dāng)?shù)谝粋€參數(shù)為false時与涡，第二個參數(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 獲取元素位置
? ? - 獲取元素相對于誰的位置關(guān)系
? ? 1. offset()? 偏移量
? ? ? ? => 是一個讀寫得屬性
? ? ? ? => 讀取
? ? ? ? ? ? -> 不傳遞參數(shù)就是讀取
? ? ? ? ? ? -> 讀到的元素相對于頁面的位置關(guān)系
? ? ? ? ? ? -> 返回值是一個對象 {left:xxx,top:xxx}
? ? ? ? => 寫入
? ? ? ? ? ? -> 傳遞一個對象就是寫入 {left:xxx,top:xxx}
? ? ? ? ? ? -> 絕對寫入（不管原來位置如何，以修改后的為標(biāo)準(zhǔn)）
? ? 2. position()? 定位
? ? ? ? => 只讀的方法
? ? ? ? ? ? -元素相對于定位父級的位置關(guān)系
? ? ? ? ? ? -得到的也是一個對象 {left:xxx,top:xxx}
jQuery 獲取卷去的尺寸
? ? + scrollTop()
? ? ? ? => 原生 js 里面 document.documentElement.scrollTop
? ? ? ? => 讀寫的方法
? ? ? ? => 不傳遞參數(shù)的時候就是設(shè)置卷去的高度
? ? ? ? => 傳遞一個參數(shù)的時候就是設(shè)置卷去的高度
? ? + scrollLeft()
? ? ? ? => 原生 js 里面 document.documentElement.scrollLeft
? ? ? ? => 讀寫的方法
? ? ? ? => 不傳遞參數(shù)的時候就是設(shè)置卷去的寬度
? ? ? ? => 傳遞一個參數(shù)的時候就是設(shè)置卷去的寬度
? ? 注：設(shè)置的時候不會滾動回去而是直接跳回到設(shè)置的高度（寬度）
jQuery 的方法
? ? + ready 的方法
? ? ? ? -類似于 window.onload 事件
? ? ? ? ? ? -> 會在頁面所有資源加載完畢后執(zhí)行
? ? ? ? -ready()
? ? ? ? ? ? -> 會在頁面 html 結(jié)構(gòu)加載完畢后執(zhí)行
? ? ? ? -也叫做jQuery 的入口函數(shù)
? ? ? ? -有一個簡寫函數(shù)
? ? ? ? ? ? -> $(function(){})
? ? + each() 方法
? ? ? ? -類似于 forEach() 方法
? ? ? ? -jQuery 的元素集合驼卖，是一個 jQuery 數(shù)組氨肌，不是 數(shù)組，不能用數(shù)組的各種方法
jQuery 里面的動畫 -> (都為元素集合的方法)
? ? + 讓元素出現(xiàn)不同的移動酌畜，改變
? ? ? ? => transition 過渡動畫
? ? ? ? => animation 幀動畫
? ? + 標(biāo)準(zhǔn)動畫
? ? ? ? - 參數(shù)全都是選填
? ? ? ? 1. show() 顯示
? ? ? ? ? ? => 語法：show(時間怎囚，運(yùn)動曲線，運(yùn)動結(jié)束的函數(shù))
? ? ? ? 2. hide() 隱藏
? ? ? ? ? ? => 語法：hide(時間桥胞，運(yùn)動曲線桩了，運(yùn)動結(jié)束的函數(shù))
? ? ? ? 2. toggle() 切換（如果是顯示就隱藏，如果是隱藏就顯示）
? ? ? ? ? ? => 語法：toggle(時間埠戳，運(yùn)動曲線，運(yùn)動結(jié)束的函數(shù))
? ? + 折疊動畫
? ? ? ? - 參數(shù)全都是選填
? ? ? ? 1. slideDown() 下滑顯示
? ? ? ? ? ? => 語法：slideDown(時間蕉扮，運(yùn)動曲線整胃，運(yùn)動結(jié)束的函數(shù))
? ? ? ? 2. slideUp() 上滑隱藏
? ? ? ? ? ? => 語法：slideUp(時間，運(yùn)動曲線喳钟，運(yùn)動結(jié)束的函數(shù))
? ? ? ? 3. slideToggle() 切換滑動顯示和隱藏
? ? ? ? ? ? => 語法：slideToggle(時間屁使，運(yùn)動曲線，運(yùn)動結(jié)束的函數(shù))
? ? + 漸隱漸顯動畫
? ? ? ? - 前三個語法同上奔则，參數(shù)都有默認(rèn)值
? ? ? ? 1. fadeIn()? 漸漸的顯示
? ? ? ? 2. fadeOut()? 漸漸的消失
? ? ? ? 3. fadeToggle() 漸漸的切換顯示和消失
? ? ? ? 4. fadeTo()
? ? ? ? ? ? => 語法：slideToggle(時間蛮寂，指定透明度（eg:0.6)，運(yùn)動曲線易茬，運(yùn)動結(jié)束的函數(shù))
? ? + 綜合動畫
? ? ? ? 1. animate()
? ? ? ? ? ? => 基本上大部分的css樣式都可以動畫
? ? ? ? ? ? => transform 不行酬蹋，顏色不行
? ? ? ? ? ? => 語法：animate({},時間及老，運(yùn)動曲線，運(yùn)動結(jié)束函數(shù))
? ? ? ? ? ? ? ? - {}里面就是你要運(yùn)動的css樣式范抓，例如 height,left,borderRadius
? ? + 停止動畫
? ? ? ? -讓當(dāng)前的動畫結(jié)束
? ? ? ? -因?yàn)閖Query的動畫你一直點(diǎn)骄恶，他就一直觸發(fā)，如果你點(diǎn)擊10次匕垫，它就會執(zhí)行10次僧鲁，直至10次全部完畢才結(jié)束
? ? ? ? 1. stop() 運(yùn)動到哪里，停止到哪里
? ? ? ? 2. finish() 運(yùn)動到哪里象泵，停止到動畫完成的位置
