JavaScript DOM和JQuery方法对比

	JQuery	JavaScript
创建节点	$("<div>')	document.createElement("div“）
选择元素	$(CSS选择器）	querySelector(CSS选择器）； querySelector(CSS选择器）； getElementById(); getElementsByTagName(); getElementsByClassName();
更改元素CSS	修改单个CSS:$("p").css("backgroundColor", "red") 修改多个CSS： $("p").css({   "color":"white",   "background-color":"#98bf21",   "font-family":"Arial",   "font-size":"20px",   "padding":"5px"   });	元素.style.backgroundColor="red"
更改元素属性	元素.prop("disabled",true); 元素.attr("disabled",true);	元素.disabled=true; 元素.setAttribute("disabled",true);
获取元素属性	元素.prop("disabled"); 元素.attr("disabled");	元素.getAttribute(”disabled")
标签里添加 HTML 标签或文本	元素.html("<em>target4</em>")	元素.innerHTML="<em>target4</em>"
标签里只改变文本而不增加标签	元素.text()	元素.innerText或者元素.textContent(不同浏览器不同方法）; 元素.文本子元素.nodeValue
设置或返回表单字段的值	元素.val()	value
删除元素	元素自身.remove()	父元素.removeChild(子元素）； 子元素.parentNode.removeChild(子元素）；
末尾增加元素	新元素.appendTo(父元素） 父元素.append(新元素）	父元素.appendChild(新元素）
指定位置增加元素		父元素.insertBefore(插入元素,参照元素）
替换元素		父元素.replaceChild(插入元素,替换元素)
克隆元素	元素.clone();	元素.cloneNode(true):深克隆； 元素.cloneNode(false):浅克隆；
父元素	元素.parent()	元素.parentNode
子元素	元素.children() 元素.children("CSS选择器")	元素.childNodes（返回NodeList对象） 元素.firstChild; 元素.lastChild;
后代元素	元素.find("CSS选择器") 示例:$('li.item-ii').find('li')，返回被选元素的后代元素，一路向下直到最后一个后代
兄弟元素	元素.next(); 元素.prev();	元素.nextSibling; 元素.previousSibling;
伪类选择器选定子元素	$("button:nth-child(3)") 选择属于其父元素的第3个子元素的每个<button> 元素。  $(".target:odd") 选择奇数位置元素；  $(".target:even") 选择偶数位置元素；
显示元素	元素.show()	元素.style.display=“block"
隐藏元素	元素.hide()	元素.style.display=“none"
页面资源全装载完成后触发	${window}.on("load",function(){});	window.onload=function(){};
DOM加载完成后触发	${document}.read(function(){});
对象定义	var $pin = $( "#main" );	var main=document.getElementById('main')
访问元素集合指定索引值	$('li').eq(2)  （第二个li元素）	nodeList[i]或nodeList.item(i)
集合中的第一个元素	.first()
集合中的最后一个元素	.last()
为数组每个匹配元素规定运行的函数	$(selector).each(function(index,value){}) $.each( object, function(index,value){})	for循环遍历执行
事件	元素.click（function(){...})	1、元素.onclick=function(){...} 2、元素.addClickListener('click',function(){...})
设置或返回元素的宽度（不包括内边距、边框或外边距）	width()	width
设置或返回元素的高度（不包括内边距、边框或外边距）	height()	height
返回元素的宽度（包括内边距）	innerWidth()	clientWidth
返回元素的高度（包括内边距）	innerHeight()	clientHeight
返回元素的宽度（包括内边距和边框）	outerWidth()	offsetWidth
返回元素的g高度（包括内边距和边框）	outerHeight()	offsetHeight
返回视口宽度/高度	$(window).width()/$(window).height()	内边距=0情况下的document.documentElement.clientWidth
返回文档宽度/高度	$(document).width()/$(document).height()
获取垂直滚动的距离	$(document).scrollTop()	document.documentElement.scrollTop
获取水平滚动的距离	$(document).scrollLeft()	document.documentElement.scrollLeft
被选元素相对于文档(document)的偏移坐标	offset().top,offset().left	offsetTop,offsetLeft(offsetParent是默认body时，或者是效果相当于body的定位元素时）