服务器之家

服务器之家 > 正文

用原生 JavaScript 实现十大 jQuery 函数

时间:2021-04-05 23:18     来源/作者:前端先锋

在本文中我将把自己最常用的 jQuery 函数转换为原生 JavaScript。

有时我需要创建一个简单的静态 HTML 或登录页面,而且不想引入任何库或其它依赖。对这种情况,我只使用普通的 JavaScript 来完成工作,知道它们的工作远离感觉真的很爽。

在开始之前,首先要知道标题是要转换为原生 JavaScript 的 jQuery 函数。接下来将简要介绍它做什么,然后是转换后的 JavaScript 代码和一些附加说明。

用原生 JavaScript 实现十大 jQuery 函数

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

 

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

  1. let isLoaded = false
  2. let myOnLoadCallBack = function(){ 
  3.     isLoaded = true
  4.     //my stuff here 
  5. document.addEventListener("DOMContentLoaded", myOnLoadCallBack()); 
  6.  
  7. document.addEventListener('readystatechange', (event) => { 
  8.     if (document.readyState === 'complete' && !isLoaded) { 
  9.         myOnLoadCallBack(); 
  10.     } 
  11. ); 

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

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

IE 8 及更低版本不支持 DOMContentLoaded。如果你不得不支持 IE 8,应该用 document.readyState。

以下是不同的状态:

  • loading : 正在加载文档
  • interactive : 文档已完全读取
  • complete : 文档已完全读取,所有资源(样式、图像)也被加载

2. $(…).HTML()

 

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

要查找现有值,只需引用 innerHTML 属性即可。

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

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

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

3.  $(…).Append

 

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

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

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

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

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

最后,插入元素。

  1. //appending 
  2. appendEl.appendChild(childEl); 

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

首先创建新元素。

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

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

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

如果想进一步简化,或者发现自己做了很多工作,你可以创建一个包装函数来做到这一点。

4. $(…).prepend()

 

与上面的 append 非常相似,唯一的区别是这个插入到元素的开头。所以我们直接跳转到简化的解决方案。

创建要插入的新元素。

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

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

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

5. $(…).empty()

 

清空或清除 DOM 元素。你可能会认为只需要将 innerHTML 属性赋给一个空字符串就行了。但这只做了一半,想一想如果目标元素还有子 DOM 元素会发生什么?我们会做到这一点,它也很简单。

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

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

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

  1. var contentEl = document.getElementById("empty-content"); 
  2. contentEl.innerHtml = ""
  3. while(contentEl.firstChild){ 
  4.     contentEl.removeChild(contentEl.firstChild); 

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

6. $(…).Attr(name)

 

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

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

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

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

  1. var el = document.querySelector("div#attributes input#my-check-box"); 

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

  1. 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 元素的值。这也比较简单,让我们从获取现有元素的值开始。

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

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

设定值同样简单,也可以在一行中完成。

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

与使用 innerHTML 设置内容类似,这也会覆盖元素当前的所有值。

8, 9.  (…).off()

 

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

添加事件处理:

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

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

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

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

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

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

最后删除所有元素。

  1. var currEl = document.getElementById("button"); 
  2. var cloneElcurrEl.cloneNode(true); 
  3. currEl.parentNode.replaceChild(cloneEl, currEl); 

10.  $(…).toggle()

 

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

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

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

  1. if(imgEl.style.display && imgEl.style.display === "none"){ 
  2.     imgEl.style.display = "initial"
  3. } else { 
  4.     imgEl.style.display = "none"

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

  1. if(imgEl.style.visibility && imgEl.style.visibility === "hidden"){ 
  2.     imgEl.style.visibility = "initial"
  3. } else { 
  4.     imgEl.style.visibility = "hidden"
  5. }; 

总结

 

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

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

希望这些可以帮助你!

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

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部