Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >jquery 操作DOM元素(1)

jquery 操作DOM元素(1)

作者头像
用户1197315
发布于 2018-01-19 08:10:37
发布于 2018-01-19 08:10:37
1.4K0
举报
文章被收录于专栏:柠檬先生柠檬先生

.clone()   创建一个匹配的元素集合的深度拷贝。   .clone([withDataAndEvents])     withDataAndEvents (默认为false)       一个Boolean 表示是否会复制元素上的时间处理函数。   .clone([withDataAndEvents][,deepwithDataAndEvents])     withDataAndEvents (默认为false)       一个Boolean 表示是否会复制元素上的时间处理函数。     deepwithDataAndEvents       一个布尔值,指示是否对时间处理程序和克隆的元素的所有子元素的数据应该被复制。默认情况下它的值相匹配的第一个参数的值。

代码语言:js
AI代码解释
复制
    		      $(".hello").clone().appendTo(".goodbye")

 效果 :

代码语言:js
AI代码解释
复制
                     <div class="hello">Hello</div>
				  	      <div class="goodbye">
				    		        Goodbye
				    	        <div class="hello">Hello</div>
				        </div>

.wrap()   在集合中匹配的每个元素周围包裹一个HTML 结构。   .wrap([wrappingElement])     wrappingElement 一个选择器,元素,html字符 jq 对象指定的html结构环绕包裹的匹配元素。   .wrap(function)     function 一个回调函数,返回用于包裹匹配元素的HTML内容或对象。

代码语言:js
AI代码解释
复制

   		    <div class="container">
			        <div class="inner">Hello</div>
			        <div class="inner">Goodbye</div>
		    </div>
			    $('.inner').wrap('<div class="new" />');
		
		    结果:
		    <div class="container">
			        <div class="new">
			            <div class="inner">Hello</div>
			        </div>
			        <div class="new">
			            <div class="inner">Goodbye</div>
			        </div>
		    </div>
		    $('inner').wrap(function(){ 
			      return '<div class="'+$(this).text()+'"/>'
		    })
		    <div class="container">
			        <div class="Hello">
			            <div class="inner">Hello</div>
			        </div>
			        <div class="Goodbye">
			            <div class="inner">Goodbye</div>
			        </div>
		    </div>

.wrapAll()   在集合中所有的匹配元素的外褒一个HTML结构。   .wrapAll(wrappingElement)     wrappingElement       一个选择器,元素,html字符。

代码语言:js
AI代码解释
复制

			    <div class="container">
			          <div class="inner">Hello</div>
			          <div class="inner">Goodbye</div>
			    </div>
			    $('.inner').wrapAll('<div class="new" />');
			      <div class="container">
			          <div class="new">
			              <div class="inner">Hello</div>
			              <div class="inner">Goodbye</div>
			          </div>
			      </div>

    .wrapAll(function)       function         一个回调函数。index 表示匹配元素在集合中的索引的位置。this 指向集合中的当前位置。

      $("p").wrapAll($(".doublediv"));         在所有的"p"元素

.wraplnner()     在匹配元素里的内容外包一层结构。     .wraplnner(wrappingElement)       wrappingElement 用来包在匹配元素的内容外面的HTML片段选择表达式,jquery对象 DOM 元素。

代码语言:js
AI代码解释
复制

				    <div class="container">
				          <div class="inner">Hello</div>
				          <div class="inner">Goodbye</div>
				    </div>
				    $('.inner').wrapInner('<div class="new" />');
				      <div class="container">
					          <div class="inner">
					    	          <div class="new">Hello</div>
					          </div>
					         <div class="inner">
					    	          <div class="new">Goodbye</div>
					          </div>
				      </div>

  .wraplnner(function(index))     function(index)       function 一个返回HTML结构的函数,用来包裹在匹配元素的外面 this 指匹配中的元素。

   $("P").wrapInner(document.createElement("b"));

.append()   在每个匹配元素里面的末尾处插入参数内容。     .append(content[,content])       content DOM 元素 DOM 数组,HTML字符串 jquery 对象。       content 一个或多个DOM 元素,元素数组,HTML字符串。

代码语言:js
AI代码解释
复制

		    <h2>Greetings</h2>
		    <div class="container">
			        <div class="inner">Hello</div>
			        <div class="inner">Goodbye</div>
		    </div>
			     $('.inner').append('<p>Test</p>');
		    效果:
			      <h2>Greetings</h2>
			      <div class="container">
				          <div class="inner">
				    	          Hello
				              <p>Test</p>
				          </div>
				          <div class="inner">
				    	          Goodbye
				            <p>Test</p>
				          </div>
			      </div>

    .append(function(index,html))         function(index,html)             返回一个html 字符串,DOM 元素,对象函数。this 指向元素集合中的当前元素。

        <p>I would like to say: </p>

        $('p').append(document.createTextNode("Hello"))

        效果:           <p>I would like to say: Hello</p>

