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

系統架構 & 資料庫結構 筆記

系統架構 & 資料庫結構 筆記

RegEx 妙用

RegEx 妙用

TMMA 上課心得

TMMA 上課心得


Comments