用原生 JavaScript 实现十大 jQuery 函数

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

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

现在我把它们分享给你。请访问GitHub页面,随时为你提供帮助: https://github.com/omarld/jqu...

在你开始之前,首先要知道标题是要转换为原生 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 不仅可以帮你更好的设计应用,还可以解决调试上的问题。

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

希望这些可以帮助你!

英文原文地址:https://devkisslist.com/2019/06/29/top-10-jquery-functions-to-plain-old-javascript/

为了保证的可读性,本文采用意译而非直译。

Image placeholder
前端答疑
未设置
  86人点赞

没有讨论,发表一下自己的看法吧

推荐文章
jquery和jquery ui的区别?

jquery和jqueryui的区别?区别有:1、jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。 2、jQueryUI则是在jQuery的基础上,利用jQuery的扩展性,

jquery和javascript有关系吗?

jquery和javascript有关系吗?有关系,具体的关系是:jquery是基于JavaScript编写的,jquery全部都是JavaScript代码组成。jquery和javascript的关

jQuery JavaScript ajax区别

jQueryJavaScriptajax区别简单总结:1、JS是一门前端语言。2、Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新。3、jQ

可视化的JavaScript:JavaScript引擎运行原理

JavaScript很酷,但是JavaScript引擎是如何才能理解我们编写的代码呢?作为JavaScript开发人员,我们通常不需要自己处理编译器。然而,了解JavaScript引擎的基础知识并了解

jQuery回调函数不执行

jQuery回调函数不执行jQuery$.post不执行回调函数,原来服务器返回的contentType为text/json,但是,这个JSON中的属性没有用引号引起来,所以jQuery没有去执行回调

jQuery trim()函数怎么用?

trim()函数用于去除字符串两端的空白字符。该函数可以去除字符串开始和末尾两端的空白字符(直到遇到第一个非空白字符串为止)。trim()函数会移除字符串开始和末尾处的所有换行符,空格(包括连续的空格

jquery hasClass()方法怎么用?

jqueryhasClass()方法怎么用?hasClass()方法验证匹配元素是否包含指定的类,包含则返回true,否则返回false。语法结构:$(selector).hasClass(class

jQuery :empty怎么用?

jQuery:empty怎么用?作用::empty选择器选取空的元素。空元素指的是不包含子元素或文本的元素。语法:$(":empty")(推荐学习:jQuery教程手册)jquery:empty选择器

jQuery与Zepto的异同

jQuery与Zepto的异同一、同Zepto最初是为移动端开发的库,是jQuery的轻量级替代品,因为它的API和jQuery相似,而文件更小。Zepto最大的优势是它的文件大小,只有8k多,是目前

jQuery与Zepto是什么?

jQuery是什么?jQuery是一个简洁而快速的JavaScript库,可用于简化事件处理,HTML文档遍历,Ajax交互和动画,以便快速开发网站。jQuery简化了HTML的客户端脚本,从而简化了

jquery和zepto的区别是什么?

jQuery是一个简洁而快速的JavaScript库,可用于简化事件处理,HTML文档遍历,Ajax交互和动画,以便快速开发网站。jQuery简化了HTML的客户端脚本,从而简化了Web2.0应用程序

jQuery和Zepto是什么?

jQuery是什么?jQuery是一个简洁而快速的JavaScript库,可用于简化事件处理,HTML文档遍历,Ajax交互和动画,以便快速开发网站。jQuery简化了HTML的客户端脚本,从而简化了

Gartner:2020年十大战略技术趋势

技术变革的步伐正在迅速加快,IT专业人员需要研究的因素,他们以前从未处理过的事情(例如超级自动化、多重体验和人员扩充)都将对企业产生重大的影响。Gartner高级研究副总裁ValSribar说:“自从

Gartner发布:十大无线技术发展趋势

Wi-Fi将在未来五年内继续主导这个行业,因为它成为中央对新兴技术,包括机器人、无人机、自动驾驶汽车和新的医疗设备等项目的核心。在Gartner最新发布的2019年及以后的十大无线技术趋势中显示,Wi

jquery怎么实现淡入淡出效果?

jquery怎么实现淡入淡出效果?jquery实现淡入效果使用fadeIn()、淡出效果使用fadeOut(),来回切换使用fadeToggle()。●jQueryfadeIn()方法:用于淡入已隐藏

JavaScript函数及应用笔记

当变量名与函数名相同时,会优先使用函数名,例如:console.log(a);vara=10;functiona(){console.log('aaaaa');}console.log

硬核盘点,华为面向开发者的十大技术

随着社会的发展,科技的进步,5G落地、AI爆发、大数据持续突破、云计算已然成为新时代的水电煤。日益增多的新兴技术,为开发者带来机遇的同时也带来了不少挑战。尽管开发者们经常身处历史性事件的前沿,但由于

马云入选“全球十大思想者”,排名在贝索斯之前

大数据文摘出品消息来源:央视新闻、澎湃新闻、中国日报网1月21日,据央视新闻报道,美国《外交政策》杂志评选出了全球十大思想者榜单,阿里巴巴创始人马云成为唯一获选的中国企业家,排名第三,位列企业家之首。

最流行的十大开源云监控工具

Linux系统在企业中的应用程度已经非常广泛,人们听到过太多关于Docker和Kubernetes的消息,以至于忘记了监控和日志记录也是同样重要的任务。Docker持续发展,随之而来的是围绕它构建的服

公布!达摩院2020年十大科技趋势

刚刚,“达摩院2020十大科技趋势”正式发布!去年,我们预测的科技趋势正一一变为现实:AI芯片崛起、智能城市诞生、5G催生全新应用场景……科技新十年开启,AI、芯片、云计算、区块链、工业互联网、量子计

2019十大内容安全事件盘点

2019年,不良违规内容泛滥已成为全球互联网生态治理难题,社会聚焦、监管行动使得内容安全也成为互联网企业发展生命线,受到管理层的重点关注。这一年,内容安全事件频繁爆雷,据不完全统计,就有超过一千家互联

使用 jQuery 触发 Vue 事件

时间一长老是忘记这行代码的写法,今天特地记上一笔,方便今后查阅 js文件如下document.save.dispatchEvent(newEvent('无此事件'))//触发不存在的事件不会报错 do

jquery和vue的区别是什么?

jquery和vue的区别是什么?●jquery是直接操作DOM;使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作;和原生的js区别只在于可以更方便的选取和操作DOM对象;数据和界面

vuejs和jquery的区别是什么?

vuejs和jquery的区别1、jQuery首先要获取到dom对象,然后对dom对象进行进行值的修改等操作2、Vue是首先把值和js对象进行绑定,然后修改js对象的值,Vue框架就会自动把dom的值

vue和jquery之间有什么区别?

首先我们来了解一下jquery和vue是什么?Vue是什么?Vue.js是一个前端JavaScript框架,用于构建用户界面。它是开源的。当使用其他JavaScript库时,它还可以用作集成工具。它本