jQuery 的节点操作

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery 的节点操作相关的知识,希望对你有一定的参考价值。

先来对比对比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 主要还是知道有这么个东西 遇到了会用即可。

 

以上是关于jQuery 的节点操作的主要内容,如果未能解决你的问题,请参考以下文章

原生js和Jquery操作DOM

jQuery:节点操作

jquery中节点的操作以及一些其他方法的操作

jquery总结04-DOM节点操作

使用jQuery操作DOM

JQuery_DOM 节点操作之创建节点插入节点