[JQuery] 선택자, 셀렉터 알아보자

#제이쿼리 #태그tag #클래스class #아이디id #이름name #배경색변경background #글자색변경color #부모자식상속자

안녕하세요, 배곧동개발자 입니다.

제이쿼리를 사용하면서 가장 좋은 점을 하나 꼽으라면 바로 “선택자”라고 할 수 있습니다. 기존에 자바스크립트를 이용했을 때에 비해서 너무 편해졌지요.

이번 포스팅에서는 제이쿼리의 선택자에 대해 간단히 알아볼까합니다.

1. 선택자

선택자에 대해 간단히 정의해보자면 “특정 객체를 선택하는 방법” 정도로 말할 수 있습니다.

A라는 객체가 있다고 할 때에 우리가 봤을 때는 소스코드에서 쉽게 파악하여 명령을 시킬 수 있으나 컴퓨터는 저게 A인지 이게 A인지 파악이 어려우니 그것을 도와주는 것이지요.

제이쿼리에서 객체를 선택하는대에는 여러 방법이 있지만 가장 기본적인 두개를 알아볼까합니다.

# : ID 선택자
. : CLASS 선택자

하나는 id를 지정해서 고를 수 있고 다른 하나는 class를 지정해서 고를 수 있습니다. 이해는 예시를 보며 해보시죠.

2. JQuery vs JavaScript

제이쿼리와 자바스크립트의 선택자를 비교해보기 위해서 아래와 같이 객체를 하나 선언해봅시다.

<div id="bgId" name="bgName" class="bgClass"></div>

이제 이 객체가 화면에서 사라지는 코드를 작성해볼께요.

// ID로 찾을때
var obj = document.getElementById("bgId");
obj.style.display = "none";

// 이름으로 찾을때
var obj = document.getElementsByName("bgName")[0];
obj.style.display = "none";

// 태그로 찾을때
var obj = document.getElementsByTagName("div")[0];
obj.style.display = "none";

기존 자바스크립트의 경우에는 이렇게 document객체에서 불러와야 하는 불편함이 있었어요.

// ID로 찾을때
$("#bgId").hide();

// 이름으로 찾을때
$("div[name=bgName]").hide();

// 태그로 찾을떼
$("div").hide();

// 클래스로 찾을때
$(".bgClass").hide();

하지만 제이쿼리에서는 이런식으로 #이나 .등을 이용해서 쉽게 셀렉터를 설정할 수 있어요. 만약 해당 객체의 배경을 바꾸고싶다면 간단하게 아래처럼만 해주면 끝나게 됩니다.

$("#bgId").css('background','blue');

3. 심화과정

조금더 심화되서 들어가볼까요? 자식 객체도 컨트롤이 가능합니다.

<div id="bgId" name="bgName" class="bgClass">
 <p class="c1">배곧동</p><br/>
 <p class="c2">개발자</p>
</div>

이런 객채가 있다고 가정하면, p 태그 안에 “배곧동”의 색을 변경하고자하면

$("#bgId > .c1").css("color","red");

이렇게만 해주면 배곧동(c1)만 변경될꺼에요. bgId 객체 안에 배곧동(c1)과 개발자(c2)가 있었지만 객체중 배곧동(c1)만 선택하여 컨트롤을 한 것이지요.

어때요? 뭔가 복잡한거같아도 막상 쓰다보면 쉬운게 제이쿼리더라구요. 만약 제이쿼리를 안쓰셔도 이정도는 알아야 코드 보실줄 알아요!!

이만, 배곧동개발자 였습니다.