javascript - modify - w3school document object




何時使用Vanilla JavaScript與jQuery? (9)

$(this)this不同:

通過使用$(this)您可以確保將jQuery原型傳遞到對像上。

我注意到,在監視/試圖回答常見的jQuery問題時,有一些使用javascript的實踐,而不是jQuery,實際上可以讓你寫得更少,而且 ......的數量相同。 並且也可能產生性能優勢。

一個具體的例子

$(this) vs this

在引用點擊的對象ID的點擊事件中

jQuery的

$(this).attr("id");

使用Javascript

this.id;

還有其他常見的做法嗎? 在某些Javascript操作可以更容易完成的情況下,無需將jQuery加入組合。 或者這是罕見的情況? (實際上需要更多代碼的jQuery“快捷方式”)

編輯:雖然我欣賞關於jQuery與普通JavaScript性能的答案,但我實際上正在尋找更多的定量答案。 當使用jQuery時 ,實際上會更好(可讀性/緊湊性)的實例使用普通的javascript而不是使用$() 。 除了我在我原來的問題中給出的例子。


this作為DOM元素的第一個答案的實時屬性列表非常完整。

你也許會覺得有一些其他的知道很有趣。

當這是文件時:

  • this.forms獲取當前文檔表單的HTMLCollection
  • this.anchors獲取所有HTMLAnchorElementsname被設置的HTMLAnchorElements
  • this.links獲取所有HTMLAnchorElement ,並設置href
  • this.images獲得所有HTMLImageElement
  • 並且與已過時的小程序一樣this.applets

當您使用document.formsdocument.forms[formNameOrId]獲取如此命名或標識的表單。

當這是一個表單時:

  • this[inputNameOrId]來獲得如此命名或標識的字段

當這是表單字段時:

  • this.type獲取字段類型

在學習jQuery選擇器時,我們經常跳過學習已經存在的HTML元素屬性,這些屬性訪問起來非常快。


像往常一樣,我遲到了這個派對。

這不是讓我決定使用jQuery的額外功能,就像那樣有吸引力。 畢竟沒有什麼能夠阻止你寫自己的功能。

事實上,在修改DOM以避免內存洩漏時有很多技巧需要學習(我正在談論你的IE)。 有一個中心資源為我處理所有這些問題,這些資源是由我比以往任何時候都更好的JS編程人員編寫的,而這些資源正在不斷審查,修訂和測試,這些資源都是上帝寄來的。

我想這種情況屬於跨瀏覽器支持/抽象參數。

當然,jQuery並不排除在需要時直接使用JS。 我總覺得兩人似乎在一起無縫工作。

當然,如果您的瀏覽器不支持jQuery,或者您正在支持低端環境(舊手機?),那麼一個大的.js文件可能會成為問題。 還記得jQuery過去很小嗎?

但通常情況下,性能差異不是一個值得關注的問題。 它只需要足夠快。 隨著千兆赫的CPU週期每秒都會浪費,我更關心我的編碼器的性能,這是唯一的開發資源,每18個月不會增加一倍。

這就是說我目前正在研究可訪問性問題,顯然.innerHTML是一個不錯的選擇。 當然,jQuery依賴於.innerHTML,所以現在我正在尋找一個框架,它將取決於允許的有些乏味的方法。 我可以想像,這樣一個框架將比jQuery運行得慢,但只要它表現良好,我會很高興。


其他人的回答集中在“jQuery與普通JS的廣泛問題”上。 從你的OP來看,我認為你只是想知道如果你已經選擇使用jQuery,最好使用vanilla JS。 你的例子就是你應該使用vanilla JS的完美例子:

$(this).attr('id');

速度較慢並且(在我看來)不如以下可讀性:

this.id

這比較慢,因為你必須創建一個新的JS對象才能檢索jQuery方式的屬性。 現在,如果您打算使用$(this)來執行其他操作,那麼通過所有方法,將該jQuery對象存儲在一個變量中並使用它進行操作。 但是,我遇到了很多情況,我只需要元素的屬性(如idsrc )。

還有其他常見的做法嗎? 在某些Javascript操作可以更容易完成的情況下,無需將jQuery加入組合。 或者這是罕見的情況? (實際上需要更多代碼的jQuery“快捷方式”)

我認為最常見的情況是您在帖子中描述的情況; 人們將$(this)不必要地包裝在一個jQuery對像中。 我最常用idvalue來看這個(而不是使用$(this).val() )。

編輯: Here有一篇文章解釋了為什麼attr()情況下使用jQuery更慢。 懺悔:從標籤維基上偷走它,但我認為這個問題值得一提。

再次編輯:鑑於直接訪問屬性的可讀性/性能影響,我會說一個好的經驗法則是盡可能地嘗試使用this.<attributename> 。 可能有些情況下,由於瀏覽器不一致,這種方式無法工作,但如果不起作用,最好先嘗試一下,然後回到jQuery上。


已經有一個被接受的答案,但我相信在這裡直接輸入的答案在其實際上可以保證跨瀏覽器支持的原生javascript方法/屬性列表中是全面的。 為此,我可以將您重定向到quirksmode:

http://www.quirksmode.org/compatibility.html

這也許是什麼在任何地方瀏覽什麼都行得通,哪些不起作用的最全面的清單。 請特別注意DOM部分。 閱讀很多,但重點不在於全部閱讀,而是將其用作參考。

當我開始認真寫作網絡應用程序時,我打印出所有的DOM表格並將它們掛在牆上,這樣我就一眼就能知道什麼是安全的,什麼需要黑客。 這些天我只是谷歌像quirksmode parentNode compatibility當我有疑問。

