在前端開發中，我們經常聽到一種奇怪的符號——”$“，這個符號曾有些神秘，不過，在了解了它之后，我們發現它其實是一個非常強大的工具。在JavaScript中，$是一個函數名，它實際上是jQuery中最常用的函數之一，它可以幫助我們快速有效地完成各種DOM操作。

以最簡單的例子來說，網頁中添加一個新元素是非常常見的操作。有了$，這就非常簡單了。例如，我們想要在HTML文檔中添加一個段落。我們可以通過DOM的方式實現，如下代碼所示：

var para = document.createElement("p");  // 創建元素節點
var node = document.createTextNode("這是一個新的段落。");  // 創建文本節點
para.appendChild(node);  // 把文本添加到元素節點上
var element = document.getElementById("demo");  // 獲取目標節點
element.appendChild(para);  // 把元素節點添加到目標節點上

而事實上，我們只需要使用 $ 加一個字符串就可以實現同樣的效果：

$("<p>這是一個新的段落。</p>").appendTo("#demo");

在一些比較復雜的網頁中，很多需要執行的操作都可以通過 $ 函數實現。例如，經常會有這樣的需求：點擊一張圖片，對圖片進行一些簡單的操作，例如改變圖片的大小，或使圖片變成黑白。使用 $ 函數，我們可以這樣實現：

$("img").click(function() {
$(this).toggleClass("large");  // 切換圖片大小
$(this).toggleClass("black-white");  // 切換黑白效果
});

在例子中，我們首先通過選擇器 $("img") 獲取了所有圖片元素，然后為每個圖片元素綁定了一個 click 事件。當點擊圖片時，這個事件就會被觸發，然后我們使用 $ 函數對當前的圖片元素元素進行操作。其中 toggleClass 是 jQuery 中非常常用的一個方法，這個方法可以在 class列表中切換指定的類。

上面介紹的只是 $ 函數的一小部分功能。在實際開發中，$ 函數還有很多其他的用處，例如獲取節點、修改CSS樣式、添加動畫效果、發送AJAX請求等等。 $ 函數在 jQuery 中非常重要，掌握了 $，可以幫助我們更快、更優雅地完成網頁的開發。