.appendTo()    将匹配的元素插入到目标元素的最后面    .appendTo(target)     target 一个选择符 ,元素,HTML 字符串,DOM 元素数组。

代码语言:js
AI代码解释
复制

		    <div class="container">
			        <div class="inner">Hello</div>
			        <div class="inner">Goodbye</div>
		    </div>
		    $('<p>Test</p>').appendTo('.inner');
		    <div class="container">
			        <div class="inner">
			            Hello
			            <p>Test</p>
			        </div>
			        <div class="inner">
			            Goodbye
			            <p>Test</p>
			        </div>
		    </div>

.html()   获取集合中第一个匹配元素的HTML 内容或设置每一个HTML内容。   .html()     这个方法不接收任何元素。

代码语言:js
AI代码解释
复制

		    <div class="demo-container">
		  	      <div class="demo-box">Demonstration Box</div>
		     </div>
		     $('div.demo-container').html();

    获得到的结果

代码语言:js
AI代码解释
复制

		 	    <div class="demo-box">Demonstration Box</div>

  .html(htmlString)     htmlString 用来设置每一个匹配元素的HTML代码   .html(function(index oldHTML))     用来返回设置HTML内容的一个函数

代码语言:js
AI代码解释
复制

		    <div class="demo-container">
		  	      <div class="demo-box">Demonstration Box</div>
		    </div>
		    $('div.demo-container').html('<p>All new content. <em>You bet!</em></p>');

    效果如下:

代码语言:js
AI代码解释
复制

		    <div class="demo-container">
		  	        <p>All new content. <em>You bet!</em></p>
		    </div>

.prepend()     将参数内容插入到每个匹配元素的前面。(元素内容)       .prepend(content[,content])       DOM 元素,元素数组,HTML 字符串 对象。

代码语言:js
AI代码解释
复制

		      <div class="container">
		  	        <div class="inner">Hello</div>
		  	        <div class="inner">Goodbye</div>
		      </div>
		      $('.inner').prepend('<p>Test</p>');

      效果:

代码语言:js
AI代码解释
复制

		        <div class="container">
		            <div class="inner">
			              <p>Test</p>
			              Hello
			          </div>
			            <div class="inner">
			              <p>Test</p>
			              Goodbye
			            </div>
		        </div>

      .prepend(function(index.html))         一个返回HTML字符串,DOM元素,jQuery对象的函数,该字符串用来插入到匹配元素的开始处         $("p").prepend(document.createTextNode("Hello "));

.prependTo()   将所有的元素插入到目标元素前面(元素内)。   .prependTo(target)     target 一个选择器, DOM元素,元素数组,HTML字符串,或者jQuery对象,将被插入到匹配元素前的内容。

代码语言:js
AI代码解释
复制

		    <div class="container">
		  	      <div class="inner">Hello</div>
		  	      <div class="inner">Goodbye</div>
		    </div>
		    $('<p>Test</p>').prependTo('.inner');

    效果:

代码语言:js
AI代码解释
复制

			    <div class="container">
				        <div class="inner">
				          <p>Test</p>
				            Hello
				        </div>
				        <div class="inner">
				            <p>Test</p>
				            Goodbye
				        </div>
			  </div>

.text()   得到匹配元素集合中每个元素的合并文本。包括他们的后代。   .text() 这个方法不接受任何参数。

代码语言:js
AI代码解释
复制

		  <div class="demo-container">
	      		    <div class="demo-box">Demonstration Box</div>
			      <ul>
			        <li>list item 1</li>
			        <li>list <strong>item</strong> 2</li>
			      </ul>
	  	  </div>
	  	  $('div.demo-container').text()
	
	  	  效果如下:
	  		    Demonstration Box list item 1 list item 2
	    .text(textString)
	  	    设置匹配元素集合中每个元素的文本内容
	  	  .text(text)
	  		    用于设置匹配元素内容的文本。
	  	  .text( function(index, text) )
	  		    用来返回设置文本内容的一个函数。
	  		  $('div.demo-container').text('<p>This is a test.</p>');
	  	  .text() 方法不能使用在 input 元素上。 输入的文本需要使用 .val() 方法。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015-11-02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
