前端实训-中级阶段（六）-jQuery元素节点操作（2019-07-18期）

最基础的前端就是HTML+CSS+Javascript。掌握这三项技术算是入门，但也只是入门而已。现在前端开发的定义远不止于此。前端小课堂（HTML/CSS/JS），本着提高技术水平，夯实基础知识的中心思想，开课（每周四）。上一节，我们讲了jQuery的基本使用。本节我们讲讲元素节点相关的内容。ContentDirectorySelectorDocumentProcessingFilterSelector开头提到了Selectors。上一节也简单列出。这一节，我们来说说一些风骚的事情。Sizzle选择器引擎首先询问DOM的API搜索性能。你知道吗？从快到慢ID>Class>Name>Tag。你知道CSS选择器的匹配顺序吗？关于jQuery的选择器从左到右的匹配顺序，有什么你不知道的吗？Sizzle选择器引擎从左到右运行。当然，既然优秀，那肯定是有道理的。如果它支持更快的querySelector将选择更快的方法。如果有id选择器，他会??先选择id来缩小范围。有兴趣的可以看看Sizzle选择器引擎的介绍。能看懂源码当然更好。举个栗子查询语句：$('divspan')代码结构：divdivdivspandivspan如果先查div，需要遍历多少次？做两次可以吗？但是如果我们先检查跨度，那么我们的父母就会寻找它，直到找到头部，我们就完成了。再说一个，子节点只有一个父节点。但是父节点会有很多子节点。文档处理append、appendTo和prepend、prependTo对父子节点进行操作，效果也等同于原生API。移动现有节点，并添加新节点。parent.append(child)是将child添加到parent的末尾。链操作对象是父对象。对应原生的appendChildchild.appendTo(parent)就是在parent的末尾添加child。链操作对象是child。parent.prepend(child)是将child添加到parent的前面。链操作对象是父对象。child.prependTo(parent)就是把child加到parent前面。链操作对象是child。insertAfter、after和insertBefore、before对兄弟节点进行操作，效果同上。A.after(B)是在A之后添加B。链式操作的对象是AB。insertAfter(A)是在A之后添加B。链式操作的对象是BA.before(B)是在A中添加B。A的前面。链式操作对象是AB。insertBefore(A)是将B添加到A的前面。链式操作对象是Bwrap、unwrap、wrapall、wrapInner、replaceWith、replaceAll。老实说，我从来没有用过这些。$("a").wrap("