有关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 break指定标签打破多层循环示例
Jan 20 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
详解关于微信setData回调函数中的坑
Feb 18 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 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
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
jsonp原理及使用
2013/10/28 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
python开发简易版在线音乐播放器
2017/03/03 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
Python logging模块用法示例
2018/08/28 Python
python读取各种文件数据方法解析
2018/12/29 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
EJB的激活机制
2013/10/25 面试题
庆中秋节主题活动方案
2014/02/03 职场文书
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
教师个人成长总结
2015/02/11 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL