jQuery選擇器到Javascript轉換

Question

我是JS的新手，並以Junior Web Dev的身份加入了幾個月。 我較早進入非技術行業，想改變職業。

無論如何，我想轉換我用jQuery寫的代碼，但是我不知道如何用JS寫。

$('.onload_popup .email_form .form-item-mail input.email');

Answer 1

您可能正在尋找document.getElementsByClassName和類似的功能。

參見此處： https : //developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementById

同樣方便：通過諸如“ div.myclass”之類的查詢來使用選擇器的document.querySelector()

Answer 2

querySelectorAll()方法將文檔中與指定CSS選擇器匹配的所有元素作為靜態NodeList對象返回。 這是一個工作示例。 模糊和聚焦僅適用於輸入元素。 同樣， setProperty()方法接口為CSS樣式聲明對象上的屬性設置新值。

這是基於您的https://codepen.io/naveenborn/pen/PRyBvR的工作示例

 var elements = document.querySelectorAll('.onload_popup .email_form .form-item-mail input.email'); var popup = document.querySelector("input"); popup.addEventListener("focus",onFoucsEvent); popup.addEventListener("blur",onBlurEvent); function onFoucsEvent() { document.querySelector(".onload_popup").style.setProperty ("position", "absolute", "important"); } function onBlurEvent() { document.querySelector(".onload_popup").style.setProperty ("position", "fixed"); } 

 .onload_popup { position: fixed !important; top: 100px; left: 10px; } 

 <div class="onload_popup"> <div class="email_form"> <div class="form-item-mail"> <input class="email"> </div> </div> </div>