주요 내용
컴퓨터 프로그래밍
검토하기: jQuery를 이용한 DOM 접근
jQuery를 이용하여 DOM 요소를 찾기 위해서, 유효한 CSS 선택자를 jQuery 함수로 전달해야 합니다:
$("h1"); // 모든 h1 선택
$("#heading"); // "heading" id를 갖는 요소 선택
$(".warning"); // "warning" 클래스 이름을 갖는 모든 요소 선택
jQuery 함수는
$
또는 jQuery
로 불릴 수 있으므로 위와 다음은 같습니다:jQuery("h1");
jQuery("#heading");
jQuery(".warning");
많은 사람들은
$
이 짧기 때문에 이를 더 선호합니다. jQuery 함수는 비록 조건을 만족하는 요소가 단 하나뿐이거나 심지어 없는 경우에도 항상 요소들로 이루어진 jQuery 컬렉션을 반환합니다. 더 자세한 내용은 jQuery 함수에서 볼 수 있습니다.
일단 DOM 요소들을 jQuery를 이용해서 찾았다면, 해당 요소들의 내부 컨텐츠를
text()
를 이용해서 설정하는 등의 행동을 할 수 있습니다:
$("#temperature").text("89° Fahrenheit");
(전체 예제 보기)다음 수업에서는, DOM 요소들의 특성을 지정하고 가져오는 메소드들을 더 많이 배워볼 것입니다.
이러한 jQuery 함수들은 모두 HTML/JS course 에서 배웠던 DOM API를 사용합니다. 예를 들어,
$
함수는 getElementById()
와 querySelectorAll()
과 같은 메소드들을 사용하고, attr()
은 getAttribute()
메소드를 사용합니다. 여러분이 $
함수를 사용할 때, 함수를 더 짧은 코드에서 사용하게 되는데, 이 코드는 모든 jQuery가 지원되는 브라우저에서 동작하며 이는 더 최근의 DOM API 함수를 사용할 때 더 중요하다는 것을 기억하세요.