본문 바로가기

jQuery 버리기

by 알릭2 2020. 9. 16.

#

제이쿼리 기능 순수 자바스크립트
$('#id')
 선택자를 이용한 객체 선택 - 단일 document.querySelector('#id');
$('.class') 선택자를 이용한 객체 선택 - 복수 document.querySelectorAll('.class');
$('<div>') 해당 태그 객체 생성 document.createElement('div');

A

제이쿼리 기능 순수 자바스크립트
$(element).addClass('class') 객체에 특정 클래스명 추가 element.classList.add('class');
$(element).after(element2) 객체 뒤에 객체2 놓기 element.insertAdjacentElement('afterend', element2);
또는
element.parentNode.insertBefore(element2, element.nextSibling);
$(element).append(element2); 객체 내부 끝에 객체2 넣기 element.appendChild(element);
또는
element.insertAdjacentElement('beforeend', element);
$(element).attr('id');
$(element).attr('name', 'abc');
 객체의 정적 속성 읽기
객체의 정적 속성 쓰기		 element.getAttribute('id');
element.name = 'abc';

B

제이쿼리 기능 순수 자바스크립트
$(element).before(element2);
 객체 앞에 객체2 놓기 element.insertAdjacentElement('beforebegin', element2);
또는
element.parentNode.insertBefore(element2, element)

C

제이쿼리 기능 순수 자바스크립트
$(element).children(); 객체의 자식들 선택 element.children;
$(element).clone() 객체 복제 element.cloneNode(true);
$(element).css('border-width');
 객체의 특정 스타일 속성 읽기 window.getComputedStyle(element, null).borderWidth;
또는
getComputedStyle(element)['border-width'];
$(element).css('border-width', '2px'); 객체의 특정 스타일 속성 쓰기 element.style.borderWidth = '2px';

D

제이쿼리 기능 순수 자바스크립트
$(element).data('index')
$(element).data('index', 3)		 객체의 data 속성 읽기
객체의 data 속성 쓰기		 elemement.dataset.index;
element.dataset.index = 3;

E

제이쿼리 기능 순수 자바스크립트
$('.class').each(function(i, element) { ... }); 선택된 객체들을 훑어주는 반복문 var elements = document.querySelectorAll('.class');
Array.prototype.forEach.call(elements, function(element, i) { ... });
$(element).empty(); 객체 내용 비우기 element.innerHTML = '';

F

제이쿼리 기능 순수 자바스크립트
$('.class').filter(filterFunction); 선택된 객체를 필터함수를 통해 거르기 Array.prototype.filter.call(document.querySelectorAll('.class'), filterFunction);
$(element).find('#id') 객에 내부에서 #id를 가진 객체 찾기 element.querySelector('#id');

G

제이쿼리 기능 순수 자바스크립트
     

H

제이쿼리 기능 순수 자바스크립트
$(element).hasClass('class') 객체의 특정 클래스명 포함여부 판단 element.classList.contains('class');
$(element).height(); 객체의 현재 높이 읽기 parseInt(window.getComputedStyle(element, null).height);
또는 (소수점까지 필요할 시)
parseFloat(window.getComputedStyle(element, null).height.replace("px", ""));
$(element).html(); 객체의 innerHTML 읽기 element.innerHTML;

I

제이쿼리 기능 순수 자바스크립트
$(element2).insertAfter(element) 객체2를 객체 뒤에 놓기 element.parentNode.insertBefore(element2, element.nextSibling);
또는
element.insertAdjacentElement('afterend', element2);
$(element2).insertBefore(element) 객체2를 객체 앞에 놓기 element.parentNode.insertBefore(element2, element);
또는
element.insertAdjacentElement('beforebegin', element2);
$(element).is('.class');
 선택자를 통한 객체 확인 var matches = function(el, selector) {
  return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);
};

matches(element, '.class');

J

제이쿼리 기능 순수 자바스크립트
     

K

제이쿼리 기능 순수 자바스크립트
     

L

제이쿼리 기능 순수 자바스크립트
     

M

