用原生 JavaScript 实现十大 jQuery 函数

admin

       有时我需要创建一个简单的静态 HTML 或登录页面，而且不想引入任何库或其它依赖。对这种情况，我只使用普通的 JavaScript 来完成工作，知道它们的工作远离感觉真的很爽。
3 U3 z3 J: B$ e% a% b       在开始之前，首先要知道标题是要转换为原生 JavaScript 的 jQuery 函数。接下来将简要介绍它做什么，然后是转换后的 JavaScript 代码和一些附加说明。
- \  `, X: x7 N! l- v7 S1) $(document).ready(..)
       检查文档是否已加载并准备好执行脚本。

复制代码
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 也会等待加载这些脚本。
5 Y* w+ Q! q: r! Y/ x: D- E       如果样式后面有脚本标记，在加载样式时就会出现问题。出现这种情况时，如果脚本需要修改样式，则在脚本之前加载样式。
       IE 8 及更低版本不支持 DOMContentLoaded。如果你不得不支持 IE 8，应该用 document.readyState。
$ ^& B8 {  F( j以下是不同的状态：

• loading       : 正在加载文档
• interactive  : 文档已完全读取
• complete    : 文档已完全读取，所有资源（样式、图像）也被加载
  * A; e0 W6 A/ b+ F

2) $(…).HTML()
2 H2 q# ^# `/ u, U% ]6 h       查找现有 DOM 元素的值，或插入一些内容。要查找现有值，只需引用 innerHTML 属性即可。
/ l0 @* d6 t: B3 X

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

      要插入一些内容，请将 innerHTML 分配给可包含 HTML 标记的新内容。请注意：这将替换所有的现有内容。
# c1 f6 B$ N9 e' |

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

3) $(…).Append
       在现有元素的末尾插入一些 HTML。首先，需要找到并获取我们想要插入新内容的元素。
* [7 S8 A' R3 v

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

      接下来创建要插入的元素。
8 r' A; k7 z7 F6 R

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

      最后，插入元素。
# y8 E( h( D& k) z  O% a- |

复制代码
//appending
appendEl.appendChild(childEl);

      当然，这需要三个步骤才能完成，但可以简化一下。首先创建新元素。
) t' _% [0 }8 y" c* S, _+ ?

复制代码
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()
/ U% [* N% R$ |       与上面的 append 非常相似，唯一的区别是这个插入到元素的开头。所以我们直接跳转到简化的解决方案。创建要插入的新元素。
- f  v; y" o" d2 n0 L: K6 ]+ r0 a

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

      查找现有元素并插入新元素。
# V2 u( h3 ^+ R# K5 K" @1 [

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

5) $(…).empty()
9 Z# W+ B! i# q0 u       清空或清除 DOM 元素。你可能会认为只需要将 innerHTML 属性赋给一个空字符串就行了。但这只做了一半，想一想如果目标元素还有子 DOM 元素会发生什么？我们会做到这一点，它也很简单。首先从清除现有元素的内容开始。
9 s$ Y) I. n! X; C9 `

复制代码
document.getElementById("empty-content").innerHtml = “”;

      好的，现在怎样处理所有内部 DOM 元素？先清除现有内容，然后在循环中删除所有子 DOM 元素。
' U- O8 _; c' u# n, ]5 @

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

      用 while 循环进行迭代，直到没有子项要删除为止。
) X2 W4 }4 F# c/ B2 p8 G6) $(…).Attr(name)
- Y5 c& J8 [: B       获取现有 DOM 元素的属性（attribute）值，或设置属性。要记住重要一点是：并非所有 DOM 元素都有相同的属性。例如复选框与按钮（按钮不具有 checked 属性）。从获取复选框的 checked 属性开始。
& y* q: d/ i, t3 y- }# r, p' p

复制代码
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 的几个要点。
+ u+ l0 M1 c3 s; F, h. S

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

7) $(…).val()
$ C5 s- }7 I5 z1 d4 i       获取匹配的 DOM 元素的值。这也比较简单，让我们从获取现有元素的值开始。为了使这些命令清晰，我将它们分开了。虽然它们可以在一行中完成。
' j( w7 u1 I/ t  s! f# L2 ?; n  t

复制代码
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) (…).off()
- I& x% `, F, Y2 n5 ]3 a5 b! l       要从元素添加或删除事件，请相应地使用 on() 或 off()。添加事件处理：
. f7 Y5 O- _1 m* q3 d( ~

复制代码
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 不同，删除事件处理时，你必须指定要被删除的事件。
  

       有一种在不明确的情况下删除所有事件处理的方法，就是克隆元素并替换它。这也将会消除子元素所有的附加事件。最后删除所有元素。
2 a% E, z2 B1 g* H# g8 b! Z8 p  X( R

复制代码
var currEl = document.getElementById("button");
var cloneEl= currEl.cloneNode(true);
currEl.parentNode.replaceChild(cloneEl, currEl);

10) $(…).toggle()
- N- ?, X  W9 |. r: h! b       切换元素上的显示，可以通过几种方式完成。每种方法都有不同的结果。你需要决定所需的行为。
       第一种方法是将元素的 display 属性更改为 none 以从 DOM 中删除元素，并将其设置为 initial 以将其设置回来。这里重点是：如果你切换显示，将会影响你的布局和切换元素。
0 v- ]8 y& r* g       在这里，我们通过直接访问元素的 style 属性来切换图像元素上的显示。
0 f1 @) R$ O) k! V( d) V

复制代码
if(imgEl.style.display && imgEl.style.display === "none"){
    imgEl.style.display = "initial";
} else {
    imgEl.style.display = "none";
}

      第二种方法是更改元素可见性，这将隐藏元素并保留布局。
. d& j; ^( i7 V1 G9 X

复制代码
if(imgEl.style.visibility && imgEl.style.visibility === "hidden"){
    imgEl.style.visibility = "initial";
} else {
    imgEl.style.visibility = "hidden";
};

总结
& W) U, e3 l$ }( m  o       如果你一直在使用库和 JavaScript 框架，那么很容易忽略一些实现的简单性。但最重要的是，你也忽略了对 DOM 的一些核心工作原理的基本理解。很好地理解 DOM 不仅可以帮你更好的设计应用，还可以解决调试上的问题。
8 B  Q  e5 i5 g% X       这些只是我最常用的一些函数。现在我把它们分享给你，如果你想写出自己的函数，而不是在自己的程序中添加使软件体积增加的库的话。