javascript & jquery 비교 정리

 

문서가 준비되면 할일

 

document.addEventListener('DOMContentLoaded', function(){ ... });

$(document).on('ready', function(){ ... });

$(document).ready(function(){ ... });

$(function(){ ... });

 

요소 선택하기

 

document.getElementByID('아이디명') - 한개

document.getElementsByClassName('클래스명') - 배열(여러개)

document.getElementsByTagName('태그명') - 배열(여러개)

document.querySelector('CSS 선택자') - 한개

document.querySelectorAll('CSS 선택자') - 배열(여러개)

 

$('CSS 선택자')

 

요소 선택하기 2

 

document.querySelectorAll('.page')[0] - 인덱스에 해당하는 단일 요소

$('.page').eq(0)

 

filter() 자신 중에서(말 그대로 필터)

find() 자식 중에서

children() 자식 중에서

parent() 부모 중에서

next() 바로 뒤의 형제요소

prev() 바로 앞의 형제요소

siblings() 자신을 제외한 형제 요소 중에서

closest('CSS 선택자') 가장 가까운 부모 중에서

 

CSS 수정하기

 

document.getElementById('list1').style.top= '25px'; - 숫자가 아닌 값은 모두 따옴표가 있어야 함

$('#list1').css({top: '100px', fontSize: '25px'}); - 

$('#list1').css('fontSize', '25px');

 

클래스명 컨트롤하기

대상.className('클래스명') - 클래스명 교체

대상.classList.add('클래스명') - 클래스명 추가 (기존의 클래스명은 그대로 있고)

대상.classList.remove('클래스명') - 클래스명 제거

대상.classList.toggle('클래스명') - 토글, 추가/제거 번갈아서

대상.classList.contains('클래스명') - 클래스명을 가지고 있으면 true, 아니면 false 반환 (if문과 같이 잘 사용)

 

대상.addClass('클래스명')

대상.removeClass('클래스명')

대상.toggleClass('클래스명')

대상.hasClass('클래스명')

 

클릭 이벤트

 

대상.addEventListener('click', function(){ ... });

대상.on('click', function(){ ... });

대상.click(function(){ ... });

 

이벤트가 일어난 그 요소

 

<a href="#"><span>Link</span></a>

a 요소를 클릭하면 할일을 작성할 때, 클릭된 그 자신 요소가 누구인지 반환할 때

 

event.target //클릭된 span 태그를 반환

event.currentTarget //이벤트가 바인딩된 a요소를 반환

this - 자바스크립트에서

$(this) - 제이쿼리에서

 

스크롤 양

 

window.addEventListener('scroll', function(){

   var scrollPOS = window.pageYOffset; //윈도우의 스크롤 양

   console.log(scrollPOS);

});

window.addEventListener('scroll', function(){

   var scrollPOS = document.documentElement.scrollTop; //문서의 스크롤 양

   console.log(scrollPOS);

});

$(window).scroll(function(){

   var scrollPOS = $(this).scrollTop(); //윈도우의 스크롤 양

  console.log(scrollPOS);

});

 

화면 상단에서의 거리

 

대상.offsetTop

대상.offset().top

 

기본 속성 막기

 

e.preventDefault(); - ex) a 태그에 링크가 걸리는.. 또는 마우스 휠을 움직일 때 스크롤이 되는..

 

 

요소 (집합요소, 배열) 마다 할일

 

var pager = document.querySelector('.pager span');

for(var i = 0; i < pager.length; i++){

  pager[i].style.color = '#fff';

}

 

var pager = $('.pager span');

pager.each(function(){

  $(this).style.color = '#fff';

});

 

요소의 크기값 구하기

 

clientHeight - padding까지의 크기

offsetHeight - border 까지의 크기

 

height() - content의 크기

innerHeight() - padding 까지의 크기

outerHeight() - border 까지의 크기

outerHeight(true) - margin 까지의 크기

 

요소 생성하기

 

document.createElement('div')

$('<div></div>') 또는 $('<div/>')

 

요소 추가하기

 

a.append(b) b를 a의 내용의 뒤에 추가

a.appendTo(b) a를 b의 내용의 뒤에 추가

a.prepend(b) b를 a의 내용의 앞에 추가

a.prependTo(b) a를 b의 내용의 앞에 추가

a.after(b) a 요소의 바로 뒤에 b를 추가

a.before(b) a 요소의 바로 앞에 b를 추가

 

요소 복제하기

 

대상.cloneNode[0]

대상.clone()

 

속성값 확인, 변경하기

 

getAttribute('속성명')

setAttribute('속성명','변경할 속성값')

 

내용 추가(교체)하기, 확인하기

 

a.innerHTML(b)

a.innerText(b)

 

a.text()

a.html()

a.html(b) b를 a에 html 형식으로 추가

a.text(b) b를 a에 text형식으로 추가

a.html(b) b를 a에 html 형식으로 추가

a.text(b) b를 a에 text형식으로 추가

 

강제로 이벤트하기 - trigger

 

var  event = new Event('resize');

window.addEventListener('reisze', function(){ ... });

widnow.dispatchEvent(function(){ ... });

widnow.trigger('resize');

 

$(window).resize();

 

외부파일 로드하기

$.getJSON('JSON파일 경로', function(data){ ...data.title... });

 

Vanilla Javasript (바닐라 자바스크립트) 란?

커스텀하지 않은 순수 그상태의 javascript로 속도가 빠르다.

반면, 라이브러리는 필요하지 않은 것들까지 다 가져와야해서 속도가 느리고 무겁다.