jQuery DOM操作

一、创建元素

只需要把DOM字符串传入$方法即可返回一个jQuery对象

var obj = $('<div class="test"><p><span>Done</span></p></div>')

二、添加元素

1、.append(content[,content]) / .append(function(index,html))

都是放在目标对象尾部,作为子元素

  1. 可以一次添加多个内容,内容可以是DOM对象HTML stringjQuery对象
  2. 如果参数是function,function可以返回DOM对象、HTML string、 jQuery对象,参数是集合中的元素位置与原来的html值
$( ".inner" ).append( "<p>Test</p>" ); 
$( "p" ).append( $( "strong" ) );
$( "p" ).append( document.createTextNode( "Hello" ) )

2、.appendTo(target)

和append的位置相反,把对象插入到目标元素尾部

$( "h2" ).appendTo( $( ".container" ) );
$( "<p>Test</p>" ).appendTo( ".inner" );

3、.prepend(content[,content]) / .prepend(function(index,html))

把对象插入到目标元素头部,用法和prepend类似

$( "<p>Test</p>" ).prependTo( ".inner" );

4、.prependTo(target)

把对象插入到目标元素头部,用法和prepend类似

$( "<p>Test</p>" ).prependTo( $('.container'))

5、.before(content) / .before(function)

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

$( ".container" ).before( $( "h2" ) );
$( "p" ).before( "<b>Hello</b>" );
$( "p" ).before( document.createTextNode( "Hello" ) )

6、.insertBefore(target)

把对象插入到target之前(同样不是头部,是同级),和before的写法相反,用途一样

7、.after(content) / .after(function(index))

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

$('.container').after( "<p>Test</p>" );
$('.container').after( document.createTextNode( "Hello" ) );

8、.insertAfter(target)

和After写法相反,把对象插入到target之后(同样不是尾部,是同级)

注意我们只能把对象插入目标对象后面作为同级对象,不能插入字符串

三、删除元素

1、.remove([selector])

删除被选元素(及其子元素)

$("#div1").remove(); 我们也可以添加一个可选的选择器参数来过滤匹配的元素

$('div').remove('.test');

2、.empty()

清空被选择元素内所有内容,包括文本内容和所有子元素 原本内容

清空之后

四、包裹元素

1、wrap(wrappingElement) / .wrap(function(index)) 为每个对象包裹一层HTML结构

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

结果

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

2、.wrapAll(wrappingElement) 把所有匹配对象包裹在同一个HTML结构中

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

看看结果

    <div class="container">
      <div class="new">
        <div class="inner">Hello</div>
        <div class="inner">Goodbye</div>
      </div>
    </div>

3、.wrapInner(wrappingElement) / .wrapInner(function(index)) 包裹匹配元素内容

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
包裹元素

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

执行结果

<div class="container">
  <div class="inner">
    <div class="new">Hello</div>
  </div>
  <div class="inner">
    <div class="new">Goodbye</div>
  </div>
</div>

4、.unwrap()

把DOM元素的parent移除

$('.child').unwrap()

5、html([string])

这是一个读写两用的方法,用于获取/修改元素的innerHTML

**当没有传递参数的时候,返回元素的innerHTML 当传递了一个string参数的时候,修改元素的innerHTML为参数值** 看个例子

$('div').html() $('div').html('123') 如果结果是多个进行赋值操作的时候会给每个结果都赋值 如果结果多个,获取值的时候,返回结果集中的第一个对象的相应值

6、text()

和html方法类似,操作的是DOM的innerText值

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

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券