[ jquery 文档处理 empty() remove([expr]) detach([expr]) ] 此方法用于把所有匹配的元素移除

此方法用于把所有匹配的元素移除:

remove([expr])

概述

从DOM中删除所有匹配的元素

这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除

empty()

概述

删除匹配的元素集合中所有的子节点

detach([expr])

概述

从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来

实例:

<html lang=‘zh-cn‘>
<head>
<title>Insert you title</title>
<meta http-equiv=‘description‘ content=‘this is my page‘>
<meta http-equiv=‘keywords‘ content=‘keyword1,keyword2,keyword3‘>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type=‘text/javascript‘ src=‘./js/jquery-1.12.1.min.js‘></script>
<style type="text/css">
    *{margin:0;padding:0;}
    html{font:400 15px/1.2em ‘Courier New‘;color:#666;width:750px;margin:25px auto;}
    ul{list-style:none;}
    .hover{color:#FF96EC;}
    .wrapAll{color:#FF96EC;}
</style>
<script type=‘text/javascript‘>
    $(function(){
      $(‘.wrap‘).empty();   //删除子节点(包含文本节点),但是保留元素节点本身
      $(‘li‘).remove(‘.active‘); // 从DOM中删除节点,但是不会从jquery对象中将节点删除,但是节点本身的绑定事件,附加的数据呀都会被删除,也就是说只是保留了节点本身
      $(‘li‘).detach(‘.detach‘); // 从DOM中删除所有匹配的元素,这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素,与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来
    });
</script>
</head>
<body>
    <div id=‘demo‘>
        <div class=‘noClassDemo‘>
            <ul class=‘list‘>
                <li>Index value :</li>
                <li>Index value :</li>
                <li>Index value :</li>
                <li>Index value :</li>
                <li>Index value :</li>
                <li class=‘detach‘>Index value :</li>
                <li class=‘active‘>Index</li>
                <li class=‘wrap‘>Index value :</li>
                <li>Index value :</li>
            </ul>
            <div>
                <p class=‘list‘>this is unwrap test</p>
            </div>
        </div>
        <p class=‘list‘>this is unwrap test</p>
    </div>
</body>
</html>
时间: 2024-12-20 12:48:11

[ jquery 文档处理 empty() remove([expr]) detach([expr]) ] 此方法用于把所有匹配的元素移除的相关文章

[ jquery 文档处理 replaceWith(content|fn) replaceAll(content) ] 此方法用于把所有匹配的元素替换成指定的HTML或DOM元素

此方法用于把所有匹配的元素替换成指定的HTML或DOM元素 content(String, Element, jQuery, Function) 用于将匹配元素替换掉的内容.如果这里传递一个函数进来的话,函数返回值必须是HTML字符串. fn 返回THML字符串,用来替换的内容. 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='descri

[ jquery 文档处理 insertAfter(content) after(content|fn) ] 此方法用于把所有匹配的元素插入到另一个、指定的元素元素集合的后面,实现外部插入

after(content | fn):在每个匹配的元素之后插入内容 insertAfter(content): 把所有匹配的元素插入到另一个.指定的元素元素集合的后面 实际上,使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插入到A后面,而是把A插入到B后面 在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,要选择先前选中的元素,需要使用en

[ jquery 文档处理 insertBefore(content) before(content|fn) ] 此方法用于把所有匹配的元素插入到另一个、指定的元素元素集合的前面,实现外部插入

在每个匹配的元素之前插入内容,用法类似于after() 和insertAfter(): 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' content='keyword1,keyword2,ke

[ jquery 文档处理 append(content|fn) ] 此方法用于向每个匹配的元素内部追加内容,这个操作与javascript对指定的元素执行appendChild方法,将它们添加到文档中的情况类似

此方法用于向每个匹配的元素内部追加内容,这个操作与javascript对指定的元素执行appendChild方法,将它们添加到文档中的情况类似 参数解释如下: content 要追加到目标中的内容 function(index, html) 返回一个HTML字符串,用于追加到每一个匹配元素的里边.接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的html值. 实例: <html lang='zh-cn'> <head> <title>I

jQuery文档操作--empty()和remove()

empty() 概述 删除匹配的元素集合中所有的子节点 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <scrip

[ jquery 文档处理 wrapAll(html|ele)) ] 此方法用于把所有匹配的元素使用指定的 HTML 元素来包裹

将所有匹配的元素用单个元素包裹起来 这于 '.wrap()'<a href="http://docs.jquery.com/Manipulation/wrap" title="Manipulation/wrap"></a> 是不同的,'.wrap()'为每一个匹配的元素都包裹一次.这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质.这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素--这个

[ jquery 文档处理 prependTo(content) ] 此方法用于把所有匹配的元素前置到另一个、指定的元素元素集合中

把所有匹配的元素前置到另一个.指定的元素元素集合中 实际上,使用这个方法是颠倒了常规的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中 在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,要选择先前选中的元素,需要使用end()方法,参见 appendTo 方法的例二 实例: <html lang='zh-cn'> <head&g

[ jquery 文档处理 appendTo(content) ] 此方法用于把所有匹配的元素追加到另一个指定的元素集合中

把所有匹配的元素追加到另一个指定的元素元素集合中. 实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中. 在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,返回值是所有被追加的内容,而不仅仅是先前所选中的元素.所以,要选择先前选中的元素,需要使用end()方法,参见例二. 实例: <html lang='z

[ jquery 文档处理 wrapInner(htm|element|fnl) ] 此方法用于把所有匹配的元素的子元素(包括文本节点)使用指定的 HTML 元素来包裹

此方法用于把所有匹配的元素的子元素(包括文本节点)使用指定的 HTML 元素来包裹 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来 这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素 html HTML标记代码字符串,用于动态生成元素并包装目标元素 element 用于包装目标元素的DOM元素 fn 生成包裹结构的一个函数 实例: <html lang='zh-cn'> &l