# jQuery 筆記 by Sz ###### tags: `Sz` `第三週` `cdn` `2021夏季切版班` [jQuery 基礎使用影片](https://www.youtube.com/watch?v=GVWOIP-HX70) :::warning 有關環境建立的影片，只照步驟做事會有報應ㄉyo 因為環境就是會更新 讀懂步驟，更新後可以自己找到想要的資料才是重點 ::: ## 環境準備 使用外部資料庫有多種方法，舉其二 ### 下載到專案使用（本機） >載點上方有說到 >To locally download these files, right-click the link and select "Save as..." from the menu. [載點](https://jquery.com/download/) - 去官方，下載到專案資料夾內直接使用 - 可以修改內容、只取需要的部份使用 #### 很多載點選哪種好 - uncompressed：想要讀內容的話（可讀性較好） - compressed：只是要使用的話（檔案較小） ### 引入 CDN（雲端） [CDN可以這裡找](https://cdnjs.com/libraries/jquery) - 不需下載 - 不能修改內容，全部載入 - 直接使用網路雲端資料，仰賴對方的網路狀態 ## 加入到 HTML 裡 `<script>`通常都會放在 `<body>`的最後一段，這跟網頁的讀取會有關係（參考延伸閱讀） #### 載到專案資料夾範例 ```html <script src="script/jQuery.js"></script> ``` #### CDN 範例（引入時需留意版本是不是你要的） ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> ``` ## 開始撰寫 HTML 讀得到 jQuery 的資料庫後，就可以開始撰寫囉，jQuery 有他自己的辨識格式，內容都要寫在這裡面 ```js jqDocReady // 會 emmet 就直接打這行囉 ``` 看到這串就代表裡面都是 jQuery 囉 ```js $(document).ready(function () { // 都要寫在這裡 }); ``` ## 使用 jQuery 的目的 目前已知 - 動態載入 CSS 或 HTML - 減少不用一開始就載入的樣式所需的載入負擔，利用動態載入，在需要的時候在寫入即可。 ## 工具 - [jQuery Cheat Sheet](https://oscarotero.com/jquery/) - [Wappalyzer：分析所在網站所使用的框架](https://www.wappalyzer.com/installed/?utm_source=installed&utm_medium=extension&utm_campaign=wappalyzer) ## 延伸閱讀 - [HTML 從CDN的引入位置 聊到CSS Render Blocking](https://realdennis.medium.com/html-%E5%BE%9Ecdn%E7%9A%84%E5%BC%95%E5%85%A5%E4%BD%8D%E7%BD%AE-%E8%81%8A%E5%88%B0css-render-blocking-3894a0428f29)