jQuery 的节点操作

Posted 2021-05-23

先来对比对比JS 和 JQ 的节点操作：

+ 原生 JS 的节点操作
=> 创建节点, 插入节点, 删除节点, 替换节点, 克隆节点
+ jQuery 的节点操作
=> 创建节点, 插入节点, 删除节点, 替换节点, 克隆节点

！这里用$选择的元素 都有隐式迭代 都会执行插入、替换、删除的啊... 如果不想这样 那你就精准定位啊！

1. 创建节点
　语法：  $(html结构字符串)
=> 当 $() 里面传递一个选择器的时候, 就是获取元素
=> 当 $() 里面传递一个 html 结构字符串的时候, 就是创建元素节点
=> 当 $() 里面传递一个 DOM 元素节点的时候, 就是转换成 jQuery 元素结合　　(DOM 元素由JS的语法获取 )

 

---

 

 

2. 插入节点
内部插入(父子关系的插入)

2-1. append()
=> 语法: 父元素.append(子元素)
=> 把子元素插入到父元素内部, 放在末尾的位置
2-2. appendTo()
=> 语法: 子元素.appendTo(父元素)
=> 把子元素插入到父元素内部, 放在末尾的位置

 

2.1和2.2用法一样 但语法不一样而已 因为是链式编程 所以呢 会大大提高我们编程的灵活性

 

2-3. prepend()
=> 语法: 父元素.prepend(子元素)
=> 把子元素插入到父元素, 放在最前面的位置
2-4. prependTo()
=> 语法: 子元素.prependTo(父元素)
=> 把子元素插入到父元素, 放在最前面的位置

 

2.3和2.4用法一样 但语法不一样而已 因为是链式编程 所以呢 会大大提高我们编程的灵活性

 外部插入(兄弟关系的插入)
2-5. after()
=> 语法:  存在元素.after(插入元素)
=> 把插入元素排在存在元素的后面, 以兄弟关系出现
2-6. insertAfter()
=> 语法: 插入元素.insertAfter(存在元素)
=> 把插入元素排在存在元素的后面, 以兄弟关系出现

 

2.5 和 2.6 的用法也一样 但是语法不一样-----

2-7. before()
=> 语法: 存在元素.before(插入元素)
=> 把插入元素排在存在元素的前面, 以兄弟关系出现
2-8. insertBefore()
=> 语法: 插入元素.insertBefore(存在元素)
=> 把插入元素排在存在元素的前面, 以兄弟关系出现

 

2.5 和 2.6 的用法也一样 但是语法不一样-----

 

插入节点没什么 主要注意一点 如果有一个节点 p 你吧它插入到xx前面  又把它插入到xxx 后面的时候   它会以最后一个为准 ，因为他这些插入移动是按照 地址来的 好比和复制不是一个意思 而是移动.

---

 

3. 删除节点
3-1. remove()
=> 语法: 元素集合.remove()
=> 把自己从自己的父元素里面移出
3-2. empty()
=> 语法: 元素集合.empty()
=> 把自己变成空标签, 把所有后代节点全部移除（就是把全部东西移走 删除）

 

---

 

 

4. 替换节点
4-1. replaceWith()
=> 语法: 换下节点.replaceWith(换上节点)

换句话讲： 旧节点.replaceWith(新节点)

-----------------------------------------------------------------------
4-2. replaceAll()
=> 语法: 换上节点.replaceAll(换下节点)

换句话讲： 新节点.replaceAll(旧节点)

这玩意也是一样啊  功能是一样的 娘嫩 语法不一样

 

---

5. 克隆节点
5-1. clone()
=> 语法: 元素集合.clone()　　//两个参数
=> 必然携带所有节点过来
=> 第一个参数默认是 false, 表示是否克隆元素本身的事件, 选填 true
=> 第二个参数默认是 跟随第一个, 表示是否克隆元素后代节点的事件, 选填
=> 注意: 当第一个参数是 false 的时候, 第二个参数没有意义　　（反正没意义就是没意义 ， 因为第二参数默认跟随第一参数  但 参1为假 参二无论如何都为假啊！）

 

 

好了就做那么多 主要还是 emmm 主要还是知道有这么个东西 遇到了会用即可。