前端培训中级阶段6-jQuery元素节点操作20190718期

前端最基础的就是 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 速查地址