jQuery:載入內容

更新於 2022/12/28閱讀時間約 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
avatar-img
0會員
3內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
林信嘉的沙龍 的其他內容
你可能也想看
Google News 追蹤
Thumbnail
本文探討了複利效應的重要性,並藉由巴菲特的投資理念,說明如何選擇穩定產生正報酬的資產及長期持有的核心理念。透過定期定額的投資方式,不僅能減少情緒影響,還能持續參與全球股市的發展。此外,文中介紹了使用國泰 Cube App 的便利性及低手續費,幫助投資者簡化投資流程,達成長期穩定增長的財務目標。
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
本文探討了複利效應的重要性,並藉由巴菲特的投資理念,說明如何選擇穩定產生正報酬的資產及長期持有的核心理念。透過定期定額的投資方式,不僅能減少情緒影響,還能持續參與全球股市的發展。此外,文中介紹了使用國泰 Cube App 的便利性及低手續費,幫助投資者簡化投資流程,達成長期穩定增長的財務目標。
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 只回傳符合條件的資料。