jQuery:載入內容

閱讀時間約 2 分鐘
jquery載入內容方式有兩種:
第一種是你網頁內容物件載入正確之後才執行,程式碼如下:
$(document).ready(function(){
  //內容
});
第二種是全部的網頁內容載入後才執行,程式碼如下:
$(window).load(function() {
  //內容
});
以下為範例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQUERY</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
  <script>
      $(window).on('load', function() {
          console.log('load');
      });
      $(document).ready(function() {
          console.log( "ready!" );
      });
  </script>
</head>
<body>
</body>
</html>
在這個情況下因為沒有甚麼資源需要讀取
所以第二種的速度會優於第一種
但我自己寫了這幾年以來
大多都是以第一種方式居多
第二種方式比較少用到
以前的編輯器都沒有一些指令與記憶的功能
我都會另外把這些東西複製在某個地方方便複製貼上(這就是這篇文章之前為什麼會出現的原因)
現在編輯器進步很多,基本上是不用這樣做了
但還是簡單分享一下喔
參考資料:
1.https://ithelp.ithome.com.tw/articles/10092601
2.https://blog.miniasp.com/post/2010/07/24/jQuery-ready-vs-load-vs-window-onload-event
0會員
3Content count
留言0
查看全部
發表第一個留言支持創作者!
林信嘉的沙龍 的其他內容
你可能也想看
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
Thumbnail
獨自旅行不只自由,更是與內在自我好好對話的珍貴機會。本篇分享我在獨自旅行中安排的自省時光。
Thumbnail
聰明人要下笨功夫,不論是工作、作人、處事...,都有其奧妙。 不要想著很快見效、不要遇見困難你就閃躲、不要不得志你就跳開.... 你得不停練、不停練,在這之中練到發現一個訣竅,或兩個、或三個 能有所體會,就有答案。 「困知勉行」,困住了熬過去,再困住了,再熬過去。 做任何事都有極困難的
Thumbnail
走到浴室,看到浴室架上的東西越來越多,我就在想這些都是我需要的,還是我想要的?我知道有些是我需要的。然而有一些是我買錯了又捨不得丟,就擱在哪裡。   所以我知道那是我的貪的情緒,而這個貪的情緒會將我帶入輪迴,這個是我必須要去看到的。   記得在上課時老師曾經說過,你要知道你的出發點就是需要。
Thumbnail
對於使用GPT-4將草稿轉換為次原子想法的你,這篇文章提供了改進GPT-4寫作效率的策略。 通過優化「輸入內容」與「寫作提示」,你將能產出更高質量的次原子想法。 快來嘗試這些經過500次實踐驗證的策略吧!
Thumbnail
圖片按鈕是網頁中常見的互動元素之一,它可以讓用戶進行操作,同時也為網頁增添了視覺吸引力。在這個教學中,我們將會學習如何使用 HTML 與 jQuery 創建一個簡單的圖片按鈕,並添加點擊事件。
Thumbnail
你知道 SELECT 除了回傳欄位、使用聚集函數外,還可以更進一步做加減乘除喔!這個系列是 QUERY 函式大解析的第六篇文章,如果還不知道什麼是 QUERY 的話,我還是很建議你從第一篇慢慢看、跟著我們的練習實際操作,就會更有概念囉~
Thumbnail
這次要來介紹的是 QUERY 系列文的最後一個大語法:PIVOT,讓你可以更進一步切割聚集 SELECT 出來的資訊。(建議先看過前一篇再來喔!)
Thumbnail
今天要介紹的是進階的 SELECT 功能,可以即時對 QUERY 的結果運算,迅速取得數值的平均、總和、最大值、最小值和數量,省去拉資料透視表(pivot table)的麻煩!
Thumbnail
除了 SELECT、WHERE 之外,今天再介紹 ORDER BY、LIMIT、OFFSET 和 LABEL 給大家,讓你的 QUERY 更強大!
Thumbnail
這是 QUERY 函式大解析系列文章的第二篇!我們要用 WHERE 語法來指定搜尋條件,要 QUERY 只回傳符合條件的資料。
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
Thumbnail
獨自旅行不只自由,更是與內在自我好好對話的珍貴機會。本篇分享我在獨自旅行中安排的自省時光。
Thumbnail
聰明人要下笨功夫,不論是工作、作人、處事...,都有其奧妙。 不要想著很快見效、不要遇見困難你就閃躲、不要不得志你就跳開.... 你得不停練、不停練,在這之中練到發現一個訣竅,或兩個、或三個 能有所體會,就有答案。 「困知勉行」,困住了熬過去,再困住了,再熬過去。 做任何事都有極困難的
Thumbnail
走到浴室,看到浴室架上的東西越來越多,我就在想這些都是我需要的,還是我想要的?我知道有些是我需要的。然而有一些是我買錯了又捨不得丟,就擱在哪裡。   所以我知道那是我的貪的情緒,而這個貪的情緒會將我帶入輪迴,這個是我必須要去看到的。   記得在上課時老師曾經說過,你要知道你的出發點就是需要。
Thumbnail
對於使用GPT-4將草稿轉換為次原子想法的你,這篇文章提供了改進GPT-4寫作效率的策略。 通過優化「輸入內容」與「寫作提示」,你將能產出更高質量的次原子想法。 快來嘗試這些經過500次實踐驗證的策略吧!
Thumbnail
圖片按鈕是網頁中常見的互動元素之一,它可以讓用戶進行操作,同時也為網頁增添了視覺吸引力。在這個教學中,我們將會學習如何使用 HTML 與 jQuery 創建一個簡單的圖片按鈕,並添加點擊事件。
Thumbnail
你知道 SELECT 除了回傳欄位、使用聚集函數外,還可以更進一步做加減乘除喔!這個系列是 QUERY 函式大解析的第六篇文章,如果還不知道什麼是 QUERY 的話,我還是很建議你從第一篇慢慢看、跟著我們的練習實際操作,就會更有概念囉~
Thumbnail
這次要來介紹的是 QUERY 系列文的最後一個大語法:PIVOT,讓你可以更進一步切割聚集 SELECT 出來的資訊。(建議先看過前一篇再來喔!)
Thumbnail
今天要介紹的是進階的 SELECT 功能,可以即時對 QUERY 的結果運算,迅速取得數值的平均、總和、最大值、最小值和數量,省去拉資料透視表(pivot table)的麻煩!
Thumbnail
除了 SELECT、WHERE 之外,今天再介紹 ORDER BY、LIMIT、OFFSET 和 LABEL 給大家,讓你的 QUERY 更強大!
Thumbnail
這是 QUERY 函式大解析系列文章的第二篇!我們要用 WHERE 語法來指定搜尋條件,要 QUERY 只回傳符合條件的資料。