JQ總務處|初探|深入淺出jQuery


Posted by itiswonderfall on 2022-05-15

前言

首先還是要謝謝我的神人朋友借我這本書( 而且借了好幾年都還沒還哈哈哈 ),其實前面幾章已經看完很久,但一直懶得整理跟撰寫成文章,看來除了努力,我的人生還需要一點動力😅。

 


 

探索 jQuery

HTML 是一種處理文件結構的標記語言,而 CSS 控制著那些元素的外觀、感覺和位置, HTML 和 CSS 控制了網頁如何被建構及展示,但兩者皆不能增加行為到網頁。為此,我們需要一種指令稿語言( scripting language ),這正是 jQuery 。
jQuery 是專門用以動態改變網頁文件( document )的 Javascript 程式庫( library )。

 


 

探索瀏覽器

瀏覽器使用 HTML 文物件模型( HTML Document Object Model,DOM ),從 HTML 和 CSS 建立文字、圖像⋯⋯等等內容的頁面,而 JavaScript 和 JQuery 可以使用 DOM 來改變頁面的結構。

  1. 瀏覽器載入從伺服器取得的 HTML 檔。
  2. 瀏覽器的配置引擎解讀整個 HTML 和 CSS ,並利用 HTML 文物間模型( DOM )建造出一個文件( document )。
  3. 瀏覽器在其 viewport 中展示頁面。
  4. JS 直譯器參照 DOM ,對網頁進行修改而不需要重載它。

配置引擎:每個瀏覽器都有自己的配置引擎,才會對 CSS 有不同的解讀,解析完後再渲染畫面到用戶端。

 


 

JQuery 讓 DOM 保持單純

JQuery 雖然是 JavaScript ,但卻是一種更容易掌握的版本,當你想要控制 DOM 的時候, JQuery 讓這項工作輕鬆很多,例如我們想改頁面上段落元素內的 HTML 時:

JavaScript

document.getElementsByTagName("p")[0].innerHTML = "Change the page.";

JQuery

$("p").html("Change the page.");

可以看出程式碼的差別了嗎?
JQuery 使用「 選擇器引擎 」( selector engine ),所以你可以像 CSS 一樣用選擇器取得某個東西,它的強項之一就是讓你操作 DOM ,而不需要知道它的每一個細節。

 


 

那 JQuery 是如何運作的?

  1. 使用者觸發事件
  2. JS 直譯器「 感受到 」有觸發事件,於是就執行附加在上的函式。
  3. JS 直譯器改變該頁面的 DOM 表示。
  4. 使用者看到函式的結果。

JS 直譯器不改變原始的 HTML 和 CSS 檔案,而是在瀏覽器的記憶體裡改變頁面的 DOM 表示。

 


 

介紹 JQuery 函式( 及其快捷模式 )

jQuery() 是 JQuery 函式,它的工作就是擷取你放進小括號裡的元素,而 $() 是 JQuery 函式的短名稱,這個快捷模式( shortcut )讓我們每次呼叫 JQuery 函式時,不需要多花時間撰寫這麼長的指令。

下面是能夠放進 JQuery 函式的三種東西:

  1. CSS 選擇器
  2. HTML
  3. JavaScript Object

 


 

參考資料

深入淺出 jQuery ( Ryan Benedetti, Ronan Cranley 著、楊仁和 譯 )


#jq #jq總務處 #深入淺出 jQuery #初探







Related Posts

Tailwind

Tailwind

1731. The Number of Employees Which Report to Each Employee

1731. The Number of Employees Which Report to Each Employee

資結、Introduction to Algorithm Design

資結、Introduction to Algorithm Design


Comments