MENU

jQuery和JavaScript常用属性对照

获取元素

jQueryJavaScript
$('body')document.body
$('head')document.head
$('.class').getElementsByClass('class')
$('.tag').getElementsByTagName('tag')
$('#id')document.getElementById('id')
$('selector').querySelector('selector')
$('selector').querySelectorAll('selector')
.children(['selector']).children
^.childNodes // 含文本节点
.first().querySelectorAll('selector')[0]
.last(){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对象^

创建元素

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

添加/插入/删除元素

jQueryJavaScript
.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})

复制元素

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

修改/获取html/text/value

jQueryJavaScript
.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 = ''

属性

jQueryJavaScript
.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

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

显示/隐藏元素

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

CSS

jQueryJavaScript
.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') // 同上,样式名不用转成驼峰
Archives QR Code
QR Code for this page
Tipping QR Code
Leave a Comment

已有 1 条评论
  1. 可以的,总结的很全面。