jquery用dom方法_jQuery方法的本机JavaScript等效项：DOM和表单

jquery用dom方法

关于我最近是否真的需要jQuery的争论仍在进行。 文章，但总而言之，使用jQuery是一个好主意有两个原因：

1. 您需要支持IE6 / 7/8（请记住您无法迁移到jQuery 2.0），或者
2. 如果没有jQuery，则比开发应用程序花费更多的时间来编写类似jQuery的库。

对于其他一切，务实。 jQuery是一个270Kb的通用库。 您不太可能需要它提供的所有功能，即使您省略了某些模块，它仍然是相当数量的代码。 您可以从CDN加载30Kb的最小版本，但浏览器必须停止处理并解析每个页面上的代码，然后再执行其他操作。

这是一系列文章的第一篇，显示了常见jQuery方法的本机JavaScript等效项。 尽管您可能希望将其中一些包装在较短的类似于别名的函数中，但是您当然不需要创建自己的类似于jQuery的库。

DOM选择器

jQuery允许使用CSS选择器语法选择DOM节点，例如

// find all paragraphs with the class "summary" in the article with ID "first"
var n = $("article#first p.summary");

本机等效项：

var n = document.querySelectorAll("article#first p.summary");

document.querySelectorAll在所有现代浏览器和IE8中实现（尽管仅支持CSS2.1选择器）。 jQuery对更高级的选择器提供了额外的支持，但是在大多数情况下，它将在$()包装器内运行document.querySelectorAll 。

本机JavaScript还提供了四种选择，如果可以使用它们，它们几乎肯定比querySelectorAll更快：

1. document.querySelector(selector) —仅获取第一个匹配的节点
2. document.getElementById(idname) —通过其ID名称获取单个节点
3. document.getElementsByTagName(tagname) —获取与元素匹配的节点（例如h1，p，strong等）。
4. document.getElementsByClassName(class) —获取具有特定类名的节点

getElementsByTagName和getElementsByClassName方法也可以应用于单个节点，以将结果限制为仅后代，例如

var n = document.getElementById("first");
var p = n.getElementsByTagName("p");

让我们做一些测试。 我编写了一些脚本来从“您真的需要jQuery吗？”中检索所有注释节点。 第10,000次。 结果：

码	时间
// jQuery 2.0 var c = $("#comments .comment");	4,649毫秒
// jQuery 2.0 var c = $(".comment");	3,437毫秒
// native querySelectorAll var c = document.querySelectorAll("#comments .comment");	1,362毫秒
// native querySelectorAll var c = document.querySelectorAll(".comment");	1,168毫秒
// native getElementById / getElementsByClassName var n = document.getElementById("comments"); var c = n.getElementsByClassName("comment");	107毫秒
// native getElementsByClassName var c = document.getElementsByClassName("comment");	75毫秒

我不能说严格的实验室条件，也不能反映实际使用情况，但是在这种情况下，本机JavaScript的速度提高了60倍。 它还说明，通过ID，标记或类来获取节点通常比querySelectorAll更可取。

DOM操作

jQuery提供了几种将更多内容添加到DOM的方法，例如

$("#container").append("<p>more content</p>");

在表面之下，jQuery使用本机的innerHTML方法，例如

document.getElementById("container").innerHTML += "<p>more content</p>";

您还可以使用DOM构建技术。 这些方法比innerHTML更安全，但很少更快：

var p = document.createElement("p");
p.appendChild(document.createTextNode("more content");
document.getElementById("container").appendChild(p);

我们还可以删除jQuery中的所有子节点：

$("#container").empty();

使用innerHTML的本机等效项：

document.getElementById("container").innerHTML = null;

或一个小功能：

var c = document.getElementById("container");
while (c.lastChild) c.removeChild(c.lastChild);

最后，我们可以从jQuery中的DOM中删除整个元素：

$("#container").remove();

或原生JavaScript：

var c = document.getElementById("container");
c.parentNode.removeChild(c);

可缩放矢量图形

已经开发了核心jQuery库以与当前文档一起使用。 SVG也具有DOM，但是jQuery不提供对这些对象的直接操作，因为通常必须使用诸如createElementNS和getAttributeNS 。 它可以工作并且可以使用几个插件 ，但是滚动自己的代码或使用专用的SVG库（例如Raphaël或svg.js）会更有效。

HTML5表格

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

即使是最基本的Web应用程序也将具有一两种形式。 您应该始终在服务器端验证用户数据，但是，理想情况下，您将在客户端验证之前对它进行补充，以在提交表单之前捕获错误。

客户端验证很简单：

1. 提交表单后，您将运行一个函数。
2. 如果遇到任何问题，则暂停提交并显示错误。

您可以使用jQuery。 您可以使用本机JavaScript。 您应该选择哪一个？ 都没有 。

HTML5内置支持各种常见输入类型，例如电子邮件，电话，URL，数字，时间，日期，颜色和基于正则表达式的自定义字段。 例如，如果要强制用户输入电子邮件地址，请使用：

<input type="email" name="email" required="required" />

除非您需要更多的技巧，例如比较两个或多个字段或显示自定义错误消息，否则不需要其他JavaScript或jQuery代码。

较旧的浏览器（包括IE9和更低版本）不了解新的类型，并将还原为标准的文本输入字段。 这些用户将退回到服务器端验证。 并不是很好的经验，但是您可以应用垫片或希望那些人看到光明并进行升级。

在我的下一篇文章中，我们将研究原生CSS类的操作和动画。

翻译自: https://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/

jquery用dom方法