用原生 JavaScript 实现十大 jQuery 函数

时间：2021-05-02

在本文中我将把自己最常用的 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==='complete'&&!isLoaded){
  • myOnLoadCallBack();
  • }
  • );

    • 使用了 DOMContentLoaded 事件侦听器，这是在构建 DOM 树但尚未加载任何其他资源(即样式表、图像等)时触发的。如果在 HTML 文档中找到任何 script 标记，DOMContentLoaded 也会等待加载这些脚本。

    如果样式后面有脚本标记，在加载样式时就会出现问题。出现这种情况时，如果脚本需要修改样式，则在脚本之前加载样式。

    IE 8 及更低版本不支持 DOMContentLoaded。如果你不得不支持 IE 8，应该用 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=“<p>Startinganewparagraph</p>”;

    • 3. $(…).Append

    在现有元素的末尾插入一些 HTML。

    首先，需要找到并获取我们想要插入新内容的元素。

  • varappendEl=document.querySelector("section#appenddiv.contentdiv.results");

    • 接下来创建要插入的元素。

  • varchildEl=document.createElement("div");
  • childEl.innerHTML="<p>New<strong>child</strong>Content!</p>"

    • 最后，插入元素。

  • //appending
  • appendEl.appendChild(childEl);

    • 当然，这需要三个步骤才能完成，但可以简化一下。

    首先创建新元素。

  • varchildEl=document.createElement("div");
  • childEl.innerHTML="<p>New<strong>child</strong>Content!</p>"

    • 接下来在一行中找到并插入新元素。

  • 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("empty-content").innerHtml=“”;

    • 好的，现在怎样处理所有内部 DOM 元素?先清除现有内容，然后在循环中删除所有子 DOM 元素。

  • varcontentEl=document.getElementById("empty-content");
  • contentEl.innerHtml="";
  • while(contentEl.firstChild){
  • contentEl.removeChild(contentEl.firstChild);
  • }

    • 用 while 循环进行迭代，直到没有子项要删除为止。

    6. $(…).Attr(name)

    获取现有 DOM 元素的属性(attribute)值，或设置属性。要记住重要一点是：并非所有 DOM 元素都有相同的属性。例如复选框与按钮(按钮不具有 checked 属性)。

    从获取复选框的 checked 属性开始。

  • letisChecked=document.querySelector("div#attributesinput#my-check-box").getAttribute("checked");

    • 现在让我们看看怎样设置相同的属性(attribute)。

  • varel=document.querySelector("div#attributesinput#my-check-box");

    • 可以通过访问 JavaScript 属性(property)来更改其状态。

  • el.checked=true;

    • 你可能已经注意到我将 checked 键称为 JavaScript 属性(property)。元素属性(attribute)和 JavaScript 属性(property)有什么区别吗?简单来说，属性(property)是 JavaScript 来自元素属性(attributes)的继承键。这意味着你可以将 DOM 元素属性(attribute)作为 JavaScript 对象属性(property)进行访问。

    以下是有关 propertie 与 attribute 的几个要点。

    • property 是来自 attribute 的 JavaScript 继承值(即 .class vs className)
    • 元素属性(property)仅在其为标准属性(property)时才从属性(attribute)创建。所以如果你引入了自定义属性(attribute)，它将不会成为对象属性(property)的一部分。
    • 根据元素，可用属性(attribute)会有所不同(即复选框与按钮)

    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,exceptIE8andearlier
  • toggleBtn.removeEventListener("click",toggleFunction);
  • }elseif(toggleBtn.detachEvent){//ForIE8andearlierversions
  • toggleBtn.detachEvent("click",toggleFunction)
  • }

    • 添加或删除事件处理时需要注意以下几点。

    • 在实例化代码时元素必须存或者没有被附加事件。
    • 删除事件侦听器时，函数引用必须相同。
    • 内联匿名函数不起作用，因为引用不同。
    • 与 jQuery 不同，删除事件处理时，你必须指定要被删除的事件。

    有一种在不明确的情况下删除所有事件处理的方法，就是克隆元素并替换它。这也将会消除子元素所有的附加事件。

    最后删除所有元素。

  • varcurrEl=document.getElementById("button");
  • varcloneEl=currEl.cloneNode(true);
  • currEl.parentNode.replaceChild(cloneEl,currEl);

    • 10. $(…).toggle()

    切换元素上的显示，可以通过几种方式完成。每种方法都有不同的结果。你需要决定所需的行为。

    第一种方法是将元素的 display 属性更改为 none 以从 DOM 中删除元素，并将其设置为 initial 以将其设置回来。这里重点是：如果你切换显示，将会影响你的布局和切换元素。

    在这里，我们通过直接访问元素的 style 属性来切换图像元素上的显示。

  • if(imgEl.style.display&&imgEl.style.display==="none"){
  • imgEl.style.display="initial";
  • }else{
  • imgEl.style.display="none";
  • }

    • 第二种方法是更改元素可见性，这将隐藏元素并保留布局。

  • if(imgEl.style.visibility&&imgEl.style.visibility==="hidden"){
  • imgEl.style.visibility="initial";
  • }else{
  • imgEl.style.visibility="hidden";
  • };

    • 总结

    如果你一直在使用库和 JavaScript 框架，那么很容易忽略一些实现的简单性。但最重要的是，你也忽略了对 DOM 的一些核心工作原理的基本理解。很好地理解 DOM 不仅可以帮你更好的设计应用，还可以解决调试上的问题。

    这些只是我最常用的一些函数。现在我把它们分享给你，如果你想写出自己的函数，而不是在自己的程序中添加使软件体积增加的库的话。

    希望这些可以帮助你!

    原文地址：https://mp.weixin.qq.com/s?__biz=MzI3NzIzMDY0NA==&mid=2247500801&idx=1&sn=387c734ccdff23884421d765f8ec42b9&chksm=eb6be15adc1c684c6d06da136ce0937f6d8db979f33555f5ba1b9bce15e9487680cfa9c742bd&mpshare=1&s

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章