本文主要是介绍jQuery与DOM的区别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
目录
1 概述
2 选取DOM元素
2.1 dom和jQuery对象转换
2.2 dom和jQuery的入口函数的区别
2.2.1 jQuery的入口加载函数
2.2.2 dom的入口加载函数
3 DOM操作
3.1 获取父元素
3.2 获取下一个同级元素
3.3 尾部追加DOM元素
3.4 头部插入DOM元素
3.5 生成DOM元素
3.6 删除DOM元素
3.7 清空子元素
3.8 检查是否有子元素
3.9 克隆元素
4 事件的监听
4.1 事件的触发
5 各种方法
5.1 attr方法
5.1.1 jQuery使用attr方法，读写网页元素的属性
5.1.2 DOM提供getAttribute和setAttribute方法读写元素属性
5.1.3 DOM还允许直接读取属性值，写法要简洁许多
5.2 addClass方法
5.2.1 jQuery的addClass方法，用于为DOM元素添加一个class
5.2.2 DOM元素本身有一个可读写的className属性，可以用来操作class
5.2.3 HTML 5还提供一个classList对象，功能更强大（IE 9不支持）
5.3 CSS
5.3.1 jQuery的css方法，用来设置网页元素的样式
5.3.2 DOM元素有一个style属性，可以直接操作
5.4 数据储存
5.4.1 jQuery对象可以储存数据
5.4.2 HTML 5有一个dataset对象
5.5 Ajax
5.5.1 jQuery的ajax方法，用于异步操作
5.6 动画
1 概述
jQuery是最流行的JavaScript工具库。据统计，目前全世界57.3%的网站使用它。也就是说，10个网站里面，有6个使用jQuery。如果只考察使用工具库的网站，这个比例就会上升到惊人的91.7%。
jQuery如此受欢迎，以至于有被滥用的趋势。许多开发者不管什么样的项目，都一股脑使用jQuery。但是，jQuery本质只是一个中间层，提供一套统一易用的DOM操作接口，消除浏览器之间的差异。多了这一层中间层，操作的性能和效率多多少少会打一些折扣。
2006年，jQuery诞生的时候，主要是为了解决IE6与标准的不兼容问题。如今的情况已经发生了很大的变化。IE的市场份额不断下降，以ECMAScript为基础的JavaScript标准语法，正得到越来越广泛的支持，不同浏览器对标准的支持越来越好、越来越趋同。开发者直接使用JavaScript标准语法，就能同时在各大浏览器运行，不再需要通过jQuery获取兼容性。
另一方面，jQuery臃肿的体积也让人头痛不已。jQuery 2.0的原始大小为235KB，优化后为81KB；如果是支持IE6、7、8的jQuery 1.8.3，原始大小为261KB，优化后为91KB。即使有CDN，浏览器加载这样大小的脚本，也会产生不小的开销。
所以，对于一些不需要支持老式浏览器的小型项目来说，不使用jQuery，直接使用DOM原生接口，可能是更好的选择。开发者有必要了解，jQuery的一些常用操作所对应的DOM写法。而且，理解jQuery背后的原理，会帮助你更好地使用jQuery。要知道有一种极端的说法是，如果你不理解一样东西，就不要使用它。
2 选取DOM元素
jQuery的核心是通过各种选择器，选中DOM元素，可以用querySelectorAll方法模拟这个功能。
var $ = document.querySelectorAll.bind(document);
这里需要注意的是，querySelectorAll方法返回的是NodeList对象，它很像数组（有数字索引和length属性），但不是数组，不能使用pop、push等数组特有方法。如果有需要，可以考虑将Nodelist对象转为数组。
myList = Array.prototype.slice.call(myNodeList);
2.1 dom和jQuery对象转换
//dom转化为jQuery，只需把dom放进jQuery的对象就可以了$()
$(document);//就是一个jQuery对象
//jQuery转化为dom对象，只需把这个维数组里面的元素取出来即可
$(document)[0]或者$(document).get(0)
2.2 dom和jQuery的入口函数的区别
2.2.1 jQuery的入口加载函数
$(function(){//注意这个入口加载函数会只会等待页面文档加载完成，而不会等待外部资源或图片加载完成
});注意这个入口加载函数会只会等待页面文档加载完成，而不会等待外部资源或图片加载完成
2.2.2 dom的入口加载函数
window.onload=function(){//这个函数会等待一切资源加载完成在执行，比如外部脚本或图片
}这个函数会等待一切资源加载完成在执行，比如外部脚本或图片
3 DOM操作
DOM本身就具有很丰富的操作方法，可以取代jQuery提供的操作方法。
3.1 获取父元素
// jQuery写法
$("#elementID").parent()// DOM写法
document.getElementById("elementID").parentNode
3.2 获取下一个同级元素
// jQuery写法
$("#elementID").next()// DOM写法
document.getElementById("elementID").nextSibling
3.3 尾部追加DOM元素
// jQuery写法
$(parent).append($(child));// DOM写法
parent.appendChild(child)
3.4 头部插入DOM元素
// jQuery写法
$(parent).prepend($(child));// DOM写法
parent.insertBefore(child, parent.childNodes[0])
3.5 生成DOM元素
// jQuery写法
$("<p>")// DOM写法
document.createElement("p")
3.6 删除DOM元素
// jQuery写法
$(child).remove()// DOM写法
child.parentNode.removeChild(child)
3.7 清空子元素
// jQuery写法
$("#elementID").empty()// DOM写法
var element = document.getElementById("elementID");
while(element.firstChild) element.removeChild(element.firstChild);
3.8 检查是否有子元素
// jQuery写法
if (!$("#elementID").is(":empty")){}// DOM写法
if (document.getElementById("elementID").hasChildNodes()){}
3.9 克隆元素
// jQuery写法
$("#elementID").clone()// DOM写法
document.getElementById("elementID").cloned(true)
4 事件的监听
jQuery使用on方法，监听事件和绑定回调函数。
$('button').on('click', function(){ajax( ... );
});
完全可以自己定义on方法，将它指向addEventListener方法。
Element.prototype.on = Element.prototype.addEventListener;
为了使用方便，可以在NodeList对象上也部署这个方法。
NodeList.prototype.on = function (event, fn) {[]['forEach'].call(this, function (el) {el.on(event, fn);});return this;};
取消事件绑定的off方法，也可以自己定义。
Element.prototype.off = Element.prototype.removeEventListener;
4.1 事件的触发
jQuery的trigger方法则需要单独部署，相对复杂一些。
Element.prototype.trigger = function (type, data) {var event = document.createEvent('HTMLEvents');event.initEvent(type, true, true);event.data = data || {};event.eventName = type;event.target = this;this.dispatchEvent(event);return this;
};
在NodeList对象上也部署这个方法。
NodeList.prototype.trigger = function (event) {[]['forEach'].call(this, function (el) {el['trigger'](event);});return this;
};
5 各种方法
5.1 attr方法
5.1.1 jQuery使用attr方法，读写网页元素的属性
$("#picture").attr("src", "http://url/to/image")
5.1.2 DOM提供getAttribute和setAttribute方法读写元素属性
imgElement.setAttribute("src", "http://url/to/image")
5.1.3 DOM还允许直接读取属性值，写法要简洁许多
imgElement.src = "http://url/to/image";
需要注意的是，文本框元素（input）的this.value返回的是输入框中的值，链接元素（a标签）的this.href返回的是绝对URL。如果需要用到这两个网页元素的属性准确值，可以用this.getAttribute('value')和this.getAttibute('href')。
5.2 addClass方法
5.2.1 jQuery的addClass方法，用于为DOM元素添加一个class
$('body').addClass('hasJS');
5.2.2 DOM元素本身有一个可读写的className属性，可以用来操作class
document.body.className = 'hasJS';// ordocument.body.className += ' hasJS';
5.2.3 HTML 5还提供一个classList对象，功能更强大（IE 9不支持）
document.body.classList.add('hasJS');document.body.classList.remove('hasJS');document.body.classList.toggle('hasJS');document.body.classList.contains('hasJS');
5.3 CSS
5.3.1 jQuery的css方法，用来设置网页元素的样式
$(node).css( "color", "red" );
5.3.2 DOM元素有一个style属性，可以直接操作
element.style.color = "red”;;// orelement.style.cssText += 'color:red';
5.4 数据储存
5.4.1 jQuery对象可以储存数据
$("body").data("foo", 52);
5.4.2 HTML 5有一个dataset对象
HTML 5有一个dataset对象，也有类似的功能（IE 10不支持），不过只能保存字符串
element.dataset.user = JSON.stringify(user);element.dataset.score = score;
5.5 Ajax
5.5.1 jQuery的ajax方法，用于异步操作
$.ajax({type: "POST",url: "some.php",data: { name: "John", location: "Boston" }
}).done(function( msg ) {alert( "Data Saved: " + msg );
});
我们自定义一个ajax函数，简单模拟jQuery的ajax方法。
function ajax(url, opts){var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){var completed = 4;if(xhr.readyState === completed){if(xhr.status === 200){opts.success(xhr.responseText, xhr);}else{opts.error(xhr.responseText, xhr);}}};xhr.open(opts.method, url, true);xhr.send(opts.data);
}
使用的时候，除了网址，还需要传入一个自己构造的option对象。
ajax('/foo', { method: 'GET',success: function(response){console.log(response);},error: function(response){console.log(response);}
});
5.6 动画
jQuery的animate方法，用于生成动画效果。
$foo.animate('slow', { x: '+=10px' })
jQuery的动画效果，很大部分基于DOM。但是目前，CSS 3的动画远比DOM强大，所以可以把动画效果写进CSS，然后通过操作DOM元素的class，来展示动画。
foo.classList.add('animate')
如果需要对动画使用回调函数，CSS 3也定义了相应的事件。
el.addEventListener("webkitTransitionEnd", transitionEnded);el.addEventListener("transitionend", transitionEnded);
这篇关于jQuery与DOM的区别的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
