[jQuery 강좌] 2-1강. CSS 기본 셀렉터.

안녕하세요. ^^
다시 한번 jQuery 강좌로 인사드립니다.
1강에서는 간단한 셀렉터 몇 가지를 살펴 보았습니다.

이제 2강입니다! 조금 더 강도 높은 셀렉터를 알아보기로 했지요? ^^
오늘은 조금 더 체계적으로 알려드릴까 합니다.

바로 jQuery의 document를 기준으로 설명을 드릴까 합니다.
굉장히 고민을 많이 했으나 기본에 충실한 코딩이 성공하기 마련이겠지요.
따라서 기본으로 제공하는 jQuery 문서를 가지고 설명을 드리겠습니다.

해당 문서의 주소는 아래와 같습니다. 참고하시면 될 것 같네요^^

http://api.jquery.com/category/selectors/

강좌를 시작하기 전, 잠깐 짚고 넘어가겠습니다.!!
우리는 예제코드에 css() 함수를 이용하겠습니다. 이 함수는 기본 태그의 Atrribute인 style 을 조정하거나 얻을 수 있는 함수입니다.

예)
<div id="test_div" style="border:1px solid blue;"></div>
이 예에서 style 속성(Attribute)을 뜻하지요^^

jQuery의 예로는 아래와 같습니다.
$("#test_div").css("border","1px solid red");

위의 예제가이해가 되시나요? 1강에서 배운 id 셀렉터 # 을 통해 test_div를 선택하였고, 선택 이후에 css라는 태그를 통해 border 값에 1px solid red 옵션을 주었습니다. 값을 얻어올 때는 뒤에 1px solid red 파라미터만 없애주시면 됩니다^^

$("#test_div").css("border")
이렇게 말이지요^^ 위의 예제가 이해되셨다면 이제 강좌를 시작하겠습니다.

1. All Selector (“*”)

("*") 은 쉽게 알 수 있듯 모든 오브젝트를 선택하는 셀렉터입니다.
사실 잘 사용하지 않는 셀렉터이기는 합니다. 모든 오브젝트를 선택할 일은 거의 없겠지요^^
하지만 우리는 테스트를 해보겠습니다.
소스보기 하시면 해당 소스가 모두 출력되니 한번 확인해보세요^^

[ 예제 확인 ]

해당 소스에는 $("*").css() 이 부분만 확인하시면 되겠습니다! ^^

2. jQuery('[attribute="value"]')

[attribute|="value"] 는 1강에서 잠시 설명드렸던 셀렉터입니다.
바로 $("div[id=test]") 이렇게 쓰는 셀렉터이지요! ^^ 다만 앞쪽에 div를 붙인 것은 "div태그 중에서" 라는 뜻이 되겠습니다.
[name="test"] 라고만 입력하신다면 이름이 test 인 모든 오브젝트를 선택 할 것 입니다.
그럼 이것도 예제를 한번 확인해보겠습니다.

[ 예제 확인 ]

요번 예제에서는
$('div[id=test_div_2]').css("border","3px solid red");
라는 부분만을 확인해 주시면 되겠습니다. test_div_2 라는 ID 값을 가진 div를 모두 선택했네요. ^^ 그렇지만 하나뿐이기 때문에 1234라는 값을 포함하고 있던 test_div_2 의 border가 붉게 변하는 것을 알 수 있습니다.

이와 반대 경우인 != 에 대해서는 설명하지 않겠습니다.

3. jQuery('[attribute|="value"]')

[ 예제 확인 ]

요번 예제는 예제가 조금 다릅니다. div의 id가 약간 다르니 한번 더 확인해주세요. ^^
attribute 와 value 사이의 연산자에 집중해주세요.
흔히 다른 언어들에서 볼 수 있는 "+=", "*=", "/=" 등의 연산자와 비슷한 형태를 취하고 있습니다.
바로 |= 인데요. 이것은 예제에서와 같이 하이픈(-) 앞쪽에 있는 값과 비교해 일치할 경우에만 셀렉트 합니다.
예제를 보시면 id가 |= test 인 경우만을 셀렉트 하게 되어있습니다.
따라서 주어진 id 는 test-div-1와 div-test-2 가 있지만 시작하는 값을 비교하기 때문에 test-div-1 인 경우만을 취하게 됩니다.

