什么是jQuery

• 是一款JavaScript庫(kù)
• 方便的處理HTML，事件，動(dòng)畫等
• 可以兼容多瀏覽器

jQuery的基本概念

下載和安裝jQuery

• 下載：
  從jQuery官網(wǎng)下載，壓縮版本用于生產(chǎn)，非壓縮版本用于開發(fā)
  如果想要兼容IE6~IE8，建議選擇V1.12.4
• 安裝：
  直接在html中引入即可
  <script src="./../jquery-3.3.1.js"></script>

使用CDN

• CDN(content Delivery Network)：內(nèi)容分發(fā)網(wǎng)絡(luò)，比如BootCDN
• 可以用來引入jQuery，提高性能，加快下載速度
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

基本概念

• 設(shè)計(jì)哲學(xué)：write less do more
• 設(shè)計(jì)思想：結(jié)構(gòu)，表現(xiàn)，行為分離
• jQuery庫(kù)對(duì)外僅僅暴露出一個(gè)全局變量：$
  window.jQuery===window.$
• $(xxx)：調(diào)用jQuery本身的選擇方法，返回一個(gè)jQuery對(duì)象
• jQuery對(duì)象
  1，是原生DOM對(duì)象的封裝
  2，jQuery對(duì)象和原生DOM對(duì)象不同，但是可以相互轉(zhuǎn)換
  3，jQuery對(duì)象包含了很多方法，方便的操作DOM元素
• jQuery對(duì)象，原生DOM對(duì)象間的轉(zhuǎn)換
  $(domObject) : jQuery Object
$(xxx).get(0) : DOM Object
$(xxx)[0] : DOM Object
• 鏈?zhǔn)秸Z(yǔ)法
  1，實(shí)現(xiàn)原理是每次操作都會(huì)返回jQuery對(duì)象
  2，有些方法具有破壞性(比如find())，不返回原先的jQuery對(duì)象，這時(shí)候就需要用end()方法，重置為原先的jQuery對(duì)象
• $(document).ready(function(){...})
  1，$(document).ready()在DOM結(jié)構(gòu)加載完畢后就會(huì)執(zhí)行
  2，$(document).ready(function(){...}) 等價(jià)于$(function(){...})

jQuery的選擇器

選擇元素的方法：$(xxx)

• 特點(diǎn)1：兼容CSS選擇器語(yǔ)法以及擴(kuò)展
• 特點(diǎn)2：返回0個(gè)，1個(gè)或多個(gè)jQuery元素集合，是一個(gè)類數(shù)組
• 特點(diǎn)3：集合內(nèi)元素順序與頁(yè)面上順序一致
• 特點(diǎn)4：可以用逗號(hào)隔開，而選擇多個(gè)元素
• 返回值：jQuery對(duì)象

選擇器的種類：

• 基本選擇器：CSS基本一致
• 篩選器/過濾器：$('a:xxx')：a是要篩選的對(duì)象(如果空就是所有)，xxx是篩選方法

基本選擇器（與CSS選擇器基本一致）

