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

  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</>'))
    向body中添加nihao

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

image

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

直接插入字符串

页面的变化
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()

    ul元素被删除

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

    原内容

    $('div').empty()
    image

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

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

    返回innerHTML

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

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

    $('div').text()
    image

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

    内容发生变化
    nihao被替换成了hello
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,165评论 0 3
  • //------------------------- 第一章 认识JQuery ----------------...
    米塔塔阅读 4,077评论 0 9
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,696评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,403评论 1 45
  • 一)jQuery九类选择器【参见jQueryAPI.chm手册】 目的:通过九类选择器,能定位web页面(HTML...
    奋斗的老王阅读 4,633评论 0 51

友情链接更多精彩内容