美文网首页
jQuery DOM操作

jQuery DOM操作

作者: 璐璐熙可 | 来源:发表于2018-09-13 21:37 被阅读58次

    创建元素

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

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

    添加元素

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

    1.可以一次添加多个内容,内容可以是DOM对象、HTML string、 jQuery对象

    2.如果参数是function,function可以返回DOM对象、HTML string、 jQuery对象,参数是集合中的元素位置与原来的html值

    看几个例子

    $( ".inner" ).append( "<p>Test</p>" );
    $( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );
    $( "p" ).append( "<strong>Hello</strong>" );
    $( "p" ).append( $( "strong" ) );
    $( "p" ).append( document.createTextNode( "Hello" ) );
    
    • .appendTo(target)

    把对象插入到目标元素尾部,目标元素可以是selector, DOM对象, HTML string, 元素集合, jQuery对象;

    $( "h2" ).appendTo( $( ".container" ) );
    $( "<p>Test</p>" ).appendTo( ".inner" );
    
    • .prepend(content[,content]) / .prepend(function(index,html))

    向对象头部追加内容,用法和append类似,内容添加到最开始

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

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

    $( "<p>Test</p>" ).prependTo( ".inner" );
    
    • .before([content][,content]) / .before(function)

    在对象前面(不是头部,而是外面,和对象并列同级)插入内容,参数和append类似

    $( ".inner" ).before( "<p>Test</p>" );
    $( ".container" ).before( $( "h2" ) );
    $( "p" ).first().before( newdiv1, [ newdiv2, existingdiv1 ] );
    $( "p" ).before( "<b>Hello</b>" );
    $( "p" ).before( document.createTextNode( "Hello" ) );
    
    • .insertBefore(target)

    把对象插入到target之前(同样不是头部,是同级)

    $( "h2" ).insertBefore( $( ".container" ) );
    
    • .after([content][,content]) / .after(function(index))

    和before相反,在对象后面(不是尾部,而是外面,和对象并列同级)插入内容,参数和append类似

    $( ".inner" ).after( "<p>Test</p>" );
    $( "p" ).after( document.createTextNode( "Hello" ) );
    
    • .insertAfter(target)

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

    $( "<p>Test</p>" ).insertAfter( ".inner" );
    $( "p" ).insertAfter( "#foo" );
    

    删除元素

    • .remove([selector])

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

     $("#div1").remove();
    

    我们也可以添加一个可选的选择器参数来过滤匹配的元素

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

    清空被选择元素内所有子元素

    $('body').empty();
    

    包裹元素

    html([string])

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

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

    $('div').html()
    
    $('div').html('123')
    

    后续这种读写两用的方法很多,原理都类似

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

    相关文章

      网友评论

          本文标题:jQuery DOM操作

          本文链接:https://www.haomeiwen.com/subject/ftvggftx.html