이해가 가시는지요? 이해가 부족하시다면 테스트 몇번 만으로 이해하실 수 있으실 것 입니다. ^^

4. jQuery('[attribute*="value"]')

[ 예제 확인 ]

요번 예제 또한 2,3번의 예제와 거의 동일합니다.
다만 요번 예제는 *= 을 사용하게 되는데 이 셀렉터는 value 가 포함된 모든 경우를 오브젝트로 셀렉트 합니다.
예제를 보시면 아시겠지만 중간에 나오던 앞에 나오던 관계 없이 모두 셀렉트 하는 것을 볼 수 있습니다.

5. jQuery('[attribute~="value"]')

[ 예제 확인 ]

요번 예제는 ~= 셀렉터에 대해 알아봅니다. 이번 예제에서 쟁점은 공백(white space) 입니다.
attribute 에 value가 포함되어 있는데 그 값이 앞뒤 공백으로 쌓여 있어야 선택됩니다.
예제를 통해 확인하세요 ^^

6. jQuery('[attribute$="value"]')

[ 예제 확인 ]

요번 예제는 $= 셀렉터에 관련된 내용으로 이 $= 는 value 값이 attribute 값의 마지막에 포함되는 경우를 뜻합니다.
예를 들어 id 가 test_div 일 경우 $('div[id$=div]') 일 경우 선택이 되게 됩니다.

7. jQuery('[attribute^="value"]')

[ 예제 확인 ]

7번 예제는 6번 예제의 반대 경우입니다. 바로 시작 값이 value 인 경우를 셀렉트 합니다.
더 이상의 설명은 필요하지 않겠지요? ^^

8. 이 외의 기본 셀렉터

사실 위의 셀렉터 보다 더 중요한 셀렉터가 있습니다. 이외 라고는 했지만 가장 중요한 셀렉터 들이겠지요. 다른 설명이 필요하지 않은 부분이라 모아서 설명합니다. 물론 1강에서 대부분 설명 드렸던 내용입니다.

1) jQuery('TAG명')
  ex) $('div')
  태그명만 적어주는 경우입니다. 이 경우 모든 태그명을 선택합니다.

2) jQury('TAG명1 TAG명2')
  ex) $('div li')
  태그명2가 태그명1의 자식인 경우 태그명2를 모두 선택합니다.

3) jQuery('TAG명1>TAG명2')
  ex) $('div>li')
  이 경우 2의 경우와 같아 보이지만 2는 직계 자손이 아닌 경우에도 선택이 가능하지만 3의 경우 직계 자손. 즉, 바로 밑에 해당 태그가 있어야 선택이 됩니다. 이해가 가시는지 모르겠습니다.

4) jQuery('TAG명1.클래스명')
  ex) $('div.testClass')
  이 경우 div인데 class를 testClass 로 가지고 있는 경우를 셀렉트 합니다. 여기서 TAG명1이 생략될 경우 *.testClass 와 일치하기 때문에 1강에서 사용했던 $('.testClass') 라고도 표현할 수 있겠습니다.

5) jQuery('TAG명#ID명')
  ex $('div#test')
  이 경우 div인데 test라는 아이디를 가지고 있는 경우를 셀렉트 합니다. 여기서 TAG명이 생략 될 경우 *.ID명 이 되기 때문에 당연히 $('#ID') 의 결과와 일치합니다. 이 셀렉터 역시 1강에서 사용했던 내용입니다.




위의 설명을 끝으로 2강을 마치겠습니다.
셀렉터가 어느정도 이해되셨는지 모르겠습니다.
다음 강에서는 필터기능에 대해 잠깐 알아보고, 반복문 제어문에 대해서도 잠시 보고 넘어가도록 하겠습니다.

감사합니다.