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

2019-04-22  本文已影响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

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

    image

    $('div').text()

    image

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

    image

    内容发生变化

    image
上一篇 下一篇

猜你喜欢

热点阅读