用原生 JavaScript 实现十大 jQuery 函数

时间 2019-11-05

标签原生 javascript 实现十大 jquery 函数栏目 JavaScript 繁體版

原文原文链接

做者：Omar Duarte
翻译：疯狂的技术宅javascript

原文：https://devkisslist.com/2019/...html

未经容许严禁转载前端

在本文中我将把本身最经常使用的 jQuery 函数转换为原生 JavaScript。java

有时我须要建立一个简单的静态 HTML 或登陆页面，并且不想引入任何库或其它依赖。对这种状况，我只使用普通的 JavaScript 来完成工做，老实说，知道它们是怎样工做的感受真的很好。jquery

如今我把它们分享给你。请访问GitHub页面，随时为你提供帮助： https://github.com/omarld/jqu...git

在你开始以前，首先要知道标题是要转换为原生 JavaScript 的 jQuery 函数。接下来将简要介绍它作什么，而后是转换后的 JavaScript 代码和一些附加说明。程序员

1) $(document).ready(..)

检查文档是否已加载并准备好执行脚本。github

let isLoaded = false;
let myOnLoadCallBack = function(){
    isLoaded = true;
    //my stuff here
}
document.addEventListener("DOMContentLoaded", myOnLoadCallBack());

document.addEventListener('readystatechange', (event) => {
    if (document.readyState === 'complete' && !isLoaded) {
        myOnLoadCallBack();
    }
);

使用了 DOMContentLoaded 事件侦听器，这是在构建 DOM 树但还没有加载任何其余资源（即样式表、图像等）时触发的。若是在 HTML 文档中找到任何 script 标记，DOMContentLoaded 也会等待加载这些脚本。面试

若是样式后面有脚本标记，在加载样式时就会出现问题。出现这种状况时，若是脚本须要修改样式，则在脚本以前加载样式。segmentfault

IE 8 及更低版本不支持 DOMContentLoaded。若是你不得不支持 IE 8，应该用 document.readyState。

如下是不一样的状态：

loading : 正在加载文档
interactive : 文档已彻底读取
complete : 文档已彻底读取，全部资源（样式、图像）也被加载

2) $(…).HTML()

查找现有 DOM 元素的值，或插入一些内容。

要查找现有值，只需引用 innerHTML 属性便可。

var content = document.querySelector("section#html div.content p.retrieve").innerHTML;

要插入一些内容，请将 innerHTML 分配给可包含 HTML 标记的新内容。请注意：这将替换全部的现有内容。

document.querySelector("section#html div.results p.sample").innerHTML = “<p>Starting a new paragraph</p>”;

3) $(…).Append

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

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

var appendEl = document.querySelector("section#append div.content div.results");

接下来建立要插入的元素。

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

最后，插入元素。

//appending
appendEl.appendChild(childEl);

固然，这须要三个步骤才能完成，但能够简化一下。

首先建立新元素。

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

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

document.querySelector("section#append div.content div.results").appendChild(childEl);

若是想进一步简化，或者发现本身作了不少工做，你能够建立一个包装函数来作到这一点。

4) $(…).prepend()

与上面的 append 很是类似，惟一的区别是这个插入到元素的开头。因此咱们直接跳转到简化的解决方案。

建立要插入的新元素。

var newDiv = document.createElement("div");
var textNode = document.createTextNode("new content to inserted!");
newDiv.appendChild(textNode);

查找现有元素并插入新元素。

document.querySelector("section#prepend div.content p#existing").insertBefore(newDiv, prependEl.firstChild);

5) $(…).empty()

清空或清除 DOM 元素。你可能会认为只须要将 innerHTML 属性赋给一个空字符串就好了。但这只作了一半，想想若是目标元素还有子 DOM 元素会发生什么？咱们会作到这一点，它也很简单。

首先从清除现有元素的内容开始。

document.getElementById("empty-content").innerHtml = “”;

好的，如今怎样处理全部内部 DOM 元素？先清除现有内容，而后在循环中删除全部子 DOM 元素。

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

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

6) $(…).Attr(name)

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

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

let isChecked = document.querySelector("div#attributes input#my-check-box").getAttribute("checked");

如今让咱们看看怎样设置相同的属性（attribute）。

var el = document.querySelector("div#attributes input#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 元素的值。这也比较简单，让咱们从获取现有元素的值开始。

为了使这些命令清晰，我将它们分开了。虽然它们能够在一行中完成。

var contentEl = document.querySelector("#my-input-el");
var lnameValue = contentEl.querySelector("input[name='lname']").value;

设定值一样简单，也能够在一行中完成。

contentEl.querySelector("input[name='fname']").value = "Some random value";

与使用 innerHTML 设置内容相似，这也会覆盖元素当前的全部值。

8, 9) $(…).on() | $(…).off()

要从元素添加或删除事件，请相应地使用 on() 或 off()。

添加事件处理：

document.getElementById("my-button").addEventListener("click", function(evt){
    //my custom code here
});

删除事件处理，这里须要对浏览器所支持的属性进行额外检查。

var toggleFunction = function(){...}
if (toggleBtn.removeEventListener) { // For all major browsers, except IE 8 and earlier
    toggleBtn.removeEventListener("click", toggleFunction);
} else if (toggleBtn.detachEvent) { // For IE 8 and earlier versions
    toggleBtn.detachEvent("click", toggleFunction)
}

添加或删除事件处理时须要注意如下几点。

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

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

最后删除全部元素。

var currEl = document.getElementById("button");
var cloneEl= 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 不只能够帮你更好的设计应用，还能够解决调试上的问题。

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

但愿这些能够帮助你！

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...