原生js与jquery针对dom的操作的不同之处整理

通过两段代码（相同功能效果）来表示其不同：

html部分：

<div class="wrapper">
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li id="last">555</li>
    </ul>
    <button id="add">新增</button>
    <button id="remove">删除</button>
    <button id="replace">替换</button>
    <input type="text">
    <input type="checkbox">
</div>

首先是原生js的代码:

//获取元素
  var _ul = document.getElementsByTagName('ul');
  var addBtn = document.getElementById('add');
  var removeBtn = document.getElementById('remove');
  var replaceBtn = document.getElementById('replace');
  var _input = document.getElementsByTagName('input');
  //事件操作
  addBtn.onclick =function () {
    //创建元素节点
    var node = document.createElement('li');
    //创建文本节点
    var textNode = document.createTextNode('666');
    //添加文本
    node.appendChild(textNode);
    //添加元素
     _ul[0].appendChild(node)
  };
  removeBtn.onclick =function () {
    //移除元素
    _ul[0].removeChild(_ul[0].lastChild)
  }
  //替换元素
  replaceBtn.onclick = function () {
     var newNode = document.createElement('li');
     var newText = document.createTextNode('hello');
     var last = document.getElementById('last');
     newNode.appendChild(newText);
     _ul[0].replaceChild(newNode,_ul[0].lastChild);//父元素.replaceChild(新的节点，旧的节点)
  }
  //设置属性
   _input[0].setAttribute('placeholder','测试')
  //获取属性
  console.log(_input[0].getAttribute('placeholder'))
  //
  _input[1].setAttribute('checked','false');
  console.log(_input[1].getAttribute('checked'));
  //设置样式
  _input[0].style.backgroundColor = 'red';

下面是jquery的代码（与上面实现效果相同）：

/获取元素
var $ul = $('ul');
var $li = $('li');
var $addBtn = $('#add');
var $deleteBtn = $('#remove');
var $replaceBtn = $('#replace');
var $input1 = $('.one');
var $input2 = $('.two');
//事件操作
$addBtn.click(function () {
  //创建元素和文本节点
  var $li = $('<li>666</li>');//也可不加$，var $li = '<li>666</li>';效果一样
  //添加元素
  $ul.append($li);
})
$deleteBtn.click(function () {
  //删除元素
  $ul.remove();//删除被选元素和其子元素
  $ul.empty();//删除被选元素的子元素，此元素本身不会被删除
});
$replaceBtn.click(function () {
  var $newNode = $('<li>hello</li>');//创建节点
  var $newNodeq = $('<li>helloq</li>');
  //替换元素节点
  $('li:first-child').replaceWith($newNodeq);//选择要被替换的元素.relaceWith(新的节点元素)
  $($newNode).replaceAll($('li:last-child'))//新的节点元素.replaceAll(选择需要被替换的元素)
})
$input1.prop('placeholder','新增');
$input2.attr('checked','true');
console.log($input1.attr('placeholder'));
console.log($input1.prop('placeholder'));
console.log($input2.prop('checked'));//对checked 返回true或false
console.log($input2.attr('checked'))//对checked返回具体的值
 //设置样式
 $input1.css('background-color','red')

另外，特此说明一下jquery中prop和attr的不同：
jquery的版本不同，使用attr获得的结果会不同，比如在在 1.9.0 的版本中：
<input type="checkbox" /> 
<script>
 $(function() {
 $('input').click(function()
 { $(this).attr('checked'); 
   }); 
 });
 </script>
 点击 checkbox，结果都是 undefined！
 在 jQuery 1.6 之前，使用 attr() 有时候会出现不一致的行为，所以在jQuery 1.6 开始新增了一个方法 prop()，也是获取属性的方法；
 使用$(this).prop('checked');结果就为true; 
 所以，具有true和false两个属性的属性，如checked,selected或者disabled使用prop()，其他的使用attr()。
看网上还有其他解释（参考链接：https://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html）：

• 对于HTML元素本身就带有的固有属性（如标签<a>中的属性“href、target和class"），在处理时，使用prop方法。
• 对于HTML元素我们自己自定义的DOM属性（如标签<a>中的属性action），在处理时，使用attr方法。

有不正确的地方，欢迎批评指正~~~