有关jquery与DOM节点操作方法和属性记录


Posted in Javascript onApril 15, 2016

网上找了份jquery的操作节点方法清单。如下:

方法 源包装集/字串 目标包装集体 特性描述
A.append(B)       B       A 若目标包装集只匹配一个元素,则源(也包括同源包装集匹配的所有元素)将被移动到目标位置;若目标包装集包含多个元素,则源将保留在原来的位置,但同时复制一份相同的副本到目标位置。 由此,若目标只匹配一个元素时,使用前述方法后源将被删除。
B.appendTo(A)
A.prepend(B)
B.prependTo(A)
A.before(B)
B.insertBefore(A)
A.after(B)
B.insertAfter(A)

举例说明:在以上表格中,A.append(B)表示把B添加到与A匹配的所有元素的现有内容后面,因此B是源,A是目标包装集。

总结一句话就是:使用以上方法后,两个节点变为同级兄弟节点

以下是DOM操作节点的方法汇总:

(1)appendChild方法,用于向childNodes列表的末尾添加一个节点

//将newNode添加到someNode的childNodes列表的末尾

var returnedNode = someNode.appendChild(newNode);

//将someNode的第一个子节点变为最后一个子节点

var returnedNode = someNode.appendChild(someNode.firstChild);

(2)insertBefore方法,可以把节点放在childNodes列表中某个特定的位置上

//插入后成为最后一个子节点

returnedNode = someNode.insertBefore(newNode, null);//和appendChild效果相同

//插入后成为第一个子节点

returnedNode = someNode.insertBefor(newNode, someNode.firstChild);

(3)replaceChild方法用于替换子节点,接受两个参数:要插入的子节点和要替换的子节点。要替换的子节点将从文档树中被移除,同时由要插入的子节点占据其位置

//替换第一个子节点

returnedNode = someNode.replaceChild(newNode, someNode.firstChild);

(4)removeChild方法用于移除子节点

//移除第一个子节点

var formerFirstChild = someNode.removeChild(someNode.firstChild);

总结一句话就是:以上方法都是父节点操作子节点的

下图给出了父子、兄弟节点的查找关系

 有关jquery与DOM节点操作方法和属性记录

以上这篇有关jquery与DOM节点操作方法和属性记录就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 #Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 #Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 #Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 #Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 #Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 #Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 #Javascript
You might like
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
python删除特定文件的方法
2015/07/30 Python
Python利用IPython提高开发效率
2016/08/10 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
详解python解压压缩包的五种方法
2019/07/05 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
python中reload重载实例用法
2020/12/15 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
计算机专业个人求职自荐信
2013/09/21 职场文书
中秋节超市促销方案
2014/01/30 职场文书
工作决心书范文
2014/03/11 职场文书
防卫过当辩护词
2015/05/21 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
看雷锋电影观后感
2015/06/10 职场文书
工资证明范本
2015/06/12 职场文书
欢迎新生标语2015
2015/07/16 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书