美文网首页
第35章 以下 jQuery 方法有什么作用?如何使用?给出范例

第35章 以下 jQuery 方法有什么作用?如何使用?给出范例

作者: kzc爱吃梨 | 来源:发表于2019-05-29 23:58 被阅读0次

    作用

    1. .append()
      可以一次添加多个内容,内容可以是DOM对象HTML stringjQuery对象
      $('body').append($('<p>nihao</>'))

      image

    $('body').append('<h1>jqueryDOM</h1>')

    image

    $('body').append('nihao')

    image

    页面的变化

    image
    1. .prepend()
      向对象头部追加内容,用法和.append()类似,内容添加到最开始
      $('ul').prepend('<p>ul内容的前面</p>')

      image

    $('li').eq(0).prepend('<p>ul内容的前面</p>')

    image

    页面变化

    image
    1. .before()
      在对象前面(不是头部,而是外面,和对象并列同级)插入内容,参数和.append()类似
      $('ul').before('<p>ul的兄弟元素,并且出现在ul的前面')

      image

    页面变化

    image
    1. .after()
      .before()相反,在对象后面(不是尾部,而是外面,和对象并列同级)插入内容,参数和.append()类似
      $('ul').after('<p>出现在ul的下面</p>')

      image

    页面变化

    image
    1. .remove()
      删除被选元素(及其子元素)
      $('ul').remove()

      image
    2. .empty()
      清空被选择元素内所有子元素

      image

      $('div').empty()

      image
    3. .html()
      这是一个读写两用的方法,用于获取/修改元素的innerHTML

    • 当没有传递参数的时候,返回元素的innerHTML

    • 当传递了一个string参数的时候,修改元素的innerHTML为参数值
      $('div').html()

      image image

      $('div').html('<p>.html()</p>')

      image image
    1. .text()
      和html方法类似,操作的是DOM的innerText值
      原内容

      image

      $('div').text()

      image

      $('div').text('hello')

      image

      内容发生变化

      image

    相关文章

      网友评论

          本文标题:第35章 以下 jQuery 方法有什么作用?如何使用?给出范例

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