查找
JS方法1
| 对比 |
JS |
JQuery |
| 节点 |
getElementById() |
$('') |
| 节点组 |
getElementByClassName() |
$('') |
| 节点组 |
getElementByTagName() |
$('') |
查找节点1
// JS : 返回id为'test'的节点：
var test = document.getElementById('test');
// JQuery : 返回id为'test'的节点：
var test = $('#test');
查找节点组1
// JS : 返回类名为'test'的节点组：
var arrTest = document.getElementsByClassName("test");
// JS : 返回tag为'p'的节点组：
var arrP = document.getElementsByTagName("p");
// JQuery : 返回类名为'test'的节点组：
var arrtest = $(".test");
JS方法2
| 对比 |
JS |
JQuery |
| 节点 |
querySelector() |
$('') |
| 节点组 |
queryAllSelector() |
$('') |
查找节点2
// JS : 返回id为'test'的节点：
var test = document.querySelector('#test');
// JQuery : 返回id为'test'的节点：
var test = $('#test');
查找节点组2
// JS : 返回id为'test'的节点组
var arrTest = document.queryAllSelector('.test');
JQuery : 返回id为'test'的节点：
var arrTest = $('.test');
小结
根据JS和JQuery的对比可看出，它们的共同点在于方法2的选择器（Selector），所以掌握了选择器的方法，便可以两者切换使用。由于Mui框架不建议使用JQuery框架，但如果熟悉了方法2，一样能熟练使用原生的对DOM的查找。
所以，如果使用原生方法，建议使用 querySelector(), queryAllSelector()。且在选择器方面方面多加训练，毕竟CSS也用得到
添加
| 对比 |
JS |
JQuery |
| 创建节点 |
createElement() |
$('<p></p>') |
| 首部插入 |
无 |
prepend() |
| 末尾插入 |
appendChild() |
append() |
| 元素前插入 |
insertBefore(newElement, referenceElement) |
before() |
| 元素后插入 |
insertAfter(newElement, referenceElement) |
after() |
创建节点
// JS : 创建节点
var para = document.createElement("p");
// JQuery : 创建节点
var para = $("<p></p>");
首部插入
// JQuery : 首部插入
var para = $("<p></p>");
var list = $("#list");
list.prepend(para);
末尾插入
// JS : 末尾插入
var para = document.createElement("p");
var list = document.querySelector("#list");
list.appendChild(para);
// JQuery : 末尾插入
var para = $("<p></p>");
var list = $("#list");
list.append(para);
元素前插入
// JS
//创建节点
var para = document.createElement("p");
// 元素节点列表
var list = document.querySelector("#list");
// 参考元素
var ref = document.querySelector("#ref");
// 元素前插入
list.insertBefore(para, ref);
// JQuery
// 创建节点
var para = $("<p></p>");
// 元素节点列表
var list = $("#list");
// 参考元素
var ref = $("#ref");
// 元素前插入
ref.befor(para);
元素后插入
// JS
//创建节点
var para = document.createElement("p");
// 元素节点列表
var list = document.querySelector("#list");
// 参考元素
var ref = document.querySelector("#ref");
// 元素前插入
list.insertAfter(para, ref);
// JQuery
// 创建节点
var para = $("<p></p>");
// 元素节点列表
var list = $("#list");
// 参考元素
var ref = $("#ref");
// 元素前插入
ref.after(para);
删除
| 对比 |
JS |
JQuery |
| 删除节点 |
removeChild() |
remove() |
删除节点
// JS
// 父元素节点
var list = document.querySelector("#list");
// 子元素
var child = document.querySelector("#child");
// 删除元素
list.removeChild(child);
// JQuery
// 元素节点
var node = $("#node");
// 删除元素，包括它的子节点
child.remove();
修改
| 对比 |
JS |
JQuery |
| 修改html |
innerHtml |
html() |
| 修改文本 |
innerText |
text() |
修改html
// JS
var p = document.getElementById('test');
p.innerHtml = '<span style="color:red">RED</span>';
// JQuery
var p = document.getElementById('#test');
p.html('<span style="color:red">RED</span>');
修改文本
// JS
var p = document.getElementById('test');
p.innerText = '哈哈';
// JQuery
var p = $('#test');
p.text('哈哈');
例子效果图
预览
DOM预览
代码预览（参考网上）
