[Jquery] 제이쿼리 선택자와 document.ready 사용

제이쿼리의 선택자

 제이쿼리를 사용하면 자바스크립트만을 사용할 때 보다 더 간편하게 요소에 접근할 수 있게 됩니다.

 

순수 Javascript의 경우

document.getElementById("idname");

위 예시는 자바스크립트만을 이용하여 idname이라는 id 속성을 가지고 있는 요소에 접근하는 방법입니다.

 

제이쿼리의 경우

$("#idname")
$(this)

달러 브레이스($)를 적고 소괄호 안에 선택자를 입력하면 선택자에 맞는 요소를 나타내기 때문에 바로 메서드 사용이 가능합니다. 괄호 안의 this는 이벤트가 일어난 대상을 나타내므로 이벤트 등록 메서드 안에서 많이 사용됩니다. 자바스크립트와 제이쿼리를 비교해 봤을 때 한눈에 봐도 제이쿼리가 더 간편한 것을 알 수 있습니다. 자바스크립트는 getElementById, getElementByClassName와 같은 메서드들을 알아야 하지만 제이쿼리 선택자 규칙을 알아두면 그럴 필요가 없습니다. 

 

document.ready

 선택자를 이용해 요소에 접근하다 보면 DOM이 전부 만들어지기 전에 접근하는 경우가 있어 선택자가 요소를 찾지 못하는 경우가 있습니다. document.ready 메서드를 사용하면 DOM이 전부 만들어지고 난 다음에 메서드가 실행되기 때문에 이러한 문제를 방지할 수 있습니다.

 

document.ready

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

ready함수 안에는 인자로 DOM이 만들어지고 나서 실행될 콜백 함수를 넣어주면 됩니다.

 

$(function() {})

위와 같이 축약형으로 사용할 수 있습니다.

 

예시

// document.ready
$(document.ready({function() {
  $("button").click(function() {
    alert(1);
  }
})

// 축약 표현
$(function() {
  $("button").click(function() {
    alert(1);
  }
})

위와 같이 이벤트를 등록하는 메서드들을 document.ready안에 넣어주면 웹페이지가 실행될 때 선택자가 요소를 찾지 못하는 경우가 없기 때문에 모든 이벤트들을 간편하게 등록할 수가 있습니다. 제이쿼리로 여러 이벤트들을 등록해야 한다면 document.ready를 사용하여 위 예시에서 사용한 것과 같이 이벤트를 등록하면 됩니다.