JQuery 선택자

JQuery 선택자

■ JQuery 코드는 일반적으로 선택자와 메서드의 조합으로 이루어지는데요. HTML의 태그를 선택해서 메서드로 기능을 실현하는 구조로 되어있습니다. 이번 글에서는 JQuery의 선택자 구조에 대해서 정리해볼까 합니다. 

 

 JQuery 선택자 형식은 다음과 같습니다.

$("선택자")

■ 여기서 선택자는 HTML태그 이름, 아이디, 클래스 등을 선택하면 되는데요. 예를 들어 <p>태그를 선택한다면 다음과 같은 형식이 됩니다. 

$("p")

 

■ 이때 선택자를 감싸고 있는 따옴표는 큰따옴표("), 작은따옴표(') 어떤 걸 사용해도 관계없습니다. 이렇게 선택자를 입력한 후 메서드를 이용해서 기능을 실현하면 되는데요. 다음과 같은 형식입니다. 

$("선택자").메서드(매개변수, 함수);

■ 예를 들어 css의 속성값을 변경하는 메서드를 실행한다면....

$("선택자).css('속성', '속성값'); 

 예제를 만들어서 직접 css의 속성값을 적용해보겠습니다.

■ 본문에 삽입한 <p>태그의 글자색을 바꾸는 과정입니다.

■ 앞에서 알아본 형식에 맞게 p 태그를 선택하고 css 메서드를 이용해서 color 속성을 변경하고 있습니다. 여기서는 바로 태그 이름을 선택했지만, 아이디(#id), 클래스(.class) 선택자도 똑같이 사용하시면 됩니다. 글자 색깔이 제대로 적용되는지 확인하고 마무리할게요.

 이렇게 해서 JQuery의 선택자의 구조와 기본 사용법에 대해서 정리해봤습니다. 수고하셨어요.