概念：封裝了很多 原生js 操作 的庫
優(yōu)點(diǎn)：

1. 強(qiáng)大的選擇器機(jī)制
2. 優(yōu)質(zhì)的隱式迭代 - 隱藏的遍歷
3. 無所不能的鏈?zhǔn)骄幊?/li>

特有的篩選器：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

1. 獲取第一個(gè)元素
   $('ul li:first')
2. 獲取最后一個(gè)元素
   $('ul li:last')
3. 獲取 偶數(shù)下標(biāo) 的元素
   $('ul li:even')
4. 獲取 奇數(shù)下標(biāo) 的元素
   $('ul li:odd ')
5. 獲取 指定下標(biāo) 的元素
   $('ul li:eq(1)')
6. 獲取 大于 指定下標(biāo) 的元素
   $('ul li:gt(1)')
7. 獲取 小于 指定下標(biāo) 的元素
   $('ul li:gt(1)')

表單專用的篩選器

1. 獲取所有 表單元素
   $(':input')
   [表單元素包括：input、button、textarea忱辅、select]
2. 獲取所有 文本框
   $(':text')
3. 獲取所有 密碼框
   $(':password')
4. 獲取所有 單選框
   $(':radio')
5. 獲取所有 復(fù)選框
   $(':checkbox')
6. 獲取所有 提交按鈕
   $(':submit')
7. 獲取所有 圖片框
   $(':imgage')
8. 獲取所有 文件按鈕
   $(':flie')
9. 獲取所有 普通按鈕
   $(':button')
   [包括：type為button的input 和普通botton]
10. 獲取所有 不在頁面中的 標(biāo)簽
    $(':hidden')
    [一般包括如：head meta title script option]
11. 獲取所有 被禁用的表單元素
    $(':disabled')
12. 獲取所有 可用的表單元素
    $(':enabled')
13. 獲取所有 被'選中的'表單元素
    $(':checked ')
14. 獲取 被選中的option
$(':selected')
    [注意返回的是偽數(shù)組 按需求聯(lián)合 [0].innerText 使用]

篩選器方法

1. 獲取所有 子標(biāo)簽
   jq偽數(shù)組.children()
2. 獲取 第一個(gè)子標(biāo)簽
   jq偽數(shù)組.first()
3. 獲取 最后一個(gè)子標(biāo)簽
   jq偽數(shù)組.last()
4. 獲取所有 兄弟標(biāo)簽
   jq偽數(shù)組.siblings()
   [不包括自身 無視上下關(guān)系一并獲取]
5. 獲取 上一個(gè)兄弟標(biāo)簽
   jq偽數(shù)組.prev()
6. 獲取 前面所有兄弟標(biāo)簽
   jq偽數(shù)組.prevAll()
7. 獲取 下一個(gè)兄弟標(biāo)簽
   jq偽數(shù)組.next()
8. 獲取 后面所有兄弟標(biāo)簽
   jq偽數(shù)組.nextAll()
9. 獲取 父標(biāo)簽
   jq偽數(shù)組.parent()
10. 獲取所有 祖宗標(biāo)簽
    jq偽數(shù)組.parents()
    [直至html]
11. 獲取 指定下標(biāo)的標(biāo)簽
    jq偽數(shù)組.eq(index)
12. 獲取 父標(biāo)簽中 選擇器指定的后代
    jq偽數(shù)組.find(選擇器)

jquery元素與dom元素

jquery元素 不能使用 dom元素的方法 反之同理

1. dom元素轉(zhuǎn)jquery元素
   $(dom元素)
2. jqurey元素 '轉(zhuǎn)' dom元素
   jq偽數(shù)組[0]
   [因?yàn)閖q元素都是偽數(shù)組 所以通過下標(biāo)可以直接提取為dom元素]

事件綁定

1. 普通綁定
   在jquery中 事件類型都被封裝成了方法 事件函數(shù)要作為方法的回調(diào)函數(shù)使用
   jq元素.事件類型(function(){})
   [事件函數(shù)中 this 仍指向當(dāng)前 事件源(dom元素)]
   [jquery沒有封裝input吏恭、load事件]
2. on綁定 [多用于事件委托]
   jq元素.on(參1,參2,參3,參4)
   ????[參1 必選項(xiàng) 事件類型]
   ????[參2 可選項(xiàng) 事件委托 的對象(選擇器)]
   ????????[相對原事件委托 可更精準(zhǔn)的 限定 'target']
   ????[參3 可選項(xiàng) 傳遞的數(shù)據(jù)]
   ????????[傳入的數(shù)據(jù) 會添加在事件對象.data中]
   ????[參4 必選項(xiàng) 事件函數(shù)]

阻止默認(rèn)行為 阻止事件冒泡
return false
????[在jq中 return false既可以阻止默認(rèn)行為 也可以阻止事件冒泡]
????[在jq中 cancelBubble不能阻止事件冒泡]
????[在jq中 stopPropagation能照常阻止事件冒泡]

