原生JS与jQuery操作DOM对比

转载 (原文地址) 笑靥 随笔 分享类 201阅读 2018-06-27 09:57:47 举报

创建元素节点

  1. 原生JS创建元素节点
    document.createElement("p");
  2. jQuery创建元素节点
    $('<p></p>')

创建并添加文本节点

  1. 原生JS创建文本节点
    document.createTextNode("Text Content");
    通常创建文本节点和创建元素节点配合使用,比如
    var textEl = document.createTextNode("Hello world"); var pEl = document.createElement("p"); pEl.appendChild(textEl);
  2. jQuery创建并添加文本节点
    var $p = $('<p>Hello world</p>');

复制节点

  1. 原生JS复制节点
    var newEl = pEl.cloneNode(true);
  • true和false的区别
    true:克隆整个'<p>Hello world</p>'节点
    false:只克隆'<p></p>',不克隆文本Hello world
  1. jQuery复制节点
    $newEl = $('#pEl').clone(true);
    注意:克隆节点要避免ID重复

插入节点

  1. 原生JS向子节点列表的末尾添加新的子节点
    El.appendChild(newNode);
    原生JS在节点的已有子节点之前插入一个新的子节点
    El.insertBefore(newNode,targetNode);
  2. 在jQuery中,插入节点的方法比原生JS多的多
    • 在匹配元素子节点列表结尾添加内容
      $('#El').append('<p>Hello World</p>');
  • 把匹配元素添加到目标元素子节点列表末尾
    $('<p>Hello world</p>').appendTo('#El);
  • 在匹配元素子节点列表的开头添加内容
    $('#El').prepend('<p>Hello world</p>');
  • 把匹配元素添加到目标元素子节点列表的开头
    $('<p>Hello World.</p>').prependTo('#El');
  • 在匹配元素之前添加目标内容
    $('#El').before('<p>Hello World.</p>');
  • 把匹配元素添加到目标元素之前
    $('<p>Hello World.</p>').insertBefore('#El');
  • 在匹配元素之后添加目标内容
    $('#El').after('<p>Hello World.</p>');
  • 把匹配元素添加到目标元素之后
    $('<p>Hello World.</p>').insertAfter('#El')

删除节点

  1. 原生JS删除节点
    El.parentNode.removeChild(El);
  2. jquery删除节点
    $('#El).remove();

替换节点

  1. 原生JS替换节点
    El.replaceChild(newNode,oldNode);
    注意 oldNode必须是parentEl真实存在的一个子节点
  2. jQuery替换节点
    $('p').replaceWith('<p>Hello world</p>')

设置/获取/移除属性

  1. 原生JS设置/获取/移除属性
    imgEl.setAttribute("title","logo");
    imgEl.getAttribute("title");
    imgEl.removeAttribute("title");
    checkboxEl.checked = true;
    checkboxEl.checked;
  2. jQuery设置/获取/移除属性
    $('#logo').attr({'title':'logo'});
    $('#logo').attr('title');
    $('#logo').removeAttr('title');
    $('#checkbox').prop({'checked':true});
    $('#checkbox').prop('checked');

操作class

  1. 原生JS为DOM添加/删除/判断是否有某类
    el.classList.add(className);
    el.classList.remove(className);
    if (el.classList.contains(className));
  2. jQuery为DOM添加/删除/判断是否有某类
    $(el).addClass(className);
    $(el).removeClass(className);
    if($(el).hasClass(className));

添加/获取样式

  1. 原生JS 添加/获取样式
    el.style.color = "white"
    el.style.color;
    注意 只能获取内联的style样式
  • 显示隐藏

    el.style.display = '';
    el.style.display = 'none';

  1. jQuery添加/获取样式
    $el.css({'color':'white'});$el.css('color','white');
    $el.css('color');
  • 显示隐藏

    $el.show();
    $el.hide();

自定义数据属性

  1. 原生JS操作自定义数据属性(以data-myname=“nini”为例)
    el.dataset.myname
    el.dataset.myname = ''
    el.getAttribute('data-myname');
    el.setAttribute('data-myname','')
  2. jQuery操作自定义数据属性
    $el.data('myname')
    $el.data('myname','')
    $el.attr('data-myname')
    $el.attr('data-myname','')
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复