jQuery

使用還是不使用？學習還是不學習？讓我們看看如何完全避免使用jQuery，以及保留使用它的原因。 無論你在JavaScript框架和庫方面有什麼偏好，jQuery在JavaScript生態系統中發揮了重要作用。 幾年前它更受歡迎，現在一些jQuery的需求已經被現代瀏覽器替代（幸運的是！），但這個JavaScript庫仍然被許多人使用。 為什麼jQuery一開始會變得如此受歡迎？首先，jQuery誕生於JavaScript應用程序還不是主流的年代。在2000年代初至中期，JavaScript主要用於賦予網頁中出現的幻燈片和其他小工具（如圖片庫、日期選擇器等）功能。如果過於複雜，JavaScript很難進行許多操作（當然，電腦當時也更慢）。 值得一提的是，jQuery並不是唯一的或第一個庫。那個時候其他庫也非常受歡迎，比如Mootools、YUI、Dojo Toolkit、Scriptaculous和Prototype。jQuery後來可能成為了那些庫中最著名的。 當時的瀏覽器存在許多互操作性問題。我們遇到了很多跨瀏覽器的怪異行為和標準化問題，而jQuery通過創建一個抽象層並處理所有解決方案來幫助我們。 jQuery允許你使用CSS選擇器語法來選擇DOM元素，它非常用戶友好且易於擴展。它使JavaScript動畫變得簡單。 同時，它還簡化了使用AJAX（及其跨瀏覽器差異）的操作，這在時下非常流行的術語中也為jQuery帶來了一定的知名度。 如今，我們已經沒有太多的瀏覽器兼容性問題了，Selectors API和Fetch使瀏覽器標準化了jQuery的兩個最佳功能。 jQuery肯定是一個充滿爭議的主題。有些人說jQuery是過時的遺物，有些人仍然每天使用它。有些人花時間撰寫「為什麼我們不需要jQuery」的文章。 在過去幾年中，它的使用率確實有所下降： 如今，JavaScript的面貌已經截然不同。但是，了解jQuery的用途仍然是有用的。 曾經使用jQuery的功能現在已經有了標準化的瀏覽器API 選擇DOM元素 jQuery的用法： $('.button') 現在我們可以使用Selectors API： document.querySelector('.button') 如果需要多個元素： document.querySelectorAll('.button') 等待DOM加載完成 jQuery的用法： $(document).ready(() => { //... }) DOM的做法： document.addEventListener("DOMContentLoaded", () => { //... }) 為DOM元素添加或移除類 jQuery的用法： el.addClass('big') el.removeClass('big') el.toggleClass('big') DOM的做法： el.classList.add('big') el.classList.remove('big') el.classList.toggle('big') 從DOM中移除元素 jQuery的用法： el.remove() DOM的做法： el.remove() （是的，沒有變化） 更改DOM元素的內容 jQuery的用法： el.text('Hello') el.html('Hello') el.text() el.html() DOM的做法： el.innerHTML = 'Hello' el.textContent = 'Hello' el.innerHTML el.textContent 選擇DOM元素的父元素 jQuery的用法： el.parent() DOM的做法：...

警告：此文章已經過時，可能無法反應目前的技術狀態。 自動焦點 當頁面加載時，<input autofocus="autofocus" />會將焦點放在指定的HTML元素上。 下載文件 <a href="file.pdf" download="pdf-file">下載</a>將下載指定的文件，並提供文件名。 隱藏元素 儘管將表現放在HTML中並不理想，但<div hidden="hidden"></div>有時會派上用場。 關閉（或打開）拼寫檢查 操作系統設定了拼寫檢查功能，它有時可能會妨礙使用者輸入 - <input type="text" spellcheck="true|false">有助於解決此問題。 自動建議文字輸入控件 <input list="mylist" name="mylist" > <datalist id="mylist"> <option value="CSS"> <option value="HTML"> <option value="PHP"> <option value="Jquery"> <option value="Wordpress"> </datalist>

承諾是一種相對較新的處理異步的方式，它可以非常有助於結構化代碼。 警告：此帖子已經過時並且可能不反映最新的技術水平。 請查看我的Promises guide和我的async/await guide。 承諾是事件的對象表示方式。在其生命週期中，當調用時，承諾從待定狀態轉換為已解決或已拒絕狀態，或者它也可以永遠保持待定狀態而不解決。 它是一種對JavaScript事件的新方法，但我認為它生成的代碼更易讀且更少出錯。目前，在JavaScript中有兩種稍有不同的主要承諾實現：遵循Promises/A規範的庫和jQuery。 首先，我將考慮jQuery，因為它無處不在且我使用它，所以如果您不希望使用另外一個外部庫，可以使用它。 介紹jQuery Promise 讓我們介紹延遲的概念。首先，延遲是一個承諾，除了您可以觸發一個延遲（解決或拒絕它）之外，通過承諾，您只能添加回調，並且它將由其他東西觸發。如果您希望，承諾是延遲的“只收聽”部分。 這是一個清晰的例子： var promise = $('div.alert').fadeIn().promise(); 您現在可以添加.done()和.fail()來處理回調。這只是一個調用示例，使用承諾的動畫已經成為jQuery 1.8中的一個真正的東西，同時帶有進度的回調。 另一個例子是AJAX調用： var promise = $.get(url); promise.done(function(data) {}); 延遲是您可以創建的東西，設置回調並解決的東西，例如： var deferred = new $.Deferred(); deferred.done(function(data) { console.log(data) }); deferred.resolve('some data'); 延遲的狀態可以使用.resolve()或.reject()觸發。一旦延遲狀態已經更改為最終階段（已解決/已拒絕），它就無法再改變。 var deferred = new $.Deferred(); deferred.state(); // "pending" deferred.resolve(); deferred.state(); // "resolved" 我們可以將以下回調附加到一個承諾： .done() // 當承諾成功執行時運行 .fail() // 當承諾失敗時運行 .always() // 無論什麼情況下都運行 可以使用.then()一起調用這些回調，如下所示： promise.then(doneFunc, failFunc, alwaysFunc); 這只是對承諾和延遲的jQuery實現的介紹。讓我們寫一些真實世界的例子。 （如果在node中執行，可以使用$ = require（'jquery'）;導入jQuery） 一些jQuery示例 例如，這裡我們執行一個函數，當它完成時調用dfd.resolve（）。類似於使用回調，但更具結構性和可重用性。...

總結一下，這要視情況而定！ 首先，你可能根本不需要使用jQuery，只需要使用Web平台的API就可以了，但這是另一個話題。 現在讓我們來專注於這個問題。你應該使用jQuery還是React呢？ 我的回答是這樣的。如果你正在構建單頁應用程序（SPA），React是明顯的選擇。React就是為此而建立的，它會負責生成視圖並在頁面上渲染元素，而不需要你考慮DOM（也就是如何在頁面上呈現內容的細節）。 React採用聲明式的方法，使用它你可以在更高的層次上工作。 在構建SPA時，不應該使用jQuery（或者本地瀏覽器API），因為事情可能很快變得復雜。 它最適合用於向可能是服務器呈現的頁面添加交互模塊，雖然它也可以與React應用程序共存。 使用jQuery，你直接與DOM交互以選擇元素，使用選擇器在頁面上找到要操作的元素。 它在更低的層次上操作，並且在應用程序增長的過程中容易出現問題。

解決 JavaScript 疲勞的旅程 直到幾個月前，我一看到 JavaScript 就會感到焦慮不安。 我完全受困於所謂的 JavaScript 疲勞中，無法擺脫它。 這種情況持續了好幾年。 今天，我喜歡 JavaScript 及其生態系統。 這是怎麼發生的呢？ 我從九十年代就開始以某種形式使用 JavaScript，而現在我架上有一些書，看起來在今天顯得非常有趣，書中滿滿的 document.write 陳述。 大概是在 2012-2013 年間，關於 ES6 將會帶來的巨大變化的消息在各處都跳著。 起初，我無法掌握所有事情的進展。我無法一次接受這麼多變化。JavaScript 改變了，但我表示抗拒。學好它已經費了我很多時間，而它卻在我腳下改變。 我在一篇博文的評論中看到一個真實的 點子，它表示“如果你從一開始就一直在這裡的話（對，我就是那個老人），學習現代 JavaScript 會更加困難”： 我會認為，以前（對，我就是那麼老）在那裡是更加困難的 - Tim Tate 我在 2012 年正式開始深入研究 JavaScript 和 Node.js，之前從未經歷過像 ES6 這樣的語言變革。此前一個重大變化發生在 2009 年的 ES5。ES6 徹底改變了一切。它是 JavaScript 的一次巨大改進，每天你都會遇到很多可能出現在 ES6 規範中的新功能，但你真的不知道它們是否真的會包含進去，需要每天跟上進度，其他人在推特上都在談論這些也許會成為下一個大事的東西。 var 被抛棄了。 function 不再存在。 花了很長時間才學會的原型繼承，被類（class）的奧妙所覆蓋。 這只是冰山一角。整個 JavaScript 生態系統在過去幾年中發生了巨大變化。 建置一切事物 正在發生的一個重大轉變是"建置"。 我們從一個非常簡單的東西（使用 script 標籤引入 JavaScript）發展到需要構建步驟將我們的語言編譯到某個難以理解的巨大文件中。起初我強烈抵抗，我站在我的塔樓上，拿著大砲抵抗建置的部隊。 但當 Babel 軍力出現時，我起初更加抵抗，但最終我舉起了白旗，並加入了敵人。 我意識到 Babel 不僅僅是一個引入未來、邊緣功能的時髦庫，而是在未來可以使用作為 ES2017 的工具，同樣地適用於 ES2018、ES2019 等。無路可逃。擁抱未來，Babel 是你的朋友。...