事件解綁

jq元素.off('參1',參2)
????[參1 - 必選項(xiàng) 事件類型]
????[參2 - 可選項(xiàng) 事件函數(shù)]
????????[會同時(shí)解除 所有 同 事件類型 的事件]
????????[若參二填寫的是事件函數(shù)名 則只會解除該事件 不會解除所有]

事件觸發(fā)

1. 自動觸發(fā)事件
   jq元素.trigger('事件類型')
2. 只能觸發(fā)一次事件
   jq元素.one('事件類型',事件函數(shù))
   [不能觸發(fā)指定單一事件函數(shù) 會觸發(fā)所有同事件類型的事件]

其他事件

1. 替代window.onload的快速寫法：
   $(function(){})
2. 當(dāng)dom元素加載完成后執(zhí)行的事件：
   $(document).ready(function(){})
   [相對window.onload加載全部資源后執(zhí)行 效率更高]

其他方法

1. 在jq中獲取滾動距離
   $('document').scrollTop()
2. 移入移出事件的合并
   $('選擇器').hover(移入事件函數(shù),移出事件函數(shù))
3. 遍歷js元素(偽數(shù)組)
   js元素.each(function(i,v){})
   [參數(shù) i - 當(dāng)前遍歷元素的下標(biāo)]
   [參數(shù) v - 當(dāng)前遍歷dom元素]
4. 獲取當(dāng)前標(biāo)簽在父標(biāo)簽中的下標(biāo)
   js元素.index()

屬性操作

1. 設(shè)置屬性
   jq元素.attr('屬性名','屬性值')
   [對同一元素多次設(shè)置時(shí) 是添加 而不會覆蓋]
2. 獲取屬性值
   jq元素.attr('屬性名')
3. 刪除屬性
   jq元素.removeAttr('屬性名')
4. 針對屬性值為 布爾值 的屬性操作
   jq元素.prop('屬性名',布爾值)
   ????[如 checked disabled]
5. 獲取布爾屬性值
   jq元素.prop('屬性名')

(行內(nèi))樣式操作

1. 設(shè)置單一樣式
   jq元素.css('屬性','屬性值')
2. 設(shè)置多個(gè)樣式
   jq元素.css({鍵:'值',鍵:'值'...})
   ????[批量設(shè)置樣式時(shí) 鍵的引號可加可不加]
3. 獲取樣式
   jq元素.css('屬性')
   [調(diào)用css方法時(shí) 會返回調(diào)用對象 如$(this).css() 返回 $(this)]

類名操作

1. 添加類名
   js元素.addClass('類名')
2. 刪除類名
   js元素.removeClass('類名')
3. 替換類名
   js元素.toggleClass('類名')
   ????[類開關(guān) 存在則 刪除 不存在則 添加]
4. 判斷類名
   js元素.hasClass('類名')
   ????[返回 布爾值]

內(nèi)容操作

1. 類innerText
   jq元素.text()
2. 類innerHtml
   jq元素.html()

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

1. 創(chuàng)建標(biāo)簽
   $('完整的標(biāo)簽字符串')
   ????[如 $(<div class='box'>盒子</div>)]
2. 插入標(biāo)簽
   ??2.1 在 父標(biāo)簽 末尾 添加
   ??????父-jq元素.apend(子-jq元素)
   ??2.2 在 父標(biāo)簽 末尾 添加
   ??????子-jq元素.apendTo(父-jq元素)
   ??2.3 在 父標(biāo)簽 開頭 添加
   ??????父-jq元素.prepend(子-jq元素)
   ??2.4 在 父標(biāo)簽 開頭 添加
   ??????子-jq元素.prependTo(父-jq元素)
   ??2.5 添加 下一個(gè) 兄弟標(biāo)簽
   ??????參考-jq元素.after(新-jq元素)
   ??2.6 添加 下一個(gè) 兄弟標(biāo)簽
   ??????新-jq元素.insertAfter(參考-jq元素)
   ??2.7 添加 上一個(gè) 兄弟標(biāo)簽
   ??????參考-jq元素.before(新-jq元素)
   ??2.8 添加 上一個(gè) 兄弟標(biāo)簽
   ??????新-jq元素.insertBefore(參考-jq元素)
3. 替換標(biāo)簽
   新-jq元素.replaceAll(舊-jq元素)
舊-jq元素.replaceWith(新-jq元素)
4. 刪除標(biāo)簽
   jq元素.empty()
   ????[保留當(dāng)前標(biāo)簽 清空內(nèi)容]
   jq元素.remove()
   ????[包括自己刪除]
5. 復(fù)制標(biāo)簽
   jq元素.clone(參1,參2)
   ????[默認(rèn)復(fù)制 標(biāo)簽內(nèi)部內(nèi)容]
   ????[參1 可選項(xiàng) 布爾值 是否復(fù)制大盒子事件 默認(rèn)值：false]
   ????[參2 可選項(xiàng) 布爾值 是否復(fù)制內(nèi)容的事件 默認(rèn)值跟隨參1]
   ????????[若參1為false 則無視參2 只能false]