제이쿼리 기능 순수 자바스크립트
     

N

제이쿼리 기능 순수 자바스크립트
$(element).next() 객체와 동일한 태그를 지닌 다음 객체 선택 element.nextElementSibling

O

제이쿼리 기능 순수 자바스크립트
$(elememt).offset().top;
$(elememt).offset().left;		 객체의 위치 좌표 읽기 (페이지 최상단 좌측 코너 기준) var top = element.getBoundingClientRect().top + document.body.scrollTop;
var left = element.getBoundingClientRect().left + document.body.scrollLeft;
$(element).outerHeight(); 객체의 border까지 포함한 높이 읽기  element.offsetHeight;
$(element).outerHeight(true); 객체의 margin까지 포함한 높이 읽기 element.offsetHeight + parseInt(getComputedStyle(element).marginTop) + parseInt(getComputedStyle(element).marginBottom);

P

제이쿼리 기능 순수 자바스크립트
$(element).parent() 객체의 부모 선택 element.parentNode
$.parseJSON('json_string');
 json 인식하기 JSON.parse('json_string');
$(element).position().top;
$(element).position().left;
 객체의 현 위치 읽기 (상위 relative 객체 기준) var left =  element.offsetLeft;
var top = element.offsetTop;
$(element).prepend(element2) 객체 내부 첫 항목으로 객체2 넣기 element.insertBefore(element2, element.firstChild);
또는
element.insertAdjacentElement('afterbegin', element2);
$(element).prev() 객체와 동일한 태그를 지닌 이전 객체 선택 element.previousElementSibling
$(element).prop('tagName')
$(element).prop('checked', true)
 객체의 동적 속성 읽기
객체의 동적 속성 쓰기
 element.tagName;
element.checked= true;

Q

제이쿼리 기능 순수 자바스크립트
     

R

제이쿼리 기능 순수 자바스크립트
element.remove(); 객체 제거 element.parentNode.removeChild(element);
$(element).removeAttr('name');
 객체의 정적 속성 제거 element.removeAttribute('name');
$(element).removeClass('class') 객체에 지정된 클래스들 중에서 특정 클래스명 삭제 element.classList.remove('class');
$(element).replaceWith('<div>abc</div>');
 객체 교체 (html 전달 시) element.outerHTML = '<div>abc</div>';
$(element).replaceWith(element2); 객체 교체 (객체2 전달 시) element.parentNode.insertBefore(element2, element);
element.parentNode.removeChild(element);

S

제이쿼리 기능 순수 자바스크립트
$(element).siblings(); 객체의 형제 객체 선택 Array.prototype.filter.call(element.parentNode.children, function(child){
  return child !== element;
});

T

제이쿼리 기능 순수 자바스크립트
$(element).text(); 객체의 innerText 읽기 element.textContent;
$(element).toggleClass('class'); 객체의 클래스명 교차적용 element.classList.toggle('class');

U

제이쿼리 기능 순수 자바스크립트
$(element).unwrap(); 객체를 감싸고 있는 부모 객체 벗겨내기 var parent = element.parentNode;
parent.insertAdjacentElement('beforebegin', element);
parent.parentNode.removeChild(parent);
또는
element.parentNode.outerHTML = element.parentNode.innerHTML;
(주의: 동적 속성 및 이벤트 제거됨)

V

제이쿼리 기능 순수 자바스크립트
     

W

제이쿼리 기능 순수 자바스크립트
$(element).width(); 객체의 현 넓이 읽기 parseInt(window.getComputedStyle(element, null).width);
또는 (소수점까지 필요할 시)
parseFloat(window.getComputedStyle(element, null).width.replace("px", ""));
$(element).wrap('<div>') 객체를 특정 태그로 감싸기 var wrapper = document.createElement('div');
element.parentNode.insertBefore(wrapper, element);
wrapper.appendChild(element);

X

제이쿼리 기능 순수 자바스크립트
     

Y

제이쿼리 기능 순수 자바스크립트
     

Z

제이쿼리 기능 순수 자바스크립트
     

 

티스토리툴바