扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
empty() 方法从被选元素移除所有内容,包括所有文本和子节点。
创新互联建站:公司2013年成立为各行业开拓出企业自己的“网站建设”服务,为1000+公司企业提供了专业的成都网站建设、成都网站设计、网页设计和网站推广服务, 定制制作由设计师亲自精心设计,设计的效果完全按照客户的要求,并适当的提出合理的建议,拥有的视觉效果,策划师分析客户的同行竞争对手,根据客户的实际情况给出合理的网站构架,制作客户同行业具有领先地位的。
empty()和remove()标签的区别是,empty只移除指定标签的所有子标签或者说html,保留当前标签。remove是连这当前的标签全部移除。
empty()、html("")和text("")在删除匹配元素内内容时是一样的。jQuery源码中实现有所不同,但效果相同。你可以测试一下
源码:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/title
script src="../scripts/jquery-1.4.2.min.js" type="text/javascript"/script
script
$(function(){
$('#btnEmpty').click(function(){
$('#aim').empty();
alert("empty()");
});
$('#btnHtml').click(function(){
$('#aim').html("");
alert('html("")');
});
$('#btnText').click(function(){
$('#aim').text("");
alert('text("")');
});
});
/script
/head
body
div id="aim"
ul
li111111111/li
li222222222/li
li333333333/li
li444444444/li
/ul
/div
button id='btnEmpty'empty()/button
button id='btnHtml'html("")/button
button id='btnText'text("")/button
/body
/html
一、html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
返回值:jQuery
参数:val (String) : 用于设定HTML内容的值
示例:
HTML 代码:
div/div
jQuery 代码:
$("div").html("pHello Again/p");
结果:
[ divpHello Again/p/div ]
二、empty():删除匹配的元素集合中所有的子节点。
返回值:jQuery
示例:把所有段落的子元素(包括文本节点)删除
HTML 代码:
pHello, spanPerson/span a href="#"and person/a/p
jQuery 代码:
$("p").empty();
结果:
p/p
三、text(val):设置所有匹配元素的文本内容
与 html() 类似, 但将编码 HTML (将 "" 和 "" 替换成相应的HTML实体).
返回值:jQuery
参数:val (String) : 用于设置元素内容的文本
示例:
HTML 代码:
pTest Paragraph./p
jQuery 代码:
$("p").text("bSome/b new text.");
结果:
[ pbSome/b new text./p ]
1、删除元素和内容,可以通过jquery的remove()和empty()方法,remove()删除选择的元素和子元素,empty()只删除选中元素的子元素。
2、新建一个html页面,引入jquery.js,页面body里面添加一个div盒子,div盒子里面添加两段话,和一个删除div元素的按钮,js中调用$(“#div1”).remove()方法删除元素。
3、在浏览器中打开html页面之后,可以看到div盒子和两段话,点击移除div元素按钮。
4、点击移除div元素按钮之后,可以看到div元素和子元素p都被删除掉了。
5、将$(“#div1”).remove()方法注释掉,使用$(“#div1”).empty()方法,删除选择元素的子元素。
6、可以看到点击清空div元素按钮,将div元素的p子元素删除了。
!DOCTYPE html
html lang="en"
head
meta charset="utf-8" /
meta name="renderer" content="webkit"
meta http-equiv="X-UA-Compatible" content="IE=Edge"
titlejquery清空-恢复/title
meta name="keywords" content="" /
meta name="description" content="" /
script src='jquery-2.0.3.min.js'/script
/head
body
input type='text' id='username'/
button id='empty-btn'清空/button
button id='recover-btn'恢复/button
/body
script type="text/javascript"
$(function(){
var fun = {
obj : $('#username'),
val : '',
empty: function() {
var $self = this;
$self.val = $self.obj.val();
$self.obj.val('');
},
recover : function() {
var $self = this;
$self.obj.val($self.val);
}
}
$('#empty-btn').bind('click', function(){
fun.empty();
});
$('#recover-btn').bind('click', function(){
fun.recover();
});
});
/script
/html
你参考一下!
如需删除元素和内容,一般可使用以下两个 jQuery 方法:
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
本文实例讲述了jQuery使用empty()方法删除元素及其所有子元素的方法,分享给大家供大家参考,具体实现方法如下:
$.ajax({
url: "SearchSN.aspx",
data: "SN=" + $("#txtStorageSN").val(),
cache: false,
success: function (html) {
$("#showResult").empty();
$("#showResult").append(html);
$("#showResult").css("color", "red");
}
});
页面:div id="showResult"/div
$("#showResult").empty();//清除div内容(Div内容是通过aspx页面进行动态添加的,需要先清除div内容)
本文实例讲述了JQuery删除DOM节点的方法。分享给大家供大家参考。具体分析如下:
如果文档中某一个元素多余,那么应将其删除。JQuery提供了两种删除节点的方法,即remove()和empty()。
HTML
DOM结构如下:
p
class="nm_p"
title="欢迎访问脚本之家"
欢迎访问脚本之家/p
ul
class="nm_ul"
li
title='PHP编程'简单易懂的PHP编程/li
li
title='C编程'简单易懂的C编程/li
li
title='JavaScript编程'简单易懂的JavaScript编程/li
li
title='JQuery'简单易懂的JQuery编程/li
/ul
remove()方法
作用是从DOM中删除所有匹配的元素,传入的参数用于根据JQuery表达式来筛选元素。
例如删除ul节点中的第2个li元素节点,JQuery代码如下:
$(".nm_ul
li:eq(1)").remove();
//
获取第二个li元素节点后,将它从网页中删除
运行代码后效果将删掉第二个节点。
当某个节点用remove()方法删除后,该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。下面的JQuery代码说明元素用remove()方法删除后,还是可以继续使用的。
var
$li
=
$("nm_ul
li:eq(1)").remove();
//
获取第二个li元素节点后,将它从网页中删除。
$li.appendTo("nm_ul");
//
把刚才删除的又重新添加到ul元素里
//所以,删除只是从网页中删除,在jQuery对象中,这个元素还是存在的,我们可以重新获取它
可以直接使用appendTo()方法的特性来简化以上代码,JQuery代码如下:
$("nm_ul
li:eq(1)").appendTo("nm_ul");
//appendTo()方法也可以用来移动元素
//移动元素时首先从文档上删除此元素,然后将该元素插入得到文档中的指定节点
另外remove()方法也可以通过传递参数来选择性地删除元素,JQuery代码如下:
//
把li元素中属性title不等于"菠萝"的li元素删除
$("nm_ul
li").remove("li[title!=JQuery]");
empty()方法
严格来讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点。JQuery代码如下:
$("nm_ul
li:eq(1)").empty();
//
找到第二个li元素节点后,清空此元素里的内容
当运行代码后,第2个li元素的内容被清空了,只剩下li标签默认的符号“.”。
希望本文所述对大家的jQuery程序设计有所帮助。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流