javaScript jQuery 常用属性对照

获取元素

jQuery	JavaScript
$('html') $(':root')	document.documentElement
$('body')	document.body
$('head')	document.head
$('.class')	.getElementsByClass('class')
$('tag')	.getElementsByTagName('tag')
$('#id')	document.getElementById('id')
$('selector')	.querySelector('selector')
^	.querySelectorAll('selector')
.children('selector')	.children // 只返回元素节点
	.childNodes // 返回文本/注释/元素节点
.first()	.querySelectorAll('selector')[0]
.last()	var elemArr = document.querySelectorAll('selector'); elemArr[elemArr.length -1];
.children().eq(0)	.firstElementChild
	.firstChild // 含文本节点
.children().eq(-1)	.lastElementChild
	.lastChild // 含文本节点
.parent(['selector'])	.parentElement
^	.parentNode
.parents(['selector'])
.next()	.nextElementSibling
^	.nextSibling // 含文本节点
.prev()	.previousElementSibling
^	.previousSibling // 含文本节点
.nextAll()
.prevAll()
.siblings(['selector'])
.find('selector')
.get({index}) //返回Dom对象	{nodeList}[{index}]
.eq({index}) //返回jQ对象	^
$('*')	document.all // 非W3C标准,不建议使用

创建元素

jQuery	JavaScript
$('anna')	document.createElement('tag');
	document.createTextNode('string');

添加/插入/删除元素

jQuery	JavaScript
.append()	.appendChild()
.prepend()	{ele}.insertBefore({newEle}, {ele}.firstElementChild)
.before()	{oldEle}.parentNode.insertBefore({newEle}, {oldEle})
.after()	{oldEle}.parentNode.insertBefore({newEle}, {oldEle.nextElementSibling})
.remove()	{ele}.parentNode.removeChild({ele})

复制元素

jQuery	JavaScript
	.cloneNode(false) // 浅拷贝
clone()	.cloneNode(true) // 深拷贝

修改/获取html/text/value

jQuery	JavaScript
.text()	.innerText
^	.textContent
.text('text')	.innerText = 'text'
^	.textContent = 'text'
.html()	.innerHTML
.html('html')	.innerHTML = 'html'
.prop("outerHTML")	.outerHTML
.prop("outerHTML", 'html')	.outerHTML = 'html'
.val()	.value
.val('value')	.value = 'value'
.empty()	.innerHTML = ''

属性

jQuery	JavaScript
.attr('name')	.getAttribute('name')
.attr('name', 'value')	.setAttribute('name', 'value')
.removeAttr('name')	.removeAttribute('name')
.prop('name')	{eleList}[0].getAttribute('name')
.prop('name', 'value')	{eleList}[0].setAttribute('name')

Class

jQuery	JavaScript
.addClass('name')	.classList.add('name')
.removeClass('name')	.classList.remove('name')
.hasClass('name')	.classList.contains('name')
.toggleClass('name')	.classList.toggle('name')

显示/隐藏元素

jQuery	JavaScript
.hide()	.style.display='block'
.show()	.style.display='none'
.toggle()
.css('visibility', 'hidden/visible')	.style.visibility = 'hidden/visible'

CSS

jQuery	JavaScript
.css('name')	.style.{name} // css样式表未定义的得不到
.css('name', 'value')	.style.{name} = 'value'
.css({'name0':'value0','name1','value1'...})	.style.cssText += 'name0: value0;name1, value1;...'
	window.getComputedStyle({ele}, null).{name} // 只读,最终样式
	window.getComputedStyle({ele}, null).getPropertyValue('name') // 同上,样式名不用转成驼峰

参考

javascript - document.all vs. document.getElementById - Stack Overflow