[jQuery] jQuery 物件 vs DOM 物件

粗略記一下我自己的理解：

jQuery 框架主要是一個 JavaScript 函式庫，裡面包含很多個函式。

其中一個很重要的基本函式 jQuery() －－ 通常會簡寫為 $() －－ 用途就是返回一個「jQuery 物件」。

概念上，把 DOM 物件用 jQuery() 包裝過後，吐出來就是個 jQuery 物件。使用傳統 JavaScript 的 DOM 選取方法，取出來的就是 DOM 物件（或者說是一個 DOM 元素？）。

只有 jQuery 物件才能使用 jQuery 的各種好用方法。相反的，若要呼叫 DOM 方法則一定要是 DOM 物件才可以，jQuery 物件是不行的。

所謂jQuery 物件，本質上就是個陣列（Array），或者精確的說是個關聯式陣列物件（又稱物件實字Object Literal）。

餵給 $() 吃的參數值，可以有很多種格式，其中最常見的就是選擇器（一個符合jQuery selector規格的字串）。另外也可以吃 DOM 物件，用 jQuery() 把 DOM 物件包裝起來，就是個 jQuery 物件了：

var cr=document.getElementById("cr"); //dom物件
var $cr = $(cr); //轉換成jQuery物件

反過來，若把 jQuery 物件取出陣列第一個屬性，就可以轉換成 DOM 物件：

var $cr=$("#cr"); //jQuery物件
var cr = $cr[0]; //dom物件 也可寫成 var cr=$cr.get(0);

參考資料：
DOM物件和JQuery物件的區別 - 掃文資訊
https://tw.saowen.com/a/0045b51128f3e570adc319b1d541d2545373c3f2a96864f9be24d7485ac67bfb

[ES6] 點點點（...）——展開運算子（Spread Operator）vs 其餘運算子（Rest Operator）

點點點（...）作為一元運算子，位置在運算元之前。有兩種用法：

1. 展開運算子（Spread Operator）：把陣列展開成參數

在陣列前面加上...，即可把每個陣列元素逐一展開，直接餵給函式當作若干個參數輸入。

假設有一個函式只能吃參數，例如Math.max()，返回所有參數中的最大值：

Math.max(9, 3, 7, 13, 5);  //13

直接餵陣列，它不吃：

Math.max([9, 3, 7, 13, 5]);  //NaN

在陣列前面加上展開運算子就可以了：

Math.max(...[9, 3, 7, 13, 5]);  //13

2. 其餘運算子（Rest Operator）：把參數合併成陣列

跟展開運算子剛好相反。在陣列前面加上...，即可把所有參數合併成一個陣列，再餵給只吃陣列的函式當作輸入值。效果有點類似一般函式物件的arguments屬性（以類陣列型態存放所有輸入的參數）。

假設有一個函式預設只能吃陣列。例如輸入陣列，計算其項目個數：

let count = arr => arr.length;
console.log(count([6, 9, 37, 17, 64]));  //5

若餵一堆參數它是不吃的：

console.log(count(6, 9, 37, 17, 64));  //undefined

但若幫函式的參數加上其餘運算子，就可以囉：

let count = (...arr) => arr.length;
console.log(count(6, 9, 37, 17, 64));  //5

參考：
JavaScript ES6 中的展開運算子（spread operator）和其餘運算子（rest operator） ~ PJCHENder 那些沒告訴你的小細節

如何在Blogger文章內嵌入程式碼區塊？

1. 前言

方法主要是參考這篇介紹： [Blogger] 如何在 Blogger 顯示程式碼 - Google Code Prettify ~ m@rcus 學習筆記，貪圖它方便。安裝方法就省略了。

其實直接看原始專案說明也很清楚： GitHub - google/code-prettify: Automatically exported from code.google.com/p/google-code-prettify

本站目前就先採用這個方法來把程式碼嵌入到文章裡。

2. 使用方法

操作方法很簡單，就是在後台編輯HTML，直接把程式碼區塊插入為具有 class="prettyprint" 屬性的 pre 或 code 元素即可：

<pre class="prettyprint lang-html">
  The lang-* class specifies the language file extensions.
  File extensions supported by default include:
    "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java",
    "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml",
    "xsl".
</pre>

如上，若覺得有需要，可以加入 lang-XXXX 來指定程式語言。但其實 Google Code Prettify 會自動猜測。當然更可以依照嚴謹的 HTML 5 規格，用pre把code包起來，然後在code標籤內指定語言種類：

<pre class="prettyprint"><code class="language-java">...</code></pre>

3. 預先HTML轉碼

但是！某些程式碼可能要先經過HTML Encoding才能正常顯示。線上轉換：
HTML編碼 - 在線HTML編碼器 或者 HTML Encoder :: OpinionatedGeek

4. 其他備用方案

不過為了怕這個 Google Code Prettify 專案中止或與Blogger無法完全相容，還是打算找一些備案，先列在這裡備忘：

備案1： A.D.的程式筆記: 『其他』如何在Blogger文章顯示程式碼
備案2（還真的有點麻煩）： [技術分享] 寫給會在部落格中撰寫程式碼的你 ─ 在網頁中嵌入高亮程式碼上色 (syntax highlighting) ~ PJCHENder 那些沒告訴你的小細節