最後更新於 2021 年 9 月 20 日
什麼是jQuery
jQuery是繼prototype之後又一個優秀的Javascript庫。它是輕量級的js庫,它兼容CSS3,還兼容各種瀏覽器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及後續版本將不再支持IE6/ 7/8瀏覽器。
jQuery使用戶能更方便地處理HTML、events、實現動畫效果,並且方便地為網站提供AJAX交互。jQuery還有一個比較大的優勢是,它的文檔說明很全,而且各種應用也說得很詳細,同時還有許多成熟的插件可供選擇。 jQuery能夠使用戶的html頁面保持代碼和html內容分離,也就是說,不用再在html裡面插入一堆js來調用命令了,只需要定義id即可。
jquery官網提供2種jQuery的下載,一種是jquery.js另一種是jquery.min.js。
文件名不一定完全相同,但通常情況下:
- jquery.js是完整的未壓縮的jQuery庫,文件比較大,一般用於閱讀學習源碼或修改源碼,一般不用於線上項目。
- jquery.min.js是由完整版的jQuery庫經過壓縮得來,壓縮後功能與未壓縮的完全一樣,只是將其中的空白字符、註釋、空行等與邏輯無關的內容刪除,並進行一些優化。這個版本一般用於網站引用使用,減小文件體積,降低網站流量,提升訪問速度等。
載入jQuery
使用jQuery時你必須先將jQuery加進網頁的<head>..</head>
之間。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
當然你可以選擇將jquery.min.js下載上傳至網站直接使用,也可以藉由CDN載入。
使用CDN載入的好處是若不同的網站使用同樣的連結時可以避免重複下載,也不必在自己的伺服器上部署jQuery檔案。
隨機詩詞產生器
當然這就需要API了,我們以今日詩詞的API作為示範:
以下為使用jQuery取得JSON資料的寫法,放在<head>..</head>
:
<script type="text/javascript"> function nextshi(){ $.getJSON("https://v1.jinrishici.com/all.json",function(json){ //替換API的位址 category = json.category; //分類 author = json.author; //作者 content = json.content; //內容 origin = json.origin; //原文 $(".shi-content").html(content); $(".shi-author").html(author); $(".shi-category").html(category); $(".shi-origin").html(origin); }); } </script>
因為我們設定了shi-content、shi-author、shi-category、shi-origin這四個元素,因此我們也需要在網頁中插入相對應的呼叫,只需要使用 class=”shi-origin” (以此類推)。
以下為放在<body>...</body>
的內容:
<h1><ins class="shi-origin">標題</ins></h1> <cite class="shi-author">作者</cite> <br> <blockquote> <div class="shi-content">內文</div> </blockquote> 分類:<font class="shi-category"></font> <p> <button onclick="javascript:nextshi();">Random</button>
範例效果
See the Pen Random Chinese Poetry Generator by NEVER (@AquaMay) on CodePen.
- React 那些好看、有趣、實用的函式庫、組件庫推薦(2) - 2022 年 6 月 26 日
- 解決 preact 資源請求路徑錯誤的問題 - 2022 年 6 月 24 日
- [楓之谷私服] 潮流轉蛋機 NPC 腳本優化 - 2022 年 6 月 19 日