jQuery是一種JavaScript庫,它包含了各種用于網頁開發的實用函數。然而,有時候我們需要把jQuery語句轉換成純JavaScript語句。下面介紹一些常見的jQuery函數以及它們對應的JavaScript語句。
$()函數是jQuery中最常用的函數之一,它用于選擇HTML元素。相當于JavaScript中的
document.querySelector()
或document.getElementById()
,如下所示:jQuery: $("p") JavaScript: document.querySelectorAll("p")
jQuery: $("#myDiv") JavaScript: document.getElementById("myDiv")
.css()函數用于設置HTML元素的CSS樣式,相當于JavaScript中的
.style.property
,如下所示:jQuery: $("p").css("color", "red") JavaScript: var p = document.querySelectorAll("p"); for(var i = 0; i < p.length; i++) { p[i].style.color = "red"; }
.hide()函數用于隱藏HTML元素,相當于JavaScript中的
.style.display = "none"
,如下所示:jQuery: $("p").hide() JavaScript: var p = document.querySelectorAll("p"); for(var i = 0; i < p.length; i++) { p[i].style.display = "none"; }
.click()函數用于添加點擊事件處理程序,相當于JavaScript中的
.addEventListener("click", function(){})
,如下所示:jQuery: $("button").click(function() { alert("Clicked!"); }); JavaScript: var button = document.querySelectorAll("button"); for(var i = 0; i < button.length; i++) { button[i].addEventListener("click", function() { alert("Clicked!"); }); }
通過這些轉換,我們可以在不使用jQuery的情況下編寫更加原始的JavaScript代碼。當然,如果你習慣了jQuery的簡潔性和優雅性,那么可以繼續使用jQuery。