• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > JS应用 > JQuery学习记录(三):jquery对页面DOM节点的操作

    JQuery学习记录(三):jquery对页面DOM节点的操作

    作者: 分类:JS应用 点击: 74 次
    wordpress CMS主题:ssmay主题

      使用JS来操作DOM节点的朋友都会有一个体会,实在是有点烦,要写上一大堆代码,才能实现一个简单功能,如JS获取一个input元素:document.getElementsByTagName('input'),而jquery获取input元素:$("input") 就可以获取到input。jquery在创建、获取、插入、修改DOM节点元素上的操作要比原始JS代码简单的多。一起来体会一下吧。

      一、创建节点

      真接创建一个节点,代码如下:

      var box = $('<div id="box">节点</div>');

      二、插入节点

      向div内部插入strong节点

      $('div').append('<strong>节点</strong>');

      使用匿名函数插入节点

      $('div').append(function (index, html) {
      return '<strong>节点</strong>';
      })

      将 span 节点移入div节点内

      $('span').appendTo('div');

      将 span 插入到 div 内部的前面

      $('div').prepend('<span>节点</span>')

      将 span 移入 div 内部的前面

      $('span').prependTo('div');

      向 div 的同级节点后面插入 span

      $('div').after('<span>节点</span>');

      向 div 的同级节点前面插入 span

      $('div').before('<span>节点</span>');

      将 span 元素移到 div 元素外部的后面

      $('span').insertAfter('div');

      将 span 元素移到 div 元素外部的前面

      $('span').insertBefore('div');

      三、包裹节点

      在 div 外层包裹一层 strong

      $('div').wrap('<strong></strong>');

      包裹一个原生 DOM

      $('div').wrap($('strong').get(0));

      包裹临时的原生 DOM

      $('div').wrap(document.createElement('strong'));

      移除一层包裹,多个需移除多次

      $('div').unwrap();

      所有 div 外面只包一层 strong

      $('div').wrapAll('<strong></strong>');

      包裹子元素内容

      $('div').wrapInner('<strong></strong>');

      四、节点操作

      复制节点不复制事件

      $('body').append($('div').clone());

      复制节点并复制事件

      $('body').append($('div').clone(true));

      删除节点不保留事件

      $('div').remove();

      只删除 id=box 的 div。

      $('div').remove('#box');

      删除节点但保留事件

      $('div').detach();

      清空节点,删除节点里的

      $('div').empty();

      将 div 替换成 span 元素

      $('div').replaceWith('<span>节点</span>');

      用span替换div节点

      $('<span>节点</span>').replaceAll('div');

      注意:.remove()和.detach()都是删除节点,而删除后本身方法可以返回当前被删除的节点对象,但区别在于前者在恢复时不保留事件行为,后者则保留。在连缀方法时就可以体现出来。

    文章作者:ssmay
    本文地址:http://wanlimm.com/77201807306315.html
    本文时间:2018-07-30 09:59:51
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.