iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
0
自我挑戰組

WordPress 客製化從 0 開始系列 第 14

Day 14 用 WordPress 看 JavaScript:DOM 與 jQuery

大家好,我是 Eric。

為了要探討 WordPress 客製化中的 JavaScript,今天要來說明 DOM 與 jQuery。透過了解 jQuery,我們可以更熟悉「操作 DOM」,讓我們在 WordPress 的客製化發掘更多的可能性。

DOM (Document Object Model)

有關 DOM 的詳細介紹,可以參考這一篇鐵人賽文章。從結論來說,DOM 就是將我們在 HTML 篇章中提到的各種元素,視為 JavaScript 可以操作的物件 (object)。
操作 DOM 元素的方法,有下列幾種:

document.getElementById('ID'); //如 document.getElementsBytagName('site-header');
document.getElementsBytagName('tag'); //如 document.getElementsBytagName('img');
document.getElementsByClassName('className'); //如 document.getElementsByClassName('header-footer-group');
document.querySelector('selector'); //這邊使用 CSS 選擇器,回傳「第一個」物件
document.querySelectorAll('selector'); //這邊使用 CSS 選擇器,回傳所有符合物件

了解如何選擇 DOM 元素後,接著就可以將選擇的元素儲存為變數,來製作各種動態效果。我們以 Twenty Twenty 中 inc/template-tags.php 的第 601 行為例:

<script>document.documentElement.className = document.documentElement.className.replace( 'no-js', 'js' );</script>

上面這段程式碼,讓瀏覽器可以將原本預設的 no-js,改為 js

很簡短,但是很重要。

jQuery

早期不同瀏覽器對於 JavaScript 的支援程度不一,因此 jQuery 誕生,替不同的 DOM 操作,取得了統一的作法:

$(選擇器);
//或
jQuery(選擇器);

透過 jQuery 這個簡單的方法,我們可以省略掉前一小節冗長的語法。除了選擇元素的方法簡化之外,jQuery 也內建了許多方法,替網頁增加動態效果。以下簡單說明幾種方法:

jQuery 方法 | 說明
------+-------
.animate | 替選擇的物件建立簡單的動畫效果,譬如淡入、淡出等。
.on | 用以取代 JavaScript 的 addEventListener,監聽如點擊 (click)、滑鼠暫留 (mouseover) 等等。
.toggleClass | 用來新增或移除選擇物件的類型 (class)。
.scrollTop | 用來偵測或指定可捲動物件的捲動高度。舉例來說,$(window).scrollTop() 便代表目前整個視窗的捲動高度。
.append | 在指定的選擇器下,增加子元素。

這裡以公司官網為例,我們可以透過下列的語法,製作自動置頂的頁首。

(function ($) {
	$(document).ready(function () {
		$( window ).on( 'scroll', function() {
			if ($(window).scrollTop() >= $("#wpadminbar").height() && !$('#hamburger-menu').hasClass('toggled')) {
				$('#masthead').toggleClass( 'sticky' );
			} else {
				$('#masthead').removeClass( 'sticky' );
			}
		});
	});
})(jQuery);

我們可以看到,透過 on 這個方法,我們去偵測視窗捲動的事件,當視窗捲動的高度大於工具列 (#wpadminbar) 的高度,而且 #hamburger-menu 沒有展開 (toggled) 時,便在主要頁首 (#masthead) 加上 sticky 這個類型。

其中,sticky 的樣式屬性如下:

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 998;
}

另外一個例子,可以參考這個 Codepen,透過這個例子,我們可以進一步了解「操作 DOM」能為我們帶來什麼好處。

<ul id="add-me">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<button id="add-item">Add Item</button>
$("#add-item").on("click",function(){
  $("#add-me").append("<li>Added item</li>");
});

這和 WordPress 有什麼關係

WordPress 在其核心程式碼中,便包含了 jQuery。許多外掛與佈景主題都與 jQuery 脫不了關係。其中 jQuery 提供了非同步處理 (AJAX,用簡單的方式來理解,就是傳送表單時,你的頁面不需要重新整理) 的標準化作法,更是顯著的縮短了撰寫 AJAX 的時間。

儘管近年來隨著 ES6 盛行,瀏覽器對於 JavaScript 的轉譯更為統一,開發人員開始重新回歸一般的 JavaScript 作法,但 jQuery 在 WordPress 的使用至今仍然十分廣泛。

結語

今天我們介紹了 DOM 元素,以及 jQuery。藉由 jQuery,我們可以更快速的操作 DOM 元素,來改變我們需要的元素屬性、樣式與類型。
如今隨著各種前端框架,如 Vue.js 與 React 興起,jQuery 的重要性逐漸被取代,但萬變不離其宗,透過 jQuery 學習操作 DOM,可以讓我們在面對任何前端框架時,都能更快上手。
接下來的幾天,我們會進行更實務的討論。包含如何套用其他函式庫,以及如何藉由函式庫 (library) 為自己的 WordPress 網站增添更多動態效果。


上一篇
Day 13 從 WordPress 了解 JavaScript 的變數與函式
下一篇
Day 15 用 WordPress 製作隨視窗捲動的動畫 (animation on scroll)
系列文
WordPress 客製化從 0 開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言