前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jquery 操作DOM元素(1)

jquery 操作DOM元素(1)

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

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

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

 效果 :

代码语言:js
复制
                     <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
复制

   		    <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
复制

			    <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
复制

				    <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
复制

		    <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
复制

		    <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
复制

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

    获得到的结果

代码语言:js
复制

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

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

代码语言:js
复制

		    <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
复制

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

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

代码语言:js
复制

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

      效果:

代码语言:js
复制

		        <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
复制

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

    效果:

代码语言:js
复制

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

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

代码语言:js
复制

		  <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 删除。

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档