美文网首页
以下 jQuery 方法有什么作用?如何使用?

以下 jQuery 方法有什么作用?如何使用?

作者: 饥人谷_阿银 | 来源:发表于2019-04-22 18:55 被阅读0次
  1. .append()
  2. .prepend()
  3. .before()
  4. .after()
  5. .remove()
  6. .empty()
  7. .html()
  8. .text()

作用

  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

相关文章

网友评论

      本文标题:以下 jQuery 方法有什么作用?如何使用?

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