DOM

作者: 真的吗_a951 | 来源:发表于2018-08-15 07:59 被阅读0次

创建元素

$('<div>box</div>')

添加元素

  • 添加到最后
    .append(target)在‘我’的最后添加target
    .appendTo(target) 把‘我’添加到target最后
  • 添加在最前
    .prepend()在‘我’的首位追加内容
    .prependTo(target)在target的前面添加
    .before([],[])在元素的前面,作为我的兄弟元素(在我的前面插入一个元素)
    .insertBefore(target)在target前插入我(同级)
    删除元素
    .remove()删除
    .empty()清空内部元素
    .detach()删除并暂存
    包裹元素
  • .wrap()为每个对象包裹一层HTML结构
    例:
<div class = 'content'>
  <p class = 'p1'>1</p>
  <p class = 'p2'>2</p>
</div>

jQuery:$('p').wrap('<div class = "new"></div>')
结果:

<div class = 'content'>
  <div class="new">
    <p class="p1">1</p>
  </div>
  <div class="new">
    <p class="p2">2</p>
  </div>
</div>
  • .wrapAll()把相同的元素放在一起包裹住
    $('.p').wrapAll('<div class = "new"></div>')
    结果:
<div class = 'content'>
  <div class="new">
    <p class="p1">1</p>
    <p class="p2">2</p>
  </div>
</div>
  • wrapInner()包裹匹配元素的内容
<div class = 'content'>
  <p class = 'p1'>1</p>
  <p class = 'p2'>2</p>
</div>

$('.p').wrapInner(<span class = 'new'></span>)
结果:

<div class = 'content'>
  <p class = 'p1'>
    <span class = 'new'>1</span>
  </p>
  <p class = 'p2'>
    <span class = 'new'>2</span>
  </p>
</div>
  • .unwrap()把DOM元素的parent移除
  • .html([string])相当于innerHTML
  • text()相当于innerText

相关文章

  • dom 级别和dom 事件处理

    dom级别:dom0 dom1 dom2 dom3 dom事件处理:dom0 dom2 dom3 (1级DOM标准...

  • WY-DOM编程

    DOM Document Object Model DOM Core DOM HTML DOM Style DOM...

  • DOM事件

    DOM级别与DOM事件 DOM级别:DOM0级、DOM1级、DOM2级、DOM3级DOM事件:DOM0级事件处理、...

  • DOM事件

    DOM级别与DOM事件 DOM级别:DOM0级,DOM1级,DOM2级和DOM3级DOM事件:DOM0级事件处理,...

  • js红包雨活动

    function Block( dom ){ this.dom = dom; //dom this.parentW...

  • DOM操作的分类

    DOM操作分为三个方面,即DOM Core(核心)、HTML-DOM和CSS-DOM。 DOM Core DOM ...

  • 虚拟 DOM 和 diff 算法

    虚拟 DOM(Virtual DOM) 通过 JS 对象表示 DOM 结构,虚拟DOM 是对 DOM 的抽象 通常...

  • jQuery——DOM

    DOM操作分类 一般来说,DOM操作分为3个方面,即DOM Core、HTML-DOM、CSS-DOM。 DOM ...

  • JavaScript高级程序设计前四章

    1. DOM级别 1.1 DOM1级 由DOM核心(DOM Core)和DOM HTML两个模块组成。 DOM核心...

  • DOM分级详解

    DOM1 级(DOM Level 1) DOM1 级由两个模块组成:DOM核心(DOM Core)和DOM HTM...

网友评论

      本文标题:DOM

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