jQuery Dom 操作 增、删、改、复制、包裹
来源:互联网 发布:停车场收费系统数据库 编辑:程序博客网 时间:2024/05/16 08:29
1. 增(插入)
内部插入
//向每个匹配的元素内部追加内容,为最后一个子元素$('.violet').append('<div></div>');//把所有匹配的元素追加到另一个指定的元素集合中$('<div></div>').appendTo('.violet');//将指定元素插入到匹配元素里面作为它的第一个子元素,选择器表达式写在方法的前面,作为待插入内容的容器,将要被插入的内容作为方法的参数$('.violet').prepend('<div></div>');//把所有匹配的元素前置到另一个指定的元素集合中,将要被插入的内容写在方法的前面,可以是选择器表达式或动态创建的标记,待插入内容的容器作为参数。$('<div></div>').prepend($('.violet'));
外部插入
//在匹配元素集合中的每个元素后面插入参数所指定的内容,作为兄弟节点,支持多参数处理$(".violet").after('<div></div>', '<div></div>');//据参数设定,在匹配元素的前面插入内容,也是作为兄弟节点,支持多参数处理$(".violet").before('<div></div>', '<div></div>');//和 before() 一样的功能,只是选择器写在内容对象的后面,不支持多参数处理$('<a></a>', '<p></p>').inserBefore($(".violet"));//和 after() 一样的功能,只是选择器写在内容对象的后面,不支持多参数处理$('<a></a>', '<p></p>').insertAfter($(".violet"));
2. 删(移除)
// 移除 .violet 里的所有内容,但会保留 .violet 这个元素节点$('.violet').empty();//删除 .violet 这个元素节点,包括里面的所有内容,绑定的事件及与该元素相关的 jQuery 数据,有参数时可以做筛选$('.violet').remove();// 删除保留数据,只是显示效果没有了,所有绑定事件、附加的数据等都会保留下来,此方法是 jQuery 特有的$('.violet').detach();
3. 改(替换)
//用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合$(".violet > div:first p:eq(1)").replaceWith('<a style="color:violet">violet-gem</a>');// replaceAll()和 replaceWith() 功能类似,但是目标和源相反$('<a style="color:violet">violet-gem</a>').replaceAll('.violet > div:last pLlast');
4. 复制(克隆)
//只复制结构,事件丢失$('.violet').clone();//结构、事件与数据都复制$('.violet').clone(true);
5. 包裹
//在集合中匹配的每个元素周围包裹一个 HTML 结构$('span').wrap('<div></div>'); //给 span 标签外面又加了一个 div 标签//作用与wrap方法是相反的。将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置$('span').unwrap('<div></div>');//给集合中匹配的元素增加一个外面包裹HTML结构$('.violet').wrapAll('<div></div>'); //给所有类名为 .violet 的元素添加 div 标签//wrapAll接受一个回调函数//每一次遍历this都指向了合集中每一个 a 元素$('a').wrapAll(function() { return '<div></div>'});//将合集中的元素内部所有的子元素用其他元素包裹起来,并当作指定元素的子元素$('.violet').wrapInner('<p></p>'); //给所有 .violet 加一个内部包裹的父容器 p//wrapInner接受一个回调函数//每一次遍历this都指向了合集中每一个class=left1的div元素$('.left1').wrapInner(function() { return '<a></a>'});
阅读全文
0 0
- jQuery Dom 操作 增、删、改、复制、包裹
- jQuery总结:三、DOM操作(增/删/改/查)
- Jquery中的DOM操作 (五.包裹节点和属性操作)
- DOM操作-包裹节点
- 3.2.7: jQuery的DOM操作之包裹节点
- jQuery对DOM增、删、查、改
- 54 JQUERY与DOM 添加 复制 移除 替换 包裹 遍历子元素
- JQUERY与DOM 添加 复制 移除 替换 包裹 遍历子元素
- jQuery DOM 操作(基本操作、内部插入、外部插入、包裹操作)
- jQuery DOM 操作(基本操作、内部插入、外部插入、包裹操作)
- jQuery DOM 操作(基本操作、内部插入、外部插入、包裹操作)
- jQuery DOM 操作(基本操作、内部插入、外部插入、包裹操作)
- jQuery DOM 操作(基本操作、内部插入、外部插入、包裹操作)
- jquery随记(DOM操作)-----复制元素
- 【jQuery学习笔记---------DOM操作复制元素】
- jQuery文档处理(二)--复制,替换,包裹
- jQuery-创建、删除、复制、替换、包裹节点
- #笔记#圣思园 JavaWeb 第72讲——jQuery和DOM,查找、插入、删除、复制、替换、包裹节点
- 基于VC6.0的MFC 的 unresolved external symbol "protected: void __thiscall CDibDlg::OnSetLocation
- POJ 2809 It's My Derivative 笔记
- 决策树ID3的Python实现
- java内存结构
- Android自定义view之仿微信录制视频按钮
- jQuery Dom 操作 增、删、改、复制、包裹
- 【转载】安装maven3.5时出现Exception in thread "main" java.lang.UnsupportedClassVersionError
- HDU 3465 Life is a Line (逆序数 + 数状数组)
- Charles学习笔记(2)——报错
- openCV 图像深度和通道介绍
- ZOJ 3305 Get Sauce
- python-3-print重定向输出的几种方法
- python之列表
- oracle 事物概述