有关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 相关文章推荐
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
快速解决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
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
js禁止表单重复提交
2017/08/29 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
python3读取csv和xlsx文件的实例
2018/06/22 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
Django model class Meta原理解析
2020/11/14 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
西部世纪面试题
2014/12/05 面试题
小爸爸观后感
2015/06/15 职场文书
儿子满月酒致辞
2015/07/29 职场文书
污染环境建议书
2015/09/14 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript