關於jQuery參考實例 1.0 jQuery的哲學

首頁

web前端

js教程

關於jQuery參考實例 1.0 jQuery的哲學_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:38 PM

本文譯自jQuery Cookbook (O'Reilly 2009) 1.0 The jQuery Philosophy

jQuery的哲學是“寫更少的程式碼，做更多的事情”，這一哲學可分述為三個概念：

用CSS選擇器找出元素，並透過jQuery方法來操作這些元素
在元素集上鍊式呼叫多個jQuery方法
jQuery封裝與隱式遍歷

充分理解這三個概念對於編寫jQuery程式碼至關重要。我們來詳細看這三個概念。

找出元素並進行操作

更準確的說，是在DOM樹中定位一批元素，然後對該元素集進行操作。例如下面這個例子：首先向使用者隱藏一個

元素，然後向這個隱藏了的

元素內插入一些新文本，之後更改其屬性，最後重新顯示這個

元素。對應的jQuery程式碼如下：

<SPAN class=dec><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></SPAN><SPAN class=pln>
</SPAN><SPAN class=tag><html></SPAN><SPAN class=pln>
</SPAN><SPAN class=tag><head></SPAN><SPAN class=pln>
 </SPAN><SPAN class=tag><script</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>type</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"text/JavaScript"</SPAN><SPAN class=pln>
  </SPAN><SPAN class=atn>src</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"</SPAN><SPAN class=tag>></script></SPAN><SPAN class=pln>
</SPAN><SPAN class=tag></head></SPAN><SPAN class=pln>
</SPAN><SPAN class=tag><body></SPAN><SPAN class=pln>
 </SPAN><SPAN class=tag><div></SPAN><SPAN class=pln>old content</SPAN><SPAN class=tag></div></SPAN><SPAN class=pln>
 </SPAN><SPAN class=tag><script></SPAN><SPAN class=pln>
  </SPAN><SPAN class=com>//隐藏页面上所有的div元素</SPAN><SPAN class=pln>
  jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'div'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>hide</SPAN><SPAN class=pun>();</SPAN><SPAN class=pln>
  </SPAN><SPAN class=com>//更新所有div元素内的文本</SPAN><SPAN class=pln>
  jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'div'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>text</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'new content'</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln>
  </SPAN><SPAN class=com>//在所有的div元素上添加值为updatedContent的class属性</SPAN><SPAN class=pln>
  jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'div'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>addClass</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>"updatedContent"</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln>
  </SPAN><SPAN class=com>//显示页面上所有的div元素</SPAN><SPAN class=pln>
  jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'div'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>show</SPAN><SPAN class=pun>();</SPAN><SPAN class=pln>
 </SPAN><SPAN class=tag></script></SPAN><SPAN class=pln>
</SPAN><SPAN class=tag></body></SPAN><SPAN class=pln>
</SPAN><SPAN class=tag></html></SPAN>

我們來逐一看這四個jQuery語句：

隱藏頁面上所有的div元素，讓它們變得不可見
用新文字（'new content'）來取代隱藏的div元素中的原始文字
為div元素新增新的class屬性值（updatedContent）
在頁面上重新顯示div元素

上面的範例使用jQuery函數來找出HTML頁面中所有的

元素，然後用jQuery方法對其進行操作（hide(), text(), addClass(), show()）。

鍊式呼叫

在呼叫jQuery方法的時候，依照jQuery的設計，可以對這些方法進行鍊式呼叫。例如，只做一次元素查找，然後在找到的元素上展開一系列操作。先前的程式碼範例可以用鍊式呼叫重寫為一句JavaScript語句。

使用鍊式調用，可以將下面的程式碼：

<SPAN class=com>//隐藏页面上所有的div元素</SPAN><SPAN class=pln>
jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'div'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>hide</SPAN><SPAN class=pun>();</SPAN><SPAN class=pln>
</SPAN><SPAN class=com>//更新所有div元素内的文本</SPAN><SPAN class=pln>
jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'div'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>text</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'new content'</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln>
</SPAN><SPAN class=com>//在所有的div元素上添加值为updatedContent的class属性</SPAN><SPAN class=pln>
jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'div'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>addClass</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>"updatedContent"</SPAN><SPAN class=pun>);</SPAN><SPAN class=pln>
</SPAN><SPAN class=com>//显示页面上所有的div元素</SPAN><SPAN class=pln>
jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'div'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>show</SPAN><SPAN class=pun>();</SPAN>

改寫成：

<SPAN class=pln>jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'div'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>hide</SPAN><SPAN class=pun>().</SPAN><SPAN class=pln>text</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'new content'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>addClass</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>"updatedContent"</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>show</SPAN><SPAN class=pun>();</SPAN>

如果加上程式碼縮排就是：

