jquery操作DOM 元素(3)
.detach()
从DOM 中去掉所匹配的元素。
.detach([selector])
selector 一个选择表达式将需要移除的从匹配的元素中过滤出来。
$("p").detach();
.empty()
从DOM中移除集合中匹配元素的所有子节点。
.empty() 这个方法不接受任何参数。
结构:
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
$('.hello').empty();
效果:
<div class="container">
<div class="hello"></div>
<div class="goodbye">Goodbye</div>
</div>
.remove()
将匹配元素从DOM 中删除,同时删除元素上的事件。
.remove([selector])
selector 一个选择器表达式用来过滤将被移除的匹配元素集合。
结构:
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
$('.hello').remove();
效果:
<div class="container">
<div class="goodbye">Goodbye</div>
</div>
.unwrap()
将匹配元素集合的父级元素删除,保留自身,(和兄弟元素,如果存在)再原来的位置。
.unwrap()
这个方法不接受任何参数。
结构:
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
$('.hello').empty();
效果:
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
.replaceAll()
用集合的匹配元素替换每个目标元素。
.replaceAll(target)
target 一个选择器字符串,对象,DOM元素,或者元素数组,包含哪个元素被替换。
结构:<div class="container">
<div class="inner first">Hello</div>
<div class="inner second">And</div>
<div class="inner third">Goodbye</div>
</div>
$('<h2>New heading</h2>').replaceAll('.inner');
效果:
<div class="container">
<h2>New heading</h2>
<h2>New heading</h2>
<h2>New heading</h2>
</div>
.replaceWith()
用提供的内容替换集合中所匹配的元素并返回删除元素的集合。
.replaceWith(newContent)
newContent 用来插入的内容,可能是HTML字符串,DOM元素,或者对象。
.replaceWith(function)
function 一个函数,返回的内容会替换匹配的元素集合。
结构:<div class="container">
<div class="inner first">Hello</div>
<div class="inner second">And</div>
<div class="inner third">Goodbye</div>
</div>
$('div.second').replaceWith('<h2>New heading</h2>');
效果:<div class="container">
<div class="inner first">Hello</div>
<h2>New heading</h2>
<div class="inner third">Goodbye</div>
</div>
$('div.third').replaceWith($('.first'));
效果:<div class="container">
<div class="inner second">And</div>
<div class="inner first">Hello</div>
</div>
jquery操作DOM 元素(3)的更多相关文章
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- JS/JQuery操作DOM元素笔记
原因 自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下. 页面大概是酱紫的(我使用的AdminLTE和LayU ...
- jquery 操作DOM元素(1)
.clone() 创建一个匹配的元素集合的深度拷贝. .clone([withDataAndEvents]) withDataAndEvents (默认为false) 一个Boolean 表示是否会复 ...
- jQuery操作DOM元素
作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...
- jquery操作DOM 元素(2)
.after() 在匹配的元素集合中的每个元素后面插入参数指定的内容,作为其兄弟节点. .after(content[,content]) content HTML字符串 DOM 元素 元素数组 对象 ...
- 三、jQuery--jQuery基础--jQuery基础课程--第5章 jQuery 操作DOM元素
1.使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 例如,使 ...
- Jquery 操作DOM元素
一.文本输入框: text <input type=”text” value=”99.com” size=12 id=”input1” /> 1.获取文本值: $("#input ...
- Hybrid App开发之jQuery操作DOM
前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...
- JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分)
JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...
随机推荐
- 但是你没有【But you didn't.】【by Anonymous】
作者是一位普通的美国妇女,她的丈夫在女儿4岁时应征入伍去了越南战场,从此她便和女儿相依为命.后来,她的丈夫.孩子的爸爸不幸阵亡.她终身守寡,直至年老病逝.她女儿在整理遗物时发现了母亲当年写给父亲的这首 ...
- java学习第十五天
1:对象数组(掌握) (1)数组既可以存储基本数据类型,也可以存储引用类型.它存储引用类型的时候的数组就叫对象数组. (2)案例: 用数组存储5个学生对象,并遍历数组. 2:集合(Collection ...
- 使用Aspose.Cell控件实现Excel高难度报表的生成
1.使用Aspose.Cell控件实现Excel高难度报表的生成(一) http://www.cnblogs.com/wuhuacong/archive/2011/02/23/1962147.html ...
- supermarket SSM
1.数据库 2.整体空架构(jar包) 3.工程依赖 24节点 build节点 <properties> </project.build.sourceEncoding> < ...
- 如何解读IL代码
如何解读IL代码 关于IL代码,我有将从三个方面去揭开它神秘的面纱.IL代码是什么?我们为什么要去读懂IL代码?我们如何去读懂IL代码?这三个问题的解答,将是我解读IL代码的整体思路. IL代码是什么 ...
- poj 1155 输入输出问题
http://acm.hust.edu.cn/vjudge/problem/16417 重做了一遍poj 1155 题目大意:给定一棵树,1为根结点表示电视台,有m个叶子节点表示客户,有n-m-1个中 ...
- ACM-单调队列用于DP优化
http://www.cnblogs.com/ka200812/archive/2012/07/11/2585950.html 待续
- intellijidea课程 intellijidea神器使用技巧2-2 精准搜索
高效定位: 1 类: 类的跳转: Ctrl shift n ==> 查询类名 Ctrl shift n n ==> jar包中的类 2 文件: Ctrl shift shift n ==& ...
- HTML图片映射实用
大图的不同点击区域实现不同的超链接: <img src="planets.gif" width="145" height="126" ...
- Struts2_总结
还未学习的内容,如果到时候要用到,再去学.1.Lamda 表达式(很复杂,很少用)2.验证框架(默认验证方法 validation.方法开始前验证.开始后验证)3.UI标签(用的不多)4.类型转换中的 ...