jQuery DOM操作
在目标对象前插入同级兄弟元素(不是头部,而是外面,和对象并列同级),参数和append类似
bamboo
2019/01/29
9960
jQuery DOM操作
04-老马jQuery教程-DOM节点操作及位置和大小
1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签。创建标签后,动态的给他添加属性。例如代码: // 动
老马
2018/01/05
2.2K0
04-老马jQuery教程-DOM节点操作及位置和大小
根据给定的文章内容,撰写摘要总结。
老马
2017/12/27
6.1K0
04-老马jQuery教程-DOM节点操作及位置和大小
JQuery干货篇之操控DOM
通常在把新元素插入到DOM中的目标位置之前,要先创建一个新元素才能将它插入到指定位置
爱撒谎的男孩
2019/12/30
9860
看Zepto如何实现增删改查DOM
本文对Zepto模块进行了分析,分别从整体架构、核心模块、使用方法和高级特性等方面进行了介绍。主要包括Zepto概述、核心模块、使用方法和高级特性等。
IMWeb前端团队
2018/01/08
2.5K0
看Zepto如何实现增删改查DOM
jQuery DOM操作
对节点的操作 查找节点 查找节点可以直接利用jQuery选择器来完成,非常便利。 插入节点 jQuery提供了8种插入节点的方法。 序号 方法 描述 实例 1 append() 向每个匹配的元素内部
静默虚空
2018/01/05
2K0
[jQuery学习系列一]1-选择器与DOM对象
前言: 好久没有更新博客了, 最近想复习下 之前学过的JS的相关内容, 也算是自己的一种总结. 知识长时间不用就会忘记, 多学多记多用!! 下面的程序都可以在下面的网站进行在线调试:  http://
一枝花算不算浪漫
2018/05/18
2.9K0
jQuery入门前言
上次说到了JavaScript,对其有一定了解,本文就来说说jQuery。jQuery就是一个由JavaScript编写的轻量库,简单的说就是封装了一些JavaScript的操作,所以使用jQuery比使用原生的JavaScript可以达到用更少的代码做更多的事的效果。
贪挽懒月
2018/10/09
2.8K0
jQuery入门前言
Web前端JQuery面试题(二)
DOM对象,DOM为文本对象模型,DOM的每一个页面都是一个DOM对象。通过JavaScript方法获取页面元素的对象,就是DOM对象。
达达前端
2019/07/03
1.9K0
Jquery基础之DOM操作
Dom是Document Object Model的缩写,意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件。DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。
用户9184480
2024/12/19
1120
Jquery基础之DOM操作
读Zepto源码之操作DOM
对角另一面
2017/12/27
9260
jQuery中的DOM操作
该文介绍了DOM操作的分类,包括查找节点、创建节点、插入节点、删除节点、替换节点、包裹节点、复制节点、替换节点和节点互换。使用DOM操作可以更加方便地操作HTML和CSS,实现各种动态效果和交互功能。
IMWeb前端团队
2017/12/29
1.4K0
jquery操作DOM 元素(2)
.after()   在匹配的元素集合中的每个元素后面插入参数指定的内容,作为其兄弟节点。   .after(content[,content])     content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。     content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。   .after(function)     function 返回一个 H
用户1197315
2018/01/19
1.2K0
jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作、事件绑定(2) ————————————————————学习目录———————————————————————— 4.DOM操作 5.事件绑定
王小雷
2019/05/26
1.5K0
jQuery基础图文系列
jquery的入口函数是在html所有标签都加载后才执行,而JavaScript的window.onload事件是等到所有内容加载完后才执行。
菲宇
2019/07/31
4.5K0
jQuery基础图文系列
jQuery基础系列
jquery的入口函数是在html所有标签都加载后才执行,而JavaScript的window.onload事件是等到所有内容加载完后才执行。
达达前端
2019/07/03
2.6K0
jQuery基础系列
第75天:jQuery中DOM操作
还有就是,我说的是name属性,上面例子中的 type属性,是可以用attr的。
半指温柔乐
2018/09/11
8490
第75天:jQuery中DOM操作
JQuery中DOM对象
var li_1 = ("< li id=‘liApple’>苹果< /li>"); //创建一个li元素。
我不是费圆
2020/09/21
4.9K0
jQuery(操作Dom-节点操作①)
selector.append(节点对象):在selector元素内部的最后插入"节点对象"
全栈开发日记
2022/05/12
1.4K0
JQuery快速入门
Write less, do more, I like jQuery. jQuery是最常用的js库,整体来说非常轻量并易于扩展,对于移动应用可以使用其更轻量的孪生兄弟Zepto代替。其是由John
用户1216676
2018/01/24
2.6K0
JQuery快速入门
相关推荐
jQuery DOM操作
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文