在本文中我将把自己最常用的 jQuery 函数转换为原生 JavaScript.
有时我需要创建一个简单的静态 html 或登录页面, 而且不想引入任何库或其它依赖. 对这种情况, 我只使用普通的 JavaScript 来完成工作, 老实说, 知道它们是怎样工作的感觉真的很好.
现在我把它们分享给你. 请访问 GitHub 页面, 随时为你提供帮助: https://github.com/omarld/jqueryToPlainJS
在你开始之前, 首先要知道标题是要转换为原生 JavaScript 的 jQuery 函数. 接下来将简要介绍它做什么, 然后是转换后的 JavaScript 代码和一些附加说明.
1) $(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 也会等待加载这些脚本.
如果样式后面有脚本标记, 在加载样式时就会出现问题. 出现这种情况时, 如果脚本需要修改样式, 则在脚本之前加载样式.
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 不仅可以帮你更好的设计应用, 还可以解决调试上的问题.
这些只是我最常用的一些函数. 现在我把它们分享给你, 如果你想写出自己的函数, 而不是在自己的程序中添加使软件体积增加的库的话.
希望这些可以帮助你!
来源: http://www.css88.com/web/javascript/15581.html