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

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

上一节我们讲了 jQuery 的基本使用。这节我们讲元素节点相关的内容。

内容目录

1. 选择器
2. 文档处理
3. 筛选

选择器

选择器在初级的时候就讲过了。上节也简单的列了一下。这节就找一点骚东西说一说吧。

Sizzle 选择器引擎

先问问DOM的API查找性能，有不知道的吗？由快到慢 ID > Class > Name > Tag。
CSS 选择器匹配的顺序，有不知道的吗？从左往右
jQuery的选择器匹配的顺序，有没有不知道的？Sizzle 选择器引擎从左往右，当然，既然人家优秀肯定有道理。如果支持更快querySelector会选择更快的方法。如果有id选择器，他会先进行id选择，缩小范围。感兴趣可以去看看Sizzle选择器引擎介绍，有能力读源码当然更好了。

举个栗子

1. 查询语句：
   $('div span')

2. 代码结构：

   div
    div
     div 
      span
     div
    span

3. 先查div的话，我们需要遍历多少次？两次可以吗？但是如果先查span，那我们parent去找直到找到头就完事了。
4. 再说另一个，子节点只有一个父节点。但是父节点会有很多子节点。

文档处理

append、appendTo 和 prepend、prependTo

操作的是父子节点，效果也等同于原生的api。已存在节点是移动，新节点是新增。

1. parent.append(child) 是将child添加到parent的最后面。链式操作对象为parent。对应原生appendChild
2. child.appendTo(parent) 是将child添加到parent的最后面。链式操作对象为child。
3. parent.prepend(child) 是将child添加到parent的最前面。链式操作对象为parent。
4. child.prependTo(parent) 是将child添加到parent的最前面。链式操作对象为child。

insertAfter、after 和 insertBefore、before

操作的是兄弟节点，效果同上。

1. A.after(B) 是在A后面增加B。链式操作对象为A
2. B.insertAfter(A) 是把B增加到A后面。链式操作对象为B
3. A.before(B) 是在A前面增加B。链式操作对象为A
4. B.insertBefore(A) 是把B增加到A前面。链式操作对象为B

wrap、unwrap、wrapall、wrapInner、replaceWith、replaceAll

说实话这几个我用都没用过。

1. $("a").wrap("<div class='wrap'></div>") 是指，将所有a标签，用后面的节点包起来。
2. $('li').unwrap()将他们的父节点移除。也就是说所有子节点占据了原来父级的位置。
3. $("a").wrapAll("<div class='wrap'></div>") 是指，将所有到标签都合并到第一个位置，并且包裹起来。
4. $("a").wrapInner("<b></b>")是指，讲a标签的内容，用b标签包裹起来。
5. $("a").replaceWith('<a href="//www.lilnong.top">lilnong.top</a>') 将所有的a标签，用新标签替换。那么链式操作对象是谁？
6. $('<a href="//www.lilnong.top">lilnong.top</a>').replaceAll("a") 用新标签替换，把所有的a标签替换。那么链式操作对象是谁？

empty、remove、detach

1. $("a").empty() 删除匹配的元素集合中所有的子节点。
2. $("a").remove() 从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
3. $("a").detach() 从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

clone([Event[,deepEven]])

克隆一个副本出来。我们知道，如果这个元素是文档内的，那么上面的方法会变成移动。当我们不想移动的时候，就需要clone。

1. event: 一个布尔值（true 或者 false）指示事件处理函数是否会被复制。V1.5以上版本默认值是：false
2. deepEven: 一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。

筛选

1. hasClass(class) 判断当前元素有没有对应class。比如我们在模拟复选框，我们需要判断当前的状态。$(this).hasClass('checked')
2. filter(class) 比如我们现有一个所有复选框的合集，我们要过滤出所有选中状态的。
3. next() 获取下一个元素
4. nextAll() 获取后面所有元素
5. nextUntil() 获取后面所有元素，可以设置终止条件。
6. parent()、prev() 基本有next()相识的方法
7. siblings() 获取所有兄弟元素
8. end() 我觉得这个方法就很厉害，把当前的链式操作对象移交给上次。
   $("p").find("span").end()目前操作对象是$("p")
9. 等等…… 我就列举这些常用的吧。

微信公众号：前端linong

初级阶段文章目录

1. 前端培训-初级阶段（17） - 数据存储（cookie、session、stroage）
2. 前端培训-初级阶段（13） - 正则表达式
3. 前端培训-初级阶段（13） - 类、模块、继承
4. 前端培训-初级阶段（13） - ECMAScript （内置对象、函数）
5. 前端培训-初级阶段（13） - ECMAScript （语法、变量、值、类型、运算符、语句）
6. 前端培训-初级阶段（13、18）
7. 前端培训-初级阶段（9 -12）
8. 前端培训-初级阶段（5 - 8）
9. 前端培训-初级阶段（1 - 4）

中级阶段文章目录

1. 前端培训-中级阶段（2） - 事件(event) 事件冒泡、捕获 - （2019-06-20期）
2. 前端培训-中级阶段（3） - DOM 文档对象模型（2019-06-27期）
3. 前端培训-中级阶段（4）- BOM 浏览器对象模型（2019-07-04期）
4. 前端培训-中级阶段（5）- jQuery的概念与基本使用（2019-07-11期）

资料

1. 前端培训目录、前端培训规划、前端培训计划
2. jQuery 速查地址