jQuery - 제이쿼리의 표현

제이쿼리는 $ 로 시작해서 "("와 ")" 사이에 CSS 선택자를 지정합니다. 에를 들어 id 속성을 가진 요소를 선택하기 위해 $("#아이디") 로 작성합니다.

다음은 일부 단어에 빨간색으로 지정합니다.

<script>
 $().ready(function(){
   $("#user-id").css("color", "red");
 });
</script>

<div><span id="user-id">안녕</span> 하보니</div>

여기서 $는 jQuery 를 의미합니다. $( ) 가 하는 일은 단순히 어떤 요소를 가져오는 역할 뿐, 따라서 $( ) 로 가져오고 싶은 HTML 요소를 선택할 때 이것을 셀렉터(또는 선택자)라고 부르고, 이렇게 가져온 것을 jQuery 오브젝트화라고 표현합니다.

페이지 로딩

자바스크립트에서 가장 많이 저지르는 실수가 바로 페이지가 완전히 로딩되지 않았을 때 작성하는 것입니다. 자바스크립트는 객체지향 언어이기 때문에 자바스크립트를 작성하고, 뒤에 HTML 코드를 작성하면 자바스크립트는 안타깝게도 올바로 작동하지 않습니다. 그래서 onload 를 사용하는 것이겠지요.

아래 코드를 제이쿼리로 표현하려면 어떻게 해야 할까요?

window.onload = function(){
  alert("안녕 하보니");
}

제이쿼리는 다음 형식으로 표현하며 모두 동일한 결과를 얻을 수 있습니다.

$(document).ready(function(){
  alert("안녕 하보니");
});

$(window).ready(function(){
  alert("안녕 하보니");
});

$(this).ready(function(){
  alert("안녕 하보니");
});

$().ready(function(){
  alert("안녕 하보니");
});

$(function(){
  alert("안녕 하보니");
});

window 는 가장 상위에 있는 객체입니다. $( ) 사이의 공백은 window 가 생략된 것일 뿐 최상위 요소를 선택하라는 의미입니다. 따라서 위 방법은 모두 동일하게 동작하며 가장 기억하기 쉬운 방법을 사용해서 작성하도록 합니다.