<SPAN class=pln>jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'div'</SPAN><SPAN class=pun>)</SPAN><SPAN class=pln>
 </SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>hide</SPAN><SPAN class=pun>()</SPAN><SPAN class=pln>
 </SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>text</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'new content'</SPAN><SPAN class=pun>)</SPAN><SPAN class=pln>
 </SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>addClass</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>"updatedContent"</SPAN><SPAN class=pun>)</SPAN><SPAN class=pln>
 </SPAN><SPAN class=pun>.</SPAN><SPAN class=pln>show</SPAN><SPAN class=pun>();</SPAN>

簡單地說，鍊式呼叫允許在目前選擇的元素集上，將無限個jQuery方法連在一起使用。究其實質，用jQuery方法處理的元素總會在方法處理完畢之後得到返回，因此鍊式呼叫可以一直繼續。 jQuery的插件也是這樣設計的（傳回封裝的元素集），因此使用插件並不會影響鍊式呼叫。

鍊式呼叫的另一個好處是透過只選擇一次DOM元素來節省開銷。避免遍歷DOM樹，對於網頁效能提升至關重要，因此需要盡可能重複使用或快取已選擇的DOM元素集。

jQuery封裝

在大多數情況下，如果使用了jQuery，那麼必定會和一個叫做「jQuery封裝」的東西打交道。換而言之，用jQuery從HTML頁面上選擇出來的元素會被封裝上一層jQuery提供的功能。我個人喜歡把這個東西叫做“封裝元素集”，因為它是一個封裝了jQuery功能的元素集合。這個封裝元素集有時包含一個DOM元素，有時包含多個，有時甚至裡面什麼都沒有。當封裝元素集為空時，在其上呼叫的jQuery方法/屬性不會拋出任何錯誤 — 這樣做可以避免不必要的if語句。

還是以上面的HTML程式碼為例，當網頁中存在多個

元素的時候會怎麼樣？在下面的例子中，HTML頁多了3個

元素：

<SPAN class=dec><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></SPAN><SPAN class=pln>
</SPAN><SPAN class=tag><html></SPAN><SPAN class=pln>
</SPAN><SPAN class=tag><head></SPAN><SPAN class=pln>
 </SPAN><SPAN class=tag><script</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>type</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"text/JavaScript"</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>src</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"http://ajax.googleapis.com/ajax/libs/
  jquery/1.3.0/jquery.min.js"</SPAN><SPAN class=tag>></script></SPAN><SPAN class=pln> </SPAN><SPAN class=tag></head></SPAN><SPAN class=pln>
</SPAN><SPAN class=tag><body></SPAN><SPAN class=pln>
 </SPAN><SPAN class=tag><div></SPAN><SPAN class=pln>old content</SPAN><SPAN class=tag></div></SPAN><SPAN class=pln>
 </SPAN><SPAN class=tag><div></SPAN><SPAN class=pln>old content</SPAN><SPAN class=tag></div></SPAN><SPAN class=pln>
 </SPAN><SPAN class=tag><div></SPAN><SPAN class=pln>old content</SPAN><SPAN class=tag></div></SPAN><SPAN class=pln>
 </SPAN><SPAN class=tag><div></SPAN><SPAN class=pln>old content</SPAN><SPAN class=tag></div></SPAN><SPAN class=pln>
 </SPAN><SPAN class=tag><script></SPAN><SPAN class=pln>
  jQuery</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'div'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>hide</SPAN><SPAN class=pun>().</SPAN><SPAN class=pln>text</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>'new content'</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>addClass</SPAN><SPAN class=pun>(</SPAN><SPAN class=str>"updatedContent"</SPAN><SPAN class=pun>).</SPAN><SPAN class=pln>show</SPAN><SPAN class=pun>();</SPAN><SPAN class=pln>
 </SPAN><SPAN class=tag></script></SPAN><SPAN class=pln>
</SPAN><SPAN class=tag></body></SPAN><SPAN class=pln>
</SPAN><SPAN class=tag></html></SPAN>

在上面的例子中並沒有任何表示循環的程式碼。但奇妙的是，jQuery會掃描整個頁面，然後將所有的

元素放到封裝元素集中，之後對該封裝集中的每個元素（隱式遍歷）執行程式碼定義的一系列jQuery方法。例如，封裝集中的每一個元素都呼叫了.hide()。在上述程式碼中，實際上我們使用的每一個方法（hide(), text(), addClass(), show()）都在頁面中所有的div元素上起了作用，就像人為寫了一個循環方法來遍歷DOM元素一樣。上述程式碼的執行結果是：頁面中的每一個

元素都被隱藏，更改內含文本，新增class屬性，並最終重新顯現。

熟悉封裝元素集和隱式遍歷對於編寫複雜的循環邏輯來說非常重要— 需要留意的是，在寫任何額外的循環程式碼之前，一個簡單的循環操作已經存在了（例如：jQuery(' div').each(function(){}）。

要注意的是，有一些jQuery方法的行為特殊，只會影響封裝元素集中的第一個元素（例如：attr()）。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。

See all articles