jQuery 기본 선택자

jQuery 기본 선택자

jQuery 선택자는 CSS3 파트에서 학습한 CSS 선택자와 의미가 같은 것이 많이 있습니다. 그러므로 차근히 알아가보겠습니다.

jQuery 기본 선택자의 형식은 다음과 같습니다.

$("선택자")     |     $("#gnb")

선택자 종류	설명
태그 선택자	$("p")	p 요소를 선택합니다.
id 선택자	$("#gnb")	#gnb 요소를 선택합니다.
class 선택자	$(".logo")	.logo 요소를 선택합니다.
자식 선택자	$("#gnb >ul >li")	#gnb의 자식 요소의 자식 요소 li를 선택합니다.
하위 선택자	$("#gnb ul")	#gnb의 하위에 있는 모든 ul요소를 선택합니다.
인접 선택자	$("#visual + #content")	#visual 다음에 오는 #content 요소를 선택합니다.
형제 선택자	$("#visual ~ #footer")	#visual의 형제 요소 #footer를 선택합니다.
종속 선택자	$("div.util")	div요소 중 class가 util인 요소를 선택합니다.
그룹 선택자	$(".left,.right,#banner")	.left, .right ,#banner요소들을 선택합니다.
전체 선택자	$("*")	모든 요소를 선택합니다.

위의 예시를 사용하여 jQuery를 사용해보았습니다.

♠ jQuery 코드만 보기

$(document).ready(function(){
    $("p").css("border","4px solid red");
    $("#gnb").css("border","4px solid orange");
    $(".logo").css("border","4px solid yellow");
    $("#gnb > ul > li").css("border","4px solid green");
    $("#gnb ul").css("border","4px solid blue");
    $("#visual + #content").css("border","4px solid navy");
    $("#visual ~ #footer").css("border","4px solid purple");
    $("div.util").css("border","4px solid pink");
    $(".left,.rigth,#banner").css("border","4px solid gray");
})