與其他任何事情一樣,判斷主要是經驗問題。 我真的不建議你閱讀整個網站,並記住所有問題,找出何時使用jQuery以及何時使用普通JS。 請注意清單。 搜索很容易。 隨著時間的推移,你會發展出一種本能,當平原JS是優選的。

PS:PPK(網站的作者)也有一本非常好的書,我推薦閱讀


我發現JS和JQ之間肯定存在重疊。 你所展示的代碼就是一個很好的例子。 坦率地說,將JQ用於JS的最佳理由是瀏覽器兼容性。 我總是傾向於JQ,即使我能夠在JS中完成某些事情。


正確的答案是,如果使用jQuery而不是“普通舊式”原生JavaScript,你總是會受到性能損失。 這是因為jQuery是一個JavaScript庫。 這不是一些花哨的JavaScript新版本。

jQuery功能強大的原因在於它在跨瀏覽器的情況下(AJAX是最好的例子之一)使得一些事情過於繁瑣,並且平滑了大量可用瀏覽器之間的不一致性並且提供了一致的API。 它還可以輕鬆實現鏈接,隱含迭代等概念,從而簡化在一組元素上的工作。

學習jQuery不能代替學習JavaScript。 你應該在後者中有一個堅實的基礎,以便你充分理解知道前者對你更容易。

- 編輯包含評論 -

由於評論很快指出(並且我同意100%),以上陳述是指基準代碼。 一個'本地'JavaScript解決方案(假設它寫得很好)將勝過jQuery解決方案,幾乎在每種情況下都能完成同樣的任務(否則我很樂意看到一個例子)。 jQuery的確加快了開發時間,這是一個重要的好處,我並不是故意淡化的。 它便於閱讀,易於遵循代碼,這比一些開發人員能夠自己創建的代碼更容易。

在我看來,答案取決於你試圖達到的目標。 如果根據您對性能優勢的參考推測出來,那麼您的應用程序的速度超出了最佳速度,那麼每次調用$()時,使用jQuery都會引入開銷。 如果你想提高可讀性,一致性,跨瀏覽器兼容性等,那麼肯定有理由支持jQuery而不是'原生'JavaScript。


這是一個非技術性的答案 - 許多工作可能不允許某些庫,如jQuery。

事實上,谷歌不允許他們的任何代碼(或React,因為它擁有Facebook)的jQuery,你可能不知道,直到面試官說:“對不起,但你不能使用jQuery,它不是XYZ公司的核准清單“。 Vanilla JavaScript絕對無處不在,每一次,永遠不會給你這個問題。 如果你依賴圖書館,你會獲得快速和輕鬆,但是你失去了普遍性。

另外,談到面試時,另一個缺點是,如果你說在代碼測驗中你需要使用庫來解決JavaScript問題,那麼你會發現你並沒有真正理解這個問題,這看起來有點不好。 而如果你用原始的香草JavaScript解決它,它表明你實際上理解並可以解決他們扔在你面前的任何問題的每個部分。


  • this.id (如你所知)
  • this.value (在大多數輸入類型中,我知道的唯一問題是當<select>在其<option>元素中沒有設置value屬性或Safari中的無線電輸入時,IE)。
  • this.className來獲取或設置整個“class”屬性
  • this.selectedIndex對一個<select>來獲取選定的索引
  • <select> this.options來獲取<option>元素的列表
  • this.text<option>獲取其文本內容
  • this.rows<table>來獲取<tr>元素的集合
  • this.cells<tr>獲取其單元格(td&th)
  • this.parentNode獲得一個直接的父母
  • this.checked獲取checkbox的選中狀態Thanks @Tim Down
  • this.selected獲取option的選擇狀態Thanks @Tim Down
  • this.disabled獲取input的禁用狀態Thanks @Tim Down
  • this.readOnly獲取input 謝謝@Tim Down的readOnly狀態
  • this.href針對<a>元素獲取其href
  • this.hostname針對<a>元素來獲取其href的域
  • this.pathname來獲取其href的路徑
  • this.search對一個<a>元素來獲取它的href的查詢字符串
  • this.src針對有效擁有src的元素

...我想你應該已經明白了。

有時候性能至關重要。 就像如果你在循環中執行某些事情很多次,你可能想要拋棄jQuery。

一般來說,您可以替換:

$(el).attr('someName');

有:

以上措辭不佳。 getAttribute不是替代品,但它確實檢索從服務器發送的屬性的值,並且其相應的setAttribute將設置它。 在某些情況下是必要的。

下面的句子涵蓋了它。 看到這個答案更好的治療。

el.getAttribute('someName');

...為了直接訪問屬性。 請注意,屬性與屬性不同(儘管它們有時相互鏡像)。 當然也有setAttribute

假設您遇到了需要打開某種類型的所有標籤的頁面。 jQuery簡單易用:

$('span').unwrap();  // unwrap all span elements

但是,如果有很多,你可能想要做一個原生的DOM API:

var spans = document.getElementsByTagName('span');

while( spans[0] ) {
    var parent = spans[0].parentNode;
    while( spans[0].firstChild ) {
        parent.insertBefore( spans[0].firstChild, spans[0]);
    }
    parent.removeChild( spans[0] );
}

這段代碼非常簡短,它比jQuery版本表現更好,並且可以很容易地在您的個人庫中變成可重用的函數。

由於while(spans[0]) ,可能看起來我有一個無限循環,但是因為我們正在處理一個“活動列表”,所以在我們執行parent.removeChild(span[0]); 。 這是一個非常漂亮的功能,我們錯過了使用Array(或類似數組的對象)的方式。





performance