제이쿼리(JQuery) ID, CLASS로 선택하기(제이쿼리 셀렉터 Selector )

제이쿼리 셀렉터란?

제이쿼리를 선택하는 가장 큰 이유는 제이쿼리 선택자이다.
CSS의 선택자를 그대로 사용할 수 있기 때문에 CSS를 해왔던 사람한테는 거부감이 덜 할 것이다.

제이쿼리의 선택자는 $(선택자)의 형태를 띄고 있다.

 

제이쿼리에 중독되는 이유

제이쿼리에 중독되는 이유는 간단하다.
너무나도 쉬운 선택자 때문이다.
예를들어 title이라는 태그를 선택할때를 살펴보면 알 수 있다.

javascript = document.getElementById('title');
jquery = $("#title")

위의 두개를 비교했을 때 너무나도 간단하게 엘리먼트를 선택 할 수 있다.
물론 javascript es5버전 부터는 querySelector가 나오긴 했지만 제이쿼리 선택자를 보고 있으면 이마저도 길다고 느껴진다.

 

제이쿼리 id, Class
제이쿼리에서 id와 class를 선택하는 방법은 간단하다.

ID로 선택하는 방법

$("#id")

Class로 선택하는 방법

$(".class")

반응형

그 외 선택자 모음

아래는 id와 class 외에도 필자가 자주 쓰는 선택자 들이다.

선택자	예제	설명
:first-child	$("div:first-chlid")	첫번 째 요소 선택
:last-child	$("div:last-chlid")	마지막 요소 선택
:odd	$("div:odd")	홀수 번째에 위치한 요소를 모두 선택
:even	$("div:even")	짝수 번째에 위치한 요소를 모두 선택
:eq(n)	$("div:eq(1)")	n번째 요소를 선택
:checked	$(":checked")	cehecked된 요소를 선택
input[name=name]	$("input[name=name]")	input name으로 요소를 선택
:hidden	$(":hidden")	hidden된 요소를 선택
:visible	$(":visible")	visible된 요소를 선택

 

이외에도 많은 선택자가 있으니 한번 찾아보는 것도 좋을 것 같다.

css에서 쓰이는 선택자는 모두 사용할 수 있다고 보면 된다.

 

오늘의 포스팅은 여기까지

끝까지 읽어주셔서 감사합니다.