元素大小

1. 獲取大小
   1.1 獲取 不包含padding 的大小
   ????jq元素.width()
   ????jq元素.height()
   1.2 獲取 包含padding 不包含border 的大小
   ????jq元素.innerWidth()
   ????jq元素.innerHeight()
   1.3 獲取 包含border 不包含margin 的大小
   ????jq元素.outerWidth()
   ????jq元素.outerHeight()
   1.4 獲取 包含margin 的大小
   ????jq元素.outerWidth(true)
   ????jq元素.outerHeight(true)
2. 設(shè)置大小
   jq元素.width(num)
jq元素.height(num)
   ????[不包含padding]
   ????[在使用box-sizing:border-box時(shí) 行內(nèi)樣式中的width和height會自動加上border``padding的數(shù)值]

元素位置

1. 獲取位置
   1.1 獲取相對于 瀏覽器 的 絕對位置
   ????jq元素.offset()
   ????????[返回一個(gè)對象]
   1.2 獲取相對于 最近的 設(shè)置過定位的 祖宗標(biāo)簽的 相對位置
   ????jq元素.position()
2. 設(shè)置位置
   jq元素-offset({left:num,top:num})
   ????[不需要px單位]

基本動畫

1. display+height+left+opacity式顯示闷愤、隱藏
   1.1 顯示
   ????jq元素.show(參1,參2,參3)
   1.2 隱藏
   ????jq元素.hide(參1,參2,參3)
   1.3 切換
   ????jq-元素.toggle(參1,參2參3)
   [參1 可選項(xiàng) 動畫執(zhí)行時(shí)長(ms)]
   ????[num/關(guān)鍵字]
   ????????[slow(600) normal(400)默認(rèn)值 fast(200)]
   [參2 可選項(xiàng) 運(yùn)動方式]
   ????[linear 勻速 默認(rèn)值 swing 慢快慢]
   [參3 可選項(xiàng) 運(yùn)動結(jié)束后執(zhí)行的回調(diào)函數(shù)]
2. 卷簾式顯示濒憋、隱藏
   2.1 顯示
   ????jq元素.slideDown()
   2.2 隱藏
   ????jq元素.slideUp()
   2.3 切換
   ????jq元素.slideToggle()
   [參數(shù)123同上]
3. 透明度顯示隱藏
   3.1 顯示
   ????jq元素.fadeIn()
   3.2 隱藏
   ????jq元素.fadeOut()
   3.3 切換
   ????jq元素.fadeToggle()
   [參數(shù)123同上]
   3.4 運(yùn)動到指定透明度
   ????jq元素.fadeTo(毫秒數(shù)，目標(biāo)透明度挽懦，速度方式艾恼，回調(diào)函數(shù))
4. 自定義動畫
   jq元素.animate({鍵值對},毫秒數(shù),速度方式,回調(diào)函數(shù))
   ????[優(yōu)點(diǎn)：可以通過回調(diào)函數(shù) 進(jìn)行連續(xù)動畫]
   ????[或直接使用鏈?zhǔn)骄幊?實(shí)現(xiàn)連續(xù)動畫]
5. 停止動畫
   jq元素.stop(參1,,參2)
   [參1 可選項(xiàng) 布爾值 默認(rèn)值為 false 將 當(dāng)前動畫 停止 而不是所有(后續(xù))動畫]
   ????[true 停止所有動畫 包括未執(zhí)行的后續(xù)動畫]
   [參2 可選項(xiàng) 布爾值 是否停留在當(dāng)前動畫的 結(jié)束位置 默認(rèn)值為false]
   ????
   同 結(jié)束所有動畫 并停留在最終位置:
   jq元素.finish()

Ajax

1. 發(fā)送get請求
   $.get(參1,參2,參3,參4)
   ????[參1 必選項(xiàng) 地址]
   ????[參2 可選項(xiàng) 攜帶的參數(shù)]
   ????????[格式 可以是 鍵值對&鍵值對 也可以是 對象>鍵值對]
   ????[參3 可選項(xiàng) 請求成功后的回調(diào)函數(shù)]
   ????[參4 可選項(xiàng) 請求回來的數(shù)據(jù)格式]
   ????????[常用格式：text | json | xml ]
2. 發(fā)送post請求
   $post(參1,參2,參3,參4)
   ????[語法同get]
3. 發(fā)送Ajax請求

$.ajax({
    url: 地址,
    method: 請求方法, - 默認(rèn)get
    async: 是否異步,
    success: 成功的回調(diào),
    error: 失敗的回調(diào),
    dataType: 數(shù)據(jù)格式, - 省略了會默認(rèn)會自動調(diào)整
    data: 攜帶的參數(shù)
})