在本文中，我将把我最常用的jQuery函数转换为原生JavaScript。有时我需要创建一个简单的静态HTML或登录页面，我不想引入任何库或其他依赖项。对于这种情况，我只使用普通的JavaScript来完成工作，知道它们工作起来真的很酷。在我们开始之前，了解标头是转换为本机JavaScript的jQuery函数很重要。下面简要描述它的作用，然后是转换后的JavaScript代码和一些附加说明。1.$(document).ready(..)检查文档是否已加载并准备好执行脚本。letisLoaded=false;letmyOnLoadCallBack=function(){isLoaded=true;//mystuffhere}document.addEventListener("DOMContentLoaded",myOnLoadCallBack());document.addEventListener('readystatechange',(event)=>{if(document.readyState==='完成'&&!isLoaded){myOnLoadCallBack();});使用DOMContentLoaded事件侦听器，它在DOM树已构建但尚未加载其他资源（即样式表、图像等）时触发。如果在HTML文档中找到任何脚本标签，DOMContentLoaded也会等待这些脚本被加载。如果样式后面有script标签，加载样式的时候就会出现问题。发生这种情况时，如果脚本需要修改样式，请在脚本之前加载样式。IE8及以下版本不支持DOMContentLoaded。如果你必须支持IE8，你应该使用document.readyState。以下是不同的状态：loading：正在加载文档interactive：文档已被完全读取complete：文档已被完全读取并且所有资源（样式，图像）也已加载2.$(...).HTML()查找现有DOM元素的值，或者插入一些内容。要查找现有值，只需参考innerHTML属性。varcontent=document.querySelector("section#htmldiv.contentp.retrieve").innerHTML;要插入一些内容，请将innerHTML分配给可以包含HTML标记的新内容。请注意：这将替换所有现有内容。document.querySelector("section#htmldiv.resultsp.sample").innerHTML="
Startinganewparagraph
";3.$(…).Append在现有元素的末尾插入一些HTML。首先，我们需要找到并获取我们想要插入新内容的元素。varappendEl=document.querySelector("section#appenddiv.contentdiv.results");接下来创建要插入的元素。varchildEl=document.createElement("div");childEl.innerHTML="NewchildContent!
"最后，插入元素。//appendingappendEl.appendChild(childEl);当然，这需要三个步骤才能完成，但可以简化。首先创建新元素。varchildEl=document.createElement("div");childEl.innerHTML="NewchildContent!
"接下来在一行中查找并插入新元素。document.querySelector("section#appenddiv.contentdiv.results").appendChild(childEl);如果你想进一步简化，或者发现自己做了很多工作，你可以创建一个包装函数来做到这一点。4.$(…).prepend()和上面的append很像，唯一不同的是这个是插入到元素的开头。所以我们直接跳到简化的解决方案。创建要插入的新元素。varnewDiv=document.createElement("div");vartextNode=document.createTextNode("newcontenttoinserted!");newDiv.appendChild(textNode);查找现有元素并插入新元素。document.querySelector("section#prependdiv.contentp#existing").insertBefore(newDiv,prependEl.firstChild);5.$(…).empty()清空或清除DOM元素。您可能认为您需要做的就是为innerHTML属性分配一个空字符串。但这只是完成了一半，想想如果目标元素有子DOM元素会怎样？我们会这样做，这也很简单。首先清除现有元素的内容。document.getElementById("空内容").innerHtml="";好的，现在如何处理所有内部DOM元素？先清空已有内容，再循环删除所有子DOM元素。varcontentEl=document.getElementById("empty-content");contentEl.innerHtml="";while(contentEl.firstChild){contentEl.removeChild(contentEl.firstChild);}用一个while循环迭代直到没有孩子要删除。6.$(…).Attr(name)获取现有DOM元素的属性值，或设置属性。需要记住的重要一点是，并非所有DOM元素都具有相同的属性。例如复选框和按钮（按钮没有选中属性）。首先获取复选框的checked属性。letisChecked=document.querySelector("div#attributesinput#my-check-box").getAttribute("checked");现在让我们看看如何设置相同的属性。varel=document.querySelector("div#attributesinput#my-check-box");它的状态可以通过访问JavaScript属性来改变。el.checked=真；您可能已经注意到，我将选中的键称为JavaScript属性。元素属性和JavaScript属性之间有什么区别吗？简单来说，属性是JavaScript从元素属性继承的键。这意味着您可以将DOM元素属性作为JavaScript对象属性进行访问。下面是关于属性和特性的几个要点。property是从属性（即.class与className）继承的JavaScript值，如果元素属性是标准属性，则元素属性仅从属性创建。因此，如果您引入自定义属性，它就不会成为对象属性的一部分。根据元素的不同，可用的属性（attributes）会有所不同（即复选框与按钮）7.$(...).val()获取匹配的DOM元素的值。这个也比较简单，我们先从获取一个已有元素的值开始。为了清楚起见，我将这些命令分开了。尽管它们可以在一行中完成。varcontentEl=document.querySelector("#my-input-el");varlnameValue=contentEl.querySelector("input[name='lname']").value;设置值同样简单，也可以在一行中完成。contentEl.querySelector("input[name='fname']").value="Somerandomvalue";类似于使用innerHTML设置内容，这也会覆盖元素的任何当前值。8,9.(…).off()要在元素中添加或删除事件，请相应地使用on()或off()。添加事件处理：document.getElementById("my-button").addEventListener("click",function(evt){//mycustomcodehere});删除事件处理，这里需要对浏览器支持的属性进行额外的检查。vartoggleFunction=function(){...}if(toggleBtn.removeEventListener){//Forallmajorbrowsers,exceptIE8andearliertoggleBtn.removeEventListener("click",toggleFunction);}elseif(toggleBtn.detachEvent){//ForIE8andearlierversionstoggleBttoggleFunction)}有几个添加或删除事件处理程序时要记住的事情。实例化代码时，元素必须存在或没有附加事件。删除事件侦听器时，函数引用必须相同。内联匿名函数不起作用，因为引用不同。与jQuery不同的是，在删除事件处理程序时，您必须指定要删除的事件。在不明确的情况下删除所有事件处理的一种方法是克隆元素并替换它。这还将从子元素中删除所有附加事件。最后删除所有元素。varcurrEl=document.getElementById("button");varcloneEl=currEl.cloneNode(true);currEl.parentNode.replaceChild(cloneEl,currEl);方式来完成。每种方法都有不同的结果。您需要决定所需的行为。第一种方法是将元素的display属性更改为none以从DOM中删除该元素，并将其设置为initial以将其设置回来。这里的要点是：如果你切换显示，它会影响你的布局和切换元素。在这里，我们通过直接访问元素的样式属性来切换图像元素的显示。if(imgEl.style.display&&imgEl.style.display==="none"){imgEl.style.display="initial";}else{imgEl.style.display="none";}第二种方法是改变元素可见性，这将隐藏元素并保留布局。如果（imgEl.style.visibility&&imgEl.style.visibility==="hidden"）{imgEl.style.visibility="initial";}else{imgEl.style.visibility="hidden";};总结如果您一直在使用库和JavaScript框架，很容易忽略一些实现的简单性。但最重要的是，您还缺少对DOM的一些核心工作原理的基本理解。很好地理解DOM不仅可以帮助您更好地设计应用程序，还可以解决调试问题。这些只是我最常使用的一些功能。现在我把它们分享给你，如果你想写你自己的功能，而不是在你自己的程序中添加增加软件体积的库。希望这些对你有帮助！