什么是jQuery

• 是一款JavaScript庫
• 方便的處理HTML，事件，動畫等
• 可以兼容多瀏覽器

jQuery的基本概念

下載和安裝jQuery

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

使用CDN

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

基本概念

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

jQuery的選擇器

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

• 特點1：兼容CSS選擇器語法以及擴展
• 特點2：返回0個，1個或多個jQuery元素集合，是一個類數組
• 特點3：集合內元素順序與頁面上順序一致
• 特點4：可以用逗號隔開，而選擇多個元素
• 返回值：jQuery對象

選擇器的種類：

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

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

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

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

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

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

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

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

• :checked
  $(':checked')，選擇處于選中狀態的元素(單選/多選/下拉框..)
• :disabled
  $(':disabled')，選擇處于disable狀態的元素
• :enabled
  $(':enabled')，選擇處于enable(也就是非disable)狀態的元素
• :focus
  $(':focus')，選擇獲得焦點的元素
• :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')，選擇選中狀態的select元素
• :submit
  $(':submit')，選擇type="submit"的元素
• :text
  $(':text')，選擇text類型的元素

內容篩選器（第一種與CSS一致，后面是jQuery獨有的）

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

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

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

選擇器的性能優化

• 盡量使用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')
• 緩存選擇器結果
  慢：$('.#list .item2'); $('.#list .item4');
  快：var ul = $('.#list'); ul.find('.item2'); ul.find('.item4');