技術(shù)交流QQ群:1027579432，歡迎你的加入赊舶！

歡迎關(guān)注我的微信公眾號(hào)：CurryCoder的程序人生

1.JavaScript庫

• JavaScript庫：即library淤刃，是一個(gè)封裝好的特定的集合(方法和函數(shù))晒他。從封裝一大堆函數(shù)的角度理解庫，就是在這個(gè)庫中逸贾，封裝了很多預(yù)先定義好的函數(shù)在里面陨仅，比如動(dòng)畫animate、hide铝侵、show灼伤、獲取元素等。
• 簡單理解：就是一個(gè)js文件咪鲜，里面對我們原生js代碼進(jìn)行了封裝狐赡，存放到里面。這樣疟丙，我們可以快速高效的使用這些封裝好的功能了颖侄。
• 比如jQuery就是為了快速方便的操作DOM鸟雏，里面基本都是函數(shù)(方法)。
• 常見的JavaScript庫：jQuery览祖、Prototype孝鹊、YUI、Dojo穴墅、Ext JS惶室、移動(dòng)端的zepto等。這些庫都是對原生js進(jìn)行封裝玄货，內(nèi)部都是用JavaScript實(shí)現(xiàn)的皇钞，下面主要學(xué)習(xí)jQuery。

2.jQuery的概念

• jQuery是一個(gè)快速松捉、簡潔的JavaScript庫夹界，其設(shè)計(jì)宗旨是"write less, do more"，即倡導(dǎo)寫更少的代碼隘世，做更多的事情可柿。
• jQuery中j即JavaScript，Query是查詢丙者。jQuery意思就是查詢js复斥，把js中的DOM操作做了封裝，我們可以快速的查詢使用里面的功能械媒。
• jQuery封裝了JavaScript常用的功能代碼目锭，優(yōu)化了DOM操作、事件處理纷捞、動(dòng)畫設(shè)計(jì)和Ajax交互痢虹。
• 學(xué)習(xí)jQuery的本質(zhì)：學(xué)習(xí)調(diào)用這些函數(shù)(方法)。

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

• 輕量級(jí)：核心文件只有幾十kb主儡，不會(huì)影響頁面的加載速度奖唯。
• 跨瀏覽器兼容：基本兼容了現(xiàn)在主流的瀏覽器。
• 鏈?zhǔn)骄幊堂又怠㈦[式迭代丰捷。
• 對事件、樣式臀玄、動(dòng)畫支持瓢阴，大大簡化了DOM操作。
• 支持插件擴(kuò)展開發(fā)健无，有豐富的第三方插件荣恐。例如：樹形菜單、日期控件、輪播圖等叠穆。
• 免費(fèi)少漆、開源。

4.jQuery的下載

• 官方網(wǎng)站：https://jquery.com/
• jQuery不同版本 https://code.jquery.com/
  • 1x：兼容IE6硼被、7示损、8等低版本瀏覽器，官網(wǎng)不再更新嚷硫。
  • 2x: 不兼容IE6检访、7、8等低版本瀏覽器仔掸，官網(wǎng)不再更新脆贵。
  • 3x: 不兼容IE6、7起暮、8等低版本瀏覽器卖氨，是官方主要更新維護(hù)的版本。
• 打開網(wǎng)址https://code.jquery.com/jquery-3.5.1.js负懦，復(fù)制網(wǎng)頁中的所有代碼筒捺，創(chuàng)建一個(gè)新的文件jquery.min.js，并將所有的代碼復(fù)制到該文件中纸厉。

5.jQuery的入口函數(shù)

• 等著DOM結(jié)構(gòu)渲染完畢即可執(zhí)行內(nèi)部代碼系吭，不必等到所有外部資源加載完成，jQuery幫我們完成了封裝颗品。相當(dāng)于原生js中的DOMContentLoaded村斟。不同于原生js中的load事件是等頁面文檔、外部的js文件抛猫、css文件、圖片加載完成后才執(zhí)行內(nèi)部代碼孩灯。

  $(function(){  // 推薦這種方式!!!!
      ...  // 此處是頁面DOM加載完成的入口
  });
  
  // 或者
  $(document).ready(function()){
      ... // 此處是頁面DOM加載完成的入口
  }
  

6.jQuery的使用步驟

• (1).引入jQuery文件
• (2).書寫jQuery的入口函數(shù)闺金，將要執(zhí)行的內(nèi)部代碼放入入口函數(shù)中。

7.jQuery的頂級(jí)對象$

• $是jQuery的別稱峰档，在代碼中可以使用jQuery代替$败匹，但是一般為了方便，通常都直接使用$讥巡。
• $是jQuery的頂級(jí)對象掀亩，相當(dāng)于原生JavaScript中的window對象。把元素利用$包裝成jQuery對象欢顷，就可以調(diào)用jQuery的方法槽棍。

8.jQuery對象和DOM對象

• DOM對象：使用原生js獲取的對象。
  jQuery對象：用jQuery方式獲取過來的對象。
• jQuery對象的本質(zhì)：通過$對DOM對象包裝后產(chǎn)生的對象(偽數(shù)組形式存儲(chǔ))炼七。
• jQuery對象只能使用jQuery方法缆巧，DOM對象則使用原生的JavaScript屬性和方法。
• DOM對象和jQuery對象之間是可以相互轉(zhuǎn)換的豌拙。因?yàn)樵鶭S比jQuery更大陕悬，原生的一些屬性和方法jQuery沒有給我們封裝。要想使用這些屬性和方法按傅，則需要把jQuery對象轉(zhuǎn)換為DOM對象才能使用捉超。
  • DOM對象轉(zhuǎn)換為jQuery對象： $(DOM對象)

  // 1.DOM對象轉(zhuǎn)換為jQuery對象
  // (1).直接獲取視頻，得到的就是jQuery對象
  $('video');
  // (2).已經(jīng)使用原生js獲取過來的DOM對象
  var myvideo = document.querySelector('video');
  // $(myvideo).play(); jQuery對象沒有play()方法
  // myvideo.play();
  

  • jQuery對象轉(zhuǎn)換為DOM對象(兩種方法)

  $('div')[index]   // index是索引號(hào)
  
  // 或者
  $('div').get(index)  // index是索引號(hào)
  

9.資料下載

• 筆記及代碼唯绍，歡迎 star,follow,fork......