jQuery到常规Javascript映射

我只想将一些jQuery方法映射到它们的普通 Javascript DOM方法;

例如

prev()
next()
before()
after()

如果你能提供jQuery / Javascript到类似的DOM操作方法的映射,真的很棒.

在基于DOM的纯JS中,这些jQuery方法都没有精确的1对1模拟.如果他们这样做,就不需要jQuery来实现自己的方法来完成这些任务.

您可以使用elem.previousSibling和elem.nextSibling获取元素的上一个和下一个兄弟节点.例如,使用此HTML结构：

<ul>
    <li>First</li>
    <li id="second">Second</li>
</ul>

你会用这个JS：

var elem = document.getElementById("second");
var p = elem.previousSibling;
alert(p.nodeType);

在这种情况下,第二个LI的前一个兄弟不是第一个LI.相反,前一个兄弟是两个LI标签之间的空白空间.这样做是为了除了实际的HTML元素之外,您还可以操作文档中的任何文本节点. nextSibling属性的工作方式相同.

理论上这很好,但在实际使用中它或多或少是一种痛苦,因为你很少或根本不需要操纵文档中的空白.要解决此问题,请遍历检查nodeType的兄弟姐妹.如果nodeType为1,那么它是一个文本节点,因此跳到下一个节点,直到找到nodeType不为1的节点.

您可以找到有用的博客文章Finding HTML elements using Javascript nextSibling and previousSibling.只是避免使用扩展他使用的Object.prototype的技术 – 通过这样做很容易在对象的循环中打破.

至于before()和after(),DOM等价物是insertBefore()和insertBefore()在你想要的目标之后的兄弟上运行.但是,您不能只是将一些HTML放入其中并期望它能够正常工作.相反,您必须手动创建每个元素,属性和值作为DOM节点,然后插入它们.例如：

var welcomingDiv;

function sayHi(){
  welcomingDiv = document.createElement("div");
  welcomingDiv.innerHTML = "Welcome, and be amazed!";


  target = document.getElementById("a-tag-someplace");
  document.body.insertBefore(welcomingDiv, target);
}

这将在任何标签具有ID“a-tag-someplace”之前将其插入到您的文档中.即使这是一种欺骗,因为innerHTML不是官方JS标准的一部分.如果您正确地执行此操作,则必须创建一个文本节点并将其附加到新创建的DIV中.

简而言之：jQuery使生活变得更加简单.如果没有充分的理由,不要重新发明轮子.