有关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中字符串拼接需注意的问题
Jul 13 Javascript
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 Javascript
如何在selenium中使用js实现定位
Aug 18 Javascript
nginx部署多个vue项目的方法示例
Sep 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
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php实现文件下载代码分享
2014/08/19 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
python动态性强类型用法实例
2015/05/09 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
关于Django Models CharField 参数说明
2020/03/31 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
个性大学生自我评价
2013/12/04 职场文书
学生出入校管理制度
2014/01/16 职场文书
离职保密承诺书
2014/05/28 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
一条慢SQL语句引发的改造之路
2022/03/16 MySQL