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

jquery 操作DOM元素(1)

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

    		      $(".hello").clone().appendTo(".goodbye")

 效果 :

                     <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内容或对象。

   		    <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字符。

			    <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 元素。

				    <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字符串。

		    <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 元素数组。

		    <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()     这个方法不接收任何元素。

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

    获得到的结果

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

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

		    <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>');

    效果如下:

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

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

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

      效果:

		        <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对象,将被插入到匹配元素前的内容。

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

    效果:

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

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

		  <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() 方法。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery操作DOM 元素(3)

    .detach()   从DOM 中去掉所匹配的元素。     .detach([selector])       select...

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

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

    用户1197315
  • NEC html规范

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

    用户1197315
  • jQuery DOM操作

    在目标对象前插入同级兄弟元素(不是头部,而是外面,和对象并列同级),参数和append类似

    bamboo
  • jquery 选中某一行

    Dream城堡
  • css 使元素居中

    <div style="text-align:center;">居中显示</div>

    lin_zone
  • golang goquery selector(选择器) 示例大全

    最近研究Go爬虫相关的知识,使用到goquery这个库比较多,尤其是对爬取到的HTML进行选择和查找匹配的内容时,goquery的选择器使用尤其多,而且还有很多...

    飞雪无情
  • Vue中$refs的理解

    $refs是一个对象,持有注册过ref attribute的所有DOM元素和组件实例。

    WindrunnerMax
  • jQuery基础教程之选择器

    老雷PHP全栈开发
  • 滚动视差让你不相信“眼见为实”

    视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果。

    前端森林

扫码关注云+社区

领取腾讯云代金券