JQuery-节点操作
时间:2019-10-18
本文章向大家介绍JQuery-节点操作,主要包括JQuery-节点操作使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
节点相关操作
添加节点
内部添加
// 在指定元素内部底部添加 $('.parent').append($son); $son.appednTo('.parent')); // 在指定元素内部顶添加 $('.parent').prepend($son); $son.prependTo('.parent'));
外部添加
// 在指定元素外部的前面添加元素 $('.parent').after($son); $son.insertAfter('.parent')); // 在指定元素外部的后面添加元素 $('.parent').before($son); $son..insertBefore('.parent'));
删除节点
// 删除指定节点
$('div').remove();
// 删除指定节点中含有 .active 类的节点
$('div').remove('.active');
// 删除指定节点的内容与子元素
$('div').empty();
// 删除指定节点
$('div').detach();
$('div').detach('.active');
remove与detach的区别:
remove不仅会清除指定节点,节点上绑定的事件、数据也会一并清除;
detach只会清除节点,绑定的事件以及数据不会被清除。
替换节点
<h1>h1</h1>
<h1>h1</h1>
let $h6 = $('<h6>h6</h6>');
$('h1').replaceWith($h6);
$h6.replaceAll('h1');
克隆节点
// 浅复制,只会复制内容,不会复制事件
let $newDiv = $('div').clone(false);
// 深复制,即会复制内容,也会复制事件
leT $newDiv = $('div').clone(true);
原文地址:https://www.cnblogs.com/luwenfeng/p/11700421.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JS中的事件循环机制与宏队列、微队列笔记
- Redis 哨兵机制以及底层原理深入解析,这次终于搞清楚了
- SQL 找出分组中具有极值的行
- 接入层Nginx架构及模块介绍分享
- 【问题修复】mds0: Metadata damage detected
- 【服务网格架构】Envoy架构概览(6):异常检测
- 分布式存储Cephfs读取优化方案
- SQL 确定序列里缺失值的范围
- 【问题修复】osd自杀问题跟踪
- mds元信息缓存不释放问题
- 线程安全问题,synchronized 和 ReentrantLock 详细讲解
- Ceph RBD灾备方案对比
- RBD快照灾备方案
- 从条件运算符说起,反思什么是好代码
- Ceph调试开发环境搭建