• ID選擇器：$('#p1')
• 類選擇器：$('.list')
• 元素選擇器：$('div')
• 后代選擇器：$('.list > li')
• 屬性選擇器：
  $('a[)：網(wǎng)址等于http://www.baidu.com的a元素
  $('a[href*="www"]')：網(wǎng)址中包含www的a元素
  $('a[href^="http"]')：網(wǎng)址中以http開頭的a元素
  $('a[href$="com"]')：網(wǎng)址中以com結(jié)尾的a元素
  $('a[href][target]')：包含href屬性和target屬性的a元素
  $('a[href!="http://www.baidu.com"]')：網(wǎng)址不等于http://www.baidu.com的a元素，這個(gè)是jQuery獨(dú)有的，CSS選擇器中沒有

位置篩選器（jQuery獨(dú)有，CSS選擇器中沒有，n從0開始）

• :first
  $('li:first')，選擇第一個(gè)li元素
• :last
  $('li:last')，選擇最后一個(gè)li元素
• :even
  $('li:even')，選擇偶數(shù)位的li元素，第一個(gè)元素是0。注意跟$('li:nth-child(even)')不一樣
• :odd
  $('li:odd')，選擇奇數(shù)位的li元素，第一個(gè)元素是0。注意跟$('li:nth-child(odd)')不一樣
• :eq(n)
  $('li:eq(2)')，選擇第2個(gè)li元素
• :gt(n)
  $('li:gt(2)')，選擇所有位置大于2的li元素
• :lt(n)
  $('li:lt(2)')，選擇所有位置小于2的li元素

子元素篩選器 (與CSS一致，n從1開始)

• :first-child
  $('li:first-child')，選擇父元素的首個(gè)子元素的li元素
• :last-child
  $('li:last-child')，選擇父元素的最后一個(gè)子元素的li元素
• :nth-child(n)
  $('li:nth-child(2)')，選擇父元素的第2個(gè)元素的li元素
• :nth-child(2n)
  $('li:nth-child(2n)')，選擇父元素的偶數(shù)個(gè)元素的li元素
• :nth-child(odd)
  $('li:nth-child(odd)')，選擇父元素的奇數(shù)個(gè)元素的li元素，注意跟$('li:odd')不一樣
• :nth-child(even)
  $('li:nth-child(even)')，選擇父元素的偶數(shù)個(gè)元素的li元素，注意跟$('li:even')不一樣
• :nth-last-child(n)
  與:nth-child(n)意思一樣，只不過從最后一個(gè)子元素開始計(jì)數(shù)
• :first-of-type
  $('li:first-of-type')，選擇父元素的首個(gè)li元素
• :last-of-type
  $('li:last-of-type')，選擇父元素的最后一個(gè)li元素
• :nth-of-type(n)
  $('li:nth-of-type(2)')，選擇父元素的第二個(gè)li元素
• :nth-last-of-type(n)
  與:nth-of-type(n)意思一樣，只不過從最后一個(gè)子元素開始計(jì)數(shù)
• :only-child
  $('li:only-child')，選擇父元素的唯一子元素的每個(gè)li元素
• :only-of-type
  $('li:only-of-type')，選擇父元素的唯一li元素

表單篩選器（前四種與CSS一致，后面是jQuery獨(dú)有的）

• :checked
  $(':checked')，選擇處于選中狀態(tài)的元素(單選/多選/下拉框..)
• :disabled
  $(':disabled')，選擇處于disable狀態(tài)的元素
• :enabled
  $(':enabled')，選擇處于enable(也就是非disable)狀態(tài)的元素
• :focus
  $(':focus')，選擇獲得焦點(diǎn)的元素
• :button
  $(':button')，選擇button元素
• :checkbox
  $(':checkbox')，選擇多選框元素
• :file
  $(':file')，選擇文件輸入框元素
• :image
  $(':image')，選擇type="image"的元素
• :input
  $(':input')，選擇所有form元素(而不僅僅是input元素)
• :password
  $(':password')，選擇password元素
• :radio
  $(':radio')，選擇單選框元素
• :reset
  $(':reset')，選擇type="reset"的元素
• :selected
  $(':selected')，選擇選中狀態(tài)的select元素
• :submit
  $(':submit')，選擇type="submit"的元素
• :text
  $(':text')，選擇text類型的元素

內(nèi)容篩選器（第一種與CSS一致，后面是jQuery獨(dú)有的）

• :empty
  $('p:empty')，選擇沒有文本內(nèi)容的p元素
• :parent
  $('p:parent')，選擇含有子元素或者文本的p元素，與$(':empty')相反
• :contains(text)
  $('p:contains("abc")')，選擇包含給定文本("abc")的p元素
• :has(selector)
  $('p:has(span)')，選擇包含和span元素的p元素

其他篩選器（前四種與CSS一致，后面是jQuery獨(dú)有的）

• :lang(language)
  $(':lang(en)')，選擇語(yǔ)言為en的元素
• :not(selector)
  $('p:not(#foo)')，選擇id不為foo的p元素
• :root
  $(':root')，選擇該文檔的根元素(就是HTML)
• :target
  $(':target')，根據(jù)URL的hash找到對(duì)應(yīng)id的元素。比如URL的hash是foo，那么會(huì)找到id為foo的元素。
• :hidden
  $(':hidden')，選擇不可見元素(display:none 和 type:hidden)
• :visible
  $(':visible')，選擇可見元素，與$(':hidden')相反
• :header
  $(':header')，選擇標(biāo)題類元素(h1/h2..)
• :animated
  $(':animated')，選擇正在執(zhí)行動(dòng)畫效果的元素

選擇器的性能優(yōu)化

• 盡量使用CSS中有的選擇器
  慢：$('ul li:even)
  快：$('ul li:nth-child(odd)')
• 避免過度約束
  慢：$('div ul li.item')
  快：$('li.item2')
• 盡量以ID開頭
  慢：$('.list li.item')
  快：$('#list li.item')
• 讓選擇器的右邊有更多特征
  慢：$('ul.list .item')
  快：$('.list li.item')
• 避免使用全局選擇器
  慢：$('ul')
  快：$('.list')
• 緩存選擇器結(jié)果
  慢：$('.#list .item2'); $('.#list .item4');
  快：var ul = $('.#list'); ul.find('.item2'); ul.find('.item4');