@DOM Selectors
$('#id')
=>document.getElementById('id') // IE 5.5+
=>document.querySelector('#id') // IE 8+
*두 메서드 모두 단일 요소를 반환합니다. getElementById는 querySelector를 사용하는 것보다 효율적입니다.
$('.class')
=>document.getElementsByClassName('class')[i] // IE 9+
=>document.querySelectorAll('.class')[i] // IE 8+
*첫 번째 메서드는 HTMLCollection을 반환하며 두 가지 중에서 가장 효율적입니다. querySelectorAll은 항상 NodeList를 반환합니다.
$('tag')
=>document.getElementsByTagName('tag')[i] // IE 5.5+
=>document.querySelectorAll('div')[i] // IE 8+
*예상대로, NodeList를 리턴하는 querySelectorAll은 getElementsByTagName (HTMLCollection을 리턴)보다 비효율적입니다.
$('[data-key="*"]')
=>document.querySelectorAll('[data-key="*"]')[i] // IE 8+
$('#id :invalid')
=>document.querySelectorAll('#id :invalid')[i] // IE 10+
$(E).children()
=>E.children[i] // IE 9+ 주석 노드와 텍스트 노드를 무시합니다.
$('#id').children('[data-key="*"]')
$('#id > [data-key="*"]')
=>document.querySelector('#id > [data-key="*"]') // IE 8+
$('#id a')
=>document.querySelectorAll('#id a')[i] // IE 8+
$('div').not('.ignore')
$('div:not(.ignore)')
=>document.querySelectorAll('div:not(.ignore)') // IE 9+
$('div, a')
=>document.querySelectorAll('div, a')[i] // IE 8+
$(E).children().eq(0)
=>document.getElementsByTagName('tag').item(0)
$(E).next()
=>E.nextElementSibling
$('a').css('color', 'red')
=>
for (var item of E) {
item.style.color = 'blue';
} // IE 12+
=>
for (i = 0; i < E.length; ++i) {
E[i].style.color = 'green';
}
$('a').on(Event, F)
=>
E.forEach(function(e, i, a) {
e.addEventListener('focus', F);
e.addEventListener('blur', F);
});
@Properties and Methods
$(E).html()
=>E.innerHTML
$(E).text()
=>E.textContent
$(E).append()
=>E.appendChild()
$(E).empty()
=>E.innerHTML = null
$(E).remove()
=>E.remove(index)
$('<div></div>')
=>document.createElement('div') // IE 5.5+
$(E).after('<div></div>')
$(E).before('<div></div>')
=>E.insertAdjacentHTML('afterend', '<div></div>') // IE 4+
=>E.insertAdjacentHTML('beforebegin', '<div></div>') // IE 4+
$(E).prepend('<div></div>')
$(E).append('<div></div>')
=>E .insertAdjacentHTML('afterbegin', '<div></div>') // IE 4+
=>E .insertAdjacentHTML('beforeend', '<div></div>') // IE 4+
$(E).append($(E2))
$(E).prepend($(E2))
=>E.appendChild(E2) // IE 5.5+
=>E.insertBefore(E2, E3) // IE 5.5+
$(E).addClass('class')
=>E.classList.add('class') // 모든 최신 브라우저 (IE9 제외)
=>E.className += 'class' // 모든 브라우저
$(E).hasClass('class')
=>E.classList.contains('class') // 모든 최신 브라우저 (IE9 제외)
$(E).removeClass('class')
=>E.classList.remove('class') // 모든 최신 브라우저 (IE9 제외)
=>E.className = E.className.replace(/\bclass\b/g, '') // 모든 브라우저
$(E).attr('role', 'button')
=>E.setAttribute('role', 'button') // IE 5.5+
$(E).removeAttr('role')
=>E.removeAttribute('role') // IE 5.5+
$(E).text('Text')
=>E.innerHTML = 'Text' // IE 5.5+
=>E.innerText = 'Text' // IE 5.5+ but NOT Firefox
=>E.textContent = 'Text' // IE 9+
$(E).css('fontWeight', 'bold')
=>E.style.fontWeight = 'bold' // IE 5.5+
$.param({
key1: 'some value',
'key 2': 'another value'
});
=>
function param(object) {
var encodedString = '';
for (var prop in object) {
if (object.hasOwnProperty(prop)) {
if (encodedString.length > 0) {
encodedString += '&';
}
encodedString += encodeURI(prop + '=' + object[prop]);
}
}
return encodedString;
}
$(E).submit() / $(E).val()
=>E.submit() / E.value
$(E).data('key')
$(E).data('key', '')
$(E).hasData('key')
$(E).removeData('key')
=>E.getAttribute('data-key') // All browsers
=>E.setAttribute('data-key','') // IE 8+
=>E.hasAttribute('data-key') // IE 9+
=>E.removeAttribute('data-key') // All browsers
$(E).parent() // 상위 부모
$(E).parents() // 모든 상위 부모
$(E).closets('div') // 선택 상위 부모
=>E.parentNode > E.parentElement // All browsers
=>E.closets('div') // IE No support
$(E).height() / .innerHeight() / .outerHeight() / .width() / .innerWidth() / .outerWidth()
=>E.clientHeight// padding, IE 6+
=>E.offsetHeight // padding+border, IE ?
=>E.scrollHeight // padding+scroll, IE 8+
*window.height() / .innerHeight() / .outerHeight() // iE 9+
$(E).offset().left[=top] / .offsetParent() // Document 기준
=>E.offsetLeft // 상위 E중 가장 가까운 position:fixed/relative 기준 E의 left + margin-left, IE ?
=>E.offsetTop // 상위 E중 가장 가까운 position:fixed/relative 기준 E의 top + margin-top, IE ?
=>E.offsetParent // 상위 E중 가장 가까운 position:fixed/relative 엘리먼트 요소 반환, IE ?
$(E).position().left[=top] // Parent 기준
=>E.style.left[=top]
$(E).scrollTop(v) / .scrollLeft(v)
=>E.scrollTop / .scrollLeft / .scrollTo(x, y) - 절대 위치 / .scrollBy(x, y) - 상대 위치
$(E).clone(Deep) // Deep=기본값 false, true시 자식 노드 내부 포함
=>E.cloneNode(Deep) // All browsers
@Events
$(E).click(F)
=>E.onclick=F
=>E.addEventListener('click', F) // IE 9+
$(E).click(function(e){F})
=>E.onclick=function(e){F}
=>E.addEventListener('click', function(e){F}) // IE 9+
@Reference
@Polyfill
[제이쿼리] 제이쿼리 selector 정리
![[제이쿼리] 제이쿼리 selector 정리]()
Reviewed by 코알라
on
9월 20, 2018
Rating:
댓글 없음: