专栏首页柠檬先生jquery操作DOM 元素(3)

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery操作DOM 元素(2)

    .after()   在匹配的元素集合中的每个元素后面插入参数指定的内容,作为其兄弟节点。   .after(content[,conten...

    用户1197315
  • NEC html规范

    HTML规范 - 整体结构 HTML基础设施 文件应以“<!DOCTYPE ......>”首行顶格开始,推荐使用“<!DOCTYPE html>”。 必须申明...

    用户1197315
  • jquery 操作DOM元素(1)

    .clone()   创建一个匹配的元素集合的深度拷贝。   .clone([withDataAndEvents])     ...

    用户1197315
  • jquery操作DOM 元素(2)

    .after()   在匹配的元素集合中的每个元素后面插入参数指定的内容,作为其兄弟节点。   .after(content[,conten...

    用户1197315
  • jquery选择器

    jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

    Devops海洋的渔夫
  • flex 布局

    CSS3 为我们提供了一种可伸缩的灵活的 web 页面布局方式 flexbox 布局,它具有很强大的功能,可以很轻松实现很多复杂布局。可以简便、完整、响应式地实...

    Krry
  • selenium-java web自动化测试工具

    本篇文章由来,这两天整理了下自己经常使用而且很熟练的项目,今天突然想起漏了一个,补上了,但想到还没对应的博客,那就写一个简单的

    肖哥哥
  • vue弹出层 +内容手风琴 简单实现

    yangdongnan
  • 用CSS画小猪佩奇

    腾讯NEXT学位
  • HTML5选择器

    czjwarrior

扫码关注云+社区

领取腾讯云代金券